/* =========================================================
   ASTHA'S 17TH BIRTHDAY
   Vibrant Pink Theme
========================================================= */


/* =========================================================
   RESET
========================================================= */

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

    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;

    font-family:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif;

    overflow: hidden;

    color: #4b1731;

    background: #fff0f6;
}

button {
    font-family: inherit;

    border: none;
    outline: none;

    cursor: pointer;
}


/* =========================================================
   COMMON SCREEN
========================================================= */

.screen {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    display: flex;

    justify-content: center;
    align-items: center;

    text-align: center;

    padding: 24px;

    opacity: 0;
    visibility: hidden;

    transform: scale(0.97);

    transition:
        opacity 0.65s ease,
        transform 0.65s ease,
        visibility 0.65s ease;

    overflow-y: auto;
    overflow-x: hidden;
}

.screen.active {
    opacity: 1;
    visibility: visible;

    transform: scale(1);
}


/* =========================================================
   PINK BACKGROUNDS
========================================================= */

#welcome-screen,
#name-screen,
#cake-screen,
#message-screen {

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(255, 160, 205, 0.55),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 85%,
            rgba(255, 91, 161, 0.35),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #fff5fa,
            #ffe1ef
        );
}


/* =========================================================
   WELCOME
========================================================= */

.welcome-content {
    width: 100%;
    max-width: 400px;

    animation: contentIn 1s ease;
}

.eyebrow {
    color: #d93578;

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 1.5px;

    margin-bottom: 14px;
}

.welcome-content h1 {
    font-size: clamp(3rem, 15vw, 5rem);

    color: #d72c72;

    margin-bottom: 15px;
}

.welcome-message {
    color: #78354f;

    font-size: 1.05rem;

    line-height: 1.7;

    margin-bottom: 35px;
}

