/* ============================================
   ANIMATIONS - Keyframes, scroll reveals, effects
   ============================================ */

/* --- Hero Reveal Animations (triggered after curtain opens) --- */

.hero--revealed .hero__logo-icon {
    animation: fadeSlideUp 1s ease 0s forwards;
}

.hero--revealed .hero__title {
    animation: fadeSlideUp 1s ease 0.2s forwards;
}

.hero--revealed .hero__divider {
    animation: expandWidth 1s ease 0.5s forwards;
}

.hero--revealed .hero__tagline {
    animation: fadeSlideUp 1s ease 0.7s forwards;
}

.hero--revealed .hero__cta {
    animation: fadeSlideUp 1s ease 1s forwards;
}

.hero--revealed .hero__scroll-indicator {
    animation: fadeIn 1s ease 1.5s forwards;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes expandWidth {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 120px;
        opacity: 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Scroll Reveal Animations --- */

/* Elements with data-animate start hidden */
[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s var(--ease-smooth),
        transform 0.8s var(--ease-smooth);
    transition-delay: var(--animate-delay, 0s);
}

/* Visible state - added by Intersection Observer */
[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Spotlight Effect (hero section) --- */
.hero--spotlight {
    --mouse-x: 50%;
    --mouse-y: 40%;
}

.hero--spotlight::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 235, 180, 0.06),
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* --- Gold Shimmer Effect (for section titles) --- */
@keyframes goldShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.section__title {
    background: linear-gradient(
        90deg,
        var(--text-primary) 0%,
        var(--text-primary) 40%,
        var(--gold-light) 50%,
        var(--text-primary) 60%,
        var(--text-primary) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-animate].visible .section__title {
    animation: goldShimmer 3s ease 0.5s 1 forwards;
}

/* --- Flame Glow Animation (hero icon) --- */
@keyframes flameGlow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(201, 168, 76, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(201, 168, 76, 0.6));
    }
}

.hero--revealed .hero__flame {
    animation: flameGlow 3s ease-in-out infinite;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
    }

    .hero__logo-icon,
    .hero__title,
    .hero__divider,
    .hero__tagline,
    .hero__cta,
    .hero__scroll-indicator {
        opacity: 1;
        transform: none;
    }

    .hero__divider {
        width: 120px;
    }

    .curtain-overlay {
        display: none;
    }
}