* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background: #050008;
    color: white;
}

/* BACKGROUND */
.background {
    position: fixed;
    inset: 0;
    z-index: -10;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 0, 150, .35), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(120, 0, 255, .35), transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(0, 200, 255, .25), transparent 30%),
        #050008;
}

/* INTRO */
#intro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}
.intro-content { max-width: 1000px; animation: introAppear 2s ease; }
.subtitle { font-size: 16px; letter-spacing: 6px; opacity: .8; margin-bottom: 30px; }
h1 {
    font-size: clamp(60px, 12vw, 150px);
    line-height: .85;
    font-weight: 900;
    letter-spacing: 5px;
    text-shadow: 0 0 10px white, 0 0 30px #ff00aa, 0 0 70px #8b00ff;
}
h1 span {
    display: block;
    background: linear-gradient(90deg, #ff3cac, #ffd700, #00e5ff, #ff3cac);
    background-size: 300%;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradientMove 5s linear infinite;
}
.emoji { font-size: 55px; margin: 35px 0; animation: heartbeat 1.5s infinite; }
.intro-message { font-size: 24px; opacity: .8; }

button {
    margin-top: 40px;
    padding: 18px 35px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    color: white;
    font-size: 17px;
    font-weight: bold;
    background: linear-gradient(90deg, #ff0080, #7928ca, #00c6ff);
    box-shadow: 0 0 20px #ff0080, 0 0 60px rgba(120, 0, 255, .5);
    transition: .3s;
}
button:hover { transform: scale(1.08); box-shadow: 0 0 30px #ff0080, 0 0 100px #7928ca; }

/* PHOTOS */
#photoSection {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
}
.photo-wrapper {
    position: relative;
    width: min(85vw, 550px);
    padding: 8px;
    border-radius: 25px;
    background: linear-gradient(135deg, #ffffff, #ff00aa, #7b2cff, #00e5ff, #ffffff);
    background-size: 300%;
    animation: borderMove 5s linear infinite;
    box-shadow: 0 0 30px #ff00aa, 0 0 80px rgba(123, 44, 255, .8);
}
.photo-wrapper img {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    border-radius: 18px;
    background: black;
    transition: opacity .8s, transform .8s;
}
.photo-glow {
    position: absolute;
    inset: -30px;
    z-index: -1;
    border-radius: 40px;
    background: radial-gradient(circle, rgba(255, 0, 150, .5), transparent 65%);
    filter: blur(25px);
    animation: glowPulse 2s infinite alternate;
}
#photoCaption {
    margin-top: 30px;
    font-size: 28px;
    text-align: center;
    text-shadow: 0 0 10px #ff00aa, 0 0 30px #7b2cff;
}

/* FINAL MESSAGE */
#finalMessage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}
.cake { font-size: 110px; animation: heartbeat 1.3s infinite; }
#finalMessage h2 {
    font-size: clamp(50px, 10vw, 120px);
    margin-top: 25px;
    text-shadow: 0 0 15px white, 0 0 40px #ff00aa, 0 0 80px #7b2cff;
}
#finalMessage p { max-width: 750px; font-size: 23px; line-height: 1.6; margin-top: 30px; opacity: .9; }
.final-emojis { font-size: 35px; margin-top: 40px; }

/* EXISTING FLOATING BALLOONS */
.balloon {
    position: fixed;
    bottom: -150px;
    width: 55px;
    height: 70px;
    border-radius: 50%;
    z-index: 2;
    animation: balloonFly linear forwards;
}
.balloon::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100px;
    left: 50%;
    top: 68px;
    background: rgba(255,255,255,.7);
}
.balloon::before {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 12px solid white;
}

/* PETALS */
.petal {
    position: fixed;
    top: -40px;
    width: 15px;
    height: 22px;
    border-radius: 100% 0 100% 0;
    z-index: 5;
    animation: petalFall linear forwards;
}

/* EXISTING CONFETTI */
.confetti {
    position: fixed;
    width: 10px;
    height: 20px;
    z-index: 50;
    pointer-events: none;
}

