:root{
  --navy:#050a12;--navy2:#071624;--gold:#dfbd78;--ivory:#f6f0e5;
  --ease:cubic-bezier(.22,.78,.22,1);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02060b;color:var(--ivory);font-family:Arial,"Noto Sans Thai",sans-serif}
body{overscroll-behavior:none}
button,a{-webkit-tap-highlight-color:transparent}
.app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 28%,#0a1c2b 0,#06111c 34%,#02070d 74%,#010306 100%)}
.ambient{position:absolute;inset:0;pointer-events:none}
.beam{position:absolute;left:50%;top:-12%;width:48%;height:71%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(66,109,139,.17),rgba(31,61,82,.05) 60%,transparent);clip-path:polygon(37% 0,63% 0,100% 100%,0 100%)}
.vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,transparent 34%,rgba(0,0,0,.16) 64%,rgba(0,0,0,.58) 100%)}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#d6aa5d;opacity:.3;animation:twinkle 5.5s ease-in-out infinite}
.stars i:nth-child(1){left:14%;top:23%}.stars i:nth-child(2){left:31%;top:38%;animation-delay:-2s}.stars i:nth-child(3){left:50%;top:18%;animation-delay:-4s}.stars i:nth-child(4){left:73%;top:32%;animation-delay:-1s}.stars i:nth-child(5){left:89%;top:20%;animation-delay:-3s}.stars i:nth-child(6){left:18%;top:69%;animation-delay:-4s}.stars i:nth-child(7){left:58%;top:81%;animation-delay:-1.5s}.stars i:nth-child(8){left:86%;top:64%;animation-delay:-3.2s}
@keyframes twinkle{50%{opacity:.75;transform:scale(1.35)}}

.gate,.experience,.final-panel{position:absolute;inset:0}
.gate{z-index:50;display:flex;align-items:center;justify-content:center;padding:8vh 8vw;background:radial-gradient(circle at 50% 35%,rgba(9,28,43,.82),rgba(2,7,12,.95) 68%);transition:opacity .7s ease,visibility .7s}
.gate.hide{opacity:0;visibility:hidden;pointer-events:none}
.gate-inner{text-align:center;width:min(88vw,430px)}
.title-logo{width:min(52vw,240px);height:auto;filter:drop-shadow(0 10px 32px rgba(0,0,0,.38));margin-bottom:8px}
.gate-kicker{font-family:Georgia,serif;letter-spacing:.35em;font-size:10px;color:rgba(246,240,229,.62)}
.gate h1{font-family:Georgia,serif;letter-spacing:.14em;font-size:clamp(24px,7vw,37px);font-weight:400;margin:14px 0 6px;color:#f1dfb7}
.gate p{font-size:13px;color:rgba(246,240,229,.7);margin:0 0 22px}
.gate small{display:block;margin-top:10px;color:rgba(246,240,229,.43);font-size:10px}
.gold-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(225,185,105,.68);background:linear-gradient(180deg,rgba(33,38,45,.90),rgba(10,15,22,.94));color:#f0d9a2;border-radius:999px;padding:14px 27px;font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05)}

.experience{z-index:10;opacity:0;visibility:hidden;transition:opacity .45s ease}
.experience.show{opacity:1;visibility:visible}
.brand{position:absolute;z-index:18;top:calc(18px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-family:Georgia,serif;letter-spacing:.31em;font-size:10px;color:rgba(246,240,229,.58);opacity:0;transition:opacity .65s ease;white-space:nowrap}
.brand.show{opacity:1}

.film-stage{position:absolute;z-index:12;inset:calc(72px + env(safe-area-inset-top)) 0 calc(80px + env(safe-area-inset-bottom));overflow:hidden}
.film-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(1);will-change:opacity,transform}
.film-layer.active{opacity:1}
.film-layer img{display:block;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.38))}
.film-layer.hero img{width:min(74vw,390px);max-height:76vh;border-radius:24px}
.film-layer.comp img{width:min(100vw,560px);height:min(78vh,820px);object-fit:contain}
.film-layer.wall img{width:min(100vw,580px);height:min(81vh,860px);object-fit:contain}

