/* UNSTUCK motion layer (2026-11-03). Pairs with motion.js. Everything here is an enhancement:
   pinned and animated states only switch on when motion.js adds .m-on to <html> and the visitor allows motion. */

/* ---------- video ---------- */
.vid{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink-3)}
.phero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.media.vbox{position:relative;overflow:hidden}
.media.vbox video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vtag{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;font:800 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(10,10,11,.55);backdrop-filter:blur(6px);padding:8px 10px;border-radius:30px}
.vtag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(227,18,43,.7);animation:pulse 1.8s infinite}

/* ---------- scroll progress ---------- */
.m-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- headline word rise ---------- */
.m-on .m-split .w{display:inline-block;animation:rise .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 55ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(.45em) rotateX(-35deg)}to{opacity:1;transform:none}}

/* ---------- parallax ---------- */
[data-parallax]{will-change:transform}
.phero>video[data-parallax],.phero>img[data-parallax]{inset:-6% 0;height:112%}

/* ---------- 3D tilt + glare ---------- */
.tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.tilt.tilting{transition:transform .08s linear}
.tilt>.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),transparent 40%);z-index:3}
.tilt.tilting>.glare{opacity:1}

/* ---------- magnetic buttons ---------- */
.mag{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .15s,box-shadow .15s}

/* ---------- method scroll story (home) ---------- */
.mstory .rail{display:none}
@media (min-width:900px){
  .m-on .mstory{height:300vh;position:relative}
  .m-on .mstory .pin{position:sticky;top:96px;display:grid;grid-template-columns:120px 1fr;gap:36px;align-items:center;min-height:calc(100vh - 140px)}
  .m-on .mstory .rail{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
  .m-on .mstory .rail button{font:400 34px/1 var(--display);color:var(--line-2);background:none;border:0;padding:0;cursor:pointer;transition:color .3s;text-align:left}
  .m-on .mstory .rail button.on{color:var(--red)}
  .m-on .mstory .rail .bar{width:3px;height:120px;background:var(--line);position:relative;margin-left:6px;border-radius:3px;overflow:hidden}
  .m-on .mstory .rail .bar i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--red);transform-origin:50% 0;transform:scaleY(var(--p,0))}
  .m-on .mstory .stage{position:relative;perspective:1600px;height:min(560px,calc(100vh - 180px))}
  .m-on .mstory .stage>.phase{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr 1fr;opacity:0;transform:translateY(40px) rotateX(10deg) scale(.96);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
  .m-on .mstory .stage>.phase.on{opacity:1;transform:none;pointer-events:auto}
  .m-on .mstory .stage>.phase.past{opacity:0;transform:translateY(-40px) rotateX(-10deg) scale(.96)}
  .m-on .mstory .stage>.phase .media{aspect-ratio:auto;height:100%}
  .m-on .mstory .stage>.phase .body{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,48px)}
  .m-on .mstory .stage>.phase .n{font-size:110px}
  .m-on .mstory .stage>.phase h3{font-size:clamp(40px,4vw,60px)}
  .m-on .mstory .stage>.phase p{font-size:18px}
}

/* ---------- Unstuck Live countdown ---------- */
.ulc{display:inline-flex;flex-direction:column;gap:10px}
.ulc .lab{font:800 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.ulc .row{display:flex;gap:8px}
.ulc .u{min-width:66px;padding:12px 8px 10px;text-align:center;border:1px solid var(--line-2);background:rgba(255,255,255,.02);border-radius:4px}
.ulc .u b{display:block;font:400 34px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--bone)}
.ulc .u span{display:block;font:700 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:6px}
.ulc.live .row{display:none}
.ulc .now{display:none;align-items:center;gap:10px;font:400 30px/1 var(--display);text-transform:uppercase;color:var(--bone)}
.ulc.live .now{display:inline-flex}
.ulc .now::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,18,43,.7)}70%{box-shadow:0 0 0 12px rgba(227,18,43,0)}100%{box-shadow:0 0 0 0 rgba(227,18,43,0)}}