/* ANIMATIONS */
@keyframes introAppear {
    from { opacity: 0; transform: scale(.7) translateY(50px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes gradientMove { from { background-position: 0%; } to { background-position: 300%; } }
@keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes balloonFly { from { transform: translateY(0) rotate(-10deg); } to { transform: translateY(-130vh) rotate(20deg); } }
@keyframes petalFall { from { transform: translateY(0) rotate(0); } to { transform: translateY(120vh) rotate(720deg); } }
@keyframes borderMove { from { background-position: 0%; } to { background-position: 300%; } }
@keyframes glowPulse { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }

/* Mobile */
@media(max-width:600px) {
    .subtitle { font-size: 11px; letter-spacing: 3px; }
    .emoji { font-size: 40px; }
    .intro-message { font-size: 18px; }
    button { font-size: 14px; padding: 15px 25px; }
    #photoCaption { font-size: 20px; }
}

/* NEW BALLOON REVEAL — scoped to the first page */
body.birthday-locked main > #intro,
body.birthday-locked main > #photoSection,
body.birthday-locked main > #finalMessage { display: none; }

#balloonIntro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 26px 16px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
#balloonIntro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 72%, rgba(0,190,230,.18), transparent 40%),
                radial-gradient(ellipse at 12% 18%, rgba(255,0,128,.18), transparent 38%);
}
.balloon-intro-content { width: min(920px, 100%); }
.balloon-kicker { color: #dfd0eb; letter-spacing: .28em; font-size: clamp(10px,1.5vw,14px); margin-bottom: 18px; }
.balloon-title {
    font-size: clamp(42px, 8vw, 88px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: .04em;
    text-shadow: 0 0 12px #ff36c5, 0 0 32px #d000ff, 0 0 55px rgba(255,0,190,.45);
}
.balloon-title span { color: #fff; -webkit-text-fill-color: #fff; }
.balloon-instruction { color: #e7ddec; font-size: clamp(14px,2vw,19px); margin-top: 18px; }
.pop-balloons { display:flex; justify-content:center; align-items:flex-end; gap:clamp(16px,5vw,54px); margin:42px auto 12px; }
.pop-balloon-wrap { position:relative; width:clamp(54px,10vw,94px); height:clamp(120px,21vw,178px); display:flex; justify-content:center; }
.pop-balloon {
    position:relative; width:100%; height:auto; aspect-ratio:.78; border-radius:52% 52% 48% 48%;
    margin:0; padding:0; border:1px solid rgba(255,255,255,.5); cursor:pointer;
    box-shadow:inset -12px -12px 18px rgba(0,0,0,.18),inset 9px 8px 15px rgba(255,255,255,.25),0 0 22px currentColor;
    animation: revealFloat 3.2s ease-in-out infinite;
    transition:filter .18s, transform .18s;
}
.pop-balloon:hover { transform:translateY(-8px) scale(1.06); filter:brightness(1.13); }
.pop-balloon:focus-visible { outline:3px solid white; outline-offset:5px; }
.pop-balloon::before {
    content:""; position:absolute; width:17%; height:27%; top:13%; left:20%; border-radius:50%;
    background:rgba(255,255,255,.36); transform:rotate(25deg); filter:blur(1px);
}
.pop-balloon::after {
    content:""; position:absolute; bottom:-8px; left:44%; width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent; border-top:12px solid currentColor;
}
.pop-pink { background:linear-gradient(135deg,#ff5ca8,#f00069); color:#ff168d; animation-delay:-.3s; }
.pop-cyan { background:linear-gradient(135deg,#5df4ff,#00a8f3); color:#00d9f5; animation-delay:-1.5s; }
.pop-purple { background:linear-gradient(135deg,#c58aff,#7b2cff); color:#9c52ff; animation-delay:-.8s; }
.pop-gold { background:linear-gradient(135deg,#ffe66b,#ff9b1a); color:#ffc02e; animation-delay:-2s; }
.pop-string { position:absolute; top:88%; left:50%; width:1px; height:clamp(28px,5vw,48px); background:rgba(255,255,255,.6); }
.pop-balloon-wrap.popped { animation: balloonShock .42s ease-out forwards; }
.pop-balloon-wrap.popped .pop-balloon, .pop-balloon-wrap.popped .pop-string { display:none; }
.letter-reveal {
    position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
    font-size:clamp(42px,8vw,76px); font-weight:900; color:#fff;
    text-shadow:0 0 14px #ff32d2,0 0 28px #e000ff;
    opacity:0; transform:scale(.2) rotate(-20deg);
}
.pop-balloon-wrap.popped .letter-reveal { animation: letterReveal .55s cubic-bezier(.16,1.4,.4,1) forwards; }
.balloon-progress { color:#c6b4d4; font-size:13px; letter-spacing:.08em; min-height:18px; margin-top:8px; }
.revealed-name {
    display:none; width:max-content; max-width:100%; margin:12px auto 0; font-size:clamp(44px,10vw,100px);
    line-height:1.1; font-weight:900; letter-spacing:.12em; color:#fff;
    text-shadow:0 0 8px #fff,0 0 22px #ff36c5,0 0 48px #e000ff,0 0 90px #7b2cff;
}
.revealed-name.show { display:block; animation: grandNameReveal 1.15s cubic-bezier(.16,1.45,.35,1) forwards, nameGlow 1.6s 1.1s ease-in-out infinite alternate; }
.balloon-hint { color:#dfd0eb; margin-top:12px; font-size:14px; }
.continue-button { display:none; margin:22px auto 0; }
.continue-button.show { display:block; animation: introAppear .65s ease both; }
.pop-confetti { position:fixed; z-index:100; pointer-events:none; width:9px; height:15px; }
.pop-flash { position:fixed; inset:0; z-index:90; background:#fff; pointer-events:none; animation: popFlash .5s ease-out forwards; }
.pop-burst-piece { position:absolute; width:9px; height:15px; border-radius:2px; pointer-events:none; animation: popBurst .8s ease-out forwards; }
@keyframes revealFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
@keyframes balloonShock { 0%{transform:scale(1)} 28%{transform:scale(1.22) rotate(7deg)} 100%{transform:scale(.84);opacity:0} }
@keyframes letterReveal { to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes grandNameReveal {
    0%{opacity:0;transform:scale(.05) rotate(-12deg);filter:blur(12px)}
    58%{opacity:1;transform:scale(1.22) rotate(4deg);filter:blur(0)}
    78%{transform:scale(.92) rotate(-2deg)}
    100%{opacity:1;transform:scale(1) rotate(0);filter:blur(0)}
}
@keyframes nameGlow { from{filter:drop-shadow(0 0 8px #ff168d)} to{filter:drop-shadow(0 0 30px #00d9f5)} }
@keyframes popFlash { 0%{opacity:.78} 100%{opacity:0} }
@keyframes popBurst { 0%{transform:translate(0,0) scale(1) rotate(0);opacity:1} 100%{transform:translate(var(--x),var(--y)) scale(.2) rotate(320deg);opacity:0} }
@media(max-width:520px) {
    #balloonIntro { padding:18px 8px; }
    .pop-balloons { gap:12px; margin-top:34px; }
    .pop-balloon-wrap { height:125px; }
    .balloon-kicker { letter-spacing:.15em; }
}
@media(prefers-reduced-motion:reduce) {
    .pop-balloon, .balloon-title, .revealed-name.show { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}


/* =========================================================
   MOBILE RESPONSIVE FIX — balloon intro
   Appended overrides; desktop styling remains unchanged.
========================================================= */
@media (max-width: 600px) {
    #balloonIntro {
        min-height: 100svh;
        padding: 24px 14px;
    }

    .balloon-intro-content {
        width: 100%;
        max-width: 440px;
        margin-inline: auto;
    }

    .balloon-kicker {
        font-size: clamp(9px, 2.6vw, 12px);
        letter-spacing: .12em;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .balloon-title {
        font-size: clamp(34px, 10vw, 60px);
        line-height: 1;
        letter-spacing: .015em;
        overflow-wrap: normal;
    }

    .balloon-instruction {
        font-size: clamp(13px, 3.8vw, 16px);
        line-height: 1.45;
        margin: 16px auto 0;
        max-width: 32ch;
    }

    /* Keep all four balloons in one horizontal row */
    .pop-balloons {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: end;
        justify-items: center;
        width: min(100%, 360px);
        gap: clamp(8px, 3vw, 16px);
        margin: 30px auto 10px;
    }

    .pop-balloon-wrap {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: clamp(112px, 34vw, 150px);
    }

    /* Override generic button sizing so balloons stay oval */
    .pop-balloon {
        appearance: none;
        -webkit-appearance: none;
        display: block;
        flex: 0 0 auto;
        width: 100%;
        max-width: 76px;
        height: auto;
        aspect-ratio: .78;
        min-width: 0;
        margin: 0;
        padding: 0;
        border-radius: 52% 52% 48% 48%;
        line-height: 1;
    }

    .pop-balloon::after {
        bottom: -7px;
    }

    .pop-string {
        top: 88%;
        height: 28px;
    }

    .letter-reveal {
        font-size: clamp(34px, 9vw, 54px);
        line-height: 1;
    }

    .balloon-progress {
        font-size: 12px;
        line-height: 1.4;
        margin-top: 8px;
    }

    .revealed-name {
        width: 100%;
        font-size: clamp(36px, 11vw, 64px);
        letter-spacing: .08em;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    .balloon-hint {
        font-size: clamp(12px, 3.5vw, 14px);
        line-height: 1.5;
        padding-inline: 4px;
    }

    .continue-button {
        max-width: 100%;
        padding: 14px 18px;
        font-size: clamp(10px, 3.1vw, 13px);
        line-height: 1.35;
        white-space: normal;
        margin-top: 20px;
    }
}

/* Extra-small phones */
@media (max-width: 360px) {
    #balloonIntro {
        padding-inline: 10px;
    }

    .pop-balloons {
        gap: 7px;
        width: 100%;
    }

    .pop-balloon-wrap {
        height: 112px;
    }

    .balloon-title {
        font-size: clamp(31px, 9.5vw, 42px);
    }
}