/* 
   animations.css 
   Immersive, romantic transitions and micro-interactions 
*/

:root {
    --ease-romantic: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Screen Transitions */
.screen {
    opacity: 0;
    transition: opacity 1s var(--ease-romantic);
}

.screen.active {
    opacity: 1;
}

/* Staggered Intro Text */
.intro-text {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s var(--ease-romantic);
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.intro-text.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Modal Transitions */
.modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s var(--ease-romantic);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    transform: scale(0.9) translateY(20px);
    transition: all 0.6s var(--ease-romantic);
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}

/* Shimmer Effect */
.shimmer {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

/* Star Pulsation */
.star-pulse {
    animation: starPulse 3s infinite ease-in-out;
}

@keyframes starPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

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

/* Heartbeat Oscillation */
.heartbeat-glow {
    animation: heartbeat 4s infinite ease-in-out;
}

@keyframes heartbeat {

    0%,
    100% {
        filter: drop-shadow(0 0 5px rgba(219, 170, 172, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(219, 170, 172, 0.8));
    }
}

/* Tip Slide Up */
.tip-slide-up {
    animation: tipSlideUp 550ms var(--ease-romantic) forwards;
}

@keyframes tipSlideUp {
    from {
        opacity: 0;
        transform: translate(-50%, 100%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -20px);
    }
}

/* Emoji Micro-animation */
.emoji-bounce:hover {
    animation: emojiBounce 0.5s ease;
}

@keyframes emojiBounce {

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

    50% {
        transform: scale(1.3) rotate(10deg);
    }
}

/* Modal Content Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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