/* Fade-in animation for welcome screen */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Base style for welcome messages */
.welcome-message {
    opacity: 0;
    position: absolute;
    width: 100%;
    text-align: center;
}

/* Remove default animations - only apply when animations-enabled class is present */
.welcome-screen h1,
#message-1, #message-2, #message-3, #message-4,
.welcome-screen, .date-display,
.gift-container, .gift-lid, .gift-ribbon, .gift-body, .gift-content,
.spotify-link a, #day-tens .digit-roller, #day-ones .digit-roller,
#month-tens .digit-roller, #month-ones .digit-roller,
#year-tens .digit-roller, #year-ones .digit-roller,
.background-animation, .bow-left, .bow-right, .bow-center {
    animation: none;
}

/* Only apply animations when body has the animations-enabled class */
body.animations-enabled #message-1 {
    animation: fadeIn 1.5s ease-in-out 0.5s forwards,
        textGlow 2s ease-in-out 0.5s forwards,
        fadeOut 1.5s ease-in-out 3s forwards;
}

body.animations-enabled #message-2 {
    animation: fadeIn 1.5s ease-in-out 4s forwards,
        textGlow 2s ease-in-out 4s forwards,
        fadeOut 1.5s ease-in-out 6.5s forwards;
}

body.animations-enabled #message-3 {
    animation: fadeIn 1.5s ease-in-out 8s forwards,
        textGlow 2s ease-in-out 8s forwards,
        fadeOut 1.5s ease-in-out 10.5s forwards;
}

body.animations-enabled #message-4 {
    animation: fadeIn 1.5s ease-in-out 12s forwards,
        textGlow 2s ease-in-out 12s forwards,
        fadeOut 1.5s ease-in-out 14.5s forwards;
}

body.animations-enabled .welcome-screen {
    animation: fadeOut 2s ease-in-out 15.5s forwards;
}

body.animations-enabled .date-display {
    animation: fadeIn 2s ease-in-out 16.5s forwards;
}

body.animations-enabled .background-animation {
    animation: fadeIn 2s ease-in-out 16.5s forwards;
}

/* Seven-segment digit rolling animation */
@keyframes rollDigit {
    0% { transform: translateY(0); }
    80% { transform: translateY(-92%); } /* Overshoot slightly */
    90% { transform: translateY(-88%); } /* Bounce back */
    100% { transform: translateY(-90%); } /* Final position showing correct digit */
}

/* Apply animations with class-based triggers for digits */
body.animations-enabled #day-tens .digit-roller {
    animation: rollDigit 2s cubic-bezier(0.34, 1.56, 0.64, 1) 19s forwards;
}

body.animations-enabled #day-ones .digit-roller {
    animation: rollDigit 2s cubic-bezier(0.34, 1.56, 0.64, 1) 19.5s forwards;
}

body.animations-enabled #month-tens .digit-roller {
    animation: rollDigit 2s cubic-bezier(0.34, 1.56, 0.64, 1) 20s forwards;
}

body.animations-enabled #month-ones .digit-roller {
    animation: rollDigit 2s cubic-bezier(0.34, 1.56, 0.64, 1) 20.5s forwards;
}

body.animations-enabled #year-tens .digit-roller {
    animation: rollDigit 2s cubic-bezier(0.34, 1.56, 0.64, 1) 21s forwards;
}

body.animations-enabled #year-ones .digit-roller {
    animation: rollDigit 2s cubic-bezier(0.34, 1.56, 0.64, 1) 21.5s forwards;
}

/* Enhanced gift animations */
body.animations-enabled .gift-container {
    animation: fadeIn 2s ease-in-out 24s forwards,
        floatGift 6s ease-in-out 26s infinite alternate;
}

@keyframes floatGift {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-1deg); }
    75% { transform: translateY(5px) rotate(1deg); }
    100% { transform: translateY(-15px) rotate(-0.5deg); }
}

/* Gift opening animation */
@keyframes openLidEnhanced {
    0% {
        transform: rotateX(0) translateZ(0);
        opacity: 1;
    }

    20% {
        transform: rotateX(-15deg) translateZ(5px);
        opacity: 1;
    }

    60% {
        transform: rotateX(-80deg) translateZ(30px);
        opacity: 1;
    }

    75% {
        transform: rotateX(-110deg) translateZ(40px);
        opacity: 0.8;
    }

    85% {
        transform: rotateX(-100deg) translateZ(45px);
        opacity: 0.5;
    }

    100% {
        transform: rotateX(-120deg) translateZ(50px);
        opacity: 0;
    }
}

