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

body {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #ff6b9d 75%, #feca57 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    overflow: hidden;
    position: relative;
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Animated starry background */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow:
        100px 200px white, 200px 100px white, 300px 300px white,
        400px 150px white, 500px 250px white, 600px 100px white,
        700px 300px white, 150px 350px white, 250px 50px white,
        350px 200px white, 450px 350px white, 550px 150px white,
        50px 100px white, 650px 250px white, 750px 50px white,
        800px 200px white, 900px 300px white, 1000px 100px white,
        1100px 250px white, 1200px 150px white, 120px 280px white,
        220px 180px white, 320px 80px white, 420px 280px white;
    animation: twinkle 3s infinite alternate;
}

.stars::after {
    animation-delay: 1.5s;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

.container {
    perspective: 1500px;
}

.card {
    width: 500px;
    height: 650px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
}

.card.opened {
    transform: rotateY(180deg);
    cursor: default;
}

.card-front,
.card-inside {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.card-front {
    background: linear-gradient(135deg, rgba(255, 236, 210, 0.95) 0%, rgba(252, 182, 159, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 8px 32px rgba(255, 107, 157, 0.2);
}

.card-inside {
    background: linear-gradient(135deg, rgba(255, 154, 158, 0.95) 0%, rgba(254, 207, 239, 0.95) 50%, rgba(255, 236, 210, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transform: rotateY(180deg);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 8px 32px rgba(255, 107, 157, 0.2);
}

/* Ribbon Decoration */
.ribbon {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff6b9d 0%, #c73866 100%);
    padding: 10px 30px;
    border-radius: 50px;
    box-shadow:
        0 5px 15px rgba(199, 56, 102, 0.4),
        0 0 0 2px rgba(255, 255, 255, 0.3) inset;
    animation: ribbonFloat 3s ease-in-out infinite;
    z-index: 10;
}

.ribbon span {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes ribbonFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px);
    }

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Envelope Animation */
.envelope-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.envelope {
    width: 200px;
    height: 140px;
    position: relative;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

.envelope-body {
    width: 200px;
    height: 120px;
    background: linear-gradient(135deg, rgba(245, 247, 250, 0.95) 0%, rgba(195, 207, 226, 0.95) 100%);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 0 10px 10px;
    position: absolute;
    bottom: 0;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

.envelope-flap {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-top: 80px solid rgba(224, 195, 252, 0.95);
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top center;
    animation: flapOpen 2s ease-in-out infinite;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 10px rgba(224, 195, 252, 0.5));
}

@keyframes flapOpen {

    0%,
    100% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(-30deg);
    }
}

.heart-float {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    animation: heartBounce 2s ease-in-out infinite;
}

.heart {
    font-size: 50px;
    display: inline-block;
    animation: heartPulse 1.5s ease-in-out infinite;
}

@keyframes heartBounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px);
    }

    50% {
        transform: translateX(-50%) translateY(-15px);
    }
}

@keyframes heartPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

.front-text {
    font-family: 'Dancing Script', cursive;
    font-size: 42px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
    animation: glow 2s ease-in-out infinite, gradientText 3s ease infinite;
    background-size: 200% 200%;
}

@keyframes gradientText {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes glow {

    0%,
    100% {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    50% {
        text-shadow: 0 0 20px rgba(107, 70, 193, 0.6);
    }
}

/* Sparkles */
.sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    font-size: 30px;
    animation: sparkleFloat 3s ease-in-out infinite;
}

.sparkle:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.sparkle:nth-child(2) {
    top: 20%;
    right: 15%;
    animation-delay: 0.5s;
}

.sparkle:nth-child(3) {
    bottom: 15%;
    left: 15%;
    animation-delay: 1s;
}

.sparkle:nth-child(4) {
    bottom: 20%;
    right: 10%;
    animation-delay: 1.5s;
}

@keyframes sparkleFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 1;
    }
}

/* Inside Card Styling */
.message-container {
    text-align: center;
    position: relative;
    z-index: 10;
}

.greeting {
    font-family: 'Dancing Script', cursive;
    font-size: 48px;
    background: linear-gradient(135deg, #c73866 0%, #d63384 50%, #ff6b9d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    filter: drop-shadow(2px 2px 4px rgba(199, 56, 102, 0.3));
    margin-bottom: 30px;
    animation: slideInDown 0.8s ease-out, gradientText 3s ease infinite;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message {
    margin-bottom: 30px;
}

.line {
    font-size: 20px;
    color: #5a3d5c;
    margin: 15px 0;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.line-1 {
    animation-delay: 0.3s;
}

.line-2 {
    animation-delay: 0.5s;
}

.line-3 {
    animation-delay: 0.7s;
}

.line-4 {
    animation-delay: 0.9s;
}

.line-5 {
    animation-delay: 1.1s;
}

.special {
    font-family: 'Dancing Script', cursive;
    font-size: 32px;
    font-weight: 700;
    color: #d63384;
    margin-top: 25px;
    animation: fadeInUp 0.6s ease-out forwards, specialGlow 2s ease-in-out infinite;
    animation-delay: 1.1s, 1.7s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes specialGlow {

    0%,
    100% {
        text-shadow: 0 0 10px rgba(214, 51, 132, 0.3);
    }

    50% {
        text-shadow: 0 0 25px rgba(214, 51, 132, 0.8);
    }
}

/* Floating Hearts Inside */
.floating-hearts {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-heart {
    position: absolute;
    font-size: 25px;
    animation: floatUp 4s ease-in infinite;
    opacity: 0;
}

.floating-heart:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.floating-heart:nth-child(2) {
    left: 25%;
    animation-delay: 0.8s;
}

.floating-heart:nth-child(3) {
    left: 40%;
    animation-delay: 1.6s;
}

.floating-heart:nth-child(4) {
    left: 55%;
    animation-delay: 2.4s;
}

.floating-heart:nth-child(5) {
    left: 70%;
    animation-delay: 3.2s;
}

.floating-heart:nth-child(6) {
    left: 85%;
    animation-delay: 4s;
}

@keyframes floatUp {
    0% {
        bottom: -10%;
        opacity: 0;
        transform: translateX(0) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        bottom: 110%;
        opacity: 0;
        transform: translateX(30px) rotate(360deg);
    }
}

.close-btn {
    margin-top: 30px;
    padding: 15px 40px;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 200% 200%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    cursor: pointer;
    box-shadow:
        0 10px 30px rgba(102, 126, 234, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: fadeInUp 0.6s ease-out forwards, buttonGradient 3s ease infinite;
    animation-delay: 1.3s, 1.9s;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

.close-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.close-btn:hover::before {
    width: 300px;
    height: 300px;
}

@keyframes buttonGradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.close-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow:
        0 20px 50px rgba(102, 126, 234, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 0 30px rgba(102, 126, 234, 0.4);
}

.close-btn:active {
    transform: translateY(-2px) scale(1.02);
}

/* Responsive Design */
@media (max-width: 600px) {
    .card {
        width: 90vw;
        height: 80vh;
        max-width: 400px;
    }

    .greeting {
        font-size: 36px;
    }

    .line {
        font-size: 16px;
    }

    .special {
        font-size: 26px;
    }

    .front-text {
        font-size: 32px;
    }

    .envelope {
        width: 150px;
        height: 105px;
    }

    .envelope-body {
        width: 150px;
        height: 90px;
    }

    .envelope-flap {
        border-left: 75px solid transparent;
        border-right: 75px solid transparent;
        border-top: 60px solid rgba(224, 195, 252, 0.95);
    }
}