/* ============================================================
   CRYPTO WAR ROOM — scroll motion
   Drop-in. Load after your other stylesheets, then the script.

       <link rel="stylesheet" href="cwr-scroll.css">
       <script src="cwr-scroll.js" defer></script>

   Nothing moves until an element enters the viewport, and every
   animated element is fully visible if the script never runs — so
   a JS error can never leave the page blank.
   ============================================================ */

:root{
  --ease:cubic-bezier(.22,.61,.36,1);   /* the house easing: fast out, soft landing */
  --dur:.72s;
  --rise:22px;                          /* how far things travel. small on purpose */
}

/* ---------- 1. the base state -----------------------------
   .js-motion is set on <html> by the script. Without it every
   rule below is inert and the page renders normally.
   ---------------------------------------------------------- */
.js-motion [data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--rise),0);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
/* once it has landed, stop reserving a layer for it */
.js-motion [data-reveal].is-done{will-change:auto;transition:none}

/* variants: pass them as the attribute value, data-reveal="left" */
.js-motion [data-reveal="left"] {transform:translate3d(calc(var(--rise) * -1),0,0)}
.js-motion [data-reveal="right"]{transform:translate3d(var(--rise),0,0)}
.js-motion [data-reveal="fade"] {transform:none}
.js-motion [data-reveal="scale"]{transform:translate3d(0,calc(var(--rise) * .7),0) scale(.985)}

/* ---------- 2. headlines ----------------------------------
   Each line is wrapped by the script and wiped up from under a
   mask, so the serif reads as if it is being set, not fading.
   ---------------------------------------------------------- */
.js-motion .line-mask{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js-motion .line-mask > span{
  display:block;
  transform:translate3d(0,102%,0);
  transition:transform .86s var(--ease);
  transition-delay:var(--d,0ms);
}
.js-motion .is-in .line-mask > span,
.js-motion .line-mask.is-in > span{transform:none}

/* ---------- 3. product windows ----------------------------
   A slow counter-drift as the section passes. --p is 0 when the
   element enters the viewport and 1 when it leaves, written by
   the script on every frame.
   ---------------------------------------------------------- */
.js-motion [data-parallax]{
  transform:translate3d(0,calc((var(--p,.5) - .5) * var(--para,-38px)),0);
  will-change:transform;
}
/* the glow behind a window drifts the other way, which reads as depth */
.js-motion [data-parallax-slow]{
  transform:translate3d(0,calc((var(--p,.5) - .5) * 16px),0);
}

/* a window that grows very slightly into place, then holds */
.js-motion [data-reveal="window"]{
  opacity:0;transform:translate3d(0,34px,0) scale(.975);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  transition-delay:var(--d,0ms);
}
.js-motion [data-reveal="window"].is-in{opacity:1;transform:none}

/* ---------- 4. counting numbers ---------------------------
   Figures roll from zero when the row arrives. Tabular numerals
   stop the width jittering while they count.
   ---------------------------------------------------------- */
.js-motion [data-count]{font-variant-numeric:tabular-nums}

/* ---------- 5. hairlines that draw themselves -------------- */
.js-motion [data-draw]{transform:scaleX(0);transform-origin:left center;
  transition:transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js-motion [data-draw].is-in{transform:scaleX(1)}

/* ---------- 6. scroll progress ----------------------------- */
.scroll-rail{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none;
  background:transparent}
.scroll-rail i{display:block;height:100%;width:100%;transform:scaleX(var(--sp,0));transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,46,136,.0),#ff2e88 40%,#3ce9a4);
  box-shadow:0 0 12px rgba(255,46,136,.45)}

/* ---------- 7. sticky section heads ------------------------
   Optional. Put data-sticky on a .sec__head and it holds while
   its section scrolls past, then releases.
   ---------------------------------------------------------- */
.js-motion [data-sticky]{position:sticky;top:clamp(24px,8vh,80px);z-index:2}

/* ---------- 8. respect the setting -------------------------
   Anyone who asks their system for less motion gets none of it.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal],
  .js-motion [data-reveal="window"]{opacity:1!important;transform:none!important;transition:none!important}
  .js-motion .line-mask > span{transform:none!important;transition:none!important}
  .js-motion [data-parallax],.js-motion [data-parallax-slow]{transform:none!important}
  .js-motion [data-draw]{transform:none!important}
  .scroll-rail{display:none}
}