/* Global */

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

body {

    overflow: hidden;

    font-family: Arial, Helvetica, sans-serif;

    background: black;

}

/* =====================

POSTER

===================== */

#poster {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, .95);

    justify-content: center;

    align-items: center;

    flex-direction: column;

    z-index: 1000;

}

#posterImg {

    width: 90%;

    max-width: 500px;

    max-height: 90%;

    border-radius: 20px;

    box-shadow: 0px 0px 30px gold;

    animation: posterZoom 1s;
    transition: opacity 1s ease;

}

@keyframes posterZoom {

    from {

        opacity: 0;

        transform: scale(.5);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* =====================

GREETING

===================== */

#greeting {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

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

    background: rgba(0, 0, 0, .85);

    padding: 25px;

    border-radius: 20px;

    color: white;

    text-align: center;

    z-index: 1100;

    animation: fadeIn 1s;

}

#greeting h1 {

    font-size: 40px;

    margin-bottom: 15px;

    color: gold;

}

#greeting p {

    font-size: 24px;

}

/* =====================

GIFT

===================== */

#gift {

    display: none;

    position: fixed;

    bottom: 80px;

    left: 50%;

    transform: translateX(-50%);

    text-align: center;

    cursor: pointer;

    z-index: 1200;

}

#giftImg {

    width: 430px;

    animation: giftFloat 1s infinite alternate;

}

#gift p {

    font-size: 24px;

    color: white;

    margin-top: 10px;

}

@keyframes giftFloat {

    from {

        transform: translateY(0px);

    }

    to {

        transform: translateY(-20px);

    }

}

/* =====================

VIDEO

===================== */

#videoContainer {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: black;

    z-index: 1300;

}

#birthdayVideo {

    width: 100%;

    height: 100%;

    object-fit: contain;

}

#specialVideoContainer {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, .95);

    z-index: 1300;

    justify-content: center;

    align-items: center;

    overflow: hidden;

}

#specialVideo {

    width: auto;

    height: 100vh;

    max-width: 56.25vh;
    /* 9:16 ratio */

    aspect-ratio: 9 / 16;

    object-fit: contain;

    border-radius: 20px;

    box-shadow:
        0 0 25px rgba(255, 105, 180, .5);

}

#skipSpecialVideo {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 9999;

    padding: 12px 22px;

    border: none;

    border-radius: 30px;

    background: rgba(255, 255, 255, .15);

    backdrop-filter: blur(10px);

    color: white;

    font-size: 18px;

    cursor: pointer;

    transition: .3s;

}

#skipSpecialVideo:hover {

    background: #ff4d6d;

}

/* =====================

QUOTE

===================== */

#quote {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

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

    width: 85%;

    max-width: 650px;

    padding: 35px;

    text-align: center;

    color: #ffffff;

    font-size: 30px;

    line-height: 1.8;

    font-family: Georgia, serif;

    background: rgba(17, 1, 1, 0.5);

    backdrop-filter: blur(15px);

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

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

    border-radius: 25px;

    box-shadow:
        0 0 20px rgba(255, 105, 180, .35),
        0 0 50px rgba(255, 20, 147, .25);

    text-shadow:
        0 0 8px rgba(255, 255, 255, .6),
        0 0 15px rgba(255, 105, 180, .5);

    z-index: 1400;

    animation: quoteFade 1.2s ease;

}

/* =====================

HEART

===================== */

#heart {

    position: fixed;

    top: 50%;

    left: 50%;

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

    display: none;

    text-align: center;

    font-family: Arial, sans-serif;

    font-size: 42px;

    font-weight: bold;

    color: #ffffff;

    padding: 25px 40px;

    border-radius: 25px;

    background: rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(10px);

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

    box-shadow:
        0 0 20px rgba(255, 20, 147, .5);

    text-shadow:
        0 0 8px #ff4d6d,
        0 0 18px #ff4d6d;

    z-index: 9999;

    cursor: pointer;

    animation: heartPulse 1.5s infinite;

}

.love-heart {

    font-size: 60px;

    margin: 10px;

    animation: pulse 1.5s infinite;

}

.love-title {

    font-size: 72px;

    font-weight: bold;

    color: white;

    font-family: Georgia, serif;

    text-shadow:
        0 0 10px #ff4d6d,
        0 0 20px #ff4d6d,
        0 0 40px #ff4d6d;

}

.love-subtitle {

    font-size: 72px;

    font-weight: bold;

    color: white;

    font-family: Georgia, serif;

    text-shadow:
        0 0 10px #ff4d6d,
        0 0 20px #ff4d6d,
        0 0 40px #ff4d6d;

}

.love-message {

    margin-top: 20px;

    font-size: 28px;

    color: white;

    line-height: 1.5;

    font-family: Arial;

    text-shadow:
        0 0 10px hotpink;

}

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.1);

    }

    100% {

        transform: scale(1);

    }

}

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heartPulse {

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

    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }

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

}

/* =====================

REPLAY

===================== */

#replay {

    display: none;

    position: fixed;

    bottom: max(20px, env(safe-area-inset-bottom));

    right: 20px;

    padding: 15px 28px;

    font-size: 20px;

    font-weight: bold;

    border: none;

    border-radius: 50px;

    background: linear-gradient(45deg, #ff0055, #ff4d6d);

    color: #fff;

    cursor: pointer;

    z-index: 99999;

    box-shadow: 0 8px 25px rgba(255, 0, 85, .5);

}

/* =====================

COMMON

===================== */

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes quoteFade {

    0% {

        opacity: 0;

        transform: translate(-50%, -40%) scale(.9);

    }

    100% {

        opacity: 1;

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

    }

}

/* =====================

MOBILE

===================== */

@media(max-width:768px) {

    #greeting h1 {

        font-size: 30px;

    }

    #greeting p {

        font-size: 20px;

    }

    #specialVideo {

        width: 90vw;

        height: auto;

        max-height: 95vh;

        aspect-ratio: 9/16;

    }

    #quote {

        font-size: 24px;

        padding: 25px;

        width: 90%;

    }

    #heart {

        font-size: 90px;

    }

    #giftImg {

        width: 100px;

    }

    #replay {

        display: none;

        position: fixed;

        bottom: 25px;

        right: 15px;

        left: auto;

        width: auto;

        padding: 14px 24px;

        font-size: 18px;

        z-index: 99999;

    }
}