/* Glowing Text Animation - Softer Glow */
@keyframes glow {
    from {
        text-shadow: 0 0 10px var(--secondary-color)66,
                     0 0 18px var(--secondary-color)33,
                     0 0 25px var(--secondary-color)11,
                     0 0 5px #fff7f2;
    }
    to {
        text-shadow: 0 0 18px var(--secondary-color)88,
                     0 0 25px var(--secondary-color)55,
                     0 0 35px var(--secondary-color)33,
                     0 0 8px #fff7f2;
    }
}

/* Gentle Floating Animation for Hero Avatar */
@keyframes gentleFloat {
    0% {
        transform: translateY(0px) rotate(-1deg);
    }
    50% {
        transform: translateY(-10px) rotate(1deg);
    }
    100% {
        transform: translateY(0px) rotate(-1deg);
    }
}

/* Heartbeat Animation - Softer Pulse */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.15);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

/* Sparkle Animation for Hero Overlays */
@keyframes sparkleAnim {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
}

/* Gentle Pulse for Hero Heart Overlay */
@keyframes gentlePulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Page Load Animation - Smoother Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations to elements */
.hero-content,
.about-content,
.memories-hero .subtitle, /* Target subtitle specifically if hero itself doesn't fade */
.mood-card,
.feature-card,
.about-card,
.power-card,
.memory-card {
    animation: fadeIn 0.8s ease-out 0.2s forwards;
    opacity: 0; /* Start hidden for fadeIn */
}

/* Staggered fade-in for grid items - applied via nth-child in main CSS if needed */

/* Loading Animation - Using Site Colors */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease-out;
}

.loading::after {
    content: '';
    width: 45px;
    height: 45px;
    border: 5px solid var(--secondary-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: loadingSpin 0.8s ease infinite;
}

@keyframes loadingSpin {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}

/* Remove default float and blink if no longer used explicitly */
/* @keyframes float { ... } */
/* @keyframes blink { ... } */
/* @keyframes cursorAnim { ... } */

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}