/* The home page only (owner 2026-11-01, the approved redesign). The shared parts — colours, fonts,
   header, buttons, store badges, footer — are in site.css. */
.home :is(h1,h2,h3,p){margin:0}
.home h2{font-size:clamp(34px,5vw,72px)}
.home .lead{color:var(--mist);max-width:36em}
.home section{padding:clamp(72px,11vw,160px) var(--gutter);position:relative}
.home .wrap{max-width:1320px;margin-inline:auto}

/* the header floats over the room until the page scrolls */
.home-page .nav{position:fixed;inset:0 0 auto}
.home-page .nav:not(.solid){background:linear-gradient(rgb(18 10 6 / 82%),transparent);box-shadow:none;backdrop-filter:none}

/* reveal */
.js .r{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js .r.in{opacity:1;transform:none;filter:none}

/* hero */
.home .hero{--ch:min(38svh,16vw);--th:clamp(110px,13.2vw,230px);min-height:100svh;padding:84px var(--gutter) calc(var(--ch) + 3vw)!important;display:grid;justify-items:center;align-items:start;text-align:center;isolation:isolate;overflow:clip}
.hero-film{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.hero-film .room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(rgb(12 7 4 / 86%) 8%,rgb(12 7 4 / 55%) 42%,rgb(12 7 4 / 10%) 68%)}
.hero-copy{position:relative;z-index:3;max-width:860px}
.hero-copy .badges{justify-content:center}
.hero-copy .lead{margin-inline:auto}
.hero h1{font-size:clamp(38px,5.2vw,82px);line-height:1.3;margin-bottom:10px}
.cast-row{position:absolute;z-index:1;left:0;right:0;bottom:calc(var(--th) - 11vw);display:flex;justify-content:center;align-items:flex-end}
.p{position:relative;display:block;margin-inline:-.55vw;transition:transform .45s cubic-bezier(.2,1.5,.4,1);transform-origin:50% 100%;cursor:pointer}
.p img{display:block;height:calc(var(--ch)*var(--s));width:auto;max-width:none;filter:drop-shadow(0 10px 18px rgb(0 0 0 / 55%))}
.js .p img{animation:seat .9s calc(.5s + var(--i)*.1s) cubic-bezier(.2,1.2,.4,1) backwards,sway calc(4.2s + var(--i)*.4s) calc(1.5s + var(--i)*.3s) ease-in-out infinite}
@keyframes seat{from{transform:translateY(105%)}}
@keyframes sway{50%{transform:translateY(-5px) rotate(calc((var(--i) - 2.5)*.35deg))}}
.p:hover,.p.on{transform:translateY(-22px) scale(1.06);z-index:2}
.front-table{position:absolute;z-index:2;left:0;bottom:0;width:100%;height:var(--th);object-fit:cover;object-position:50% 0;pointer-events:none;filter:drop-shadow(0 -8px 22px rgb(0 0 0 / 55%))}
.hero h1 .w{display:inline-block}
.js .hero h1 .w{opacity:0;filter:blur(10px);transform:translateY(.5em) rotate(-3deg);animation:word .9s var(--ease) forwards;animation-delay:calc(.25s + var(--i)*.13s)}
@keyframes word{to{opacity:1;filter:none;transform:none}}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lead{color:#e6d9c4;margin-bottom:28px}
.hero .more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}
.hero .more .btn.ghost{background:#787878;box-shadow:none;color:#fff}
.hero .more .btn.ghost:hover{background:#6a6a6a;box-shadow:none}

/* mascot */
.m{position:absolute;pointer-events:none;height:auto;filter:drop-shadow(0 22px 26px rgb(0 0 0 / 55%))}
.fan-box{position:relative}
.fan-box .fan{transform:translateY(-14%)}
.m-sit{height:74%;width:auto;left:50%;translate:-50% 0;bottom:-9%;z-index:2}
.m-card{z-index:1;height:clamp(300px,40vw,600px);width:auto;left:7vw;top:clamp(20px,5vw,90px);opacity:0}
.slam.hit .m-card{animation:popup .7s .3s cubic-bezier(.2,1.25,.4,1) forwards}
.reel-box{position:relative;max-width:360px;margin-inline:auto;width:100%}
@keyframes popup{from{opacity:0;transform:translateY(46%) rotate(-5deg)}to{opacity:1;transform:rotate(-3deg)}}

/* scroll progress */
.prog{position:fixed;inset:0 0 auto;height:3px;z-index:50;background:var(--coral);transform:scaleX(0);transform-origin:right;pointer-events:none}
[dir=ltr] .prog{transform-origin:left}

/* strip */
.strip{background:var(--coral);transform:rotate(-1.6deg) scale(1.04);margin-block:-28px;position:relative;z-index:3;overflow:hidden;box-shadow:0 18px 50px rgb(0 0 0 / 50%);direction:ltr}
.strip div{display:flex;width:max-content;animation:marquee 34s linear infinite}
.strip.off div{animation-play-state:paused}
.strip span{font:800 clamp(26px,3.4vw,46px)/1 var(--disp);padding:16px 26px;white-space:nowrap;color:#fff}
[dir=rtl] .strip span{direction:rtl}
.strip span:nth-child(even){color:#5b0c10}
@keyframes marquee{to{transform:translateX(-50%)}}

/* slam */
.slam{min-height:82vh;display:grid;place-items:center;overflow:clip;background:#0b0604;padding:clamp(80px,10vw,190px) 0;position:relative}
.slam-b{position:relative;z-index:2;margin-top:clamp(70px,20vw,310px);width:110%;margin-inline:-5%;background:var(--coral);text-align:center;padding:clamp(14px,3vw,36px) 0 clamp(18px,3vw,40px);transform:rotate(-5deg);box-shadow:0 30px 90px rgb(240 91 71 / 45%),0 0 0 2px #ffd9c9 inset}
.slam-b b{display:block;font:800 clamp(84px,13vw,210px)/1.25 var(--disp);color:#fff;text-shadow:0 6px 0 #a8271a}
.slam-b small{font:800 clamp(20px,2.6vw,38px)/1 var(--disp);color:#3b0a08}
.js .slam-b{opacity:0}
.slam.hit .slam-b{animation:slam .55s cubic-bezier(.2,1.5,.4,1) forwards}
.slam.hit{animation:shake .5s .28s linear}
@keyframes slam{0%{opacity:0;transform:rotate(-12deg) scale(2.6)}55%{opacity:1}100%{opacity:1;transform:rotate(-5deg) scale(1)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-7px,5px)}40%{transform:translate(6px,-5px)}60%{transform:translate(-4px,3px)}80%{transform:translate(2px,-2px)}}

/* what is */
.what{background:linear-gradient(var(--bg),rgb(18 10 6 / 72%) 22%,rgb(18 10 6 / 72%) 78%,var(--bg)),url(/assets/v2/majlis.jpg) center/cover no-repeat}
.what .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.fan{--p:0;height:clamp(330px,38vw,540px);position:relative;direction:ltr}
.fan img{--w:clamp(110px,13vw,190px);--h:0px;position:absolute;left:50%;bottom:6%;width:var(--w);aspect-ratio:2/3;object-fit:cover;border-radius:calc(var(--w)*.06);box-shadow:0 14px 30px rgb(0 0 0 / 55%);margin-left:calc(var(--w)/-2);transform-origin:50% 130%;transform:rotate(calc((var(--i) - 3.5)*12deg*var(--p))) translateY(calc(-14px*var(--p)*var(--lift) + var(--h)));transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){.fan img:hover{--h:-34px}}
.ladder{display:flex;gap:8px;margin-top:26px;flex-wrap:wrap;padding:0}
.ladder li{list-style:none;font:800 clamp(17px,1.6vw,22px) var(--disp);padding:10px 18px;border-radius:12px;background:var(--teal);opacity:.35;transition:opacity .4s,transform .4s var(--ease),background .4s}
.ladder li.lit{opacity:1;transform:translateY(-3px)}
.ladder li:last-child.lit{background:var(--coral)}

/* modes */
.modes{overflow:clip}
.modes .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,90px);align-items:center}
.seg{display:inline-flex;background:var(--wood);border-radius:999px;padding:5px;margin-block:28px 22px}
.seg button{all:unset;cursor:pointer;padding:9px 24px;min-height:28px;border-radius:999px;font:700 18px var(--disp);color:var(--mist);transition:background .3s,color .3s}
.seg button[aria-pressed=true]{background:var(--gold);color:#23140a}
.seg button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.stats{display:flex;gap:clamp(24px,4vw,56px)}
.stats b{font-variant-numeric:tabular-nums;display:block;font:800 clamp(44px,5.4vw,76px)/1.05 var(--disp);color:var(--amber)}
.stats small{font-size:16px;color:var(--mist)}
.stage{position:relative;aspect-ratio:16/9;margin-inline:calc(var(--gutter)*-.6);-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 72%,transparent);mask-image:radial-gradient(50% 50% at 50% 50%,#000 72%,transparent)}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.stage .t6{opacity:0;transform:scale(1.05)}
.stage[data-n="6"] .t6{opacity:1;transform:none}
.stage[data-n="6"] .t4{opacity:0;transform:scale(.96)}
.table-note{text-align:center;color:var(--mist);font:700 clamp(15px,1.4vw,19px) var(--disp)}

/* cast wall */
.home .cast{padding-inline:0;overflow:clip;background:linear-gradient(var(--bg),#0b0604)}
.cast-head{display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between;padding-inline:var(--gutter);margin-bottom:44px}
.rows{display:grid;gap:clamp(10px,1.4vw,18px);direction:ltr}
.row{display:flex;width:max-content;gap:clamp(10px,1.4vw,18px);animation:marquee var(--t,70s) linear infinite}
.row.rev{animation-direction:reverse}
.rows.off .row{animation-play-state:paused}
@media (hover:hover) and (pointer:fine) and (min-width:901px){.rows:hover .row{animation-play-state:paused}}
.row img{width:clamp(96px,11vw,170px);aspect-ratio:1;border-radius:18px;object-fit:cover;outline:1px solid rgb(255 255 255 / 10%);outline-offset:-1px;transition:transform .35s var(--ease)}
.row.backs img{width:clamp(110px,12vw,190px);aspect-ratio:2/3;border-radius:12px}
@media (hover:hover) and (pointer:fine){.row img:hover{transform:scale(1.1) rotate(-2deg);position:relative;z-index:2}}

/* shots */
.shots{background:var(--bg2)}
.shot-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.4vw,32px);margin-top:44px}
.shot{margin:0;transition:transform .5s var(--ease)}
.shot:hover{transform:translateY(-8px)}
.shot.wide{grid-column:1/-1}
.shot video{display:block;background:#0b1b20;outline:1px solid rgb(255 255 255 / 10%);outline-offset:-1px;width:100%;aspect-ratio:2868/1320;object-fit:cover;border-radius:16px;box-shadow:0 20px 50px rgb(0 0 0 / 50%),0 0 0 1px var(--line)}
.shot figcaption{color:var(--mist);font-size:.88em;margin-top:12px;line-height:1.6}

/* learn index */
.index{list-style:none;padding:0;margin:40px 0 0;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;gap:16px;align-items:center;padding:clamp(16px,2vw,26px) 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .35s var(--ease),color .3s}
.index a:hover{padding-inline-start:18px;color:var(--amber)}
.index strong{font:700 clamp(23px,2.8vw,40px)/1.2 var(--disp)}
.index span{color:var(--mist)}
.index i{font-style:normal;font-size:24px;color:var(--gold);transition:transform .35s var(--ease)}
.index a:hover i{transform:translateX(-8px)}
[dir=ltr] .index a:hover i{transform:translateX(8px)}

/* final */
.final{background:linear-gradient(#0b0604,rgb(11 6 4 / 55%) 30%,rgb(11 6 4 / 30%) 70%,#0b0604),url(/assets/v2/skyline.webp) center bottom/cover no-repeat,#0b0604}
.final .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(250px,4fr);gap:clamp(32px,6vw,90px);align-items:center}
.final h2{margin-bottom:18px}
.final .badges{margin-top:28px}
.final .rules{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:.92em;color:var(--mist)}
.final .rules a{color:var(--amber)}
.reel{position:relative;max-width:360px;margin-inline:auto;width:100%;border-radius:30px;overflow:hidden;background:#000;box-shadow:0 0 0 7px #1d1410,0 0 0 8px var(--line),0 40px 90px rgb(0 0 0 / 70%)}
.reel video{width:100%;aspect-ratio:9/16;object-fit:cover}
.sound{all:unset;position:absolute;top:14px;inset-inline-end:14px;min-height:40px;padding:0 16px;display:flex;align-items:center;gap:7px;border-radius:999px;background:rgb(0 0 0 / 62%);backdrop-filter:blur(8px);font:700 15px var(--disp);cursor:pointer}
.sound:focus-visible{outline:3px solid var(--amber)}

@media (max-width:900px){
  .home .hero{--ch:23vw;--th:110px;padding:84px var(--gutter) calc(var(--ch) + 90px)}
  .cast-row{bottom:62px}
  .p{margin-inline:-2.8vw;cursor:default;transition:none}
  .p:hover,.p.on{transform:none;z-index:auto}
  .js .p img{animation:none;transition:transform var(--dur,5s) ease-in-out;will-change:transform}
  .hero .lead{font-size:16px;margin-bottom:18px}
  .hero-copy{max-width:none}
  .m-sit{height:70%;bottom:-10%}
  .m-card{height:300px;left:-2%;top:14px}
  .slam-b{text-align:start;padding-inline-start:9%;margin-top:112px}
  .slam-b b{font-size:72px}
  .what .wrap,.modes .wrap,.final .wrap{grid-template-columns:minmax(0,1fr)}
  .what .fan,.modes .table-box{order:2}
  .shot-row{grid-template-columns:minmax(0,1fr)}
  .index a{grid-template-columns:minmax(0,1fr) 28px}
  .index span{grid-row:2;grid-column:1}
  .index i{grid-row:1/3;grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .js .slam-b{opacity:1}
  .m-card{opacity:1}
  .js .r,.js .hero h1 .w{opacity:1;transform:none;filter:none}
}