/* Galeri pentas: gelap, lampu suasana di belakang, dinding foto responsif. */
body.is-stage{background:var(--ink);color:#fff}
body.is-stage.gated{overflow:hidden}
.stage{position:relative;min-height:100vh;padding-bottom:72px;--lvl1:.5;--lvl2:.5;--lvl3:.5;--sx:50%;--sy:30%}
.stage .wrap{position:relative;z-index:2}

/* Lampu */
.lights{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--ink)}
.lt{position:absolute;border-radius:50%;filter:blur(70px);will-change:opacity,transform;mix-blend-mode:screen}
.lt1{width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;background:radial-gradient(circle,var(--l1),transparent 65%);opacity:calc(.12 + var(--lvl1)*.7);transform:scale(calc(.9 + var(--lvl1)*.35))}
.lt2{width:60vmax;height:60vmax;right:-22vmax;top:10vmax;background:radial-gradient(circle,var(--l2),transparent 65%);opacity:calc(.12 + var(--lvl2)*.7);transform:scale(calc(.9 + var(--lvl2)*.35))}
.lt3{width:55vmax;height:55vmax;left:15vmax;bottom:-28vmax;background:radial-gradient(circle,var(--l3),transparent 65%);opacity:calc(.1 + var(--lvl3)*.7);transform:scale(calc(.9 + var(--lvl3)*.35))}
.spot{position:absolute;inset:0;background:radial-gradient(circle 260px at var(--sx) var(--sy),rgba(255,255,255,.2),transparent 70%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s}
.stage.spot-on .spot{opacity:1}
.flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.14),transparent 65%);opacity:0}
.flash.pulse{animation:flash .45s ease-out}
@keyframes flash{from{opacity:1}to{opacity:0}}
.stage.lights-off .lt,.stage.lights-off .spot,.stage.lights-off .flash{opacity:0!important}
.stage.lights-off .lights{background:#05081A}

/* Pintu masuk */
.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(5,8,26,.78);backdrop-filter:blur(10px)}
.gate[hidden]{display:none}
.gate-card{max-width:560px;text-align:center;padding:clamp(24px,5vw,44px);border:2px solid rgba(255,255,255,.85);border-radius:10px;background:rgba(10,15,36,.82);box-shadow:0 0 0 6px rgba(35,71,232,.55),0 30px 80px rgba(0,0,0,.6)}
.gate-kicker{margin:0;font:800 1.2rem var(--f-disp);color:var(--amber)}
.gate-card h1{font:900 clamp(2.4rem,8vw,4rem)/.95 var(--f-disp);margin:.2em 0 .3em;text-wrap:balance}
.gate-card p{color:#DCE2FF}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:1.4rem 0 .6rem!important}
.gate-note{font-size:.85rem;margin:0;color:#98A0C8!important}
.btn-glow{box-shadow:0 0 28px rgba(255,184,28,.55)}
.btn-ghost-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost-d:hover{background:#fff;color:var(--ink)}

/* Kepala */
.stage-head{padding-top:clamp(24px,4vw,48px);padding-bottom:16px}
.stage-title:focus{outline:none}
.stage-title{font:900 clamp(3rem,10vw,7.5rem)/.9 var(--f-disp);margin:.1em 0 .25em;text-wrap:balance;text-shadow:0 0 40px color-mix(in srgb,var(--l1) 60%,transparent)}
.stage-desc{max-width:60ch;color:#DCE2FF;font-size:1.1rem;margin:.5rem 0 0}
.album-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.2rem}
.album-nav a{color:#fff;border:2px solid rgba(255,255,255,.5);padding:6px 14px;border-radius:99px;text-decoration:none;font-weight:600;font-size:.9rem}
.album-nav a[aria-current]{background:#fff;color:var(--ink);border-color:#fff}
.stage .crumb a{color:var(--amber)}

/* Dek kawalan */
.deck{position:sticky;top:61px;z-index:20;margin:14px 0 22px;background:rgba(10,15,36,.72);backdrop-filter:blur(14px);border-block:1px solid rgba(255,255,255,.18)}
.deck-in{display:flex;align-items:center;gap:14px;padding-block:10px;flex-wrap:wrap}
.dbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;cursor:pointer;flex:none}
.dbtn:hover{background:#fff;color:var(--ink)}
.dbtn svg{fill:currentColor}
.dbtn .i-pause{display:none}
.dbtn[aria-pressed=true]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.dbtn[aria-pressed=true] .i-play{display:none}.dbtn[aria-pressed=true] .i-pause{display:block}
.dbtn-txt{width:auto;border-radius:99px;padding:0 16px;font:700 .9rem var(--f-body)}
#lights[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
#lights[aria-pressed=false]{background:transparent;color:#fff}
.now{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 180px;max-width:320px}
.now-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.now-t strong,.now-t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-t small{color:#B9C0E6}
.eq{display:flex;align-items:flex-end;gap:2px;height:20px;flex:none}
.eq i{width:4px;height:4px;background:var(--amber);border-radius:1px}
.eq.on i{animation:eq .8s ease-in-out infinite alternate}
.eq.on i:nth-child(2){animation-delay:-.3s}.eq.on i:nth-child(3){animation-delay:-.6s}.eq.on i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:4px}to{height:20px}}
.vol input{width:96px;accent-color:var(--amber)}
.chips{display:flex;gap:8px;margin-left:auto;overflow-x:auto;max-width:100%;padding:2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.fchip{flex:none;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45);border-radius:99px;padding:6px 14px;font:600 .88rem var(--f-body);cursor:pointer}
.fchip b{font-weight:700;opacity:.7;margin-left:4px}
.fchip:hover{border-color:#fff}
.fchip[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
@media (max-width:640px){.chips{margin-left:0;flex:1 0 100%}.vol{display:none}.now{flex:1 1 0}.deck{top:58px}.deck-in{gap:10px}}

/* Dinding foto */
.wall{list-style:none;margin:0;padding:0;column-width:260px;column-gap:14px}
.shot{break-inside:avoid;margin:0 0 14px}
.shot-btn{position:relative;display:block;width:100%;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--ink-2);cursor:zoom-in;color:#fff;text-align:left;font:inherit;outline-offset:3px}
.shot-btn img{width:100%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shot-btn::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 2px rgba(255,255,255,0);transition:box-shadow .25s}
.shot-btn:hover img,.shot-btn:focus-visible img{transform:scale(1.05)}
.shot-btn:hover::after,.shot-btn:focus-visible::after{box-shadow:inset 0 0 0 3px var(--l3)}
.shot-cap{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:34px 12px 12px;background:linear-gradient(transparent,rgba(5,8,26,.92));line-height:1.25}
.shot-cap strong{font-size:.98rem}
.shot-cap small{color:#C9CFEA;font-size:.8rem;display:none}
@media (hover:hover){.shot-cap{transform:translateY(40%);opacity:0;transition:transform .3s,opacity .3s}.shot-btn:hover .shot-cap,.shot-btn:focus-visible .shot-cap{transform:none;opacity:1}.shot-cap small{display:block}}
.role{font-size:.72rem;font-weight:800;padding:1px 9px;border-radius:99px}
.role-pelajar{background:var(--blue);color:#fff}
.role-penyelia{background:var(--amber);color:var(--ink)}
.role-acara{background:var(--teal);color:var(--ink)}
.role-antarabangsa{background:#fff;color:var(--ink)}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;background:rgba(3,5,18,.94)}
.lb[hidden]{display:none}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:100%;padding:56px 0 20px}
.lb-fig img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 0 60px color-mix(in srgb,var(--l2) 45%,transparent)}
.lb-fig figcaption{margin-top:14px;text-align:center;padding-inline:12px;max-width:640px;line-height:1.4}
.lb-fig figcaption strong{display:block;font-size:1.2rem}
.lb-fig figcaption a{color:var(--amber)}
.lb-x,.lb-n{background:transparent;border:0;color:#fff;cursor:pointer;font-size:2.6rem;line-height:1;width:56px;height:56px;border-radius:50%}
.lb-x{position:absolute;right:10px;top:10px;z-index:2}
.lb-n{justify-self:center}
.lb-x:hover,.lb-n:hover{background:rgba(255,255,255,.16)}
@media (max-width:640px){.lb{grid-template-columns:1fr}.lb-n{position:absolute;bottom:14px;z-index:2;background:rgba(255,255,255,.14)}.lb-prev{left:14px}.lb-next{right:14px}.lb-fig{padding-bottom:84px}}

@media (prefers-reduced-motion:reduce){.eq.on i{animation:none;height:12px}.flash.pulse{animation:none}.shot-btn img{transition:none}}

@media (max-width:640px){.wall{column-width:150px;column-gap:10px}.shot{margin-bottom:10px}.shot-cap{padding:24px 8px 8px}.shot-cap strong{font-size:.85rem}}