/* =========================================================
   PREMIUM BIRTHDAY INVITATION
   ROHAN
   MOBILE 9:16 DESIGN
========================================================= */


/* =========================================================
   GOOGLE FONTS
========================================================= */

@import url(
    'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Great+Vibes&family=Montserrat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'
);


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

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


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


body {
    margin: 0;

    background: #111111;

    overflow: hidden;

    font-family:
        "Cormorant Garamond",
        serif;
}


/* =========================================================
   MAIN CARD
========================================================= */

.birthday-invitation {

    position: relative;

    width: min(100vw, calc(100svh * 9 / 16), 526px);

    aspect-ratio: 9 / 16;

    height: auto;

    max-height: none;

    margin: 0 auto;

    overflow: hidden;

    background: #f6eee4;

    opacity: 0;

    visibility: hidden;

    transform: scale(0.98);

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

    isolation: isolate;
}


/* =========================================================
   CARD OPEN
========================================================= */

.birthday-invitation.card-visible {

    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


/* =========================================================
   FULL BACKGROUND
========================================================= */

.background-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    z-index: 0;

    object-fit: fill;

    object-position: center;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   FALLING BALLOON CONTAINER
========================================================= */

.balloon-container {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    z-index: 4;

    pointer-events: none;
}



/* =========================================================
   EXTRA FALLING BALLOONS
========================================================= */

.balloon-container::before,
.balloon-container::after {
    content: "";
    position: absolute;
    top: -40px;
    width: 24px;
    height: 30px;
    border-radius: 50% 50% 48% 48%;
    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,0.85) 0,
            rgba(255,255,255,0.28) 4px,
            transparent 8px
        ),
        linear-gradient(
            145deg,
            #ef6872,
            #d8394e,
            #b51d36
        );
    opacity: 0.42;
    box-shadow: 0 2px 5px rgba(120,0,0,0.12);
    pointer-events: none;
}

.balloon-container::before {
    left: 17%;
    width: 30px;
    height: 38px;
    animation: extraBalloonFallLeft 8s linear 1.2s infinite;
}

.balloon-container::after {
    right: 20%;
    width: 34px;
    height: 43px;
    animation: extraBalloonFallRight 10s linear 3s infinite;
}

@keyframes extraBalloonFallLeft {
    0% {
        transform: translate3d(0,-50px,0) rotate(-8deg);
        opacity: 0;
    }
    12% {
        opacity: 0.5;
    }
    50% {
        transform: translate3d(28px,55vh,0) rotate(8deg);
    }
    100% {
        transform: translate3d(-18px,110vh,0) rotate(-8deg);
        opacity: 0;
    }
}

@keyframes extraBalloonFallRight {
    0% {
        transform: translate3d(0,-50px,0) rotate(8deg);
        opacity: 0;
    }
    12% {
        opacity: 0.5;
    }
    50% {
        transform: translate3d(-30px,55vh,0) rotate(-7deg);
    }
    100% {
        transform: translate3d(20px,110vh,0) rotate(8deg);
        opacity: 0;
    }
}

/* =========================================================
   FALLING BALLOONS
========================================================= */

.falling-balloon {

    position: absolute;

    top: -30px;

    display: block;

    width: var(--balloon-size, 14px);
    height: calc(var(--balloon-size, 14px) * 1.25);

    border-radius:
        50%
        50%
        48%
        48%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,0.9) 0,
            rgba(255,255,255,0.3) 4px,
            transparent 8px
        ),
        linear-gradient(
            145deg,
            #ef6872,
            #d8394e,
            #b51d36
        );

    opacity: 0.5;

    box-shadow:
        0 2px 5px
        rgba(120,0,0,0.12);

    animation-name:
        balloonFall;

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;

    animation-fill-mode: both;
}


/* =========================================================
   BALLOON SIZE VARIATIONS
========================================================= */

.falling-balloon:nth-child(3n) {
    --balloon-size: 18px;
}

