/* ============================================================
   wow.css — shared, skin-INDEPENDENT landing primitives.
   One source of truth for the wow-redesign motion language.
   Pages stay visually distinct (dark blueprint / cream / porcelain);
   they only theme these primitives through CSS custom properties.

   Expected page vars (set on :root by each page's own stylesheet):
     --wow-accent       brand accent (e.g. #4FC3F7)   [fallback below]
     --wow-accent-2     secondary accent for aurora    [optional]
     --wow-accent-rgb   "79,195,247" for rgba() mixes  [optional]
     --wow-ink          base background color           [optional]
   Everything degrades gracefully if a var is unset.
   All motion is gated behind prefers-reduced-motion.
   ============================================================ */
:root{
  --wow-accent:#4FC3F7;
  --wow-accent-rgb:79,195,247;
  --wow-accent-2:rgba(91,123,255,.20);
}

/* ---------- atmosphere: aurora drift + film grain ---------- */
.wow-aurora{
  position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px);opacity:.5;
  background:
    radial-gradient(38% 44% at 22% 26%, rgba(var(--wow-accent-rgb),.30), transparent 70%),
    radial-gradient(34% 40% at 82% 30%, var(--wow-accent-2), transparent 70%),
    radial-gradient(40% 46% at 60% 86%, rgba(var(--wow-accent-rgb),.16), transparent 72%);
  animation:wowDrift 22s ease-in-out infinite alternate;
}
@keyframes wowDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,1.5%,0) scale(1.03)}
}
.wow-grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll reveal (opt-in via [data-reveal]) ----------
   FAIL-OPEN: the hidden state is applied by JS (.wow-reveal-init), never by
   base CSS. If wow.js never runs, [data-reveal] elements stay fully visible —
   worst case is "no animation", never "invisible content". Critical for live
   marketing pages. */
[data-reveal]{transition:opacity .6s ease,transform .6s ease}
[data-reveal].wow-reveal-init{opacity:0;transform:translateY(24px)}
[data-reveal="left"].wow-reveal-init{transform:translateX(-28px)}
[data-reveal="right"].wow-reveal-init{transform:translateX(28px)}
[data-reveal="scale"].wow-reveal-init{transform:scale(.96)}
[data-reveal].wow-in{opacity:1!important;transform:none!important}

/* ---------- cursor spotlight (opt-in via [data-spotlight]) ---------- */
[data-spotlight]{position:relative;overflow:hidden}
[data-spotlight]::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--wow-mx,50%) var(--wow-my,50%),rgba(var(--wow-accent-rgb),.10),transparent 60%);
}
[data-spotlight]:hover::after{opacity:1}

/* ---------- sticky CTA bar (.wow-sticky-cta) ---------- */
.wow-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;transform:translateY(120%);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.wow-sticky-cta.wow-show{transform:translateY(0)}

/* ---------- scroll-as-walkthrough layout (.wow-walk) ----------
   Structure only — pages supply the stage artwork + colors.
   Markup contract:
     .wow-walk            tall scroll container (set height in page CSS, e.g. 440vh)
       .wow-walk-sticky   position:sticky pinned panel
         .wow-walk-rail   step list; fill driven by --wow-p (0..1)
           .wow-walk-step (+ .wow-active when current)
         .wow-walk-stage[data-stage]   layered visual
           .wow-walk-layer.l0..l3      (page styles the internals)
*/
.wow-walk-sticky{position:sticky;top:0;height:100vh}
.wow-walk-rail{position:relative}
.wow-walk-rail::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:rgba(var(--wow-accent-rgb),.12);border-radius:2px}
.wow-walk-rail::after{content:"";position:absolute;left:5px;top:6px;width:2px;height:calc((100% - 12px) * var(--wow-p,0));background:var(--wow-accent);border-radius:2px;box-shadow:0 0 12px rgba(var(--wow-accent-rgb),.5);transition:height .15s linear}
.wow-walk-step{opacity:.4;transition:opacity .35s}
.wow-walk-step.wow-active{opacity:1}
.wow-walk-layer{opacity:0;transform:scale(.97);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.wow-walk-stage[data-stage="0"] .l0,
.wow-walk-stage[data-stage="1"] .l1,
.wow-walk-stage[data-stage="2"] .l2,
.wow-walk-stage[data-stage="3"] .l3{opacity:1;transform:scale(1)}

/* ---------- reduced motion: kill non-essential motion everywhere ---------- */
@media(prefers-reduced-motion:reduce){
  .wow-aurora{animation:none}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none}
  .wow-walk-sticky{position:static;height:auto}
  .wow-walk-layer{opacity:1;transform:none;position:relative}
  .wow-walk-step{opacity:1}
}