.floating-heart {
    font-size: 4rem;

    color: #ff4d98;

    animation:
        heartFloat
        2s
        ease-in-out
        infinite;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-btn {

    min-height: 54px;

    padding: 15px 30px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #ff4f9a,
            #ff267d
        );

    color: white;

    font-size: 1rem;

    font-weight: 700;

    box-shadow:
        0 10px 25px
        rgba(255, 55, 135, 0.28);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.primary-btn:active {
    transform: scale(0.94);
}


/* =========================================================
   NAME REVEAL
========================================================= */

.name-content {
    width: 100%;
    max-width: 420px;

    animation:
        contentIn
        0.9s
        ease;
}

.reveal-text {
    color: #8b4866;

    font-size: 1rem;

    margin-bottom: 8px;
}

.birthday-name {

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size:
        clamp(5rem, 24vw, 8rem);

    line-height: 1;

    color: #ec367f;

    text-shadow:
        0 5px 20px
        rgba(236, 54, 127, 0.2);

    animation:
        nameAppear
        1.2s
        ease;

    margin-bottom: 10px;
}

.sparkles {
    font-size: 1.3rem;

    margin: 15px 0;
}

.age-text {
    color: #74354f;

    font-size: 1.05rem;

    margin-bottom: 30px;
}

.age-text strong {
    color: #e52d76;

    font-size: 1.3rem;
}


/* =========================================================
   CAKE
========================================================= */

.cake-content {
    width: 100%;
    max-width: 450px;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.cake-title {
    color: #d82f73;

    font-size:
        clamp(1.8rem, 8vw, 2.7rem);

    margin-bottom: 7px;
}

.cake-subtitle {
    color: #8a5269;

    margin-bottom: 25px;
}


/* =========================================================
   CAKE SCENE
========================================================= */

.cake-scene {

    position: relative;

    width: 330px;
    max-width: 92vw;

    height: 290px;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    margin-bottom: 5px;
}


/* Cake shadow */

.cake-shadow {

    position: absolute;

    bottom: 18px;

    width: 260px;
    height: 25px;

    background:
        rgba(155, 50, 91, 0.15);

    border-radius: 50%;

    filter: blur(7px);
}


/* =========================================================
   CAKE BODY
========================================================= */

.cake {

    position: relative;

    width: 250px;
    height: 180px;

    margin-bottom: 30px;
}


/* Bottom layer */

.cake-layer.lower {

    position: absolute;

    bottom: 0;
    left: 0;

    width: 250px;
    height: 82px;

    background:
        linear-gradient(
            90deg,
            #e95588,
            #ff7da8,
            #e95588
        );

    border-radius:
        12px 12px 22px 22px;

    box-shadow:
        0 13px 18px
        rgba(176, 48, 95, 0.18);
}


/* Upper layer */

.cake-layer.upper {

    position: absolute;

    bottom: 67px;
    left: 15px;

    width: 220px;
    height: 65px;

    background:
        linear-gradient(
            90deg,
            #ff78a4,
            #ffabc5,
            #ff78a4
        );

    border-radius:
        12px 12px 8px 8px;

    z-index: 3;
}


/* =========================================================
   CREAM LINES
========================================================= */

.cream-line {

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 100%;
    height: 15px;

    background: #fff7fa;

    border-radius: 50%;
}


/* =========================================================
   CAKE TOP
========================================================= */

.cake-top {

    position: absolute;

    left: 8px;
    top: 37px;

    width: 234px;
    height: 55px;

    background:
        linear-gradient(
            135deg,
            #fff9fb,
            #ffe1ec
        );

    border-radius: 50%;

    z-index: 6;

    box-shadow:
        inset 0 -5px 8px
        rgba(239, 78, 132, 0.12);
}


/* =========================================================
   FROSTING DRIPS
========================================================= */

.frosting-drip {

    position: absolute;

    bottom: -18px;

    width: 27px;

    background: #fff4f8;

    border-radius:
        0 0 18px 18px;
}

.drip-1 {
    left: 35px;
    height: 25px;
}

.drip-2 {
    left: 88px;
    height: 18px;
}

.drip-3 {
    right: 75px;
    height: 27px;
}

.drip-4 {
    right: 28px;
    height: 19px;
}


/* =========================================================
   SPRINKLES
========================================================= */

.sprinkles {

    position: absolute;

    z-index: 8;

    top: 57px;
    left: 35px;

    width: 180px;
    height: 30px;
}

.sprinkles span {

    position: absolute;

    width: 7px;
    height: 3px;

    border-radius: 5px;

    background: #ff4f9a;

    transform: rotate(25deg);
}

.sprinkles span:nth-child(1) {
    left: 10px;
    top: 7px;
}

.sprinkles span:nth-child(2) {
    left: 42px;
    top: 15px;
    background: #ffd447;
}

.sprinkles span:nth-child(3) {
    left: 72px;
    top: 5px;
    background: #c85cff;
}

.sprinkles span:nth-child(4) {
    left: 105px;
    top: 15px;
    background: #ff4f9a;
}

.sprinkles span:nth-child(5) {
    left: 135px;
    top: 5px;
    background: #ffd447;
}

.sprinkles span:nth-child(6) {
    left: 158px;
    top: 18px;
    background: #c85cff;
}

.sprinkles span:nth-child(7) {
    left: 55px;
    top: 25px;
    background: #ff4f9a;
}

.sprinkles span:nth-child(8) {
    left: 120px;
    top: 27px;
    background: #ff7caa;
}


/* =========================================================
   CENTRAL CANDLE
========================================================= */

.candle {

    position: absolute;

    z-index: 20;

    left: 50%;
    top: -10px;

    transform:
        translateX(-50%);
}


/* Candle stick */

.candle-stick {

    width: 25px;
    height: 72px;

    border-radius:
        7px 7px 5px 5px;

    background:
        repeating-linear-gradient(
            -45deg,
            #ff4f9a 0px,
            #ff4f9a 8px,
            #fff 8px,
            #fff 15px
        );

    box-shadow:
        0 4px 10px
        rgba(200, 45, 100, 0.2);
}


/* Flame */

.candle-flame {

    position: absolute;

    left: 50%;
    top: -34px;

    width: 25px;
    height: 38px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle at 50% 70%,
            #fff7a8 0%,
            #ffd447 35%,
            #ff9d00 65%,
            #ff5d00 100%
        );

    border-radius:
        50% 50% 50% 50% /
        65% 65% 35% 35%;

    box-shadow:
        0 0 12px #ffd447,
        0 0 30px
        rgba(255, 157, 0, 0.65);

    animation:
        flameFlicker
        0.35s
        infinite
        alternate;
}

.candle-flame::after {

    content: "";

    position: absolute;

    width: 9px;
    height: 17px;

    left: 8px;
    bottom: 3px;

    background: #fffbd2;

    border-radius: 50%;
}

.candle-flame.off {

    animation:
        flameOut
        0.5s
        forwards;
}

@keyframes flameFlicker {

    from {
        transform:
            translateX(-50%)
            scale(1);
    }

    to {
        transform:
            translateX(-50%)
            scale(1.12, 0.9);
    }
}

@keyframes flameOut {

    0% {
        opacity: 1;

        transform:
            translateX(-50%)
            scale(1);
    }

    40% {
        opacity: 0.7;

        transform:
            translateX(-60%)
            scale(1.3, 0.7);
    }

    100% {
        opacity: 0;

        transform:
            translateX(-90%)
            scale(0);
    }
}


/* =========================================================
   BLOW BUTTON
========================================================= */

.blow-btn {

    min-height: 55px;

    padding: 15px 28px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #ff5aa0,
            #ef2879
        );

    color: white;

    font-size: 1rem;

    font-weight: 700;

    box-shadow:
        0 10px 25px
        rgba(239, 40, 121, 0.25);

    transition:
        transform 0.2s ease;
}