.falling-balloon:nth-child(4n) {
    --balloon-size: 22px;
}

.falling-balloon:nth-child(7n) {
    --balloon-size: 27px;
}

.falling-balloon:nth-child(9n) {
    --balloon-size: 32px;
}


.falling-balloon::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 100%;

    width: 1px;

    height: 14px;

    background:
        rgba(150,0,0,0.3);

    transform:
        translateX(-50%);
}


/* =========================================================
   FALLING BALLOON ANIMATION
========================================================= */

@keyframes balloonFall {

    0% {

        transform:
            translate3d(
                0,
                -40px,
                0
            )
            rotate(-8deg);

        opacity: 0;
    }


    10% {

        opacity: 0.5;
    }


    30% {

        transform:
            translate3d(
                calc(var(--drift) * 0.3),
                30vh,
                0
            )
            rotate(7deg);
    }


    55% {

        transform:
            translate3d(
                calc(var(--drift) * -0.5),
                55vh,
                0
            )
            rotate(-6deg);
    }


    75% {

        transform:
            translate3d(
                var(--drift),
                75vh,
                0
            )
            rotate(8deg);
    }


    100% {

        transform:
            translate3d(
                calc(var(--drift) * -0.4),
                110vh,
                0
            )
            rotate(-8deg);

        opacity: 0;
    }
}


/* =========================================================
   CHAMPAGNE IMAGE
   FROM LEFT
========================================================= */

.champagne-wrapper {

    position: absolute;

    z-index: 8;

    left: -45%;

    bottom: 2%;

    width: 32%;

    max-width: 165px;

    opacity: 0;

    animation:
        champagneEnter
        2.2s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        )
        3.9s
        forwards;
}


.champagne-image {

    display: block;

    width: 100%;

    height: auto;

    max-height: 190px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 4px 5px
            rgba(80,0,0,0.08)
        );

    transform-origin: center bottom;

    animation:
        champagneZoom
        2.2s
        ease-in-out
        4s
        infinite;
}


@keyframes champagneZoom {

    0% {
        transform: scale(0.88);
    }

    50% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(0.88);
    }
}


/* =========================================================
   CHAMPAGNE ENTRANCE
========================================================= */

@keyframes champagneEnter {

    0% {

        left: -45%;

        opacity: 0;

        transform: scale(0.55);
    }


    25% {

        opacity: 0.4;

        transform: scale(0.78);
    }


    70% {

        left: 4%;

        opacity: 1;

        transform: scale(1.08);
    }


    100% {

        left: 6%;

        opacity: 1;

        transform: scale(1);
    }
}


/* =========================================================
   CAKE IMAGE
   FROM RIGHT
========================================================= */

.cake-wrapper {

    position: absolute;

    z-index: 8;

    right: -45%;

    bottom: 2%;

    width: 30%;

    max-width: 155px;

    opacity: 0;

    animation:
        cakeEnter
        2.2s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        )
        4.15s
        forwards;
}


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

.cake-image {

    display: block;

    width: 100%;

    height: auto;

    max-height: 200px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 4px 5px
            rgba(80,0,0,0.08)
        );

    transform-origin: center bottom;

    animation:
        cakeZoom
        2.2s
        ease-in-out
        4.3s
        infinite;
}


@keyframes cakeZoom {

    0% {
        transform: scale(0.88);
    }

    50% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(0.88);
    }
}


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

@keyframes cakeEnter {

    0% {

        right: -45%;

        opacity: 0;

        transform: scale(0.55);
    }


    25% {

        opacity: 0.4;

        transform: scale(0.78);
    }


    70% {

        right: 4%;

        opacity: 1;

        transform: scale(1.08);
    }


    100% {

        right: 6%;

        opacity: 1;

        transform: scale(1);
    }
}


/* =========================================================
   MAIN INVITATION TEXT
========================================================= */