@keyframes revealContent {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        filter: blur(5px);
    }

    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.1);
        filter: blur(2px);
    }

    70% {
        transform: translate(-50%, -50%) scale(0.95);
        filter: blur(0px);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0px);
    }
}

@keyframes bowLeftWave {
    0% {
        transform: rotate(30deg) translateX(-30%) scale(1);
    }

    30% {
        transform: rotate(40deg) translateX(-25%) scale(1.1);
    }

    60% {
        transform: rotate(35deg) translateX(-28%) scale(1.05);
    }

    100% {
        transform: rotate(30deg) translateX(-30%) scale(1);
    }
}

@keyframes bowRightWave {
    0% {
        transform: rotate(-30deg) translateX(30%) scale(1);
    }

    30% {
        transform: rotate(-40deg) translateX(25%) scale(1.1);
    }

    60% {
        transform: rotate(-35deg) translateX(28%) scale(1.05);
    }

    100% {
        transform: rotate(-30deg) translateX(30%) scale(1);
    }
}

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

    30% {
        transform: translate(-50%, -55%) scale(1.2);
    }

    60% {
        transform: translate(-50%, -45%) scale(0.9);
    }

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

@keyframes expandGift {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.1);
    }

    60% {
        transform: scale(1.15);
    }

    80% {
        transform: scale(1.08);
    }

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

/* Make the ribbon float up slightly when gift opens */
@keyframes ribbonFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

/* Apply animations with class-based triggers for gift */
body.animations-enabled .gift-lid {
    animation: openLidEnhanced 2.5s ease-in-out 27s forwards;
    transform-style: preserve-3d;
    transform-origin: bottom;
    backface-visibility: visible;
}

body.animations-enabled .gift-ribbon {
    animation: ribbonFloat 1.5s ease-out 28s forwards;
}

body.animations-enabled .gift-body {
    animation: glowEffect 3s ease-in-out 28.5s infinite;
}

body.animations-enabled .gift-content {
    animation: revealContent 2s ease-in-out 28.5s forwards;
}

body.animations-enabled .bow-left {
    animation: bowLeftWave 2s ease-in-out infinite;
}

body.animations-enabled .bow-right {
    animation: bowRightWave 2s ease-in-out infinite;
}

body.animations-enabled .bow-center {
    animation: bowBounce 2s ease-in-out infinite;
}

/* Background particles */
/* Heart animation */
@keyframes floatHeart {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.4;
    }

    25% {
        transform: translateY(-100vh) rotate(20deg) scale(1.1);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-200vh) rotate(-15deg) scale(0.9);
        opacity: 0.9;
    }

    75% {
        transform: translateY(-300vh) rotate(10deg) scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: translateY(-400vh) rotate(-5deg) scale(1);
        opacity: 0.4;
    }
}

.heart {
    animation-name: floatHeart;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* Animation will be paused until sound is enabled via JS */
}

body.animations-enabled .spotify-link a {
    animation: buttonPulse 2s ease-in-out 30s infinite;
}

/* Update text glow animation to use the red color */
@keyframes textGlow {
    0% { text-shadow: 0 0 0 rgba(244, 67, 54, 0); }
    50% { text-shadow: 0 0 30px rgba(244, 67, 54, 0.8); }
    100% { text-shadow: 0 0 0 rgba(244, 67, 54, 0); }
}

/* Update button attention animation */
@keyframes buttonAttention {
    0% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 rgba(244, 67, 54, 0.5); }
    50% { transform: translateX(-50%) scale(1.15); box-shadow: 0 0 20px rgba(244, 67, 54, 0.8); }
    100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 rgba(244, 67, 54, 0.5); }
}

/* Update button pulse animation */
@keyframes buttonPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 rgba(244, 67, 54, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 15px rgba(244, 67, 54, 0.7); }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(244, 67, 54, 0.5); }
}

/* Update glow effect animation */
@keyframes glowEffect {
    0% { box-shadow: 0 15px 35px rgba(244, 67, 54, 0.4); }
    50% { box-shadow: 0 15px 40px rgba(244, 67, 54, 0.7), 0 0 30px rgba(255, 229, 229, 0.5); }
    100% { box-shadow: 0 15px 35px rgba(244, 67, 54, 0.4); }
}