.blow-btn:active {
    transform: scale(0.94);
}

.blow-btn.hidden {
    display: none;
}


/* =========================================================
   CELEBRATION SCREEN
========================================================= */

#celebration-screen {

    background:

        radial-gradient(
            circle at 20% 15%,
            rgba(255, 255, 255, 0.8),
            transparent 20%
        ),

        radial-gradient(
            circle at 85% 80%,
            rgba(255, 97, 165, 0.35),
            transparent 35%
        ),

        linear-gradient(
            145deg,
            #ff5fa5,
            #ff2e80,
            #d91f6c
        );

    color: white;
}

.celebration-content {

    width: 100%;
    max-width: 430px;

    animation:
        celebrationIn
        0.9s
        ease;
}

.celebration-small {

    font-size: 1rem;

    margin-bottom: 12px;

    opacity: 0.9;
}

.celebration-title {

    font-size:
        clamp(3rem, 15vw, 5rem);

    line-height: 0.9;

    font-weight: 900;

    letter-spacing: -2px;

    text-shadow:
        0 5px 20px
        rgba(120, 0, 50, 0.2);
}

.celebration-title span {
    display: block;
}

.celebration-name {

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size:
        clamp(3rem, 15vw, 5rem);

    margin-top: 10px;
}


/* =========================================================
   PHOTO COLLAGE
========================================================= */

.birthday-photos {

    position: relative;

    width: 300px;
    height: 245px;

    margin: 25px auto 15px;
}


/* Photos start hidden */

.photo {

    position: absolute;

    width: 120px;
    height: 145px;

    padding: 6px;

    background: white;

    border-radius: 5px;

    box-shadow:
        0 10px 25px
        rgba(100, 0, 45, 0.22);

    overflow: hidden;

    opacity: 0;
}

.photo img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   SEQUENTIAL PHOTO REVEAL
========================================================= */

/*
   Each photo has a different delay.
   The final transform keeps its individual
   scrapbook-style rotation.
*/

#celebration-screen.active .photo-one {

    animation:
        photoOneReveal
        0.8s
        ease
        0.25s
        forwards;
}

#celebration-screen.active .photo-two {

    animation:
        photoTwoReveal
        0.8s
        ease
        0.65s
        forwards;
}

#celebration-screen.active .photo-three {

    animation:
        photoThreeReveal
        0.8s
        ease
        1.05s
        forwards;
}

#celebration-screen.active .photo-four {

    animation:
        photoFourReveal
        0.8s
        ease
        1.45s
        forwards;
}


/* Photo positions */

.photo-one {

    left: 10px;
    top: 35px;

    z-index: 1;
}

.photo-two {

    right: 10px;
    top: 15px;

    z-index: 1;
}

.photo-three {

    left: 90px;
    top: 55px;

    z-index: 3;
}

.photo-four {

    left: 50px;
    top: 0;

    z-index: 2;
}


/* Individual animations */

@keyframes photoOneReveal {

    from {
        opacity: 0;

        transform:
            scale(0.65)
            rotate(0deg);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            rotate(-9deg);
    }
}

@keyframes photoTwoReveal {

    from {
        opacity: 0;

        transform:
            scale(0.65)
            rotate(0deg);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            rotate(8deg);
    }
}

@keyframes photoThreeReveal {

    from {
        opacity: 0;

        transform:
            scale(0.65)
            rotate(0deg);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            rotate(2deg);
    }
}

@keyframes photoFourReveal {

    from {
        opacity: 0;

        transform:
            scale(0.65)
            rotate(0deg);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            rotate(-3deg);
    }
}


/* =========================================================
   CELEBRATION MESSAGE
========================================================= */

.celebration-message {

    max-width: 340px;

    margin:
        5px auto 25px;

    line-height: 1.6;

    font-size: 0.95rem;

    opacity: 0.92;
}


