/* InviBless invitation engine — shared styles. Each demo sets the --variables. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--outer)}
body{font-family:var(--f-body);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
.app{max-width:460px;margin:0 auto;background:var(--page);min-height:100vh;position:relative;overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.25)}
.km{font-family:var(--f-km)}
.kmd{font-family:var(--f-kmd);line-height:1.75}
.en{font-family:var(--f-en)}
.script{font-family:var(--f-script);font-weight:400;line-height:1.05}
section{position:relative;padding:56px 26px}
.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.sec-title{margin:0 0 26px;text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center}
.sec-title .kmd{font-size:22px;color:var(--heading);font-weight:400}
.sec-title .en{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent-ink)}
.orn{display:block;margin:0 auto 14px;color:var(--accent)}
.bi{display:flex;flex-direction:column;gap:2px}
.bi .k{font-family:var(--f-km)}
.bi .e{font-family:var(--f-en);color:var(--muted);font-size:.86em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;border:none;transition:transform .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.96)}
.btn.solid{background:var(--btn);color:var(--btn-ink);box-shadow:0 8px 22px var(--glow)}
.btn.line{background:transparent;color:var(--btn);border:1.5px solid var(--btn)}
.btn .k{font-family:var(--f-km)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sample{position:fixed;top:12px;left:max(12px,calc(50% - 218px));z-index:60;background:rgba(0,0,0,.5);color:#fff;font:600 11px/1 system-ui,sans-serif;letter-spacing:.1em;padding:7px 10px;border-radius:999px;backdrop-filter:blur(6px)}
/* particles */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:55}
/* intro */
#intro{position:fixed;inset:0;z-index:50;perspective:1600px;overflow:hidden}
#intro.done{display:none}
/* music */
#music{position:fixed;top:12px;right:max(12px,calc(50% - 218px));z-index:58;width:48px;height:48px;border-radius:50%;border:1px solid var(--accent);background:var(--float);color:var(--float-ink);display:none;align-items:center;justify-content:center;gap:3px;cursor:pointer;padding:0;backdrop-filter:blur(8px)}
#music i{display:block;width:3px;height:14px;background:currentColor;border-radius:2px;transform-origin:bottom;animation:eq 1s ease-in-out infinite}
#music i:nth-child(2){animation-delay:.2s}#music i:nth-child(3){animation-delay:.4s}#music i:nth-child(4){animation-delay:.1s}
#music.off i{animation:none;transform:scaleY(.25)}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* nav */
#nav{position:fixed;left:50%;transform:translate(-50%,120%);bottom:12px;width:min(436px,calc(100% - 24px));z-index:58;background:var(--float);border:1px solid var(--accent);border-radius:22px;display:grid;grid-template-columns:repeat(5,1fr);padding:4px;backdrop-filter:blur(10px);transition:transform .6s cubic-bezier(.2,.9,.2,1)}
#nav.show{transform:translate(-50%,0)}
#nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:54px;color:var(--float-ink);text-decoration:none;border-radius:16px}
#nav a .k{font-family:var(--f-km);font-size:11px;line-height:1.3}
#nav a .e{font-size:9.5px;opacity:.75;letter-spacing:.04em}
#nav a.on{background:rgba(255,255,255,.12)}
/* reveal (GSAP takes over; fallback shows) */
.rv{opacity:1}
/* countdown */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.cd .u{background:var(--panel);color:var(--panel-ink);border-radius:16px;padding:14px 0 10px;display:flex;flex-direction:column;align-items:center;box-shadow:inset 0 0 0 1px var(--panel-line);overflow:hidden}
.cd b{font-family:var(--f-num);font-size:34px;font-weight:500;line-height:1.1;display:block}
.cd .k{font-family:var(--f-km);font-size:12px;opacity:.9}
.cd .e{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.cd b.tick{animation:tick .5s ease}
@keyframes tick{0%{transform:translateY(-40%);opacity:0}100%{transform:none;opacity:1}}
/* timeline */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--tab);padding:5px;border-radius:999px;margin-bottom:22px}
.tabs button{min-height:46px;border-radius:999px;border:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:transparent;color:var(--heading);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25}
.tabs button .k{font-family:var(--f-km)}
.tabs button .e{font-size:11px;opacity:.75;font-weight:500}
.tabs button.on{background:var(--btn);color:var(--btn-ink)}
.tl{position:relative;padding-left:30px}
.tl:before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--accent),transparent)}
.ti{position:relative;padding:0 0 22px}
.ti:before{content:"";position:absolute;left:-26px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--page);border:2px solid var(--accent);box-shadow:0 0 0 4px var(--glow)}
.ti .t{font-family:var(--f-num);font-size:15px;color:var(--accent-ink);font-weight:600}
.ti .k{font-family:var(--f-km);font-size:17px;color:var(--ink);line-height:1.6}
.ti .e{font-family:var(--f-en);font-size:15px;color:var(--muted)}
/* gallery */
.gal{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 26px 14px;margin:0 -26px;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal figure{flex:0 0 auto;height:min(58vh,400px);margin:0;scroll-snap-align:center;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:2/3;cursor:zoom-in;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 6s ease}

.dots{display:flex;justify-content:center;gap:6px;margin-top:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.35;transition:all .3s}
.dots i.on{opacity:1;background:var(--accent);width:20px;border-radius:9px}
#lb{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:20px}
#lb.open{display:flex}
#lb img{max-height:86vh;border-radius:12px;animation:zoomin .45s cubic-bezier(.2,.9,.2,1)}
#lb button{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:22px;cursor:pointer}
@keyframes zoomin{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
/* venue */
.map{border-radius:20px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.14);border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:220px;border:0;filter:var(--map-filter)}
.venue-card{background:var(--card);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
/* gift flip */
.flip{perspective:1200px;width:250px;height:300px;margin:0 auto;cursor:pointer}
.flip .in{position:relative;width:100%;height:100%;transition:transform .9s cubic-bezier(.3,1.4,.4,1);transform-style:preserve-3d}
.flip.on .in{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center}
.flip .f{background:var(--panel);color:var(--panel-ink);box-shadow:0 18px 40px var(--glow),inset 0 0 0 1px var(--panel-line)}
.flip .b{background:#fff;color:#222;transform:rotateY(180deg);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.qr{width:150px;height:150px;border-radius:12px;background:repeating-conic-gradient(#222 0 25%,#fff 0 50%) 0 0/18px 18px;position:relative;opacity:.9}
.qr:after{content:"KHQR";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);background:#E1232E;color:#fff;font:700 11px system-ui;padding:6px 8px;border-radius:6px}
/* wishes */
.wall{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow:auto;padding:4px 2px;scrollbar-width:thin}
.wish{background:var(--card);border-radius:16px;padding:12px 14px;box-shadow:0 4px 14px rgba(0,0,0,.06);border:1px solid var(--line);animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
.wish b{display:block;font-size:14px;color:var(--heading)}
.wish span{font-size:15px;line-height:1.6}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
/* forms */
.panel{background:var(--panel);color:var(--panel-ink);border-radius:26px;padding:26px 20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 44px var(--glow),inset 0 0 0 1px var(--panel-line)}
.panel .sec-title .kmd,.panel .sec-title .en{color:var(--panel-ink)}
.fl{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.fl .e{font-weight:400;opacity:.75}
.panel input[type=text],.panel textarea{width:100%;min-height:48px;border-radius:14px;border:1px solid var(--panel-line);background:rgba(255,255,255,.1);color:var(--panel-ink);padding:10px 14px;font:inherit;font-size:16px}
.panel textarea{min-height:90px;resize:vertical}
.panel ::placeholder{color:var(--panel-ink);opacity:.6}
.pills{display:grid;gap:8px}
.pill{min-height:48px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:transparent;color:var(--panel-ink);border:1px solid var(--panel-line);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25}
.pill .k{font-family:var(--f-km)}
.pill .e{font-size:11px;opacity:.8;font-weight:500}
.pill.on{background:var(--hi);color:var(--hi-ink);border-color:var(--hi)}
.thanks{display:none;text-align:center;flex-direction:column;align-items:center;gap:8px;padding:8px 0}
.err{display:none;font-size:13px;text-align:center}
footer.end{padding:40px 26px 120px;text-align:center}
footer.end .made{font-size:12px;color:var(--muted);text-decoration:none;display:inline-block;margin-top:14px}
footer.end .credit{font-size:10.5px;color:var(--muted);opacity:.7;margin-top:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.row2 .btn{padding:0 10px;font-size:14px;white-space:nowrap}