/* Home only. Shared parts (doors, crew wall, proofs, board, FAQ) come from components.css. */

/* hero: the recital on loop, one line, straight to the doors */
.h-hero{position:relative;min-height:100svh;display:grid;align-items:end;background:var(--ink);color:var(--cream);overflow:hidden}
.h-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:drift 24s var(--ease) infinite alternate}
@keyframes drift{to{transform:scale(1.12) translate(-1%,-1%)}}
.h-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,53,57,.55) 0%,rgba(7,53,57,.15) 35%,rgba(7,53,57,.55) 65%,rgba(7,53,57,.96) 100%)}
.h-hero .copy{position:relative;z-index:2;padding:140px var(--m) 72px;display:grid;gap:22px;max-width:1100px}
.h-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:var(--s-small);letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
.h-hero .eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 6px rgba(227,108,37,.25)}
.h-hero h1{font-size:clamp(52px,8.2vw,140px);line-height:.88;text-shadow:0 6px 40px rgba(0,0,0,.35)}
.h-hero h1 .o{color:var(--orange)}
.h-hero .sub{font-size:var(--s-lead);max-width:38ch}
.h-hero .acts{display:flex;gap:14px;flex-wrap:wrap}
.h-hero .chips{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.h-hero .chips li{font-weight:800;font-size:var(--s-small);padding:8px 14px;border-radius:999px;background:rgba(235,225,206,.12);border:1px solid rgba(235,225,206,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.h-hero .chips b{color:var(--orange)}

/* titles marquee */
.marquee{background:var(--orange);color:var(--ink);overflow:hidden;padding-block:18px;border-block:2px solid var(--ink)}
.marquee .track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee span{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(24px,2.6vw,40px);white-space:nowrap;padding-right:40px}
.marquee span::after{content:"\2726";padding-left:40px;color:var(--white)}
@keyframes slide{to{transform:translateX(-50%)}}

/* the crew: no pin, just there */
.s-crew .scene-stage{min-height:0}
.s-crew .more{margin-top:28px}
.s-crew .more .link{color:var(--cream)}
.wall figure{transition:transform .35s var(--ease)}
.wall figure:hover{transform:translateY(-8px)}

/* the stage */
.stagesec{position:relative;background:var(--ink);color:var(--cream);padding-block:clamp(72px,9vw,140px)}
.stagesec .hd{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;margin-bottom:40px}
.stagesec h2{font-size:clamp(52px,7.5vw,130px);line-height:.88}
.stagesec h2 .o{color:var(--orange)}
.stagesec .hd p{font-size:var(--s-lead);max-width:58ch}
.stagesec .reel{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:min(70svh,640px)}
.stagesec .reel video{width:100%;height:100%;object-fit:cover;border-radius:18px;background:var(--ink2)}
.stagesec .reel video:first-child{grid-row:1/3}
.stagesec .acts-row{margin-top:32px}
.stagesec .acts-row .link{color:var(--cream)}
.stagesec .facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-weight:800}
.stagesec .facts b{color:var(--orange);font-family:"Anton",Impact,sans-serif;font-weight:400;font-size:28px;margin-right:8px}

@media (max-width:820px){
  .h-hero .copy{padding:112px var(--m) 40px;gap:18px}
  .h-hero h1{font-size:13vw}
  .h-hero .sub{font-size:var(--s-body)}
  .h-hero .acts .btn{flex:1 1 auto}
  .stagesec .hd{grid-template-columns:1fr}
  .stagesec .reel{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
  .stagesec .reel video{aspect-ratio:4/5;height:auto}
  .stagesec .reel video:first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){.marquee .track,.h-hero video{animation:none}}
@media (max-width:820px){.h-hero .chips li:nth-child(2),.h-hero .chips li:nth-child(3){display:none}.h-hero .eyebrow{font-size:13px}}

/* ---------- motion prototype (home-motion.js adds .hm) ---------- */
:root{--spring:cubic-bezier(.34,1.56,.64,1);--spring-soft:cubic-bezier(.22,1.3,.36,1)}

/* hero words spring up */
.hm .h-hero .split .w>span{animation-timing-function:var(--spring);animation-duration:1s}
  background:radial-gradient(circle,rgba(227,108,37,.45) 0%,rgba(227,108,37,.12) 35%,transparent 65%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.h-hero .copy{will-change:transform,opacity}

/* headings: letters drop in with a spring */
.letters .lw{display:inline-block;white-space:nowrap}
.hm .letters .ch{display:inline-block;opacity:0;transform:translateY(.6em) rotate(8deg) scale(.6);transition:transform .7s var(--spring),opacity .35s ease;transition-delay:calc(var(--i) * 28ms)}
.hm .letters.on .ch{opacity:1;transform:none}

/* stats band: three cards that pop in, then tilt toward the pointer */
.hm .proofs{perspective:1000px;padding-block:96px}
.hm .proofs>div{background:var(--cream);color:var(--ink);border-radius:28px;padding:32px;position:relative;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(7,53,57,.6),inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;transform:translateY(80px) scale(.82) rotateX(28deg);
  transition:transform 1s var(--spring),opacity .5s ease,box-shadow .3s;transition-delay:calc(var(--d) * 120ms)}
.hm .proofs>div.on{opacity:1;transform:translateY(0) scale(1) rotateX(0)}
.hm .proofs>div:nth-child(2){background:var(--ink);color:var(--cream)}
.hm .proofs>div:nth-child(2) b{color:var(--orange)}
.hm .proofs>div:nth-child(3){background:var(--maroon);color:var(--cream)}
@media (min-width:821px){
  .hm .proofs>div{filter:blur(10px)}
  .hm .proofs>div.on{filter:none;transition:transform 1s var(--spring),opacity .5s ease,filter .7s ease}
  .hm .tilt.on{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--spring-soft),opacity .5s,filter .7s}
  .hm .tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 55%)}
  .hm .tilt:hover::after{opacity:1}
  .hm .tilt:hover{box-shadow:0 40px 70px -30px rgba(7,53,57,.75)}
}

/* door tickets: spring in from alternating sides */
.hm a.door{opacity:0;transform:translateX(-60px) rotate(-4deg) scale(.92);transition:transform .9s var(--spring),opacity .45s ease}
.hm a.door:nth-child(even){transform:translateX(60px) rotate(4deg) scale(.92)}
.hm a.door.on{opacity:1;transform:none}
.hm a.door.on:hover{transform:translateY(-6px) rotate(-1deg)}
@media (min-width:821px){.hm a.door.tilt.on{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}

/* crew wall: slanted frames spring up one by one, then lean and slide with the scroll */
.hm .wall figure{opacity:0;transform:translateY(120px) rotate(-6deg);transition:transform .9s var(--spring),opacity .4s ease;transition-delay:calc(var(--d) * 55ms)}
.hm .wall figure.on{opacity:1;transform:translateY(var(--sy,0)) rotate(var(--sr,0deg));transition:transform .25s linear,opacity .4s ease}
.hm .wall figure.on:hover img{transform:translateY(-10px) rotate(-2deg) scale(1.04)}

/* reviews: cards rise in */
.hm .rcard{opacity:0;transform:translateY(30px) scale(.96);transition:transform .8s var(--spring),opacity .4s}
.hm .rcard.on{opacity:1;transform:none}

/* home crew: words on top, the whole faculty below */
.s-crew .scene-stage{grid-template-columns:1fr;gap:0}
.s-crew .txt{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;max-width:900px}

@media (max-width:820px){.s-crew .txt{grid-template-columns:1fr}}
.hm .pcard{opacity:0;transform:translateY(120px) rotate(-6deg);transition:transform .9s var(--spring),opacity .4s ease;transition-delay:calc(var(--d) * 55ms)}
.hm .pcard.on{opacity:1;transform:translateY(var(--sy,0)) rotate(var(--sr,0deg));transition:transform .25s linear,opacity .4s ease}
.hm .pcard.on:hover{transform:translateY(calc(var(--sy,0px) - 8px)) rotate(-2deg)}
/* phones: doors rise in (no sideways offset, so nothing spills off the screen) */
@media (max-width:820px){.hm a.door,.hm a.door:nth-child(even){transform:translateY(40px) scale(.96)}.hm a.door.on{transform:none}}