/*
 * ASONE ENGAGEMENT DAY — tampilan layar LED 16:9
 * Kanvas desain 1920 x 1080 yang diskalakan otomatis ke ukuran layar.
 * Tema: "hutan malam" — motif buku panduan (dedaunan, burung macaw, logo DHL, font Delivery)
 * dalam palet malam untuk Gala Dinner, dengan aksen neon untuk sesi undian.
 */

/* Font DHL "Delivery" dipakai bila terpasang di komputer yang menayangkan; selain itu memakai font cadangan. */
@font-face { font-family: "AZ Head"; font-weight: 900; font-style: normal;
  src: local("Delivery Condensed Black"), local("Delivery-CondensedBlack"), local("Delivery Cd Blk"), local("Delivery Condensed Black Regular"); }
@font-face { font-family: "AZ Light"; font-weight: 300; font-style: normal;
  src: local("Delivery Condensed Light"), local("Delivery-CondensedLight"), local("Delivery Cd Lt"), local("Delivery Condensed Light Regular"); }

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { cursor: default; -webkit-font-smoothing: antialiased; }
body.idle { cursor: none; }

#stage {
  --n0: #020b07; --n1: #05160e; --n2: #0a2417; --n3: #113725;
  --cream: #fdebdd; --cream2: rgba(253, 235, 221, .74); --cream3: rgba(253, 235, 221, .46);
  --yellow: #ffcc00; --red: #d40511; --mint: #7cffb2; --cyan: #58e6ff; --gold: #ffd76a; --pink: #ff6fb5;
  --leaf: #93be8f; --lime: #c5cf86;
  --accent: var(--yellow); --accent2: var(--mint);
  --fh: "AZ Head", "Bahnschrift", "Impact", "Arial Narrow", sans-serif;
  --fl: "AZ Light", "Bahnschrift", "Segoe UI", "Arial Narrow", sans-serif;
  --ft: "Delivery", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fm: "Cascadia Mono", Consolas, "Courier New", monospace;
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; margin: -540px 0 0 -960px;
  transform: scale(var(--s, 1)); transform-origin: 50% 50%;
  overflow: hidden; background: var(--n0); color: var(--cream);
  font-family: var(--ft); user-select: none;
}
#stage * { box-sizing: border-box; }
.fh { font-family: var(--fh); font-weight: 900; font-stretch: 75%; }
.fl { font-family: var(--fl); font-weight: 300; font-stretch: 75%; }

/* ================================================================ latar */

.layer { position: absolute; inset: 0; pointer-events: none; }
.bg-grad {
  background:
    radial-gradient(1500px 760px at 50% 112%, rgba(58, 132, 82, .62), transparent 62%),
    radial-gradient(1000px 640px at 8% -6%, rgba(28, 92, 60, .72), transparent 66%),
    radial-gradient(1000px 640px at 94% -2%, rgba(24, 78, 66, .62), transparent 66%),
    linear-gradient(180deg, #020b07 0%, #05170e 46%, #0b2a1a 100%);
}
.wash { position: absolute; width: 1180px; opacity: .2; mix-blend-mode: screen; will-change: transform; }
.wash.w1 { left: -260px; top: -300px; animation: washA 46s ease-in-out infinite alternate; }
.wash.w2 { right: -320px; top: -220px; width: 1280px; opacity: .17; animation: washB 58s ease-in-out infinite alternate; }
.wash.w3 { left: 420px; top: 240px; width: 1000px; opacity: .1; animation: washA 70s ease-in-out infinite alternate-reverse; }
@keyframes washA { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(120px, 60px) rotate(16deg) scale(1.14); } }
@keyframes washB { from { transform: translate(0, 0) rotate(8deg) scale(1.05); } to { transform: translate(-140px, 80px) rotate(-12deg) scale(1.2); } }

/* nuansa per suasana (mood) */
.tint { opacity: 0; transition: opacity 1.4s ease; }
.tint-neon { background:
  radial-gradient(1200px 760px at 74% 26%, rgba(40, 170, 210, .26), transparent 62%),
  radial-gradient(1000px 700px at 14% 78%, rgba(60, 255, 170, .14), transparent 62%),
  linear-gradient(180deg, rgba(0, 10, 18, .55), rgba(0, 14, 10, .25)); }
.tint-show { background:
  radial-gradient(1100px 720px at 80% 16%, rgba(214, 60, 160, .30), transparent 62%),
  radial-gradient(1100px 760px at 10% 70%, rgba(70, 90, 230, .26), transparent 62%),
  linear-gradient(180deg, rgba(14, 4, 26, .55), rgba(6, 6, 22, .30)); }
.tint-stage { background:
  radial-gradient(900px 820px at 50% 42%, rgba(255, 196, 110, .12), transparent 60%),
  linear-gradient(180deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .52)); }
.tint-gold { background:
  radial-gradient(1300px 700px at 50% -6%, rgba(255, 196, 70, .34), transparent 62%),
  radial-gradient(900px 600px at 50% 110%, rgba(255, 170, 40, .16), transparent 62%); }
#stage[data-mood="neon"] .tint-neon, #stage[data-mood="show"] .tint-show,
#stage[data-mood="stage"] .tint-stage, #stage[data-mood="gold"] .tint-gold { opacity: 1; }
#stage[data-mood="neon"] { --accent: var(--mint); --accent2: var(--cyan); }
#stage[data-mood="show"] { --accent: var(--pink); --accent2: var(--cyan); }
#stage[data-mood="gold"] { --accent: var(--gold); --accent2: var(--yellow); }

/* sorot cahaya lambat */
.rays { opacity: 0; transition: opacity 1.6s ease; mix-blend-mode: screen; overflow: hidden; }
.rays::before { content: ""; position: absolute; left: 50%; top: -420px; width: 2800px; height: 2800px; margin-left: -1400px;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 226, 150, .16) 0deg 5deg, transparent 5deg 17deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
          mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
  animation: spin 150s linear infinite; }
#stage[data-rays="on"] .rays { opacity: .8; }

/* lantai grid perspektif (suasana neon) */
.gridfloor { opacity: 0; transition: opacity 1.2s ease; perspective: 620px; perspective-origin: 50% 0%; top: 560px; overflow: hidden; }
.gridfloor::before { content: ""; position: absolute; left: -60%; right: -60%; top: 0; height: 1200px;
  background-image: linear-gradient(rgba(124, 255, 178, .34) 2px, transparent 2px), linear-gradient(90deg, rgba(88, 230, 255, .28) 2px, transparent 2px);
  background-size: 96px 96px; transform: rotateX(72deg); transform-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
  animation: gridMove 1.8s linear infinite; }
@keyframes gridMove { to { background-position: 0 96px, 0 0; } }
#stage[data-mood="neon"] .gridfloor { opacity: .55; }

.vignette { background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(0, 0, 0, .58) 100%); }
.scan { opacity: 0; transition: opacity 1s; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px); mix-blend-mode: overlay; }
#stage[data-mood="neon"] .scan { opacity: 1; }

canvas.fxc { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }

