/* Motion of the landing: reveal states, the offscreen pause, hover/entrance polish and the
   render budget for browsers without GPU acceleration. Every loop or transition here animates
   transform, translate or opacity only, so it runs on the compositor. The JS side lives in
   landing/motion.js (reveals, `.motion-idle`) and landing/render-mode.js (`html.gpu-lite`). */

/* ── Reveal ── */
/* `.pre` hides a block until it nears the viewport, `.in` carries the entrance, `.seen` marks it done. */
[data-reveal].pre,
[data-stagger].pre > * {
  opacity: 0;
  translate: 0 12px;
}

/* `#features [data-reveal].in` outranks `#features .grp`, whose own transition list would otherwise win. */
[data-reveal].in,
[data-stagger].in > *,
#features [data-reveal].in {
  opacity: 1;
  translate: 0 0;
  transition: opacity .4s cubic-bezier(.22, .61, .36, 1), translate .4s cubic-bezier(.22, .61, .36, 1);
}

[data-stagger].in > * {
  transition-delay: min(calc(var(--i, 0) * 35ms), 140ms);
}

/* ── Offscreen pause ── */
/* Decorative loops only tick inside blocks near the viewport (toggled in landing/motion.js). */
.motion-idle *,
.motion-idle *::before,
.motion-idle *::after {
  animation-play-state: paused !important;
}

/* ── Render budget: html.gpu-lite ── */
/* landing/render-mode.js sets the class before first paint on software renderers; the page
   keeps its look and the effects only a GPU can afford go static. */
html.gpu-lite * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.gpu-lite .site-nav {
  background: rgba(5, 6, 6, .94);
}

/* Hero: the still replaces the video, with real transparency instead of a blend surface. */
html.gpu-lite .hero__film video {
  display: none;
}

html.gpu-lite .hero__film img {
  opacity: 1;
}

html.gpu-lite .hero__film.alpha-still img {
  mix-blend-mode: normal;
}

html.gpu-lite .hero__film.glitch video,
html.gpu-lite .hero__film.glitch img {
  animation: none;
  filter: none;
}

/* Pricing worlds stay as still artwork. */
html.gpu-lite .landing-plan__world *,
html.gpu-lite .comet-aura::before {
  animation-play-state: paused !important;
}

html.gpu-lite .landing-plan__comet {
  opacity: .3;
  transform: rotate(-57deg);
}

html.gpu-lite .landing-plan__world::before {
  display: none;
}

/* The Claim halo holds instead of breathing. */
html.gpu-lite .claim__btn::before {
  animation: none;
  opacity: .3;
}

/* ── Polish: hover lifts, the claim halo, the signature line, footer underlines ── */
@media (prefers-reduced-motion: no-preference) {
  /* Rule tabs lift toward the pointer. */
  .rtab:not(.on):hover {
    transform: translateY(-2px);
    border-color: rgba(240, 6, 70, .45);
    color: var(--text);
  }

  /* Feature groups lift on hover; open groups stay put. */
  #features .grp:not([open]):hover {
    translate: 0 -3px;
  }

  /* Constellation chips. */
  .chip {
    transition: border-color .25s, color .25s, translate .25s cubic-bezier(.2, .7, .2, 1);
  }

  .chip:hover {
    translate: 0 -1px;
  }

  /* Claim buttons breathe: a pre-rastered halo whose opacity cycles. */
  .claim__btn {
    position: relative;
    isolation: isolate;
  }

  .claim__btn::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 0 34px 4px var(--crimson);
    opacity: 0;
    animation: claim-glow 3.2s ease-in-out infinite;
    will-change: opacity;
  }

  .claim__btn:hover::before,
  .claim__btn:focus-visible::before {
    opacity: .6;
    animation: none;
  }

  @keyframes claim-glow {
    0%, 100% { opacity: 0; }
    50% { opacity: .5; }
  }

  /* The signature line draws itself and the × lands as the sign section arrives. */
  .sign__in .sigline {
    border-bottom-color: transparent;
  }

  .sign__in .sigline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--line-2);
    transform-origin: 0 50%;
    transition: transform .9s cubic-bezier(.22, .61, .36, 1) .25s;
  }

  .sign__in .sigline .x {
    transition: opacity .4s .9s, transform .5s cubic-bezier(.34, 1.56, .64, 1) .9s;
  }

  .sign__in.pre .sigline::before {
    transform: scaleX(0);
    transition: none;
  }

  .sign__in.pre .sigline .x {
    opacity: 0;
    transform: scale(.6) rotate(-10deg);
    transition: none;
  }

  /* Footer links underline with a sweep. */
  .misa-footer li a {
    position: relative;
  }

  .misa-footer li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }

  .misa-footer li a:hover::after,
  .misa-footer li a:focus-visible::after {
    transform: scaleX(1);
  }
}

/* ── Reduced motion ── */
/* A live switch to reduced motion must leave every pending reveal readable and in place. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal].pre,
  [data-stagger].pre > * {
    opacity: 1;
    translate: none;
    transform: none;
  }
}