/* Music-synced transitions: transform + opacity only. */
.film-layer.fade-in{animation:fadeIn .62s ease both}
.film-layer.fade-out{animation:fadeOut .62s ease both}
.film-layer.cut-in{animation:fadeIn .28s ease both}
.film-layer.cut-out{animation:fadeOut .28s ease both}
.film-layer.ken-a{animation:kenA var(--dur,3s) linear both}
.film-layer.ken-b{animation:kenB var(--dur,3s) linear both}
.film-layer.ken-c{animation:kenC var(--dur,3s) linear both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes kenA{from{transform:scale(1)}to{transform:scale(1.025)}}
@keyframes kenB{from{transform:translate3d(-5px,2px,0) scale(1.008)}to{transform:translate3d(5px,-2px,0) scale(1.028)}}
@keyframes kenC{from{transform:translate3d(4px,-2px,0) scale(1.008)}to{transform:translate3d(-4px,2px,0) scale(1.024)}}

.transition-glow{position:absolute;z-index:13;left:50%;top:47%;width:70vw;height:42vh;transform:translate(-50%,-50%) scale(.72);border-radius:50%;background:radial-gradient(circle,rgba(238,202,128,.24),rgba(74,112,140,.07) 42%,transparent 72%);opacity:0;transition:opacity 1.3s ease,transform 3s var(--ease);pointer-events:none}
.transition-glow.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

.skip-btn{position:absolute;z-index:35;right:18px;top:calc(15px + env(safe-area-inset-top));height:47px;padding:0 17px;border-radius:999px;border:1px solid rgba(222,183,106,.63);background:rgba(6,12,20,.76);color:#e8cc92;display:flex;gap:9px;align-items:center;font-size:13px;font-weight:600;opacity:0;transform:translateY(-7px);transition:opacity .45s ease,transform .45s ease;box-shadow:0 8px 25px rgba(0,0,0,.24)}
.skip-btn.show{opacity:1;transform:none}
.sound-btn{position:absolute;z-index:35;left:22px;bottom:calc(23px + env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:1px solid rgba(222,183,106,.35);background:rgba(5,11,18,.68);color:#e7cc93;font-size:17px;opacity:0;transition:opacity .45s ease}
.sound-btn.show{opacity:1}
.quick-cta{position:absolute;z-index:35;left:50%;bottom:calc(23px + env(safe-area-inset-bottom));transform:translate(-50%,8px);border:1px solid rgba(222,183,106,.58);border-radius:999px;padding:13px 24px;background:rgba(7,12,18,.87);color:#edd39c;text-decoration:none;font-size:14px;opacity:0;pointer-events:none;transition:opacity .55s ease,transform .55s ease;white-space:nowrap}
.quick-cta.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}

.final-panel{z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(47px + env(safe-area-inset-top)) 5vw calc(24px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transition:opacity .8s ease;pointer-events:none}
.final-panel.show{opacity:1;visibility:visible;pointer-events:auto}
.final-glow{position:absolute;left:50%;top:43%;width:80vw;height:51vh;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(235,199,123,.19),rgba(56,96,127,.06) 42%,transparent 72%)}
.final-brand{position:relative;z-index:2;font-family:Georgia,serif;letter-spacing:.30em;font-size:10px;color:rgba(245,239,228,.64);margin-bottom:10px;opacity:.58;transition:opacity .7s ease,text-shadow .7s ease}
.final-brand.strong{opacity:1;text-shadow:0 0 20px rgba(235,198,124,.28)}
.card-grid{position:relative;z-index:2;width:min(91vw,500px);display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:13px}
.final-card{width:100%;aspect-ratio:1080/1919;object-fit:contain;filter:drop-shadow(0 10px 17px rgba(0,0,0,.43));opacity:0;transform:translateY(13px) scale(.92);transition:opacity .6s ease,transform .8s var(--ease)}
.final-panel.cards-ready .final-card{opacity:1;transform:none}
.final-card:nth-child(1){transition-delay:.00s}.final-card:nth-child(2){transition-delay:.06s}.final-card:nth-child(3){transition-delay:.12s}.final-card:nth-child(4){transition-delay:.18s}
.final-card:nth-child(5){transition-delay:.24s}.final-card:nth-child(6){transition-delay:.30s}.final-card:nth-child(7){transition-delay:.36s}.final-card:nth-child(8){transition-delay:.42s}
.final-copy{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center}
.final-kicker{font-family:Georgia,serif;font-size:11px;letter-spacing:.36em;color:#e6c17d;margin-bottom:6px;opacity:.75}
.final-kicker.glow{text-shadow:0 0 24px rgba(239,199,118,.58);opacity:1}
.final-copy h2{font-weight:400;font-size:clamp(21px,6.5vw,33px);line-height:1.3;margin:0 0 14px;color:#f5efe4;text-shadow:0 3px 22px #000}
.final-copy h2 span{color:#eed59c}
.main-cta{min-width:205px;padding:13px 25px}
.main-cta.strong{box-shadow:0 0 42px rgba(225,174,79,.38),0 12px 34px rgba(0,0,0,.35)}
.main-cta.final-pulse{animation:ctaPulse 2.4s ease-in-out infinite}
@keyframes ctaPulse{50%{transform:scale(1.035);box-shadow:0 0 52px rgba(225,174,79,.45),0 12px 34px rgba(0,0,0,.35)}}
.its-time{margin-top:10px;font-family:Georgia,serif;font-size:10px;letter-spacing:.38em;color:rgba(238,208,145,.88);opacity:0;transform:translateY(5px);transition:opacity .8s ease,transform .8s ease}
.its-time.show{opacity:1;transform:none}
.replay-btn{margin-top:8px;border:0;background:none;color:rgba(245,239,228,.52);font-size:11px;padding:6px 10px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.replay-btn.show{opacity:1;pointer-events:auto}

@media(max-height:700px){
  .film-layer.hero img{width:min(65vw,315px)}
  .card-grid{width:min(82vw,440px)}
  .final-copy h2{font-size:19px;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  .stars i,.main-cta.final-pulse{animation:none!important}
  .film-layer{animation:none!important}
}


/* Decorative Lucky 8 cards for high-count scenes */
.ornament-cards{position:absolute;inset:0;z-index:14;pointer-events:none;opacity:0;transition:opacity .8s ease}
.ornament-cards.show{opacity:1}
.ornament-cards.strong{opacity:1}
.orn{position:absolute;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));opacity:.26;transform-origin:center center;animation:floatCard 7s ease-in-out infinite}
.orn.top{top:78px}
.orn.bottom{bottom:72px}
.orn.tl{left:-18px;width:96px;transform:rotate(-17deg)}
.orn.tml{left:23%;width:90px;transform:rotate(-8deg);animation-delay:-1.5s}
.orn.tmr{right:22%;width:90px;transform:rotate(9deg);animation-delay:-3s}
.orn.tr{right:-12px;width:96px;transform:rotate(17deg);animation-delay:-4.2s}
.orn.bl{left:-8px;width:92px;transform:rotate(12deg);animation-delay:-2.1s}
.orn.bml{left:25%;width:88px;transform:rotate(6deg);animation-delay:-4.7s}
.orn.bmr{right:24%;width:88px;transform:rotate(-7deg);animation-delay:-1.2s}
.orn.br{right:-8px;width:92px;transform:rotate(-12deg);animation-delay:-5.4s}
.ornament-cards.strong .orn{opacity:.34}
@keyframes floatCard{50%{transform:translateY(-6px) rotate(var(--r,0deg))}}
.orn.tl{--r:-17deg}.orn.tml{--r:-8deg}.orn.tmr{--r:9deg}.orn.tr{--r:17deg}.orn.bl{--r:12deg}.orn.bml{--r:6deg}.orn.bmr{--r:-7deg}.orn.br{--r:-12deg}
@media(max-height:700px){
  .orn.top{top:72px}.orn.bottom{bottom:66px}
  .orn.tl,.orn.tr{width:84px}.orn.tml,.orn.tmr,.orn.bl,.orn.br{width:80px}.orn.bml,.orn.bmr{width:76px}
}