/* ==========================================================================
   AND Elektrik — Motion states & keyframes

   Start states are gated behind `html.motion`, which main.js only adds when
   Framer Motion is available and the visitor has not asked for reduced
   motion. Without that class the page renders fully visible.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes (CSS-driven, ambient only)
   -------------------------------------------------------------------------- */
@keyframes indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(340%);
  }
}

@keyframes stage-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  70%,
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

@keyframes drift-line {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  12%,
  88% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateY(var(--drift, 140px));
  }
}

/* The WhatsApp FAB gets one quiet ring — the only looping motion on the page. */
.fab--whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(37, 211, 102, 0.55);
  animation: pulse-ring 3s var(--ease-out) infinite;
}

/* --------------------------------------------------------------------------
   Scroll reveal start states
   -------------------------------------------------------------------------- */
.motion [data-reveal] {
  opacity: 0;
}

.motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.motion [data-reveal-group] > * {
  opacity: 0;
}

.motion [data-reveal-group].is-revealed > * {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Hero entrance (choreographed in js/modules/hero.js)
   -------------------------------------------------------------------------- */
.motion .hero__title-line > span {
  transform: translateY(110%);
}

.motion .hero__eyebrow,
.motion .hero__lead,
.motion .hero__actions,
.motion .hero__line,
.motion .hero__stage-wrap {
  opacity: 0;
}

.motion .hero.is-entered .hero__eyebrow,
.motion .hero.is-entered .hero__lead,
.motion .hero.is-entered .hero__actions,
.motion .hero.is-entered .hero__line,
.motion .hero.is-entered .hero__stage-wrap {
  opacity: 1;
}

.motion .hero.is-entered .hero__title-line > span {
  transform: none;
}

/* The accent rule draws itself once the headline has landed. */
.motion .hero__accent::after {
  transform: scaleX(0);
}

.motion .hero.is-entered .hero__accent::after {
  transform: scaleX(1);
  transition: transform 720ms var(--ease-out) 120ms;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .fab--whatsapp::after {
    display: none;
  }
}