/* =========================================
   TYPING SCENE
========================================= */

#typing-scene {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    display: flex !important;

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

    margin: 0 !important;
    padding: 0 !important;

    background: #000000 !important;

    opacity: 0;

    visibility: hidden;

    z-index: 99999 !important;

    pointer-events: none;

    box-sizing: border-box;

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


/* =========================================
   ACTIVE
========================================= */

#typing-scene.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

/* =========================================
   STAR BACKGROUND
========================================= */

#typing-stars {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

}


/* =========================================
   INDIVIDUAL STAR
========================================= */

.typing-star {

    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

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

    opacity: 0;

    animation:
        starTwinkle
        ease-in-out
        infinite;

}


@keyframes starTwinkle {

    0% {

        opacity: 0;

    }

    50% {

        opacity: 0.8;

    }

    100% {

        opacity: 0;

    }

}


/* =========================================
   FLOATING HEARTS
========================================= */

#typing-hearts {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

}


/* =========================================
   HEART
========================================= */

.typing-heart {

    position: absolute;

    bottom: -40px;

    color: rgba(
        255,
        150,
        190,
        0.55
    );

    opacity: 0;

    animation:
        heartFloat
        linear
        forwards;

}


@keyframes heartFloat {

    0% {

        opacity: 0;

        transform:
            translateY(0)
            scale(0.7)
            rotate(-10deg);

    }

    15% {

        opacity: 0.6;

    }

    70% {

        opacity: 0.35;

    }

    100% {

        opacity: 0;

        transform:
            translateY(-110vh)
            scale(1.1)
            rotate(15deg);

    }

}

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

#typing-text {
    position: relative;

    width: 80%;

    max-width: 900px;

    margin: 0;

    padding: 0;

    text-align: center;

    color: #ffffff;

    font-family:
        "Courier New",
        monospace;

    font-size: clamp(
        20px,
        3vw,
        42px
    );

    font-weight: 400;

    line-height: 1.6;

    letter-spacing: 1px;

    text-shadow: 
        0 0 8px rgba(255,255,0,0.5),
        0 0 25px rgba(255,120,180,0.18),
        0 0 50px rgba(255,120,180,0.08);

}


/* =========================================
   CURSOR
========================================= */

#typing-text::after {

    content: "▌";

    margin-left: 4px;

    animation:
        typingCursor
        0.8s
        infinite;
}


@keyframes typingCursor {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}


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

@media (max-width: 700px) {

    #typing-text {

        width: 85%;

        font-size: 20px;

        line-height: 1.7;

    }

}

/* =========================================
   TAP ANYWHERE HINT
========================================= */

#typing-scene::before {

    content: "tap anywhere";

    position: absolute;

    bottom: 8%;

    left: 50%;

    transform:
        translateX(-50%);

    color: rgba(
        255,
        255,
        255,
        0.45
    );

    font-family:
        "Courier New",
        monospace;

    font-size: 13px;

    letter-spacing: 2px;

    opacity: 0;

    transition:
        opacity 0.8s ease;

    pointer-events: none;
}


/* =========================================
   SHOW HINT AFTER MESSAGE
========================================= */

#typing-scene.message-finished::before {

    opacity: 1;

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


@keyframes tapHint {

    0%,
    100% {

        opacity: 0.3;

    }

    50% {

        opacity: 0.8;

    }

}

/* =========================================
   MESSAGE TRANSITIONS
========================================= */

#typing-text {

    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        filter 0.45s ease;

}


#typing-text.message-changing {

    opacity: 0;

    transform:
        translateY(8px)
        scale(0.98);

    filter: blur(4px);

}


#typing-text.message-visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);

}

/* =========================================
   FIRST TAP HINT
========================================= */

#typing-scene.waiting-for-tap::after {

    content: "tap anywhere";

    position: absolute;

    left: 50%;

    bottom: 10%;

    transform:
        translateX(-50%);

    color: rgba(
        255,
        255,
        255,
        0.5
    );

    font-family:
        "Courier New",
        monospace;

    font-size: 13px;

    letter-spacing: 2px;

    animation:
        firstTapHint
        2s
        ease-in-out
        infinite;

    pointer-events: none;

}


@keyframes firstTapHint {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.8;
    }

}

/* =========================================
   BIRTHDAY REVEAL FADE
========================================= */

#typing-stars,
#typing-hearts {

    transition:
        opacity 1.2s ease,
        filter 1.2s ease;

}


#typing-stars.fade-away,
#typing-hearts.fade-away {

    opacity: 0;

    filter: blur(8px);

}

/* =========================================
   FINAL MESSAGE → BIRTHDAY REVEAL
========================================= */

#typing-text.message-changing {

    opacity: 0 !important;

    transform:
        translateY(-10px)
        scale(0.96);

    filter: blur(12px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease,
        filter 1.2s ease;

}