/* Layout: full-screen vertical slides. Each slide is a finished illustrated card shown as supplied, with live hotspots (links, countdown, buttons) placed on top in image coordinates. */
:root{--maroon:#8c1d2b;--gold:#e9b44c;--cinzel:'Cinzel',Georgia,serif;--cg:'Cormorant Garamond',Georgia,serif}
*{box-sizing:border-box;margin:0}html,body{height:100%}
body{background:#170c06;font-family:var(--cinzel);overflow:hidden;-webkit-tap-highlight-color:transparent}
.stage{position:relative;width:min(100vw,520px);height:100dvh;margin:0 auto;overflow:hidden;background:#2a140a}
@media(min-width:560px){.stage{box-shadow:0 0 0 1px #e9b44c55,0 30px 80px #000a}}
.slides{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slides::-webkit-scrollbar{display:none}.slides.locked{overflow:hidden}
.scene{position:relative;height:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;container-type:size;background:#2a140a}
.fit{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * 941 / 1672));aspect-ratio:941/1672;transform:translate(-50%,-50%) scale(1);container-type:inline-size;transition:transform 2.2s cubic-bezier(.5,0,.2,1),opacity 1.4s ease 1s}
.fit>img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.scene.active .fit{animation:drift 24s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.035)}}
.s-door .fit{perspective:2600px}.s-door .reveal,.s-door .leaf{position:absolute;inset:0}.s-door .reveal img,.s-door .leaf img{width:100%;height:100%;display:block;max-width:none}.s-door .reveal{transform:scale(1.05);filter:brightness(.7);transition:transform 3s cubic-bezier(.25,.1,.2,1),filter 2.4s ease}.s-door .leaf{z-index:1;transition:transform 2.6s cubic-bezier(.45,.0,.2,1),opacity 1s ease 1.6s;backface-visibility:hidden;will-change:transform}.s-door .leaf.l{clip-path:inset(0 50% 0 0);transform-origin:0 50%}.s-door .leaf.r{clip-path:inset(0 0 0 50%);transform-origin:100% 50%}.s-door .leaf::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 80%,rgba(0,0,0,.35));opacity:0;transition:opacity 1s}.s-door .leaf.r::after{background:linear-gradient(270deg,transparent 80%,rgba(0,0,0,.35))}.started .s-door .leaf.l{transform:rotateY(-70deg);opacity:0}.started .s-door .leaf.r{transform:rotateY(70deg);opacity:0}.started .s-door .reveal{transform:scale(1);filter:none}.s-door .gate-tap,.s-door .hot{z-index:3}.started .s-door .gate-tap,.started .s-door .hot{pointer-events:none}
.spark{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff6d0 0 1.5px,transparent 2.5px),radial-gradient(circle,#ffe39a 0 1px,transparent 2px),radial-gradient(circle,#fff 0 1.2px,transparent 2.2px);background-size:90px 130px,140px 170px,110px 150px;background-position:10px 20px,60px 80px,30px 120px;opacity:.4;mix-blend-mode:screen;animation:rise 18s linear infinite,twinkle 4s ease-in-out infinite;z-index:3}
@keyframes rise{to{background-position:10px -300px,60px -250px,30px -200px}}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.5}}
/* hotspots, positioned in image % */
.hot{position:absolute;z-index:6;display:block;background:transparent;border:0;padding:0;cursor:pointer;border-radius:999px;-webkit-tap-highlight-color:#ffd56b55}
.hot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hot:active{background:#fff3;}
.gate-tap{position:absolute;inset:0;z-index:5;background:transparent;border:0;cursor:pointer}
/* live countdown patches, over the baked numbers */
.cd{position:absolute;z-index:4;top:42.6%;height:4.7%;display:grid;place-items:center;background:linear-gradient(#8a0f06,#7a0b05 25%,#680603 55%,#5a0300 85%,#560302);box-shadow:0 0 5px 4px #6c0904}
.cd b{font:700 10.6cqw/1 var(--cg);font-variant-numeric:lining-nums tabular-nums;background:linear-gradient(#fff3bf 0,#f0c765 55%,#c8902a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* mehendi plate */
.plate{position:absolute;z-index:6;left:6%;right:6%;bottom:3.6%;padding:3.4% 4% 3.8%;background:linear-gradient(#fff8e8,#f8e8c4);border:1px solid #c9962f;box-shadow:0 0 0 4px #fff8e8,0 0 0 5px #c9962f,0 10px 24px #2a140a66;border-radius:14px;text-align:center;color:#3a2410}
.plate .d{font:700 3.6cqw/1.3 var(--cinzel);letter-spacing:.12em;text-transform:uppercase;color:#1f5a4d}
.plate .vn{font:700 5.4cqw/1.2 var(--cg);margin-top:1.2cqw}
.plate a{display:inline-block;margin-top:2cqw;font:700 2.7cqw var(--cinzel);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:#ffe9a8;background:linear-gradient(#8c1d2b,#6a1220);border:1px solid #e9c46a;padding:2.2cqw 4.8cqw;border-radius:99px}
.fbtn{position:absolute;z-index:6;top:86.3%;height:4.9%;display:grid;place-items:center;font:700 3cqw var(--cinzel);letter-spacing:.18em;text-transform:uppercase;color:#ffe9a8;background:linear-gradient(#8c1d2b,#6a1220);border:1px solid #e9c46a;box-shadow:0 .8cqw 0 #4a0c16;border-radius:99px;cursor:pointer}
.fbtn.alt{color:#8c1d2b;background:#fff3cf;box-shadow:0 .8cqw 0 #b8862b}
/* controls */
.ctl{position:absolute;z-index:30;top:calc(env(safe-area-inset-top,0px) + 14px);width:38px;height:38px;border-radius:50%;border:0;background:#0007;color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px)}
.ctl.sound{left:12px}.ctl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sound .off{display:none}.muted .sound .off{display:block}.muted .sound .on{display:none}
.dots{position:absolute;z-index:30;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;transition:opacity .5s}
.stage:not(.started) .dots{opacity:0}
.dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;background:#ffffff90;box-shadow:0 0 0 1px #0005;cursor:pointer;transition:all .3s}
.dots button.on{height:20px;border-radius:5px;background:#fff}
#toast{position:absolute;z-index:60;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 90px);transform:translateX(-50%);background:#0f3d3e;color:#ffd56b;border:1px solid #e9b44c;padding:10px 18px;border-radius:30px;font:700 .75rem var(--cinzel);opacity:0;transition:opacity .3s;max-width:88%;text-align:center;pointer-events:none}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}}