/* Viralee landing — motion layer.
   The Figma-parity stylesheet resets `animation` with !important from inside a
   cascade layer (layered !important outranks unlayered), so every animation is
   applied INLINE by motion.js. This file owns keyframes and the few static
   styles the motion needs.

   Hard rules, so the exported artboards stay pixel-identical:
   no clip-path (it would crop artboard backgrounds), no scale on stacked
   sections (it would expose the sections underneath), no injected children
   inside parity sections (they hide their own children by index/`> *`). */

:root { --vm-lime: #b7ed00; --vm-ease: cubic-bezier(.22, 1, .36, 1); }

/* 1. Scroll progress (the parity layer hides the legacy bar) */
body:is(.role-page, .creator-page, .advertiser-page) .scroll-progress {
  display: block !important;
  position: fixed;
  inset: 0 0 auto;
  z-index: 320;
  height: 3px;
  transform-origin: left center;
  transform: scaleX(var(--page-progress, 0)) !important;
  background: var(--vm-lime);
  pointer-events: none;
  will-change: transform;
}

/* 2. Scene entrance — opacity and a small rise only. */
.vm-scene { backface-visibility: hidden; }
@keyframes vm-enter {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: none; }
}

/* 3. Sticky stack: a scene shorter than the viewport holds while the next one
      slides over it and dims (the dimming itself is written inline by
      motion.js — see the note there). Dimming only — no scale, no radius, so
      nothing can ever peek out from behind it. */
.vm-scene[data-vm-stick] {
  position: sticky;
  top: var(--vm-stick-top, 0px);
  transition: filter 120ms linear;
}

/* 4. Buttons — one behaviour for every interactive surface: a small lift on
      hover, a press on click. No rings, no glows. The parity layer overrides
      transition/transform from inside a cascade layer, so motion.js applies
      these inline; only the focus ring is safe to keep here. */
.parity-hit:focus-visible,
body:is(.role-page, .creator-page, .advertiser-page) .button:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 2px;
}

/* 5. Opening beat: the header drops in. */
@keyframes vm-nav-in {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vm-scene[data-vm-stick] { position: static; }
}