/* ============================================================
   WARM UP — the creative workout show
   80s broadcast: VHS noise, stripes, tapes
   ============================================================ */
:root{
  --cream:#fbf0e2;
  --cream-2:#f3e2cb;
  --plum:#2a1538;
  --plum-2:#3c2150;
  --pink:#ff3d8b;
  --tang:#ff7b1c;
  --teal:#17b6a7;
  --butter:#ffd447;
  --vhs:#1b2cc1;
  --ink:#2a1538;
  --ink-60:rgba(42,21,56,.66);
  --pad:clamp(16px,2.4vw,36px);
  --display:'Shrikhand',Georgia,serif;
  --script:'Yellowtail',cursive;
  --osd:'VT323',ui-monospace,monospace;
  --sans:'DM Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
  --stripes:linear-gradient(180deg,var(--butter) 0 20%,var(--tang) 20% 40%,var(--pink) 40% 60%,var(--teal) 60% 80%,var(--vhs) 80% 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--cream);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--pink);color:var(--cream)}
:focus-visible{outline:2px dashed var(--pink);outline-offset:3px}
.hide{display:none!important}

/* ---------- type ---------- */
.disp{font-family:var(--display);font-weight:400;line-height:.92;letter-spacing:-.01em}
.d-xl{font-size:clamp(3rem,10vw,11rem)}
.d-l{font-size:clamp(2.4rem,6.4vw,7rem)}
.d-m{font-size:clamp(1.8rem,3.6vw,3.8rem)}
.d-s{font-size:clamp(1.3rem,2vw,2rem)}
.script{font-family:var(--script);font-weight:400;letter-spacing:0}
.osd{font-family:var(--osd);text-transform:uppercase;letter-spacing:.04em;line-height:1}
.lede{font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.6;color:var(--ink-60)}
.chroma{text-shadow:-2px 0 rgba(255,61,139,.75),2px 0 rgba(23,182,167,.75)}
.extrude{text-shadow:1px 1px 0 var(--pink),2px 2px 0 var(--pink),3px 3px 0 var(--tang),4px 4px 0 var(--tang),5px 5px 0 var(--butter),6px 6px 0 var(--butter),7px 7px 0 var(--plum),8px 8px 0 var(--plum)}
.word{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .08em}
.word>span{display:inline-block;will-change:transform}

/* ---------- layout ---------- */
.px{padding-inline:var(--pad)}
.sec{padding-block:clamp(90px,12vw,190px)}
.wrap{max-width:1360px;margin:0 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);align-items:center}
.grid2>*{min-width:0}
.center{text-align:center}
.stripes{height:40px;background:var(--stripes)}
.stripes.thin{height:16px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;background:var(--plum);color:var(--cream);
  font-family:var(--osd);font-size:1.5rem;text-transform:uppercase;letter-spacing:.04em;line-height:1;
  box-shadow:5px 5px 0 var(--pink);transition:transform .3s var(--out),box-shadow .3s var(--out),background .3s;
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--pink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--pink)}
.btn.pink{background:var(--pink);box-shadow:5px 5px 0 var(--plum)}
.btn.pink:hover{box-shadow:8px 8px 0 var(--plum)}
.btn.cream{background:var(--cream);color:var(--plum);box-shadow:5px 5px 0 var(--butter)}
.link{font-family:var(--osd);font-size:1.4rem;text-transform:uppercase;border-bottom:2px solid currentColor;padding-bottom:2px;transition:color .3s}
.link:hover{color:var(--pink)}