.invitation-text {

    position: absolute;

    z-index: 20;

    top: 17.5%;

    left: 4%;

    width: 92%;

    text-align: center;

    color: #a80f37;

    pointer-events: none;
}


/* =========================================================
   YOU ARE INVITED TO
========================================================= */

.small-text {

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        clamp(
            9px,
            2.5vw,
            12px
        );

    letter-spacing: 3px;

    font-weight: 500;

    margin-bottom: 12px;

    color: #a80f37;

    animation:
        fadeDown
        1.1s
        ease
        0.8s
        both;
}


/* =========================================================
   ROHAN
========================================================= */

.birthday-name {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            23px,
            5.5vw,
            31px
        );

    font-weight: 500;

    font-style: italic;

    letter-spacing: 1px;

    margin-bottom: 6px;

    color: #6f2032;

    animation:
        fadeDown
        1.2s
        ease
        1.25s
        both;
}


/* =========================================================
   BIRTHDAY
========================================================= */

.birthday-title {

    display: block;

    width: 100%;

    font-family:
        "Great Vibes",
        cursive;

    /* BIGGER BIRTHDAY TEXT */
    font-size:
        clamp(
            68px,
            16vw,
            88px
        );

    font-weight: 400;

    line-height: 0.82;

    white-space: nowrap;

    margin: 0 auto;

    position: relative;
    top: 25px;

    transform-origin: center center;

    color: #a80f37;

    text-shadow:
        1px 2px 2px
        rgba(100, 0, 25, 0.15);

    animation:
        birthdayZoom
        1.5s
        ease-in-out
        1.7s
        both,
        birthdayPulse
        4.5s
        ease-in-out
        3.8s
        infinite;
}


/* =========================================================
   BIRTHDAY ZOOM ENTRY
========================================================= */

