/**
 * animations.css
 * Scroll-triggered reveals, keyframe animations, motion system
 */

/* ══════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════ */

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

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

@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

@keyframes shimmerText {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@keyframes lineGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

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

@keyframes ripple {
    0%   { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ══════════════════════════════════════════════════════
   SCROLL-REVEAL BASE CLASSES
   Applied by animations.js using IntersectionObserver
═══════════════════════════════════════════════════════ */

/* Default — fade up */
.fade-up {
    opacity: 0;
    transform: translateY(44px);
    transition:
        opacity   var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
    will-change: opacity, transform;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in (no movement) */
.fade-in {
    opacity: 0;
    transition: opacity var(--duration-reveal) var(--ease-out);
}

.fade-in.visible {
    opacity: 1;
}

/* Fade from left */
.fade-left {
    opacity: 0;
    transform: translateX(-36px);
    transition:
        opacity   var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
}

.fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade from right */
.fade-right {
    opacity: 0;
    transform: translateX(36px);
    transition:
        opacity   var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
}

.fade-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale reveal */
.scale-up {
    opacity: 0;
    transform: scale(0.93);
    transition:
        opacity   var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
}

.scale-up.visible {
    opacity: 1;
    transform: scale(1);
}

/* ── Stagger Delays ──────────────────────────────────── */
/* Used in JS to add data-delay attribute */

[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }
[data-delay="7"] { transition-delay: 0.56s; }
[data-delay="8"] { transition-delay: 0.64s; }

/* ── Hero entrance (no IntersectionObserver needed) ── */

.hero__eyebrow  { animation: fadeUp 1s var(--ease-out) 0.3s both; }
.hero__title    { animation: fadeUp 1s var(--ease-out) 0.5s both; }
.hero__subtitle { animation: fadeUp 1s var(--ease-out) 0.65s both; }
.hero__desc     { animation: fadeUp 1s var(--ease-out) 0.8s both; }
.hero__ctas     { animation: fadeUp 1s var(--ease-out) 0.95s both; }
.hero__badges   { animation: fadeUp 1s var(--ease-out) 1.1s both; }
.hero__scroll   { animation: fadeIn 1.2s var(--ease-out) 1.5s both; }

/* ══════════════════════════════════════════════════════
   UTILITY ANIMATIONS
═══════════════════════════════════════════════════════ */

/* Gold shimmer on text (applied with .text-shimmer) */
.text-shimmer {
    background: linear-gradient(
        90deg,
        var(--clr-gold) 0%,
        var(--clr-gold-light) 40%,
        var(--clr-gold) 60%,
        var(--clr-gold-light) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 4s linear infinite;
}

/* Floating element */
.float {
    animation: float 4s var(--ease-out) infinite;
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
   Respects prefers-reduced-motion: reduce
═══════════════════════════════════════════════════════ */

@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;
    }

    .fade-up,
    .fade-in,
    .fade-left,
    .fade-right,
    .scale-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero__eyebrow,
    .hero__title,
    .hero__subtitle,
    .hero__desc,
    .hero__ctas,
    .hero__badges,
    .hero__scroll {
        animation: none !important;
        opacity: 1 !important;
    }
}