:root{--color-bg-deep: #050508;--color-bg-mid: #12121a;--color-gold: #c9a227;--color-gold-light: #f5e6b8;--color-blue: #1e3a5f;--color-text: #f0ece2;--color-text-muted: rgba(240, 236, 226, .72);--font-display: "Bebas Neue", sans-serif;--font-body: "Oswald", sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg-deep);touch-action:manipulation;-webkit-font-smoothing:antialiased}#app{position:fixed;inset:0;min-height:100dvh;overflow:hidden}.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(16px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease-out-expo),visibility .5s}.scene.is-active{opacity:1;visibility:visible;pointer-events:auto}body[data-phase=envelopeClosed] .batman-hero,body[data-phase=certRise] .batman-hero,body[data-phase=certFlip] .batman-hero,body[data-phase=finale] .batman-hero{opacity:.12}.scene--interactive.is-active{pointer-events:auto}.bg-layer{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.bg-gradient{position:absolute;inset:0;background:linear-gradient(165deg,var(--color-bg-deep) 0%,var(--color-bg-mid) 55%,#0d0f18 100%)}.bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 30%,rgba(0,0,0,.75) 100%)}.bat-signal{position:absolute;top:8%;left:50%;width:min(90vw,420px);height:min(90vw,420px);transform:translate(-50%);background:radial-gradient(circle,rgba(201,162,39,.22) 0%,rgba(30,58,95,.12) 35%,transparent 70%);animation:batSignalPulse 4s ease-in-out infinite}@keyframes batSignalPulse{0%,to{opacity:.5;transform:translate(-50%) scale(.95)}50%{opacity:1;transform:translate(-50%) scale(1.05)}}.batman-hero{position:absolute;right:-8%;bottom:0;width:min(72vw,340px);height:auto;opacity:.35;object-fit:contain;object-position:bottom right;filter:drop-shadow(0 0 40px rgba(201,162,39,.15));pointer-events:none;z-index:1}.content-layer{position:relative;z-index:2;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;text-align:center}.logo-mark{width:min(42vw,180px);height:auto;margin-bottom:12px;filter:drop-shadow(0 4px 24px rgba(201,162,39,.35))}.title-gotham{font-family:var(--font-display);font-size:clamp(2.5rem,12vw,4rem);letter-spacing:.12em;color:var(--color-gold);text-shadow:0 0 40px rgba(201,162,39,.4);line-height:1}.title-yana{font-family:var(--font-display);font-size:clamp(3.5rem,18vw,5.5rem);letter-spacing:.08em;margin-top:4px;background:linear-gradient(180deg,var(--color-gold-light) 0%,var(--color-gold) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.05}.subtitle{font-size:clamp(.95rem,4vw,1.15rem);font-weight:400;color:var(--color-text-muted);margin-top:16px;letter-spacing:.06em;text-transform:uppercase}.greeting-card{width:100%;padding:24px 20px;background:linear-gradient(145deg,#1e3a5f59,#0a0a0cd9);border:1px solid rgba(201,162,39,.25);border-radius:4px;box-shadow:0 8px 32px #00000080,inset 0 1px #ffffff0f;min-height:140px;display:flex;align-items:center;justify-content:center}.greeting-text{font-size:clamp(1.05rem,4.5vw,1.25rem);line-height:1.55;font-weight:400;letter-spacing:.02em}.greeting-progress{display:flex;gap:8px;margin-top:20px}.greeting-dot{width:8px;height:8px;border-radius:50%;background:#c9a22740;transition:background .3s,transform .3s}.greeting-dot.is-active{background:var(--color-gold);transform:scale(1.2)}.btn-primary{font-family:var(--font-body);font-size:1.05rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-bg-deep);background:linear-gradient(180deg,var(--color-gold-light) 0%,var(--color-gold) 100%);border:none;border-radius:2px;padding:16px 32px;min-height:52px;min-width:220px;cursor:pointer;box-shadow:0 4px 24px #c9a22773,inset 0 1px #ffffff59;transition:transform .2s,box-shadow .2s;animation:btnPulse 2.5s ease-in-out infinite}.btn-primary:active{transform:scale(.97)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;animation:none}@keyframes btnPulse{0%,to{box-shadow:0 4px 24px #c9a22773,inset 0 1px #ffffff59}50%{box-shadow:0 4px 36px #c9a227b3,0 0 0 2px #c9a2274d,inset 0 1px #ffffff59}}@media(prefers-reduced-motion:reduce){.bat-signal{animation:none;opacity:.7}.btn-primary{animation:none}.scene{transition-duration:.15s}}.envelope-scene .content-layer{justify-content:center;flex:1}.envelope-stage{position:relative;width:min(88vw,360px);height:min(52vw,220px);perspective:1200px;perspective-origin:50% 40%;margin-bottom:28px}.envelope-wrap{position:absolute;inset:0;transform-style:preserve-3d}.envelope-wrap.is-shaking{animation:envelopeShake .5s ease-in-out}@keyframes envelopeShake{0%,to{transform:translate(0)}20%{transform:translate(-4px) rotate(-1deg)}40%{transform:translate(4px) rotate(1deg)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.envelope-back{position:absolute;inset:0;background:linear-gradient(160deg,#1a1a22,#0d0d12);border:1px solid rgba(201,162,39,.2);border-radius:4px;box-shadow:0 16px 48px #0009}.envelope-pocket{position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(180deg,#252530,#141418);clip-path:polygon(0 0,50% 45%,100% 0,100% 100%,0 100%);border-bottom-left-radius:4px;border-bottom-right-radius:4px;z-index:2}.envelope-letter-slot{position:absolute;left:8%;right:8%;bottom:12%;height:70%;overflow:hidden;z-index:1;display:flex;align-items:flex-end;justify-content:center}.envelope-letter-preview{width:72%;max-height:100%;object-fit:contain;object-position:bottom center;transform:translateY(110%);opacity:0;will-change:transform}.envelope-letter-preview.is-rising{opacity:1}.envelope-flap{position:absolute;left:0;right:0;top:0;height:52%;transform-origin:top center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.16,1,.3,1);z-index:4}.envelope-flap.is-open{transform:rotateX(-165deg)}.envelope-flap-face{position:absolute;inset:0;background:linear-gradient(180deg,#2a2a38,#1a1a24);clip-path:polygon(0 0,50% 100%,100% 0);border:1px solid rgba(201,162,39,.25);backface-visibility:hidden;display:flex;align-items:flex-start;justify-content:center;padding-top:12%}.envelope-flap-logo{width:42%;max-width:120px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5))}.envelope-flap-back{position:absolute;inset:0;background:#141418;clip-path:polygon(0 0,50% 100%,100% 0);transform:rotateX(180deg);backface-visibility:hidden}.envelope-hint{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:16px}@media(prefers-reduced-motion:reduce){.envelope-flap{transition-duration:.3s}.envelope-wrap.is-shaking{animation:none}}.cert-scene{z-index:10}.cert-scene .content-layer{width:100%;max-width:none;height:100%;justify-content:center}.cert-stage{position:relative;width:min(78vw,320px);aspect-ratio:1410 / 2000;perspective:1400px;transform-style:preserve-3d}.cert-stage.is-fullscreen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;aspect-ratio:unset;display:flex;align-items:center;justify-content:center;padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));z-index:20;background:#050508eb}.cert-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.16,1,.3,1)}.cert-card.is-flipped{transform:rotateY(180deg)}.cert-face,.cert-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;overflow:hidden;box-shadow:0 20px 60px #000000a6,0 0 0 1px #c9a22726}.cert-face img,.cert-back img{width:100%;height:100%;object-fit:contain;display:block}.cert-back{transform:rotateY(180deg)}.cert-stage.is-fullscreen .cert-card{width:min(100%,70.5dvh);height:auto;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);aspect-ratio:1410 / 2000}.cert-rise-wrap{position:relative;width:min(78vw,320px);aspect-ratio:1410 / 2000;z-index:5;pointer-events:none;margin:0 auto}.cert-rise-wrap .cert-card{width:100%;height:100%}@media(prefers-reduced-motion:reduce){.cert-card{transition-duration:.35s}}