/* reveals.css — the "opening moment" props: present, candle, snow globe, cracker, scratch card */
[hidden],.hidden{display:none!important}
dialog.stage-mode::backdrop{background:radial-gradient(circle at 50% 45%, rgba(18,14,38,.84), rgba(4,5,12,.96))}
.stage .skipbtn{position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top));background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  border-radius:999px;padding:7px 14px;font-weight:700;font-size:.85rem;cursor:pointer;z-index:5}
.stage .subhint{font-size:.9rem;opacity:.8;margin-top:-10px}
.stage .mic{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.stage .mic svg{width:16px;height:16px}
.stage .meter{width:120px;height:6px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden;margin:4px auto 0}
.stage .meter i{display:block;height:100%;width:0;background:#ffd75e;transition:width .08s}
.stage .dark{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.stage .prop{position:relative;z-index:2}

/* ---------- candle ---------- */
.candle-wrap{position:relative;width:200px;height:330px;cursor:pointer;background:none;border:0;padding:0}
.candle-wrap svg.candle{width:100%;height:100%;overflow:visible}
.candle-wrap .cglow{position:absolute;left:50%;top:70px;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,200,110,.55), rgba(255,170,70,.18) 40%, transparent 68%);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.candle-wrap .flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker 1.3s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.96,1.05) skewX(2deg)}50%{transform:scale(1.03,.95) skewX(-2deg)}75%{transform:scale(.98,1.04) skewX(1deg)}}
.candle-wrap .smoke path{opacity:0}

/* ---------- snow globe ---------- */
.globe{position:relative;width:250px;height:310px;background:none;border:0;padding:0;cursor:pointer;transform-origin:50% 90%}
.globe svg{width:100%;height:100%;overflow:visible}
.globe canvas{position:absolute;left:25px;top:15px;width:200px;height:200px;border-radius:50%;pointer-events:none}
.globe .gshine{position:absolute;left:25px;top:15px;width:200px;height:200px;border-radius:50%;pointer-events:none;transition:box-shadow .5s, background .5s}
.globe.glow .gshine{box-shadow:0 0 60px 20px rgba(255,236,170,.75);background:radial-gradient(circle, rgba(255,250,225,.9), rgba(255,255,255,.2) 60%, transparent 70%)}

/* ---------- cracker ---------- */
.cracker{position:relative;width:min(360px,92vw);aspect-ratio:340/120;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.cracker:active{cursor:grabbing}
.cracker .half{position:absolute;top:0;width:50%;height:100%;overflow:hidden;will-change:transform}
.cracker .half.l{left:0}
.cracker .half.r{right:0}
.cracker .half svg{position:absolute;top:0;height:100%;width:200%}
.cracker .half.l svg{left:0}
.cracker .half.r svg{right:0}
.cracker .tear{position:absolute;left:50%;top:14%;bottom:14%;width:0;border-left:2px dashed rgba(255,255,255,.0);transform:translateX(-1px)}
.cracker .flash{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:#fff;opacity:0;pointer-events:none;box-shadow:0 0 60px 30px #fff}
.cracker .crown{position:absolute;left:50%;top:50%;width:110px;margin:-30px 0 0 -55px;opacity:0;pointer-events:none}
.pullbar{width:180px;height:6px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden;margin:0 auto}
.pullbar i{display:block;height:100%;width:0;background:var(--accent)}

/* ---------- scratch card ---------- */
.scratch{position:relative;width:min(340px,88vw);aspect-ratio:17/11;border-radius:16px;overflow:hidden;background:#fffaf0;color:#2b2117;
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 0 0 3px var(--accent);touch-action:none}
.scratch .sc-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;
  background:radial-gradient(circle at 50% 40%, #fff, #fff5df 70%)}
.scratch .sc-under .pd{font-family:var(--display);color:var(--brand);font-size:1.1rem}
.scratch .sc-under .pt{font-family:var(--display);font-size:1.6rem;line-height:1.12;margin-top:6px}
.scratch .sc-under .ps{font-size:.9rem;color:#6a5a48;margin-top:6px;font-weight:600}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;transition:opacity .6s}
.linkbtn{background:none;border:0;color:#fff;opacity:.8;text-decoration:underline;cursor:pointer;font-weight:600}

@media (prefers-reduced-motion: reduce){ .candle-wrap .cglow,.candle-wrap .flame{animation:none} }