/* White button on pink background */

#celebration-screen .primary-btn {

    background: white;

    color: #e52c79;

    box-shadow:
        0 10px 25px
        rgba(100, 0, 40, 0.2);
}


/* =========================================================
   FINAL MESSAGE
========================================================= */

.message-card {

    width: 100%;
    max-width: 410px;

    padding: 32px 24px;

    background:
        rgba(255, 255, 255, 0.72);

    border:
        1px solid
        rgba(255, 255, 255, 0.9);

    border-radius: 28px;

    box-shadow:
        0 20px 50px
        rgba(184, 45, 105, 0.16);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    animation:
        contentIn
        0.9s
        ease;
}

.message-heart {

    font-size: 2.2rem;

    margin-bottom: 10px;
}

.message-small {

    color: #bd4b78;

    margin-bottom: 12px;
}

.message-card h1 {

    color: #d72d72;

    font-size: 2rem;

    margin-bottom: 22px;
}

.message-text {

    color: #66344b;

    font-size: 0.98rem;

    line-height: 1.75;
}

.message-text p {

    margin-bottom: 17px;
}

.signature {

    margin-top: 25px;

    color: #d72d72;

    font-weight: 700;

    font-size: 1.1rem;
}


/* =========================================================
   CONFETTI
========================================================= */

#confetti-container {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 9999;
}

.confetti {

    position: absolute;

    top: -20px;

    border-radius: 3px;

    animation:
        confettiFall
        linear
        forwards;
}

@keyframes confettiFall {

    from {

        transform:
            translateY(-20px)
            rotate(0deg);

        opacity: 1;
    }

    to {

        transform:
            translateY(110vh)
            rotate(720deg);

        opacity: 0;
    }
}


/* =========================================================
   WIND EFFECT
========================================================= */

.wind-effect {

    position: fixed;

    left: 50%;
    top: 50%;

    z-index: 10000;

    font-size: 3rem;

    pointer-events: none;

    animation:
        windMove
        0.8s
        ease-out
        forwards;
}

@keyframes windMove {

    0% {

        opacity: 0;

        transform:
            translate(-80%, -50%)
            scale(0.5);
    }

    20% {
        opacity: 1;
    }

    100% {

        opacity: 0;

        transform:
            translate(80%, -50%)
            scale(1.4);
    }
}


/* =========================================================
   GENERAL ANIMATIONS
========================================================= */

@keyframes contentIn {

    from {

        opacity: 0;

        transform:
            translateY(20px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes nameAppear {

    from {

        opacity: 0;

        transform:
            scale(0.7);
    }

    to {

        opacity: 1;

        transform:
            scale(1);
    }
}


@keyframes heartFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-5deg);
    }

    50% {

        transform:
            translateY(-12px)
            rotate(5deg);
    }
}


@keyframes celebrationIn {

    from {

        opacity: 0;

        transform:
            scale(0.8);
    }

    70% {

        transform:
            scale(1.04);
    }

    to {

        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .screen {
        padding: 18px;
    }

    .cake-scene {

        transform:
            scale(0.85);

        margin-top: -20px;
        margin-bottom: -25px;
    }

    .birthday-photos {

        transform:
            scale(0.85);

        margin-top: 5px;
        margin-bottom: 0;
    }

    .celebration-message {

        font-size: 0.85rem;
    }

}


/* =========================================================
   SHORT MOBILE SCREENS
========================================================= */

@media (max-height: 680px) {

    .cake-scene {

        transform:
            scale(0.8);

        margin-top: -20px;
        margin-bottom: -35px;
    }

    .cake-subtitle {

        margin-bottom: 0;
    }

    .blow-btn {

        min-height: 48px;

        padding:
            12px 24px;
    }

    .birthday-photos {

        transform:
            scale(0.78);

        margin-top: -5px;
        margin-bottom: -30px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 768px) {

    .primary-btn:hover {

        transform:
            translateY(-3px);

        box-shadow:
            0 14px 30px
            rgba(255, 55, 135, 0.35);
    }

    .blow-btn:hover {

        transform:
            translateY(-3px);
    }

    .photo-one:hover {

        transform:
            rotate(-9deg)
            translateY(-8px);
    }

    .photo-two:hover {

        transform:
            rotate(8deg)
            translateY(-8px);
    }

    .photo-three:hover {

        transform:
            rotate(2deg)
            translateY(-8px);
    }

    .photo-four:hover {

        transform:
            rotate(-3deg)
            translateY(-8px);
    }
}