/* dedaunan (dari sampul buku panduan) */
.foliage { position: absolute; pointer-events: none; background: url(img/foliage.webp) 50% 100% / 100% 100% no-repeat;
  transform-origin: 50% 100%; transition: translate 1.3s cubic-bezier(.2, .8, .2, 1), filter 1.2s ease, opacity 1.2s ease; will-change: transform; }
.foliage.back { left: -230px; width: 2380px; height: 755px; bottom: -205px; scale: -1 1;
  filter: brightness(.26) saturate(.7) blur(3px); opacity: .95; animation: swayB 14s ease-in-out infinite alternate; }
.foliage.front { left: -90px; width: 2100px; height: 666px; bottom: -232px;
  filter: brightness(.66) saturate(1.06) drop-shadow(0 -8px 30px rgba(0, 0, 0, .5)); animation: swayF 10s ease-in-out infinite alternate; }
@keyframes swayF { from { transform: rotate(-.5deg) skewX(-.7deg); } to { transform: rotate(.5deg) skewX(.8deg); } }
@keyframes swayB { from { transform: rotate(.6deg) skewX(.9deg); } to { transform: rotate(-.5deg) skewX(-.8deg); } }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(1, 6, 4, .82)); transition: opacity 1.2s; }
#stage[data-foliage="low"] .foliage.front { translate: 0 215px; }
#stage[data-foliage="low"] .foliage.back { translate: 0 150px; }
#stage[data-foliage="peek"] .foliage.front { translate: 0 345px; filter: brightness(.4) saturate(.9); }
#stage[data-foliage="peek"] .foliage.back { translate: 0 300px; }
#stage[data-foliage="none"] .foliage { translate: 0 720px; opacity: 0; }
#stage[data-foliage="none"] .ground { opacity: .4; }
#stage[data-mood="neon"] .foliage.front { filter: brightness(.34) saturate(1.5) hue-rotate(18deg) drop-shadow(0 0 22px rgba(124, 255, 178, .55)); }
#stage[data-mood="show"] .foliage.front { filter: brightness(.38) saturate(1.2) hue-rotate(96deg) drop-shadow(0 0 22px rgba(255, 111, 181, .4)); }
#stage[data-mood="stage"] .foliage.front { filter: brightness(.2) saturate(.6); }
#stage[data-mood="gold"] .foliage.front { filter: brightness(.52) saturate(.9) sepia(.35) drop-shadow(0 0 20px rgba(255, 204, 0, .3)); }

