/* ==========================================================================
   Ascent Property Group — Animations
   Tasteful, performance-safe scroll & load animations.
   All respect prefers-reduced-motion.
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. BASE ANIMATION CLASSES (applied via IntersectionObserver in animations.js)
   --------------------------------------------------------------------- */

.animate-fade-up,
.animate-fade-in,
.animate-fade-left,
.animate-fade-right,
.animate-scale-in {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-up    { transform: translateY(32px); }
.animate-fade-in    { transform: translateY(0); }
.animate-fade-left  { transform: translateX(32px); }
.animate-fade-right { transform: translateX(-32px); }
.animate-scale-in   { transform: scale(0.94); }

.animate-fade-up.is-visible,
.animate-fade-in.is-visible,
.animate-fade-left.is-visible,
.animate-fade-right.is-visible,
.animate-scale-in.is-visible {
    opacity: 1;
    transform: none;
}

/* Staggered delays for grids — applied to child items */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children > *:nth-child(8) { transition-delay: 560ms; }
.stagger-children > *:nth-child(n+9) { transition-delay: 640ms; }

/* Manual delay classes */
.animate-fade-up--delay   { transition-delay: 120ms; }
.animate-fade-up--delay-2 { transition-delay: 240ms; }
.animate-fade-up--delay-3 { transition-delay: 360ms; }

/* -----------------------------------------------------------------------
   2. HERO ENTRANCE (fires on page load, not scroll)
   --------------------------------------------------------------------- */

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

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

@keyframes heroStatsFade {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.hero__eyebrow {
    animation: heroFadeSlide 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.hero__headline {
    animation: heroFadeSlide 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}

.hero__sub {
    animation: heroSubFade 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.55s both;
}

.hero__ctas {
    animation: heroSubFade 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.7s both;
}

.hero__stats {
    animation: heroStatsFade 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.9s both;
}

/* -----------------------------------------------------------------------
   3. STAT COUNTER (value rolls up — driven by JS)
   --------------------------------------------------------------------- */

.counter {
    /* JS adds .counter--animating class when running */
    transition: none;
}

/* -----------------------------------------------------------------------
   4. CHART LINE DRAW-IN
   The chart.js datasets animate on creation — no extra CSS needed.
   These classes control the container entrance.
   --------------------------------------------------------------------- */

.chart-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.chart-card.is-visible {
    opacity: 1;
    transform: none;
}

/* -----------------------------------------------------------------------
   5. METRIC CARD SHIMMER (loading state while data loads)
   --------------------------------------------------------------------- */

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

.metric-card--loading .metric-card__value,
.metric-card--loading .metric-card__label {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
    color: transparent;
    border-radius: 4px;
}

/* -----------------------------------------------------------------------
   6. HEADER SCROLL TRANSITION
   --------------------------------------------------------------------- */

.site-header {
    transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* -----------------------------------------------------------------------
   7. CARD HOVER LIFT
   Applied globally to interactive cards.
   --------------------------------------------------------------------- */

.card-hover {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
}

/* -----------------------------------------------------------------------
   8. BUTTON PRESS EFFECT
   --------------------------------------------------------------------- */

.btn:active {
    transform: scale(0.97);
}

/* -----------------------------------------------------------------------
   9. HAMBURGER MENU ANIMATION
   --------------------------------------------------------------------- */

.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.hamburger span {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* -----------------------------------------------------------------------
   10. STICKY SEARCH BAR (appears when user scrolls past hero)
   --------------------------------------------------------------------- */

@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.sticky-search-bar {
    position: fixed;
    top: var(--header-height-scrolled);
    left: 0; right: 0;
    z-index: 900;
    background: var(--bg-dark);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-3) 0;
    display: none;
}
.sticky-search-bar.is-visible {
    display: block;
    animation: slideDown 0.4s ease;
}

/* -----------------------------------------------------------------------
   11. PARALLAX (subtle, on hero bg only)
   Applied via JS — just the CSS transform anchor.
   --------------------------------------------------------------------- */

.hero {
    will-change: background-position;
}

/* -----------------------------------------------------------------------
   12. MARKET TEMPERATURE PULSE
   --------------------------------------------------------------------- */

@keyframes tempPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.temp--hot { animation: tempPulse 2s ease-in-out infinite; }

/* -----------------------------------------------------------------------
   13. SECTION DIVIDER WAVE
   --------------------------------------------------------------------- */

.section-wave {
    display: block;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.section-wave svg {
    display: block;
    width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------
   REDUCED MOTION OVERRIDES
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .animate-fade-in,
    .animate-fade-left,
    .animate-fade-right,
    .animate-scale-in,
    .chart-card {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .hero__eyebrow,
    .hero__headline,
    .hero__sub,
    .hero__ctas,
    .hero__stats {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .temp--hot { animation: none; }
    .stagger-children > * { transition-delay: 0ms !important; }
}