/* ---------- VHS layers ---------- */
.vhs{position:absolute;inset:0;pointer-events:none;z-index:3}
.vhs::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vhs::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(20,6,30,.55) 100%)}
.noise{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;opacity:.12;mix-blend-mode:screen}
.track{position:absolute;left:0;right:0;height:14%;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,.12) 40%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.08) 60%,transparent);filter:blur(2px);animation:trackRoll 7s linear infinite;top:-15%}
@keyframes trackRoll{0%{top:-15%}100%{top:115%}}
.static{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;background:#777}
.static canvas{width:100%;height:100%}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#140a1c;color:var(--cream)}
.hero-v{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;filter:saturate(1.25) contrast(1.08) sepia(.18) hue-rotate(-6deg) brightness(.82);animation:jitter 5s steps(1) infinite}
@keyframes jitter{0%,100%{transform:translate(0,0)}47%{transform:translate(0,0)}48%{transform:translate(-2px,1px)}49%{transform:translate(1px,-1px)}50%{transform:translate(0,0)}82%{transform:translate(0,0)}83%{transform:translate(2px,0)}84%{transform:translate(0,0)}}
.osd-tl,.osd-tr,.osd-bl{position:absolute;z-index:8}
.osd-tl{top:var(--pad);left:var(--pad)}
.osd-tr{top:var(--pad);right:var(--pad);text-align:right;font-size:clamp(1.6rem,2.6vw,2.6rem)}
.osd-bl{left:var(--pad);bottom:calc(var(--pad) + 64px);font-size:clamp(1.3rem,1.8vw,1.9rem)}
.ch-btn{font-family:var(--osd);font-size:inherit;color:inherit;padding:0 .2em;transition:transform .2s}
.ch-btn:hover{transform:scale(1.2)}
.logo{font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.8rem);line-height:.9;color:var(--cream)}
.logo small{display:block;font-family:var(--script);font-size:.55em;color:var(--butter);margin-top:4px}
.title{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(1200px,94vw)}
.title .big{font-family:var(--display);font-size:clamp(4.4rem,17vw,17rem);line-height:.82;color:var(--cream);display:block}
.title .ribbon{display:inline-block;font-family:var(--script);font-size:clamp(2rem,5.4vw,5.6rem);color:var(--butter);transform:rotate(-6deg);margin-top:-.2em;text-shadow:3px 3px 0 var(--pink)}
.title .est{display:block;margin-top:14px;font-size:1.4rem}
.lower{position:absolute;left:var(--pad);bottom:calc(var(--pad) + 64px);z-index:8;display:flex;align-items:center;gap:14px}
.lower .tag{background:var(--pink);color:var(--cream);padding:4px 10px}
.lower .prog{background:rgba(42,21,56,.72);padding:4px 10px}
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:8;height:60px;background:var(--butter);color:var(--plum);overflow:hidden;display:flex;align-items:center;border-top:3px solid var(--plum)}
.ticker-t{display:flex;white-space:nowrap;will-change:transform}
.ticker-t span{font-family:var(--script);font-size:2rem;padding:0 22px;display:inline-flex;align-items:center;gap:22px}
.ticker-t span::after{content:"✦";font-family:var(--sans);font-size:1rem;color:var(--pink)}
.ticker-t span.o{font-family:var(--osd);font-size:1.7rem;text-transform:uppercase}

/* ---------- header (inner pages) ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);transition:transform .6s var(--ease),background .4s}
.bar.solid{background:rgba(42,21,56,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bar.up{transform:translateY(-110%)}
.bar .logo{font-size:clamp(1.3rem,2vw,1.9rem)}
.bar nav{display:flex;gap:clamp(12px,2vw,28px);align-items:center;color:var(--cream)}
.bar nav a{font-family:var(--osd);font-size:1.45rem;text-transform:uppercase;position:relative}
.bar nav a::before{content:"▶";position:absolute;left:-.9em;opacity:0;transition:opacity .2s;color:var(--butter)}
.bar nav a:hover::before,.bar nav a.on::before{opacity:1}
.rec{display:inline-flex;align-items:center;gap:8px;color:var(--cream)}
.rec i{width:10px;height:10px;border-radius:50%;background:#ff2d2d;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- intro section ---------- */
.intro .d-l{color:var(--plum)}
.intro .d-l .script{color:var(--pink);font-size:.8em;display:inline-block;transform:rotate(-4deg)}
.sticker{display:inline-grid;place-items:center;width:150px;height:150px;border-radius:50%;background:var(--butter);color:var(--plum);text-align:center;font-family:var(--display);font-size:1.3rem;line-height:1;transform:rotate(-12deg);box-shadow:6px 6px 0 var(--plum);padding:16px}
.sticker small{display:block;font-family:var(--osd);font-size:1rem;margin-top:6px}

/* ---------- tapes (3D VHS sleeves) ---------- */
.tapes-sec{background:var(--plum);color:var(--cream);position:relative;overflow:hidden}
.tapes-sec .d-l{color:var(--cream)}
.tape-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:center;padding-block:clamp(50px,8vw,120px);border-top:2px dashed rgba(251,240,226,.2)}
.tape-row:nth-child(even) .stage{order:2}
.stage{perspective:1400px;display:grid;place-items:center;min-height:clamp(420px,56vw,640px)}
.box{--w:clamp(220px,22vw,320px);--h:calc(var(--w)*1.72);--d:calc(var(--w)*.2);
  position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateY(-28deg) rotateX(6deg);will-change:transform;cursor:pointer}