/* identitas */
.brand-center, .brand-corner { position: absolute; opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.brand-center { left: 50%; top: 52px; width: 288px; margin-left: -144px; transform: translateY(-30px); }
.brand-center img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 16px 50px rgba(0, 0, 0, .5), 0 0 70px rgba(255, 204, 0, .2); }
.brand-corner { left: 64px; top: 44px; display: flex; align-items: center; gap: 22px; transform: translateX(-30px); }
.brand-corner img { display: block; width: 156px; border-radius: 9px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.brand-corner .bt { border-left: 2px solid rgba(253, 235, 221, .35); padding-left: 22px; line-height: 1; }
.brand-corner .bt b { display: block; font: 900 31px/1 var(--fh); font-stretch: 75%; letter-spacing: .03em; color: var(--cream); }
.brand-corner .bt span { display: block; margin-top: 6px; font: 300 19px/1 var(--fl); font-stretch: 75%; text-transform: uppercase; letter-spacing: .24em; color: var(--cream2); }
#stage[data-brand="center"] .brand-center, #stage[data-brand="corner"] .brand-corner { opacity: 1; transform: none; }

/* ============================================================== scene */

#scenes { position: absolute; inset: 0; }
.scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.scene.on { opacity: 1; transition: opacity .7s ease; }
.scene.off { opacity: 0; transform: scale(1.03); filter: blur(6px); transition: opacity .45s ease, transform .5s ease, filter .5s ease; }

.scene .a { opacity: 0; }
.scene.on .a { animation: aRise .95s cubic-bezier(.16, .84, .24, 1) both; animation-delay: calc(var(--d, 0) * 1s + .2s); }
.scene.on .a.pop { animation-name: aPop; animation-timing-function: cubic-bezier(.2, 1.2, .3, 1); }
.scene.on .a.fade { animation-name: aFade; }
.scene.on .a.left { animation-name: aLeft; }
.scene.on .a.right { animation-name: aRight; }
.scene.on .a.drop { animation-name: aDrop; }
@keyframes aRise { from { opacity: 0; transform: translateY(54px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes aPop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } }
@keyframes aFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aLeft { from { opacity: 0; transform: translateX(-90px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes aRight { from { opacity: 0; transform: translateX(90px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes aDrop { from { opacity: 0; transform: translateY(-70px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.split .ch { display: inline-block; opacity: 0; white-space: pre; }
.scene.on .split .ch { animation: chIn .75s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(var(--i) * 36ms + var(--d, 0) * 1s + .25s); }
@keyframes chIn { from { opacity: 0; transform: translateY(70px) rotate(8deg) scale(.7); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

.kicker { font: 300 44px/1 var(--fl); font-stretch: 75%; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); }
.h-mega, .h-xl, .h-lg, .h-md { font-family: var(--fh); font-weight: 900; font-stretch: 75%; text-transform: uppercase; line-height: .92; letter-spacing: .012em; margin: 0; color: var(--cream); }
.h-mega { font-size: 210px; } .h-xl { font-size: 160px; } .h-lg { font-size: 116px; } .h-md { font-size: 78px; }
.sub { font: 300 50px/1.1 var(--fl); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--cream2); }
.hl { color: var(--yellow); }
.pill { display: inline-flex; align-items: center; gap: 16px; padding: 14px 38px 12px; border-radius: 999px; border: 2px solid rgba(253, 235, 221, .36);
  background: rgba(3, 14, 9, .42); font: 300 36px/1 var(--fl); font-stretch: 75%; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.pill b { font: 900 36px/1 var(--fh); font-stretch: 75%; letter-spacing: .08em; color: var(--accent); }
.rule { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: 0 50%; }
.scene.on .rule { animation: ruleIn 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 1s + .2s); }
@keyframes ruleIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* burung macaw */
.bird { position: absolute; pointer-events: none; will-change: transform; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45)); }
.bird img { display: block; width: 100%; animation: flap 2.6s ease-in-out infinite; transform-origin: 50% 60%; }
.bird.b2 img { animation-duration: 3.1s; animation-delay: -.8s; }
@keyframes flap { 0%, 100% { transform: translateY(0) rotate(-2deg) scaleY(1); } 50% { transform: translateY(-18px) rotate(2.5deg) scaleY(.94); } }
.scene.on .bird.in-r { animation: birdInR 2.6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 1s); }
.scene.on .bird.in-l { animation: birdInL 2.9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes birdInR { from { opacity: 0; transform: translate(700px, -260px) rotate(-14deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes birdInL { from { opacity: 0; transform: translate(-900px, 240px) rotate(10deg) scale(.7); } to { opacity: 1; transform: none; } }
.bird.fly { left: -420px; top: 240px; width: 360px; animation: birdFly 7s linear both; }
.bird.fly.b2 { top: 420px; width: 300px; animation-duration: 8.4s; animation-delay: .9s; }
@keyframes birdFly {
  0% { transform: translate(0, 120px) rotate(-8deg); } 30% { transform: translate(760px, -60px) rotate(-4deg); }
  60% { transform: translate(1500px, 40px) rotate(3deg); } 100% { transform: translate(2500px, -200px) rotate(-6deg); } }

/* ---------------------------------------------------- lockup (standby / opening / photo / closing) */
.lockup { position: absolute; left: 0; right: 0; text-align: center; }
.lockup .title { font: 900 172px/.9 var(--fh); font-stretch: 75%; letter-spacing: .014em; margin: 0; white-space: nowrap; text-transform: uppercase; color: var(--cream);
  text-shadow: 0 8px 0 rgba(0, 0, 0, .22), 0 0 90px rgba(255, 220, 140, .26); }
.lockup .kicker { margin-bottom: 26px; }
.lockup .tag { margin-top: 34px; }
.lockup .date { margin-top: 26px; font: 300 44px/1 var(--fl); font-stretch: 75%; letter-spacing: .26em; color: var(--cream2); text-transform: uppercase; }

.s-standby .lockup { top: 192px; }
.s-standby .foot { position: absolute; left: 0; right: 0; top: 548px; display: flex; justify-content: center; align-items: center; gap: 22px;
  font: 300 34px/1 var(--fl); font-stretch: 75%; letter-spacing: .34em; color: var(--cream2); }
.s-standby .foot .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 20px var(--yellow); animation: pulse 1.6s ease-in-out infinite; }
.s-standby .foot .clock { font: 900 40px/1 var(--fh); font-stretch: 75%; letter-spacing: .08em; color: var(--cream); }

.s-opening .lockup { top: 178px; }
.s-opening .mc { position: absolute; left: 0; right: 0; top: 520px; text-align: center; }
.s-opening .mc .lbl { font: 300 26px/1 var(--fl); font-stretch: 75%; letter-spacing: .5em; color: var(--yellow); }
.s-opening .mc .who { margin-top: 10px; font: 900 58px/1 var(--fh); font-stretch: 75%; letter-spacing: .05em; text-transform: uppercase; }
.s-opening .bird.b1, .s-standby .bird.b1, .s-photo .bird.b1 { right: 64px; top: 14px; width: 262px; }
.s-opening .bird.b2, .s-standby .bird.b2, .s-photo .bird.b2 { left: 150px; top: 92px; width: 226px; }
.s-opening .bird.b2 img, .s-standby .bird.b2 img, @keyframes flapX { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(-2deg); } 50% { transform: scaleX(-1) translateY(-18px) rotate(2.5deg); } }

.s-photo .frame { position: absolute; inset: 34px; border: 3px solid rgba(253, 235, 221, .3); border-radius: 30px; }
.s-photo .lockup { top: 192px; }
.s-photo .lockup .title { font-size: 182px; }

.s-closing .lockup { top: 150px; }
.s-closing .lockup .title { font-size: 230px; }
.s-closing .lockup .sub { margin-top: 18px; }
.s-closing .cards { position: absolute; left: 150px; right: 150px; top: 596px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.s-closing .card { padding: 22px 26px 20px; border-radius: 18px; background: rgba(3, 14, 9, .56); border: 1px solid rgba(253, 235, 221, .2);
  backdrop-filter: blur(8px); }
.s-closing .card .t { font: 900 46px/1 var(--fh); font-stretch: 75%; color: var(--yellow); }
.s-closing .card .n { margin-top: 10px; font: 900 34px/1.05 var(--fh); font-stretch: 75%; text-transform: uppercase; }
.s-closing .card .p { margin-top: 8px; font: 300 25px/1.2 var(--fl); font-stretch: 75%; letter-spacing: .06em; color: var(--cream2); }
.s-closing .besok { position: absolute; left: 150px; top: 548px; font: 300 28px/1 var(--fl); font-stretch: 75%; text-transform: uppercase; letter-spacing: .42em; color: var(--mint); }
.s-closing .bird.b1 { right: 64px; top: 14px; width: 262px; }

/* ----------------------------------------------------------------- speech */
.s-speech .col { position: absolute; left: 170px; top: 300px; width: 1180px; }
.s-speech .bar { position: absolute; left: 118px; top: 300px; width: 8px; height: 440px; border-radius: 8px; background: linear-gradient(180deg, var(--yellow), var(--red)); transform-origin: 50% 0; }
.scene.on.s-speech .bar { animation: barIn 1.1s cubic-bezier(.2, .8, .2, 1) both .25s; }
@keyframes barIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.s-speech .name { margin: 26px 0 0; font: 900 168px/.92 var(--fh); font-stretch: 75%; text-transform: uppercase; letter-spacing: .012em;
  text-shadow: 0 8px 0 rgba(0, 0, 0, .22), 0 0 80px rgba(255, 220, 140, .2); }
.s-speech .sub { margin-top: 28px; }
.s-speech .rule { margin-top: 40px; width: 520px; }
.s-speech .podium { position: absolute; right: 150px; top: 196px; width: 500px; height: 620px; }
.s-speech .podium .ring { position: absolute; left: 50%; top: 190px; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  border: 3px solid rgba(255, 204, 0, .55); animation: wave 3.6s ease-out infinite; }
.s-speech .podium .ring:nth-child(2) { animation-delay: 1.2s; } .s-speech .podium .ring:nth-child(3) { animation-delay: 2.4s; }
@keyframes wave { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.s-speech .podium .mic { position: absolute; left: 50%; top: 40px; width: 300px; margin-left: -150px; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }

/* ----------------------------------------------------------------- kahoot */
.s-kahoot .col { position: absolute; left: 130px; top: 216px; width: 980px; }
.s-kahoot .big { display: inline-block; white-space: nowrap; font: 900 250px/.86 var(--fh); font-stretch: 75%; letter-spacing: .01em; margin: 14px 0 0; color: #fff; transform: rotate(-3deg); transform-origin: 0 100%;
  text-shadow: 0 10px 0 #5b1a8f, 0 20px 0 rgba(0, 0, 0, .3), 0 0 90px rgba(255, 111, 181, .5); }
.s-kahoot .sub { margin-top: 40px; color: var(--cream); }
.s-kahoot .chips { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }
.s-kahoot .shape { position: absolute; width: 150px; height: 150px; opacity: .92; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .4)); animation: floaty 7s ease-in-out infinite; }
.s-kahoot .shape.s1 { left: 900px; top: 480px; background: #e21b3c; clip-path: polygon(50% 4%, 98% 94%, 2% 94%); }
.s-kahoot .shape.s2 { left: 1030px; top: 640px; width: 120px; height: 120px; background: #1368ce; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation-delay: -2s; }
.s-kahoot .shape.s3 { left: 800px; top: 690px; width: 110px; height: 110px; background: #d89e00; border-radius: 50%; animation-delay: -3.4s; }
.s-kahoot .shape.s4 { left: 940px; top: 800px; width: 104px; height: 104px; background: #26890c; border-radius: 12px; animation-delay: -5s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-26px) rotate(10deg); } }
.s-kahoot .prizes { position: absolute; right: 110px; top: 196px; width: 640px; display: flex; flex-direction: column; gap: 20px; }
.s-kahoot .ptitle { font: 300 28px/1 var(--fl); font-stretch: 75%; text-transform: uppercase; letter-spacing: .42em; color: var(--cyan); margin-bottom: 4px; }
.pz { display: flex; align-items: center; gap: 22px; padding: 16px 26px 16px 18px; border-radius: 22px; background: rgba(8, 10, 30, .6);
  border: 1px solid rgba(253, 235, 221, .22); backdrop-filter: blur(8px); }
.pz .medal { width: 78px; flex: none; } .pz .medal svg { display: block; width: 100%; }
.pz .pic { width: 150px; height: 150px; flex: none; } .pz .pic svg, .pz .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pz .pic img.prize-photo { border-radius: 14px; }
.pz .nm { font: 900 46px/1 var(--fh); font-stretch: 75%; text-transform: uppercase; }
.pz .lb { font: 300 26px/1 var(--fl); font-stretch: 75%; text-transform: uppercase; letter-spacing: .26em; color: var(--yellow); margin-bottom: 8px; }

/* pemenang kahoot + podium juara */
.s-podium .head, .s-kwin .head { position: absolute; left: 0; right: 0; top: 128px; text-align: center; }
.s-podium .head .h-lg, .s-kwin .head .h-lg { margin-top: 12px; font-size: 96px; }
.pod { position: absolute; left: 120px; right: 120px; top: 296px; bottom: 0; display: grid; grid-template-columns: 1fr 1.14fr 1fr; gap: 30px; align-items: end; }
.pod .colm { position: relative; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; }
.pod .who { padding: 0 8px; }
.pod .medal { width: 96px; margin: 0 auto 6px; } .pod .medal svg { display: block; width: 100%; }
.pod .crown { width: 120px; margin: 0 auto -6px; animation: bob 3s ease-in-out infinite; } .pod .crown svg { display: block; width: 100%; }
.pod .tname { font: 900 76px/.95 var(--fh); font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.pod .c1 .tname { font-size: 96px; }
.pod .score { margin-top: 6px; font: 900 54px/1 var(--fh); font-stretch: 75%; color: var(--yellow); }
.pod .score small { font: 300 26px/1 var(--fl); font-stretch: 75%; letter-spacing: .2em; color: var(--cream2); margin-left: 10px; }
.pod .gift { margin: 10px auto 14px; display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 10px; border-radius: 999px;
  background: rgba(3, 14, 9, .62); border: 1px solid rgba(255, 204, 0, .45); }
.pod .gift .pic { width: 66px; height: 66px; } .pod .gift .pic svg, .pod .gift .pic img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px; }
.pod .gift span { font: 900 30px/1 var(--fh); font-stretch: 75%; text-transform: uppercase; text-align: left; }
.pod .block { position: relative; border-radius: 22px 22px 0 0; padding: 18px 18px 0; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 46%, #0b1711) 0%, rgba(6, 20, 14, .92) 78%);
  border: 2px solid color-mix(in srgb, var(--tc) 70%, #ffffff 12%); border-bottom: 0; box-shadow: 0 0 80px color-mix(in srgb, var(--tc) 40%, transparent); }
.pod .c1 .block { height: 404px; } .pod .c2 .block { height: 326px; } .pod .c3 .block { height: 274px; }
.pod .block .no { position: absolute; right: 18px; top: 2px; font: 900 150px/1 var(--fh); font-stretch: 75%; color: rgba(255, 255, 255, .13); }
.pod .members { position: relative; columns: 2; column-gap: 14px; text-align: left; font: 300 20px/1.22 var(--fl); font-stretch: 75%; letter-spacing: .03em; color: rgba(253, 235, 221, .88); text-transform: uppercase; }
.pod .c1 .members { font-size: 22px; }
.pod .members div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; break-inside: avoid; }
.scene.on .pod .colm { animation: podUp 1.2s cubic-bezier(.2, .9, .2, 1) both; }
.scene.on .pod .c3 { animation-delay: .5s; } .scene.on .pod .c2 { animation-delay: 1.1s; } .scene.on .pod .c1 { animation-delay: 1.8s; }
@keyframes podUp { from { opacity: 0; transform: translateY(420px); } to { opacity: 1; transform: none; } }
.s-kwin .pod { top: 330px; left: 190px; right: 190px; }
.s-kwin .pod .block { --tc: #6a3fd0; display: flex; align-items: center; justify-content: center; }
.s-kwin .pod .c1 .block { --tc: #ffcc00; height: 330px; } .s-kwin .pod .c2 .block { --tc: #58a6ff; height: 250px; } .s-kwin .pod .c3 .block { --tc: #ff6fb5; height: 190px; }
.s-kwin .pod .block .pic { width: 190px; height: 190px; } .s-kwin .pod .c2 .block .pic { width: 170px; height: 170px; } .s-kwin .pod .c3 .block .pic { width: 140px; height: 140px; }
.s-kwin .pod .block .pic svg, .s-kwin .pod .block .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s-kwin .pod .gname { margin: 4px 0 14px; font: 300 30px/1 var(--fl); font-stretch: 75%; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); }

/* ---------------------------------------------------------------- standup */
.s-standup .bricks { position: absolute; inset: 0; opacity: .26; background-color: #7a4330;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='120'%3E%3Cpath d='M0 2h150M0 62h150M2 0v60M77 60v60' stroke='%23120805' stroke-width='5' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(900px 700px at 50% 46%, #000 0%, transparent 78%); mask-image: radial-gradient(900px 700px at 50% 46%, #000 0%, transparent 78%); }
.s-standup .cone { position: absolute; left: 50%; top: -60px; width: 1300px; height: 1160px; margin-left: -650px; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 244, 214, .5), rgba(255, 244, 214, .06) 82%, transparent);
  clip-path: polygon(44% 0, 56% 0, 96% 100%, 4% 100%); filter: blur(14px); animation: coneSway 9s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes coneSway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
.s-standup .pool { position: absolute; left: 50%; bottom: 60px; width: 1100px; height: 150px; margin-left: -550px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 200, .36), transparent); filter: blur(6px); }
.s-standup .sign { position: absolute; left: 0; right: 0; top: 150px; text-align: center; }
.neon { font-family: var(--fh); font-weight: 900; font-stretch: 75%; text-transform: uppercase; letter-spacing: .05em; line-height: .92; color: transparent; }
.neon.n1 { font-size: 176px; -webkit-text-stroke: 4px #fff3b0; text-shadow: 0 0 18px rgba(255, 220, 90, .95), 0 0 60px rgba(255, 190, 40, .7), 0 0 120px rgba(255, 170, 0, .45); animation: flick 5.5s linear infinite; }
.neon.n2 { font-size: 214px; -webkit-text-stroke: 4px #ffd2de; text-shadow: 0 0 18px rgba(255, 70, 110, .95), 0 0 60px rgba(255, 30, 80, .75), 0 0 130px rgba(212, 5, 17, .6); animation: flick 7s linear infinite reverse; }
@keyframes flick { 0%, 19%, 21%, 23%, 62%, 64%, 100% { opacity: 1; } 20%, 22%, 63% { opacity: .35; } }
.s-standup .who { position: absolute; left: 0; right: 0; top: 590px; text-align: center; }
.s-standup .who .no { display: inline-block; font: 300 30px/1 var(--fl); font-stretch: 75%; letter-spacing: .5em; color: var(--yellow); padding: 10px 26px 8px 34px; border: 2px solid rgba(255, 204, 0, .6); border-radius: 999px; }
.s-standup .who .nm { margin-top: 22px; font: 900 170px/.9 var(--fh); font-stretch: 75%; text-transform: uppercase; letter-spacing: .03em; color: #fff; text-shadow: 0 8px 0 rgba(0, 0, 0, .4), 0 0 70px rgba(255, 240, 200, .45); }
.s-standup .mic { position: absolute; left: 250px; bottom: 30px; width: 250px; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .7)) brightness(.95); }
.s-standup .mic svg { display: block; width: 100%; }

/* ----------------------------------------------------------------- bridge */
.s-bridge .col { position: absolute; left: 170px; top: 300px; width: 1560px; }
.s-bridge .name { display: inline-block; white-space: nowrap; margin: 26px 0 0; font: 900 176px/.92 var(--fh); font-stretch: 75%; text-transform: uppercase; text-shadow: 0 8px 0 rgba(0, 0, 0, .22), 0 0 80px rgba(255, 220, 140, .2); }
.s-bridge .who { margin-top: 24px; }
.s-bridge .then { margin-top: 44px; display: flex; gap: 22px; }
.s-bridge .then .it { display: flex; align-items: center; gap: 18px; padding: 16px 30px 14px; border-radius: 16px; background: rgba(3, 14, 9, .5); border: 1px solid rgba(253, 235, 221, .2); }
.s-bridge .then .tm { font: 900 38px/1 var(--fh); font-stretch: 75%; color: var(--yellow); }
.s-bridge .then .tt { font: 300 32px/1 var(--fl); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; }
.s-bridge .chev { position: absolute; right: 150px; top: 330px; display: flex; gap: 0; }
.s-bridge .chev i { display: block; width: 130px; height: 300px; background: var(--yellow); clip-path: polygon(0 0, 46% 0, 100% 50%, 46% 100%, 0 100%, 54% 50%); opacity: .14; animation: chev 1.8s ease-in-out infinite; }
.s-bridge .chev i:nth-child(2) { animation-delay: .2s; } .s-bridge .chev i:nth-child(3) { animation-delay: .4s; }
@keyframes chev { 0%, 100% { opacity: .12; } 40% { opacity: .95; } }

/* -------------------------------------------------------------- doorprize */
.s-door .head { position: absolute; left: 110px; right: 110px; top: 150px; display: flex; align-items: flex-end; gap: 34px; }
.s-door .head .h-lg { font-size: 130px; }
.s-door .head .sub { padding-bottom: 14px; color: var(--mint); }
.s-door .cards { position: absolute; left: 110px; right: 110px; top: 338px; height: 620px; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 26px; }
.dcard { position: relative; border-radius: 26px; padding: 26px 24px 24px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 44, 36, .78), rgba(3, 16, 12, .9)); border: 2px solid rgba(124, 255, 178, .34);
  box-shadow: 0 0 60px rgba(124, 255, 178, .1), inset 0 0 70px rgba(88, 230, 255, .06); }
.dcard.grand { border-color: rgba(255, 204, 0, .6); box-shadow: 0 0 70px rgba(255, 204, 0, .16), inset 0 0 70px rgba(255, 204, 0, .06); }
.dcard .ty { display: inline-block; font: 900 26px/1 var(--fh); font-stretch: 75%; letter-spacing: .2em; padding: 9px 18px 7px; border-radius: 8px; color: #06170f; background: var(--mint); }
.dcard.grand .ty { background: var(--yellow); color: #1c1404; }
.dcard .dp { margin-top: 14px; font: 900 96px/1 var(--fh); font-stretch: 75%; letter-spacing: .02em; }
.dcard .pic { width: 230px; height: 230px; margin: 4px auto 0; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .55)); }
.dcard:nth-child(2n) .pic { animation-delay: -1.6s; } .dcard:nth-child(3n) .pic { animation-delay: -3s; }
.dcard .pic svg, .dcard .pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dcard .pic img.prize-photo { border-radius: 20px; }
.dcard .nm { margin-top: 8px; font: 900 40px/1 var(--fh); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; }
.dcard .st { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 16px; font: 300 26px/1 var(--fl); font-stretch: 75%; letter-spacing: .3em; color: var(--cream3);
  border-top: 1px solid rgba(253, 235, 221, .14); background: rgba(0, 0, 0, .25); }
.dcard .st::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%); background-size: 300% 100%; animation: shimmer 2.8s linear infinite; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.dcard.won .st { padding: 12px 14px 14px; background: linear-gradient(180deg, rgba(255, 204, 0, .92), rgba(230, 154, 0, .95)); color: #1a1200; letter-spacing: .02em; border-top: 0; }
.dcard.won .st::after { display: none; }
.dcard.won .st small { display: block; font: 300 19px/1 var(--fl); font-stretch: 75%; letter-spacing: .4em; margin-bottom: 6px; opacity: .8; }
.dcard.won .st b { display: block; font: 900 40px/1 var(--fh); font-stretch: 75%; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard.won { animation: wonGlow 2.4s ease-in-out infinite alternate; }
@keyframes wonGlow { from { box-shadow: 0 0 40px rgba(255, 204, 0, .2); } to { box-shadow: 0 0 90px rgba(255, 204, 0, .5); } }

/* ------------------------------------------------------------------- draw */
.hudc { position: absolute; width: 70px; height: 70px; border: 4px solid var(--mint); opacity: .7; }
.hudc.tl { left: 40px; top: 122px; border-right: 0; border-bottom: 0; } .hudc.tr { right: 40px; top: 122px; border-left: 0; border-bottom: 0; }
.hudc.bl { left: 40px; bottom: 34px; border-right: 0; border-top: 0; } .hudc.br { right: 40px; bottom: 34px; border-left: 0; border-top: 0; }
.s-draw .dr-head { position: absolute; left: 110px; right: 110px; top: 150px; height: 96px; display: flex; align-items: center; gap: 30px; }
.dr-type { font: 900 40px/1 var(--fh); font-stretch: 75%; letter-spacing: .16em; padding: 15px 30px 12px; border-radius: 10px; color: #1c1404;
  background: linear-gradient(180deg, #ffe9a0, #ffcc00 55%, #e69a00); box-shadow: 0 0 44px rgba(255, 204, 0, .5); }
.s-draw[data-kind="door"] .dr-type { color: #04160d; background: linear-gradient(180deg, #d6ffe6, #7cffb2 55%, #31c97a); box-shadow: 0 0 44px rgba(124, 255, 178, .5); }
.dr-dept { display: flex; align-items: baseline; gap: 20px; }
.dr-dept b { font: 900 92px/1 var(--fh); font-stretch: 75%; }
.dr-dept span { font: 300 38px/1 var(--fl); font-stretch: 75%; letter-spacing: .14em; color: var(--cream2); text-transform: uppercase; }
.dr-count { margin-left: auto; text-align: right; }
.dr-count i { display: block; font: normal 20px/1 var(--fm); letter-spacing: .34em; color: var(--mint); }
.dr-count b { display: block; margin-top: 6px; font: 900 72px/1 var(--fh); font-stretch: 75%; letter-spacing: .04em; }

.dr-prize { position: absolute; left: 76px; top: 270px; width: 580px; text-align: center; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.holo { position: relative; width: 500px; height: 500px; margin: 0 auto; }
.holo .rings { position: absolute; inset: -34px; color: var(--mint); filter: drop-shadow(0 0 12px rgba(124, 255, 178, .7)); }
.s-draw[data-kind="grand"] .holo .rings { color: var(--gold); filter: drop-shadow(0 0 12px rgba(255, 204, 0, .7)); }
.holo .rings svg { width: 100%; height: 100%; display: block; }
.rg { transform-box: fill-box; transform-origin: 50% 50%; }
.rg.r1 { animation: spin 46s linear infinite; } .rg.r2 { animation: spin 13s linear infinite reverse; }
.rg.r3 { animation: spin 21s linear infinite; } .rg.r4 { animation: spin 64s linear infinite reverse; }
.s-draw[data-phase="spinning"] .rg.r2, .s-draw[data-phase="stopping"] .rg.r2 { animation-duration: 2.2s; }
.s-draw[data-phase="spinning"] .rg.r3, .s-draw[data-phase="stopping"] .rg.r3 { animation-duration: 3.4s; }
.holo .beam { position: absolute; left: 50%; bottom: -44px; width: 460px; height: 250px; margin-left: -230px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 255, 178, .55), transparent); filter: blur(12px); animation: pulse 3s ease-in-out infinite; }
.s-draw[data-kind="grand"] .holo .beam { background: radial-gradient(closest-side, rgba(255, 204, 0, .55), transparent); }
.holo .art { position: absolute; inset: 62px; animation: bob 4.6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 34px rgba(255, 255, 255, .2)); }
.holo .art svg, .holo .art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.holo .art img.prize-photo { border-radius: 34px; }
.dr-prize-name { margin-top: 34px; font: 900 62px/1 var(--fh); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; }
.dr-prize-sub { margin-top: 12px; font: 300 28px/1 var(--fl); font-stretch: 75%; letter-spacing: .3em; color: var(--accent); }

.dr-main { position: absolute; left: 700px; top: 270px; width: 1120px; height: 730px; transition: opacity .6s ease, transform .8s ease, filter .6s ease; }
.dr-slot { position: relative; height: 0; opacity: 0; margin-bottom: 0; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, rgba(10, 44, 38, .9), rgba(3, 16, 13, .94)); border: 2px solid rgba(124, 255, 178, .5);
  box-shadow: 0 0 70px rgba(124, 255, 178, .24), inset 0 0 70px rgba(88, 230, 255, .1);
  transition: height .7s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, margin .7s cubic-bezier(.2, .8, .2, 1); }
.s-draw[data-phase="spinning"] .dr-slot, .s-draw[data-phase="stopping"] .dr-slot { height: 214px; opacity: 1; margin-bottom: 22px; }
.dr-slot .lbl { position: absolute; left: 30px; top: 18px; font: 20px/1 var(--fm); letter-spacing: .34em; color: var(--mint); }
.dr-slot .lbl::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 14px; border-radius: 50%; background: var(--mint); animation: pulse .5s linear infinite; }
.dr-slot .hex { position: absolute; right: 30px; top: 18px; font: 20px/1 var(--fm); letter-spacing: .2em; color: rgba(88, 230, 255, .8); }
.dr-slot .nm { position: absolute; left: 24px; right: 24px; top: 56px; height: 140px; display: flex; align-items: center; justify-content: center;
  font: 900 112px/1 var(--fh); font-stretch: 75%; text-transform: uppercase; white-space: nowrap; color: #fff;
  text-shadow: 0 0 30px rgba(124, 255, 178, .85), 0 0 90px rgba(88, 230, 255, .5); }
.dr-slot .nm span { display: inline-block; }
.dr-slot .nm span.flip { animation: slotFlip .12s ease-out both; }
@keyframes slotFlip { from { transform: translateY(-46px); opacity: .2; filter: blur(8px); } to { transform: none; opacity: 1; filter: blur(0); } }
.dr-slot .bar { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(90deg, transparent, rgba(124, 255, 178, .2), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: scanx 1.1s linear infinite; }
@keyframes scanx { from { background-position: -70% 0; } to { background-position: 170% 0; } }
.s-draw[data-lock="1"] .dr-slot { border-color: var(--yellow); box-shadow: 0 0 110px rgba(255, 204, 0, .65), inset 0 0 80px rgba(255, 204, 0, .2); }
.s-draw[data-lock="1"] .dr-slot .nm { color: var(--yellow); text-shadow: 0 0 40px rgba(255, 204, 0, .9), 0 0 120px rgba(255, 150, 0, .6); animation: lockIn .5s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes lockIn { from { transform: scale(1.35); } to { transform: none; } }

.dr-grid { height: 730px; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px;
  transition: height .7s cubic-bezier(.2, .8, .2, 1); }
.s-draw[data-phase="spinning"] .dr-grid, .s-draw[data-phase="stopping"] .dr-grid { height: 494px; }
.tile { display: flex; align-items: center; min-width: 0; padding: 0 12px; border-radius: 7px; background: rgba(124, 255, 178, .07);
  border: 1px solid rgba(124, 255, 178, .2); color: rgba(232, 248, 228, .86); font: 300 var(--fsa, 22px)/1 var(--fl); font-stretch: 75%; letter-spacing: .03em;
  text-transform: uppercase; transition: background .3s, color .3s, opacity .6s, border-color .3s, font-size .7s; }
.s-draw[data-phase="spinning"] .tile, .s-draw[data-phase="stopping"] .tile { font-size: var(--fsb, 18px); }
.tile span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scene.on .tile { animation: tileIn .5s ease both; animation-delay: calc(var(--i) * 9ms + .5s); }
@keyframes tileIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.tile.hit { background: var(--mint); color: #03130b; border-color: #fff; box-shadow: 0 0 26px rgba(124, 255, 178, .95); transition: none; z-index: 1; }
.tile.out { opacity: .1 !important; }
.tile.final { border-color: var(--yellow); background: rgba(255, 204, 0, .14); color: #fff; }
.tile.win { background: var(--yellow) !important; color: #1a1200 !important; border-color: #fff; box-shadow: 0 0 46px rgba(255, 204, 0, .95); transform: scale(1.05); z-index: 2; opacity: 1 !important; }

.dr-wait { position: absolute; left: 700px; top: 1016px; font: 19px/1 var(--fm); letter-spacing: .34em; color: var(--mint); opacity: .9; transition: opacity .4s; }
.s-draw[data-phase="spinning"] .dr-wait, .s-draw[data-phase="stopping"] .dr-wait, .s-draw[data-phase="revealed"] .dr-wait { opacity: 0 !important; }

.dr-reveal { position: absolute; left: 690px; top: 250px; width: 1150px; height: 760px; opacity: 0; display: flex; flex-direction: column; justify-content: center; }
.s-draw[data-phase="revealed"] .dr-reveal { opacity: 1; transition: opacity .3s ease .1s; }
.s-draw[data-phase="revealed"] .dr-main { opacity: 0; transform: scale(.94); filter: blur(12px); }
.rv-kicker { font: 300 44px/1 var(--fl); font-stretch: 75%; letter-spacing: .36em; text-transform: uppercase; color: var(--mint); }
.rv-name { margin: 22px 0 0; font: 900 190px/.92 var(--fh); font-stretch: 75%; text-transform: uppercase; letter-spacing: .012em; text-wrap: balance;
  background: linear-gradient(180deg, #fffbe8 0%, #ffe27a 42%, #ffcc00 60%, #f09a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .3)) drop-shadow(0 0 60px rgba(255, 204, 0, .5)); }
.rv-dept { margin-top: 26px; font: 300 46px/1 var(--fl); font-stretch: 75%; letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.rv-congrats { margin-top: 38px; align-self: flex-start; font: 900 76px/1 var(--fh); font-stretch: 75%; letter-spacing: .14em; padding: 16px 44px 12px; border-radius: 16px;
  color: #06170f; background: linear-gradient(180deg, #d6ffe6, #7cffb2 60%, #31c97a); box-shadow: 0 0 70px rgba(124, 255, 178, .55); transform: rotate(-2deg); }
.s-draw[data-phase="revealed"] .rv-kicker { animation: aRise .7s cubic-bezier(.16, .84, .24, 1) both .15s; }
.s-draw[data-phase="revealed"] .rv-name { animation: nameIn .9s cubic-bezier(.2, 1.3, .3, 1) both .2s; }
.s-draw[data-phase="revealed"] .rv-dept { animation: aRise .8s cubic-bezier(.16, .84, .24, 1) both .9s; }
.s-draw[data-phase="revealed"] .rv-congrats { animation: stamp .6s cubic-bezier(.2, 1.5, .3, 1) both 1.5s; }
.s-draw[data-still="1"] .rv-kicker, .s-draw[data-still="1"] .rv-name, .s-draw[data-still="1"] .rv-dept, .s-draw[data-still="1"] .rv-congrats { animation-duration: .01s; animation-delay: 0s; }
@keyframes nameIn { from { opacity: 0; transform: scale(1.6); filter: blur(20px) drop-shadow(0 0 0 transparent); } to { opacity: 1; transform: none; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.2); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }

/* ---------------------------------------------------------------- karaoke */
.s-karaoke .eq { position: absolute; left: 0; right: 0; bottom: 150px; height: 520px; display: flex; align-items: flex-end; justify-content: center; gap: 14px; opacity: .5; }
.s-karaoke .eq i, .s-band .eq i { display: block; width: 34px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--pink), #7a3cff 60%, var(--cyan));
  animation: eq var(--t, 1s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); transform-origin: 50% 100%; height: 100%; }
@keyframes eq { from { transform: scaleY(.12); } to { transform: scaleY(1); } }
.s-karaoke .col { position: absolute; left: 0; right: 0; top: 196px; text-align: center; }
.s-karaoke .big { margin: 20px 0 0; font: 900 300px/.86 var(--fh); font-stretch: 75%; text-transform: uppercase; letter-spacing: .03em; color: transparent; -webkit-text-stroke: 5px #ffe1f0;
  text-shadow: 0 0 22px rgba(255, 111, 181, .95), 0 0 70px rgba(255, 60, 160, .75), 0 0 150px rgba(120, 60, 255, .7); animation: flick 8s linear infinite; }
.s-karaoke .pillrow { margin-top: 30px; display: flex; justify-content: center; gap: 18px; }
.s-karaoke .teams { position: absolute; left: 60px; right: 60px; top: 742px; display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.tchip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 7px 10px; border-radius: 999px; background: rgba(6, 6, 22, .62); border: 1px solid rgba(253, 235, 221, .26);
  font: 900 25px/1 var(--fh); font-stretch: 75%; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.tchip i { width: 24px; height: 24px; border-radius: 50%; background: var(--tc); border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 70%, transparent); }

/* ------------------------------------------------------------ leaderboard */
.s-lb .head { position: absolute; left: 110px; right: 110px; top: 138px; display: flex; align-items: flex-end; gap: 30px; }
.s-lb .head .h-lg { font-size: 104px; }
.s-lb .legend { margin-left: auto; display: flex; gap: 26px; padding-bottom: 14px; font: 300 30px/1 var(--fl); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; }
.s-lb .legend span { display: inline-flex; align-items: center; gap: 12px; }
.s-lb .legend i { width: 26px; height: 26px; border-radius: 6px; background: var(--c); }
.lb-rows { position: absolute; left: 110px; right: 110px; top: 272px; height: 780px; }
.lb-row { position: absolute; left: 0; right: 0; top: 0; height: var(--rh, 72px); display: grid; grid-template-columns: 96px 440px 1fr 190px; align-items: center; gap: 18px;
  padding: 0 22px 0 0; border-radius: 16px; background: linear-gradient(90deg, rgba(8, 30, 22, .86), rgba(6, 22, 16, .6)); border: 1px solid rgba(253, 235, 221, .16);
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), background .5s, border-color .5s, box-shadow .5s; will-change: transform; }
.lb-row .rk { height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 15px 0 0 15px; background: rgba(253, 235, 221, .1);
  font: 900 calc(var(--rh, 72px) * .66)/1 var(--fh); font-stretch: 75%; color: var(--cream); }
.lb-row .tm { display: flex; align-items: center; gap: 18px; min-width: 0; }
.lb-row .tm i { flex: none; width: calc(var(--rh, 72px) * .56); height: calc(var(--rh, 72px) * .56); border-radius: 50%; background: var(--tc); border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 70%, transparent); }
.lb-row .tm b { font: 900 calc(var(--rh, 72px) * .62)/1 var(--fh); font-stretch: 75%; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .bars { height: calc(var(--rh, 72px) * .5); display: flex; border-radius: 10px; overflow: hidden; background: rgba(253, 235, 221, .07); }
.lb-row .seg { height: 100%; width: 0; background: var(--c); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.lb-row .seg em { font: normal 900 calc(var(--rh, 72px) * .32)/1 var(--fh); font-stretch: 75%; color: rgba(0, 0, 0, .72); padding: 0 12px; white-space: nowrap; }
.lb-row .tot { text-align: right; font: 900 calc(var(--rh, 72px) * .74)/1 var(--fh); font-stretch: 75%; color: var(--yellow); font-variant-numeric: tabular-nums; }
.lb-row.top1 { border-color: rgba(255, 204, 0, .7); box-shadow: 0 0 60px rgba(255, 204, 0, .25); background: linear-gradient(90deg, rgba(70, 52, 4, .9), rgba(20, 28, 12, .7)); }
.lb-row.top1 .rk { background: var(--yellow); color: #1a1200; }
.lb-row.top2 .rk { background: #d7e0e3; color: #1c2428; } .lb-row.top3 .rk { background: #d98c4a; color: #2a1404; }
.lb-row.locked .tm, .lb-row.locked .bars, .lb-row.locked .tot { visibility: hidden; }
.lb-row.locked { background: repeating-linear-gradient(115deg, rgba(253, 235, 221, .05) 0 22px, rgba(253, 235, 221, .09) 22px 44px); border-style: dashed; }
.lb-row.locked::after { content: "? ? ?"; position: absolute; left: 130px; top: 50%; transform: translateY(-50%); font: 900 calc(var(--rh, 72px) * .56)/1 var(--fh); font-stretch: 75%; letter-spacing: .3em; color: var(--cream3); animation: pulse 1.8s ease-in-out infinite; }
.lb-row.just { animation: rowPop .9s cubic-bezier(.2, 1.3, .3, 1); }
@keyframes rowPop { 0% { filter: brightness(3) saturate(0); } 100% { filter: none; } }
.lb-note { position: absolute; right: 110px; top: 250px; font: 300 22px/1 var(--fl); font-stretch: 75%; letter-spacing: .2em; color: var(--cream3); text-transform: uppercase; }

.spot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .5s ease; background: rgba(1, 8, 5, .82); backdrop-filter: blur(10px); }
.spot.on { opacity: 1; }
.spot .card { position: relative; width: 1500px; padding: 46px 60px 50px; border-radius: 36px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 36%, #0a1610) 0%, rgba(5, 18, 12, .96) 70%);
  border: 3px solid color-mix(in srgb, var(--tc) 72%, #ffffff 14%); box-shadow: 0 0 160px color-mix(in srgb, var(--tc) 46%, transparent), 0 40px 100px rgba(0, 0, 0, .6); }
.spot.on .card { animation: spotIn .9s cubic-bezier(.2, 1.2, .3, 1) both; }
@keyframes spotIn { from { opacity: 0; transform: scale(.6) translateY(80px); } to { opacity: 1; transform: none; } }
.spot .medal { width: 150px; margin: -124px auto 0; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); } .spot .medal svg { display: block; width: 100%; }
.spot .jr { margin-top: 12px; font: 300 46px/1 var(--fl); font-stretch: 75%; letter-spacing: .5em; color: var(--yellow); text-transform: uppercase; }
.spot .tn { margin-top: 12px; font: 900 190px/.9 var(--fh); font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em; color: #fff; text-shadow: 0 8px 0 rgba(0, 0, 0, .3), 0 0 80px color-mix(in srgb, var(--tc) 80%, transparent); }
.spot .sc { margin-top: 12px; display: flex; justify-content: center; align-items: baseline; gap: 34px; }
.spot .sc b { font: 900 110px/1 var(--fh); font-stretch: 75%; color: var(--yellow); }
.spot .sc span { font: 300 34px/1.2 var(--fl); font-stretch: 75%; letter-spacing: .1em; color: var(--cream2); text-transform: uppercase; text-align: left; }
.spot .gift { margin: 20px auto 0; display: inline-flex; align-items: center; gap: 20px; padding: 10px 34px 10px 14px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 204, 0, .5); }
.spot .gift .pic { width: 92px; height: 92px; } .spot .gift .pic svg, .spot .gift .pic img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 12px; }
.spot .gift span { font: 900 44px/1 var(--fh); font-stretch: 75%; text-transform: uppercase; }
.spot .mem { margin: 26px auto 0; width: 1180px; columns: 3; column-gap: 30px; font: 300 26px/1.3 var(--fl); font-stretch: 75%; letter-spacing: .04em; text-transform: uppercase; color: rgba(253, 235, 221, .9); text-align: left; }
.spot .mem div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; break-inside: avoid; }

/* ------------------------------------------------------------------- band */
.s-band .eq { position: absolute; left: 0; right: 0; bottom: 0; height: 560px; display: flex; align-items: flex-end; justify-content: center; gap: 12px; opacity: .62; }
.s-band .eq i { width: 30px; background: linear-gradient(180deg, var(--yellow), #ff7a3d 55%, var(--red)); }
.s-band .col { position: absolute; left: 0; right: 0; top: 230px; text-align: center; }
.s-band .big { margin: 22px 0 0; font: 900 250px/.88 var(--fh); font-stretch: 75%; letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 10px 0 rgba(0, 0, 0, .3), 0 0 100px rgba(255, 170, 60, .55); }
.s-band .sub { margin-top: 26px; color: var(--cream); }

/* =============================================================== overlay */
#overlay { position: absolute; inset: 0; pointer-events: none; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.flash.go { animation: flash .9s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.count { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); opacity: 0; }
.count.on { opacity: 1; }
.count b { font: 900 620px/1 var(--fh); font-stretch: 75%; color: #fff; text-shadow: 0 0 120px rgba(255, 204, 0, .9), 0 20px 0 rgba(0, 0, 0, .3); }
.count b.tick { animation: countTick 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes countTick { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { transform: scale(.94); opacity: 1; } 100% { transform: scale(.7); opacity: 0; } }
.msg { position: absolute; left: 50%; bottom: 70px; transform: translate(-50%, 160px); max-width: 1600px; padding: 24px 54px 20px; border-radius: 22px; opacity: 0;
  background: linear-gradient(180deg, #ffe066, #ffcc00); color: #1a1200; font: 900 60px/1.1 var(--fh); font-stretch: 75%; text-transform: uppercase; letter-spacing: .03em; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 6px rgba(212, 5, 17, .9); transition: transform .7s cubic-bezier(.2, 1.1, .3, 1), opacity .5s; }
.msg.on { transform: translate(-50%, 0); opacity: 1; }
.blackout { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.blackout.on { opacity: 1; }

/* tombol kecil di luar panggung (layar penuh + suara) */
#startbtn { position: fixed; right: 18px; bottom: 18px; z-index: 50; font: 600 14px "Segoe UI", system-ui, sans-serif; color: #fdebdd; background: rgba(8, 26, 18, .88);
  border: 1px solid rgba(253, 235, 221, .3); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: opacity .6s; }
#startbtn:hover { background: #14402c; }
body.idle #startbtn, body.preview #startbtn { opacity: 0; pointer-events: none; }
#net { position: fixed; left: 14px; bottom: 12px; z-index: 50; font: 12px "Segoe UI", system-ui, sans-serif; color: rgba(255, 255, 255, .5); opacity: 0; transition: opacity .5s; }
#net.off { opacity: 1; }
#net::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff6b5a; margin-right: 7px; }
body.preview #net { display: none; }

/* mode ringan (display.html?lite=1) untuk laptop yang kurang bertenaga */
body.lite .wash, body.lite .rays::before { animation: none; }
body.lite .foliage.back { filter: brightness(.26) saturate(.7); }
body.lite .s-closing .card, body.lite .pz, body.lite .spot { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
  .wash, .foliage, .rays::before, .gridfloor::before { animation: none !important; }
}