/* =====================================================================
   FREAKY — motion layer
   ===================================================================== */

/* ---------------------------------------------------------- 1. intro */
.intro{
  position:fixed; inset:0; z-index:9990; background:var(--plum); color:var(--bone-2);
  display:grid; place-items:center; pointer-events:none;
}
.intro__m{
  font-family:var(--f-display); font-size:clamp(3rem,12vw,9rem); line-height:1; letter-spacing:-.04em;
  overflow:hidden; display:flex;
}
.intro__m span{
  display:inline-block; transform:translateY(110%);
  animation:introUp .9s var(--e-out) forwards;
}
.intro__m i{color:var(--flame); font-style:normal}
@keyframes introUp{to{transform:none}}
.intro.done{
  animation:introOut .85s cubic-bezier(.7,0,.2,1) forwards; animation-delay:.15s;
}
@keyframes introOut{to{clip-path:inset(0 0 100% 0)}}

/* -------------------------------------------------- 2. masked lines */
.ml{display:block; overflow:hidden}
.ml > span{
  display:block; transform:translateY(105%);
  transition:transform 1.05s var(--e-out);
}
.ml.in > span{transform:none}
.ml:nth-of-type(2) > span{transition-delay:.09s}
.ml:nth-of-type(3) > span{transition-delay:.18s}

/* --------------------------------------------- 3. ambient hero film */
.film{position:absolute; inset:0; overflow:hidden; z-index:0}
.film__blob{
  position:absolute; border-radius:50%; filter:blur(58px); opacity:.85;
  will-change:transform;
}
.film__b1{width:58%; aspect-ratio:1; left:-8%;  top:-14%; background:#E86A4A; animation:drift1 19s ease-in-out infinite alternate}
.film__b2{width:52%; aspect-ratio:1; right:-6%; top:22%;  background:#8E1F4A; animation:drift2 23s ease-in-out infinite alternate}
.film__b3{width:44%; aspect-ratio:1; left:26%;  bottom:-18%; background:#D8402A; animation:drift3 27s ease-in-out infinite alternate; opacity:.6}
.film__b4{width:30%; aspect-ratio:1; right:22%; bottom:6%; background:#F1D9D0; animation:drift1 21s ease-in-out infinite alternate-reverse; opacity:.4}
@keyframes drift1{to{transform:translate3d(16%,12%,0) scale(1.18)}}
@keyframes drift2{to{transform:translate3d(-14%,-10%,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(10%,-16%,0) scale(1.12)}}
.film::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 110%, rgba(12,8,9,.86), rgba(12,8,9,.12) 62%);
}
/* scanning light sweep */
.film__sweep{
  position:absolute; top:-30%; left:-40%; width:44%; height:170%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  transform:rotate(14deg); animation:sweep 9s linear infinite;
}
@keyframes sweep{0%{left:-45%}60%,100%{left:125%}}

/* ------------------------------------------------- 4. parallax bits */
[data-par]{will-change:transform}

/* ------------------------------------------------- 5. scroll "reel" */
.reel{position:relative; height:340vh}
.reel__pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; place-items:center; background:var(--plum); color:var(--bone-2);
}
.reel__stage{position:relative; width:min(560px,74vw); aspect-ratio:1}
.reel__art{position:absolute; inset:0; display:grid; place-items:center}
.reel__art svg{width:100%; height:100%; border-radius:50%; overflow:hidden}
.reel__ring{
  position:absolute; inset:-6%; border:1px solid rgba(255,255,255,.16); border-radius:50%;
}
.reel__ring::after{
  content:""; position:absolute; top:-5px; left:50%; width:9px; height:9px; margin-left:-4.5px;
  border-radius:50%; background:var(--flame);
}
.reel__cap{
  position:absolute; left:0; right:0; bottom:clamp(28px,6vh,70px); text-align:center; padding-inline:20px;
}
.reel__cap b{
  display:block; font-family:var(--f-display); font-size:clamp(1.8rem,4.4vw,3.4rem); line-height:1.02;
}
.reel__cap span{display:block; opacity:.6; font-size:.9rem; margin-top:.7em; max-width:46ch; margin-inline:auto}
.reel__cap > div{position:absolute; left:0; right:0; opacity:0; transform:translateY(16px); transition:.55s var(--e-out)}
.reel__cap > div.on{opacity:1; transform:none; position:relative}
.reel__idx{
  position:absolute; top:clamp(20px,4vh,44px); left:0; right:0; text-align:center;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; opacity:.45;
}
.reel__bar{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  width:min(320px,60vw); height:2px; background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden;
}
.reel__bar i{display:block; height:100%; width:0; background:var(--flame)}

/* --------------------------------------------------- 6. counters */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,28px)}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat b{display:block; font-family:var(--f-display); font-size:clamp(2.4rem,5vw,4.2rem); line-height:1; letter-spacing:-.03em}
.stat span{display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin-top:.7em}

/* ------------------------------------------- 7. product card float */
.pcard__art{transform-origin:50% 55%}
.pcard:hover .pcard__art{animation:float 4.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:scale(1.045) translateY(0)}50%{transform:scale(1.06) translateY(-9px)}}

/* --------------------------------------------------- 8. magnetic */
.btn,.link-u{will-change:transform}

/* ------------------------------------------------ 9. marquee skew */
.strip__track{will-change:transform}

/* ---------------------------------------------- 10. ticker numbers */
.tick{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  .ml > span{transform:none}
  .film__blob,.film__sweep{animation:none}
  .pcard:hover .pcard__art{animation:none}
  .reel{height:auto}
  .reel__pin{position:static; height:auto; padding-block:80px}
  .reel__cap > div{position:relative; opacity:1; transform:none; margin-bottom:28px}
}