/* tangble — pottr.css
   Pottr landing page specific styles.
   Section spacing and marquee animation. */

/* Mobile nav drawer */
#pottr-drawer {
  display: none;
  flex-direction: column;
}
#pottr-drawer.is-open {
  display: flex;
  animation: pottr-drawer-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#pottr-drawer.is-closing {
  animation: pottr-drawer-out 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pottr-drawer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pottr-drawer-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* Marquee animation for UseCases section */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-1500px); }
}

.pottr-marquee {
  animation: marquee 28s linear infinite;
}

.pottr-marquee:hover {
  animation-play-state: paused;
}

/* FAQ accordion — smooth ease-in-out expand / collapse */
details.pottr-faq summary {
  cursor: pointer;
  list-style: none;
}
details.pottr-faq summary::-webkit-details-marker {
  display: none;
}
details.pottr-faq .pottr-faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
details.pottr-faq[open] .pottr-faq-body {
  grid-template-rows: 1fr;
}
details.pottr-faq .pottr-faq-body > * {
  overflow: hidden;
}