/* ========================================
   SUBIN BIRTHDAY – MASTER STYLESHEET
   ======================================== */

/* ---------- RESET & VARIABLES ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --bg-primary: #0a0015;
    --bg-secondary: #0f0225;
    --neon-pink: #ff2d95;
    --neon-cyan: #00e5ff;
    --neon-purple: #b44dff;
    --gold: #ffd700;
    --white: #ffffff;
    --soft-white: #e0d6f0;
    --glass: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);
    --font-display: 'Dancing Script', cursive;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Noto Sans KR', sans-serif;
}
html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--white);
    font-family: var(--font-body);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* ---------- PRELOADER ---------- */
.preloader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-primary);
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.fade-out { opacity: 0; visibility: hidden; }
.loader-content { text-align: center; }
.loader-emoji {
    font-size: 4rem;
    animation: loader-bounce 1s ease-in-out infinite;
}
.loader-text {
    font-family: var(--font-heading); font-size: 1rem;
    color: var(--soft-white); margin-top: 16px; letter-spacing: 2px;
}
@keyframes loader-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.1); }
}

/* ---------- STAGE SYSTEM ---------- */
.stage {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.8s ease;
    z-index: 1; overflow: hidden;
}
.stage.active { opacity: 1; pointer-events: auto; z-index: 10; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-content {
    position: relative; z-index: 5;
    width: 100%; max-width: 600px; padding: 24px;
    display: flex; flex-direction: column; align-items: center;
}
.center-content { justify-content: center; text-align: center; }
.hidden { display: none !important; }

/* ========= STAGE 1 – OPENING ========= */
#stage-1 { background: radial-gradient(ellipse at 50% 80%, #1a0035 0%, var(--bg-primary) 70%); }
.opening-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.sparkle {
    position: absolute; font-size: 1.2rem; color: var(--gold);
    animation: sparkle-float 4s ease-in-out infinite;
}
.s1 { top: 15%; left: 20%; animation-delay: 0s; }
.s2 { top: 25%; right: 18%; animation-delay: 1s; }
.s3 { bottom: 30%; left: 15%; animation-delay: 2s; }
.s4 { bottom: 20%; right: 22%; animation-delay: 3s; }

.opening-date {
    font-family: var(--font-heading); font-size: 0.9rem;
    color: var(--neon-cyan); letter-spacing: 3px;
    margin-bottom: 16px; opacity: 0;
    animation: fade-in-up 1s 0.5s forwards;
}
.opening-title { font-family: var(--font-display); margin-bottom: 40px; }
.opening-title .line1 {
    display: block; font-size: clamp(2.5rem, 8vw, 4.5rem);
    color: var(--neon-pink);
    text-shadow: 0 0 20px var(--neon-pink), 0 0 60px rgba(255, 45, 149, 0.3);
    opacity: 0; animation: fade-in-up 1s 0.8s forwards;
}
.opening-title .line2 {
    display: block; font-size: clamp(1.2rem, 4vw, 1.8rem);
    color: var(--soft-white); margin-top: 8px;
    opacity: 0; animation: fade-in-up 1s 1.2s forwards;
}
.magic-btn {
    position: relative; width: 100px; height: 100px;
    border: none; border-radius: 50%;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    cursor: pointer; font-size: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    animation: fade-in-up 1s 1.6s forwards, pulse-glow 2s 2.6s ease-in-out infinite;
    transition: transform 0.2s;
    box-shadow: 0 0 30px rgba(255, 45, 149, 0.5);
}
.magic-btn:active { transform: scale(0.9); }
.btn-ring {
    position: absolute; inset: -6px;
    border: 2px solid var(--neon-pink); border-radius: 50%;
    animation: ring-expand 2s ease-in-out infinite;
}

/* ========= STAGE 2 – GIFT BOX ========= */
#stage-2 { background: radial-gradient(ellipse at 50% 60%, #1a0035 0%, var(--bg-primary) 70%); }
.gift-scene { display: flex; flex-direction: column; align-items: center; gap: 30px; cursor: pointer; }
.gift-box { position: relative; width: 180px; height: 200px; perspective: 600px; }
.gift-lid {
    position: absolute; top: 0; left: -10px;
    width: 200px; height: 50px;
    transform-origin: bottom center;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 3;
}
.gift-box.opened .gift-lid { transform: rotateX(-120deg) translateY(-20px); }
.lid-top, .lid-front {
    position: absolute;
    background: linear-gradient(135deg, #ff4da6, #ff2d95);
    border: 2px solid rgba(255,255,255,0.2);
}
.lid-top { width: 100%; height: 20px; top: 0; border-radius: 6px 6px 0 0; }
.lid-front { width: 100%; height: 32px; bottom: 0; border-radius: 0 0 4px 4px; }
.lid-bow { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); z-index: 5; }
.bow-loop {
    position: absolute; top: 0; width: 28px; height: 22px;
    border: 4px solid var(--gold); border-radius: 50%; background: transparent;
}
.bow-left { left: -30px; transform: rotate(-20deg); }
.bow-right { right: -30px; transform: rotate(20deg); }
.bow-knot {
    width: 14px; height: 14px; background: var(--gold);
    border-radius: 50%; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
}
.gift-body { position: absolute; bottom: 0; left: 0; width: 180px; height: 150px; z-index: 2; overflow: hidden; }
.body-front {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #e6005c, #cc0052);
    border-radius: 0 0 8px 8px; border: 2px solid rgba(255,255,255,0.15);
}
.ribbon-v {
    position: absolute; width: 20px; height: 100%;
    left: 50%; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--gold), #e6c200); z-index: 3;
}
.ribbon-h {
    position: absolute; width: 100%; height: 20px; top: 40%;
    background: linear-gradient(90deg, var(--gold), #e6c200); z-index: 3;
}
.gift-glow {
    position: absolute; width: 300px; height: 300px;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
    border-radius: 50%; opacity: 0; transition: opacity 0.5s; z-index: 1;
}
.gift-box.opened ~ .gift-glow { opacity: 1; }
.gift-hint {
    font-family: var(--font-heading); font-size: 1.2rem; color: var(--gold);
    animation: bounce-gentle 1.5s ease-in-out infinite;
}