/* Page Transitions */
/* Removed fadeIn animation on body to improve Lighthouse performance */
/* Fade-out is handled by JavaScript for smooth transitions */

body.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Animated Gradient Background */
.animated-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(60deg, #FF8C57 0%, #FF6B9D 25%, #FFB088 50%, #FF8C57 75%, #FF6B9D 100%),
        linear-gradient(120deg, #FF6B9D 0%, #FFB088 25%, #FF8C57 50%, #FF6B9D 75%, #FFB088 100%),
        linear-gradient(180deg, #FFB088 0%, #FF8C57 25%, #FF6B9D 50%, #FFB088 75%, #FF8C57 100%);
    background-size: 400% 400%, 300% 300%, 500% 500%;
    background-position: 0% 50%, 50% 50%, 100% 50%;
    animation: gradient-flow 20s ease infinite, gradient-shift 15s ease-in-out infinite, gradient-pulse 10s ease infinite;
    z-index: -10;
    opacity: 0.95;
}

@keyframes gradient-flow {
    0%, 100% {
        background-position: 0% 50%, 50% 50%, 100% 50%;
    }
    25% {
        background-position: 50% 0%, 100% 25%, 0% 75%;
    }
    50% {
        background-position: 100% 50%, 0% 50%, 50% 50%;
    }
    75% {
        background-position: 50% 100%, 25% 75%, 75% 25%;
    }
}

@keyframes gradient-shift {
    0%, 100% {
        background-size: 400% 400%, 300% 300%, 500% 500%;
    }
    50% {
        background-size: 500% 500%, 400% 400%, 300% 300%;
    }
}

@keyframes gradient-pulse {
    0%, 100% {
        opacity: 0.95;
    }
    50% {
        opacity: 0.85;
    }
}

/* Speech Bubble Styles */
.speech-bubble {
    position: relative;
    background: #FFF8F0;
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.speech-bubble::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 20px 15px 0;
    border-color: transparent #FFF8F0 transparent transparent;
}

/* Peach Emoji Rain */
.peach-rain-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 20;
    pointer-events: none;
}

.peach-emoji {
    position: absolute;
    top: -50px; /* Start above the screen */
    font-size: 2rem;
    animation: peach-fall 10s linear infinite;
    user-select: none;
    pointer-events: none;
}

@keyframes peach-fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}