.face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.front{transform:translateZ(calc(var(--d)/2));background:var(--c1);display:flex;flex-direction:column;border-radius:3px}
.back{transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:var(--c2);padding:22px;display:flex;flex-direction:column;gap:12px;color:var(--plum);border-radius:3px}
.spine{position:absolute;top:0;left:50%;width:var(--d);height:var(--h);margin-left:calc(var(--d)/-2);transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:var(--c2);display:flex;align-items:center;justify-content:center;color:var(--plum)}
.spine.r{transform:rotateY(90deg) translateZ(calc(var(--w)/2));background:var(--c1)}
.spine span{transform:rotate(90deg);white-space:nowrap;font-family:var(--display);font-size:calc(var(--w)*.085)}
.cap-t,.cap-b{position:absolute;left:0;width:var(--w);height:var(--d);background:var(--c2)}
.cap-t{top:0;transform:rotateX(90deg) translateZ(calc(var(--d)/2));transform-origin:top;top:calc(var(--d)/-2 + var(--d)/2)}
.cap-b{bottom:0;transform:rotateX(-90deg) translateZ(calc(var(--d)/2));transform-origin:bottom}
.front .tv{flex:1;position:relative;overflow:hidden;background:#000}
.front .tv video{width:100%;height:100%;object-fit:cover;filter:saturate(1.3) contrast(1.05)}
.front .tv::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px)}
.front .lbl{padding:14px 16px 16px;position:relative}
.front .lbl::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--stripes);transform:scaleY(-1)}
.front .no{font-family:var(--osd);font-size:1.2rem;margin-top:8px;display:flex;justify-content:space-between}
.front h3{font-family:var(--display);font-size:calc(var(--w)*.14);line-height:.9;margin-top:6px}
.front .brand{position:absolute;top:10px;left:12px;z-index:2;font-family:var(--display);font-size:1.1rem;color:var(--cream);text-shadow:2px 2px 0 var(--plum)}
.front .sp{position:absolute;top:10px;right:12px;z-index:2;font-family:var(--osd);font-size:1.1rem;background:var(--butter);color:var(--plum);padding:1px 6px}
.back h4{font-family:var(--display);font-size:1.4rem;line-height:1}
.back p{font-size:.86rem;line-height:1.45}
.back .bars{margin-top:auto;height:44px;background:repeating-linear-gradient(90deg,var(--plum) 0 2px,transparent 2px 5px,var(--plum) 5px 6px,transparent 6px 9px)}
.tape-copy .num{font-family:var(--osd);font-size:1.6rem;color:var(--butter)}
.tape-copy h3{font-family:var(--display);font-size:clamp(2.4rem,5vw,5.2rem);line-height:.9;margin:10px 0 18px}
.tape-copy p{color:rgba(251,240,226,.75);font-size:1.12rem;max-width:44ch}
.tape-copy .meta{display:flex;gap:18px;flex-wrap:wrap;margin:22px 0 28px;font-family:var(--osd);font-size:1.3rem;text-transform:uppercase}
.tape-copy .meta span{border:2px solid rgba(251,240,226,.3);padding:4px 10px}

/* ---------- hotline ---------- */
.hotline{background:var(--pink);color:var(--cream);position:relative;overflow:hidden}
.phone{font-family:var(--osd);font-size:clamp(2.4rem,7vw,7rem);line-height:1;letter-spacing:.02em}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:6px}
.fld span{font-family:var(--osd);font-size:1.25rem;text-transform:uppercase}
.fld input,.fld select,.fld textarea{background:var(--cream);color:var(--plum);border:3px solid var(--plum);padding:12px 14px;font-size:1rem;outline:0;border-radius:0;box-shadow:4px 4px 0 var(--plum);width:100%;min-width:0}
.fld input:focus,.fld textarea:focus,.fld select:focus{box-shadow:6px 6px 0 var(--butter)}
.fld.bad input{border-color:var(--butter)}
.note{font-family:var(--osd);font-size:1.15rem;text-transform:uppercase;border:2px dashed currentColor;padding:10px 14px;opacity:.85}

/* ---------- footer ---------- */
.foot{background:var(--plum);color:var(--cream);position:relative;overflow:hidden}
.foot .big{font-family:var(--display);font-size:clamp(4rem,19vw,20rem);line-height:.8;color:var(--cream);text-align:center;padding:40px 0 10px}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:18px var(--pad);border-top:2px dashed rgba(251,240,226,.25);font-family:var(--osd);font-size:1.3rem;text-transform:uppercase}
.foot-row a:hover{color:var(--butter)}