@keyframes birthdayZoom {

    0% {

        opacity: 0;

        transform:
            translateY(20px)
            scale(0.88);
    }


    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   BIRTHDAY CONTINUOUS ZOOM
========================================================= */

@keyframes birthdayPulse {

    0% {

        transform:
            scale(0.97);
    }


    50% {

        transform:
            scale(1.01);
    }


    100% {

        transform:
            scale(0.99);
    }
}


/* =========================================================
   PARTY
========================================================= */

.birthday-party {

    display: block;

    width: 100%;

    font-family:
        "Great Vibes",
        cursive;

    /* BIGGER PARTY TEXT */
    font-size:
        clamp(
            58px,
            14vw,
            78px
        );

    font-weight: 400;

    line-height: 0.85;

    /* MOVE PARTY DOWN */
    margin-top: 42px;

    /* KEEP CENTERED */
    margin-left: 0;

    padding-left: 20px;

    transform:
        rotate(-3deg);

    transform-origin: center center;

    background:
        linear-gradient(
            90deg,
            #9d0d32,
            #e35b78,
            #b71948,
            #ef6b84,
            #9d0d32
        );

    background-size:
        300% 100%;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        partyReveal
        1.5s
        ease
        2.35s
        both,
        partyGlow
        5s
        ease-in-out
        4s
        infinite;
}



/* =========================================================
   PARTY ENTRY
========================================================= */

@keyframes partyReveal {

    0% {

        opacity: 0;

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


    100% {

        opacity: 1;

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


/* =========================================================
   PARTY CONTINUOUS EFFECT
========================================================= */

@keyframes partyGlow {

    0% {

        background-position:
            0% 50%;

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


    50% {

        background-position:
            100% 50%;

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


    100% {

        background-position:
            0% 50%;

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


/* =========================================================
   EVENT DETAILS
========================================================= */

.event-details {

    position: absolute;

    z-index: 20;

    top: 61%;

    left: 10%;

    width: 80%;

    text-align: center;

    color: #7c3042;

    font-family:
        "Montserrat",
        sans-serif;

    letter-spacing: 2px;

    pointer-events: none;

    animation:
        detailsReveal
        1.4s
        ease
        3.15s
        both;
}


/* =========================================================
   TIME
========================================================= */

.event-time {

    font-size:
        clamp(
            13px,
            3.2vw,
            16px
        );

    font-weight: 500;

    margin-bottom: 12px;
}


/* =========================================================
   DATE
========================================================= */

.event-date {

    font-size:
        clamp(
            12px,
            3vw,
            15px
        );

    font-weight: 500;

    margin-bottom: 22px;

    color: #9d3044;
}


/* =========================================================
   ADDRESS
========================================================= */

.event-address {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            18px,
            4.2vw,
            23px
        );

    line-height: 1.7;

    font-weight: 600;

    font-style: italic;

    letter-spacing: 1px;

    color: #6e2939;
}


/* =========================================================
   TEXT ANIMATION
========================================================= */

@keyframes fadeDown {

    0% {

        opacity: 0;

        transform:
            translateY(-18px);
    }


    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   EVENT DETAILS ANIMATION
========================================================= */

@keyframes detailsReveal {

    0% {

        opacity: 0;

        transform:
            translateY(20px);
    }


    100% {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   OPENING SCREEN
========================================================= */

.opening-screen {

    position: fixed;

    width: min(100vw, calc(100svh * 9 / 16), 526px);

    aspect-ratio: 9 / 16;

    height: auto;

    max-height: none;

    top: 50%;

    left: 50%;

    transform:
        translate(-50%, -50%);

    background:
        #f6eee4;

    z-index: 99999;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    box-shadow:
        0 0 0 2px #111111;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* =========================================================
   OPENING CONTENT
========================================================= */

.opening-content {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   OPENING BALLOON
========================================================= */

.opening-balloon {

    position: absolute;

    width: 180px;

    height: 225px;

    top: 40%;

    left: 50%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%
        50%
        47%
        47%;

    background:
        radial-gradient(
            ellipse at 30% 20%,
            rgba(255,255,255,0.95) 0,
            rgba(255,255,255,0.5) 15px,
            transparent 45px
        ),
        linear-gradient(
            145deg,
            #ff5364 0%,
            #df1f3c 45%,
            #8f1029 100%
        );

    box-shadow:
        inset -20px -30px 40px
        rgba(80,0,20,0.2),

        0 20px 50px
        rgba(120,20,40,0.25);

    cursor: pointer;

    z-index: 100;

    pointer-events: auto;

    touch-action: manipulation;

    -webkit-tap-highlight-color:
        transparent;

    animation:
        openingBalloonFloat
        3s
        ease-in-out
        infinite;
}


/* =========================================================
   BALLOON SHINE
========================================================= */

.opening-balloon::before {

    content: "";

    position: absolute;

    top: 30px;

    left: 35px;

    width: 32px;

    height: 65px;

    border-radius: 50%;

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

    transform:
        rotate(25deg);

    filter: blur(3px);

    pointer-events: none;
}


/* =========================================================
   BALLOON FLOAT
========================================================= */

@keyframes openingBalloonFloat {

    0% {

        transform:
            translate(-50%, -50%)
            translateY(0)
            rotate(-2deg)
            scale(1);
    }


    50% {

        transform:
            translate(-50%, -50%)
            translateY(-12px)
            rotate(2deg)
            scale(1.05);
    }


    100% {

        transform:
            translate(-50%, -50%)
            translateY(0)
            rotate(-2deg)
            scale(1);
    }
}


/* =========================================================
   BALLOON KNOT
========================================================= */

.balloon-knot {

    position: absolute;

    width: 22px;

    height: 22px;

    top:
        calc(
            40% + 103px
        );

    left: 50%;

    transform:
        translateX(-50%)
        rotate(45deg);

    background: #9d1730;

    border-radius: 4px;

    z-index: 101;

    pointer-events: none;
}


/* =========================================================
   BALLOON STRING
========================================================= */

.balloon-string {

    position: absolute;

    width: 2px;

    height: 105px;

    top:
        calc(
            40% + 118px
        );

    left: 50%;

    transform:
        translateX(-50%);

    background:
        rgba(100,40,50,0.45);

    z-index: 90;

    pointer-events: none;
}


/* =========================================================
   TAP TO OPEN
========================================================= */

.tap-to-open {

    position: absolute;

    width: 100%;

    top: 66%;

    left: 0;

    text-align: center;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 4px;

    color: #7a2635;

    cursor: pointer;

    z-index: 200;

    pointer-events: auto;

    user-select: none;

    -webkit-user-select: none;

    animation:
        tapPulse
        1.8s
        ease-in-out
        infinite;
}


/* =========================================================
   TAP PULSE
========================================================= */

@keyframes tapPulse {

    0% {

        opacity: 0.55;
    }


    50% {

        opacity: 1;
    }


    100% {

        opacity: 0.55;
    }
}


/* =========================================================
   BALLOON BURST
========================================================= */

.opening-balloon.balloon-burst {

    animation:
        balloonBurst
        0.55s
        ease-out
        forwards;
}


@keyframes balloonBurst {

    0% {

        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 1;
    }


    40% {

        transform:
            translate(-50%, -50%)
            scale(1.25);

        opacity: 1;
    }


    70% {

        transform:
            translate(-50%, -50%)
            scale(1.65);

        opacity: 0.5;
    }


    100% {

        transform:
            translate(-50%, -50%)
            scale(2);

        opacity: 0;
    }
}


/* =========================================================
   OPENING SCREEN HIDDEN
========================================================= */

.opening-screen.hide-opening {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   HIDDEN TAP TEXT
========================================================= */

.tap-to-open.tap-hidden {

    opacity: 0;

    pointer-events: none;
}


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

@media (min-width: 700px) {

    .birthday-invitation,
    .opening-screen {

        width: min(526px, calc(100svh * 9 / 16));
        height: min(900px, calc(100svh - 20px));
        aspect-ratio: 9 / 16;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    .birthday-invitation,
    .opening-screen {

        width: min(100vw, calc(100svh * 9 / 16));

        height: auto;

        aspect-ratio: 9 / 16;

        max-height: none;
    }


    .birthday-title {

        font-size: 16vw;

        max-width: 100%;

        overflow: visible;
    }


    .birthday-party {

        /* BIGGER ON MOBILE */
        font-size: 14vw;

        /* MOVE DOWN FURTHER */
        margin-top: 44px;

        /* KEEP CENTERED */
        padding-left: 4vw;

        width: 100%;
    }


    .champagne-wrapper {

        width: 33%;

        bottom: 2%;

        left: 5%;
    }


    .cake-wrapper {

        width: 31%;

        bottom: 2%;

        right: 5%;
    }


    .event-details {

        top: 57%;

        width: 84%;

        left: 8%;
    }


    .opening-balloon {

        width: 165px;

        height: 210px;
    }


    .tap-to-open {

        top: 66%;

        font-size: 11px;

        letter-spacing: 3px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .opening-balloon {

        width: 145px;

        height: 185px;
    }


    .birthday-title {

        font-size: 16vw;
    }


    .birthday-party {

        font-size: 13vw;

        padding-left: 3vw;
    }


    .event-address {

        font-size: 18px;
    }
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .champagne-wrapper,
    .cake-wrapper,
    .balloon-container::before,
    .balloon-container::after,
    .invitation-text *,
    .event-details,
    .falling-balloon,
    .opening-balloon,
    .tap-to-open {

        animation: none !important;
    }
}

/* =========================================================
   BROWSER ZOOM SAFE LAYOUT
   Keeps typography proportional to the invitation card itself
   so 125% / 135% browser zoom does not make text overlap.
========================================================= */

.birthday-invitation {
    container-type: inline-size;
}

/* Typography scales with the card width, not the browser viewport. */
.small-text {
    font-size: clamp(8px, 2.5cqw, 12px);
}

.birthday-name {
    font-size: clamp(20px, 5.5cqw, 31px);
}

.birthday-title {
    font-size: clamp(52px, 16cqw, 88px);
    top: 4.75cqw;
}

.birthday-party {
    font-size: clamp(46px, 14cqw, 78px);
    margin-top: 8.4cqw;
    padding-left: 3.8cqw;
}

.event-time {
    font-size: clamp(11px, 3.2cqw, 16px);
}

.event-date {
    font-size: clamp(10px, 3cqw, 15px);
}

.event-address {
    font-size: clamp(16px, 4.2cqw, 23px);
}

/* The event block stays below the Party text at narrow card widths. */
@container (max-width: 430px) {
    .birthday-title {
        font-size: clamp(50px, 15.5cqw, 70px);
    }

    .birthday-party {
        font-size: clamp(44px, 13.5cqw, 62px);
        margin-top: 7.5cqw;
    }

    .event-details {
        top: 60%;
    }

    .event-address {
        line-height: 1.55;
    }
}

/* At very narrow zoomed card widths, give the title stack a little
   more vertical breathing room rather than allowing overlap. */
@container (max-width: 360px) {
    .birthday-title {
        font-size: clamp(46px, 15cqw, 58px);
    }

    .birthday-party {
        font-size: clamp(40px, 13cqw, 52px);
        margin-top: 6.5cqw;
    }

    .event-details {
        top: 61%;
    }

    .event-time,
    .event-date {
        letter-spacing: 1.5px;
    }

    .event-address {
        font-size: clamp(15px, 4cqw, 18px);
    }
}

/* Override the old viewport-based mobile font rules so browser zoom
   cannot bring back the overlap. */
@media (max-width: 520px) {
    .birthday-title {
        font-size: clamp(52px, 16cqw, 82px);
    }

    .birthday-party {
        font-size: clamp(46px, 14cqw, 70px);
        margin-top: 8cqw;
        padding-left: 3.5cqw;
    }

    .event-details {
        top: 60%;
    }
}

@media (max-width: 380px) {
    .birthday-title {
        font-size: clamp(48px, 15.5cqw, 68px);
    }

    .birthday-party {
        font-size: clamp(43px, 13.5cqw, 58px);
        margin-top: 7cqw;
    }

    .event-details {
        top: 61%;
    }
}


/* =========================================================
   FINAL 9:16 CARD LOCK
   The invitation and opening screen always remain exactly 9:16.
========================================================= */

.birthday-invitation,
.opening-screen {
    width: min(100vw, 526px, calc(100svh * 9 / 16)) !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    max-height: none !important;
}

@media (min-width: 700px) {
    .birthday-invitation,
    .opening-screen {
        width: min(526px, calc((100svh - 20px) * 9 / 16)) !important;
        height: min(calc(100svh - 20px), 900px) !important;
    }
}


/* =========================================================
   FINAL TEXT SIZE ADJUSTMENT
   Keep the card 9:16, but restore a larger text appearance.
========================================================= */

.birthday-invitation .small-text {
    font-size: clamp(9px, 2.8cqw, 13px) !important;
}

.birthday-invitation .birthday-name {
    font-size: clamp(23px, 6.2cqw, 35px) !important;
}

.birthday-invitation .birthday-title {
    font-size: clamp(58px, 18cqw, 96px) !important;
}

.birthday-invitation .birthday-party {
    font-size: clamp(50px, 16cqw, 86px) !important;
}

.birthday-invitation .event-time {
    font-size: clamp(12px, 3.6cqw, 18px) !important;
}

.birthday-invitation .event-date {
    font-size: clamp(11px, 3.4cqw, 17px) !important;
}

.birthday-invitation .event-address {
    font-size: clamp(17px, 4.8cqw, 25px) !important;
}