/* Every keyframe and transition in the page: the two text marquees, the two
   rotating circular badges, and the on-scroll reveal used by every section. */

/* --- marquee ------------------------------------------------------------- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- rotating circular badges (hero "scroll", footer "back to top") ------- */
@keyframes badge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- button sheen --------------------------------------------------------- */
@keyframes btn-sheen {
  from { translate: -130% 0; }
  to   { translate: 130% 0; }
}

/* --- on-scroll reveal ----------------------------------------------------- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(38px); }
  to   { opacity: 1; transform: none; }
}

@keyframes reveal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Elements start hidden and are released by scroll-reveal.js adding
   `.is-revealed`. With scripting off nothing would ever reveal, so the
   whole mechanism is switched off in that case. */
[data-reveal] { opacity: 0; }
@media (scripting: none) { [data-reveal] { opacity: 1; } }
[data-reveal].is-revealed { animation: reveal-up 0.9s var(--ease) forwards; }
[data-reveal="fade"].is-revealed { animation: reveal-fade 1.1s var(--ease) forwards; }
[data-reveal][data-reveal-delay="1"].is-revealed { animation-delay: 0.12s; }
[data-reveal][data-reveal-delay="2"].is-revealed { animation-delay: 0.24s; }
[data-reveal][data-reveal-delay="3"].is-revealed { animation-delay: 0.36s; }

/* --- accordion ------------------------------------------------------------ */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__icon { transition: transform 0.42s var(--ease); }
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; animation: none !important; }
  .marquee__track,
  .badge__ring,
  .btn::after { animation: none !important; }
  .btn:hover,
  .whatsapp-float:hover { transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}