/* ---------- testimonials ---------- */
.tq-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;background:var(--ink-3);border:2px solid var(--line-2)}
.tq-init{display:inline-grid;place-items:center;font:400 22px/1 var(--display);color:#fff;background:var(--red)}
.tq-who{display:flex;gap:14px;align-items:center;margin-top:auto;padding-top:20px}
.tq-who b{display:block;font:700 16px/1.25 var(--sans)}
.tq-who span{display:block;font-size:13.5px;color:var(--mute);line-height:1.35}
.tq-q{font:400 clamp(18px,1.6vw,21px)/1.55 var(--sans);color:var(--bone)}
.paper .tq-q{color:var(--text-on-paper)}
.tq-q::before{content:"\201C";display:block;font:700 italic 72px/0.6 var(--serif);color:var(--red);margin-bottom:10px}
.tq-q.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.tq-more{background:none;border:0;padding:0;margin-top:10px;font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);cursor:pointer}
/* carousel */
.tcar{position:relative}
.tcar .track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px max(var(--g),calc((100vw - var(--wrap))/2 + var(--g))) 40px;scrollbar-width:none;perspective:1400px;cursor:grab;overscroll-behavior-x:contain}
.tcar .track::-webkit-scrollbar{display:none}
.tcar .track.drag{cursor:grabbing;scroll-snap-type:none}
.tcar .tc{flex:0 0 min(440px,82vw);scroll-snap-align:center;display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:30px;min-height:360px;transform:rotateY(var(--ry,0deg)) scale(var(--sc,1));transition:transform .25s ease-out,border-color .25s;user-select:none}
.tcar .tc.center{border-color:var(--red)}
.tcar .nav2{display:flex;gap:10px;justify-content:flex-end;margin-top:-10px}
.tcar .nav2 button{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line-2);background:none;color:var(--bone);font-size:20px;cursor:pointer;transition:border-color .15s,background .15s}
.tcar .nav2 button:hover{border-color:var(--red);background:var(--red)}
/* marquee */
.tmarq{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tmarq .mrow{display:flex;gap:56px;width:max-content;animation:marq 70s linear infinite}
.tmarq:hover .mrow{animation-play-state:paused}
.tmarq .mi{display:flex;gap:14px;align-items:center;white-space:nowrap;font:400 22px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--bone)}
.tmarq .mi img{width:34px;height:34px;border-radius:50%}
.tmarq .mi em{font:500 13px/1 var(--sans);text-transform:none;color:var(--mute);font-style:normal}
.tmarq .mi::after{content:"";width:8px;height:8px;background:var(--red);transform:rotate(45deg);margin-left:42px}
@keyframes marq{to{transform:translateX(-50%)}}
/* strip */
.tstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tstrip .tc{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:26px}
.paper .tstrip .tc{background:#fff;border-color:var(--paper-2)}
.tstrip .tq-q{font-size:17px}
@media (max-width:900px){.tstrip{grid-template-columns:1fr}}
/* video stories */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stories a,.stories button{position:relative;display:block;width:100%;padding:0;background:#000;cursor:pointer;aspect-ratio:3/2;overflow:hidden;border-radius:6px;border:1px solid var(--line)}
.stories img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.stories a:hover img,.stories button:hover img{transform:scale(1.05)}
.stories a::after,.stories button::after{content:"";position:absolute;left:16px;bottom:16px;width:46px;height:46px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 8px 24px rgba(0,0,0,.5)}
@media (max-width:700px){.stories{grid-template-columns:1fr 1fr}}

/* ---------- reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion:reduce){
  .m-on .m-split .w{animation:none}
  .tmarq .mrow{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:18px 40px}
  .tmarq .mrow [aria-hidden]{display:none}
  .tilt,.mag{transform:none!important}
  .vtag::before,.ulc .now::before{animation:none}
}

/* Hero video at native 16:9, never cropped or stretched (2026-11-04): sits as a wide panel on the right,
   faded into the page on every edge with a soft red screen; headline sits over the faded side. */
.phero{background:#0a0a0b;isolation:isolate}
.phero>video{inset:auto!important;top:50%!important;right:0!important;left:auto!important;width:min(58vw,1280px)!important;height:auto!important;aspect-ratio:16/9;object-fit:contain!important;transform:translateY(-50%)!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 94%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.phero::after{background:linear-gradient(90deg,#0a0a0b 0%,rgba(10,10,11,.7) 30%,rgba(10,10,11,0) 50%,rgba(120,6,18,.10) 100%),linear-gradient(0deg,#0a0a0b 0%,transparent 26%)!important}
.phero>video{filter:brightness(1.08) contrast(1.04)}
@media (max-width:820px){.phero{flex-direction:column;justify-content:flex-start;min-height:auto}
  .phero>video,.phero>img,.phero>picture{position:relative!important;inset:auto!important;top:auto!important;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;transform:none!important;order:-1;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 100%)}
  .phero::after{background:linear-gradient(0deg,#0a0a0b 0%,transparent 60%)!important}
  .phero .wrap{padding-top:0;margin-top:-8vw;position:relative}}