/* ================================================================
   ANIMATION.CSS — Motion Design
   Custom easing · scroll-reveal · stagger · press states · a11y
   ================================================================ */

/* Custom easing tokens */
:root {
    --ease-out-strong:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-spring-soft:   cubic-bezier(0.34, 1.08, 0.64, 1);
}

/* ────────────────────────────────────────────────────────────────
   1. Core keyframes
   ──────────────────────────────────────────────────────────────── */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes revealDown {
    from { opacity: 0; transform: translateY(-28px); }
    to   { opacity: 1; transform: translateY(0);     }
}
@keyframes revealLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0);     }
}
@keyframes revealRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* ────────────────────────────────────────────────────────────────
   2. Scroll-reveal base state + triggered animations
   ──────────────────────────────────────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
}

.animate-on-scroll.fadeIn,
.animate-on-scroll.fadeInUp,
.animate-on-scroll.slideUp {
    animation: revealUp 0.65s var(--ease-out-strong) both;
}
.animate-on-scroll.slideDown {
    animation: revealDown 0.65s var(--ease-out-strong) both;
}
.animate-on-scroll.slideInLeft {
    animation: revealLeft 0.65s var(--ease-out-strong) both;
}
.animate-on-scroll.slideInRight {
    animation: revealRight 0.65s var(--ease-out-strong) both;
}

/* ────────────────────────────────────────────────────────────────
   3. Hero / direct animations (not scroll-triggered)
   ──────────────────────────────────────────────────────────────── */
.slide-in-left {
    opacity: 0;
    animation: revealLeft 0.8s var(--ease-out-strong) 0.25s both;
}
.slide-in-right {
    opacity: 0;
    animation: revealRight 0.8s var(--ease-out-strong) 0.45s both;
}
.slide-down {
    opacity: 0;
    animation: revealDown 0.8s var(--ease-out-strong) both;
}
.fade-in {
    animation: revealUp 0.6s var(--ease-out-strong) both;
}

/* ────────────────────────────────────────────────────────────────
   4. Section title underline reveal via scaleX
   ──────────────────────────────────────────────────────────────── */
.section-title::after {
    transform-origin: center !important;
    transform: translateX(-50%) scaleX(0) !important;
    transition: transform 0.6s var(--ease-out-strong) 0.3s !important;
}

.section-title.fadeIn::after,
.section-title.fadeInUp::after,
.section-title.slideUp::after {
    transform: translateX(-50%) scaleX(1) !important;
}

/* ────────────────────────────────────────────────────────────────
   5. Hero scroll indicator
   ──────────────────────────────────────────────────────────────── */
@keyframes scrollBounce {
    0%   { transform: translateX(-50%) translateY(0);     opacity: 0.85; }
    55%  { transform: translateX(-50%) translateY(10px);  opacity: 0.35; }
    100% { transform: translateX(-50%) translateY(0);     opacity: 0.85; }
}
.hero-scroll-indicator {
    animation: scrollBounce 2.4s var(--ease-in-out-strong) infinite;
}

/* ────────────────────────────────────────────────────────────────
   6. Pulse CTA — ripple ring
   ──────────────────────────────────────────────────────────────── */
@keyframes ripplePulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(196, 154, 108, 0.5); }
    60%       { box-shadow: 0 0 0 14px rgba(196, 154, 108, 0);   }
}
.pulse {
    animation: ripplePulse 2.8s ease infinite;
}

/* ────────────────────────────────────────────────────────────────
   7. Button interaction — specific props, no "all"
   ──────────────────────────────────────────────────────────────── */
.btn {
    transition:
        transform 180ms var(--ease-out-strong),
        background-color 200ms ease,
        box-shadow 200ms ease,
        color 200ms ease !important;
}
.btn:hover {
    transform: translateY(-3px) !important;
}
.btn:active {
    transform: scale(0.97) translateY(0) !important;
    transition-duration: 80ms !important;
}

/* ────────────────────────────────────────────────────────────────
   8. Loading spin
   ──────────────────────────────────────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spin { animation: spin 1.2s linear infinite; }

/* ────────────────────────────────────────────────────────────────
   9. Card zoom utility (hover lift)
   ──────────────────────────────────────────────────────────────── */
.card-zoom {
    transition:
        transform 0.35s var(--ease-out-strong),
        box-shadow 0.35s var(--ease-out-strong) !important;
}
.card-zoom:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
}

/* ────────────────────────────────────────────────────────────────
   10. Prefers reduced motion — keep opacity only, kill movement
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .slide-in-left,
    .slide-in-right,
    .slide-down,
    .fade-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-scroll-indicator,
    .pulse {
        animation: none !important;
    }

    .section-title::after {
        transform: translateX(-50%) scaleX(1) !important;
        transition: none !important;
    }

    .btn:active {
        transform: none !important;
    }
}