/* ---------- inner pages ---------- */
.ph{background:var(--plum);color:var(--cream);position:relative;overflow:hidden;padding:calc(var(--pad) + 120px) var(--pad) clamp(60px,8vw,110px)}
.ph .d-xl{color:var(--cream)}
.tape-hero{min-height:90svh;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,70px);align-items:center}
.tape-hero>*{min-width:0}
.tape-hero .tv-frame{position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;border:10px solid #1a0d24;box-shadow:0 0 0 3px var(--butter),16px 16px 0 var(--pink)}
.tape-hero .tv-frame video{width:100%;height:100%;object-fit:cover;filter:saturate(1.25) contrast(1.08) sepia(.15)}
.moves li{display:grid;grid-template-columns:90px 1fr auto;gap:20px;align-items:start;padding:26px 0;border-top:3px solid var(--plum)}
.moves li:last-child{border-bottom:3px solid var(--plum)}
.moves .n{font-family:var(--display);font-size:3rem;line-height:.9;color:var(--pink)}
.moves h4{font-family:var(--display);font-size:clamp(1.4rem,2.2vw,2.2rem);line-height:1}
.moves p{color:var(--ink-60);margin-top:8px;max-width:60ch}
.moves .reps{font-family:var(--osd);font-size:1.3rem;text-transform:uppercase;background:var(--butter);padding:4px 10px;white-space:nowrap}
.card{background:var(--cream-2);border:3px solid var(--plum);box-shadow:8px 8px 0 var(--plum);padding:clamp(22px,3vw,36px)}
.card h4{font-family:var(--display);font-size:1.8rem;line-height:1;margin-bottom:12px}
.card li{padding:8px 0 8px 28px;position:relative}
.card li::before{content:"✦";position:absolute;left:0;color:var(--pink)}
.hosts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.host .pic{aspect-ratio:3/4;overflow:hidden;border:4px solid var(--plum);box-shadow:8px 8px 0 var(--pink);background:#000}
.host .pic video{width:100%;height:100%;object-fit:cover;filter:saturate(1.3)}
.host h4{font-family:var(--display);font-size:1.7rem;margin-top:16px;line-height:1}
.sched{border-top:3px solid var(--plum)}
.sched li{display:grid;grid-template-columns:140px 1fr auto;gap:18px;padding:18px 0;border-bottom:3px solid var(--plum);align-items:baseline}
.prose{max-width:760px;margin:0 auto}
.prose h2{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.4rem);margin:40px 0 12px;line-height:1}
.prose p,.prose li{color:var(--ink-60);margin-bottom:12px}
.prose ul{padding-left:20px;list-style:disc}

/* ---------- loader + transition ---------- */
.boot{position:fixed;inset:0;z-index:500;background:var(--vhs);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad);overflow:hidden}
.boot .osd{font-size:clamp(1.6rem,3vw,3rem)}
.boot .big{font-family:var(--osd);font-size:clamp(4rem,14vw,14rem);line-height:1}
.boot .bar-t{position:absolute;left:0;right:0;height:18%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent);top:-20%;animation:trackRoll 1.6s linear infinite}
.flip{position:fixed;inset:0;z-index:480;pointer-events:none;display:none;background:#111}
.flip canvas{width:100%;height:100%}
.flip .osd{position:absolute;right:var(--pad);top:var(--pad);color:#fff;font-size:clamp(1.8rem,3vw,3rem)}

/* ---------- cursor / toast ---------- */
.cur{position:fixed;left:0;top:0;z-index:600;pointer-events:none;transform:translate(-50%,-50%);font-family:var(--osd);font-size:1.3rem;text-transform:uppercase;color:var(--plum);background:var(--butter);padding:4px 10px;border:2px solid var(--plum);opacity:0;transition:opacity .25s,transform .35s var(--out);white-space:nowrap}
.cur.on{opacity:1}
@media (hover:none){.cur{display:none}}
.toast{position:fixed;left:50%;bottom:24px;z-index:700;transform:translate(-50%,30px);background:var(--plum);color:var(--butter);font-family:var(--osd);font-size:1.4rem;text-transform:uppercase;padding:10px 18px;border:3px solid var(--butter);opacity:0;transition:all .45s var(--out);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

[data-fade]{opacity:0;transform:translateY(30px)}
.no-gsap [data-fade],.reduced [data-fade]{opacity:1;transform:none}
.no-gsap .boot,.no-gsap .flip{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid2,.tape-row,.tape-hero{grid-template-columns:1fr}
  .tape-row:nth-child(even) .stage{order:0}
  .stage{min-height:auto;padding:30px 0 50px}
  .hosts{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .moves li{grid-template-columns:60px 1fr}
  .moves .reps{grid-column:2;justify-self:start}
  .sched li{grid-template-columns:1fr;gap:4px}
  .bar nav .hide-m{display:none}
  .osd-bl,.lower{bottom:calc(var(--pad) + 60px)}
}
@media (max-width:560px){
  .hosts{grid-template-columns:1fr}
  .osd-tr{font-size:1.4rem}
  .lower{flex-wrap:wrap;gap:6px;right:var(--pad)}
}
@media (prefers-reduced-motion:reduce){.track,.hero-v,.boot .bar-t,.rec i{animation:none}}