/* ==========================================================================
   TMSPro — Animations Stylesheet
   --------------------------------------------------------------------------
   Keyframes + scroll-reveal initial/visible states. JS toggles the
   .is-revealed class via IntersectionObserver.
   ========================================================================== */


/* ==========================================================================
   Scroll Reveal — base states
   ========================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
    will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="slide-left"] { transform: translateX(-40px); }
[data-reveal="slide-right"] { transform: translateX(40px); }
[data-reveal="zoom"] { transform: scale(0.96); }

[data-reveal].is-revealed,
.is-revealed[data-reveal] {
    opacity: 1;
    transform: none;
}

/* Stagger: parent uses data-reveal="stagger", children animate in sequence */
[data-reveal="stagger"] { opacity: 1; transform: none; }
[data-reveal="stagger"] > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
[data-reveal="stagger"].is-revealed > * {
    opacity: 1;
    transform: none;
}
[data-reveal="stagger"].is-revealed > *:nth-child(1)  { transition-delay: 60ms; }
[data-reveal="stagger"].is-revealed > *:nth-child(2)  { transition-delay: 160ms; }
[data-reveal="stagger"].is-revealed > *:nth-child(3)  { transition-delay: 260ms; }
[data-reveal="stagger"].is-revealed > *:nth-child(4)  { transition-delay: 360ms; }
[data-reveal="stagger"].is-revealed > *:nth-child(5)  { transition-delay: 460ms; }
[data-reveal="stagger"].is-revealed > *:nth-child(6)  { transition-delay: 560ms; }
[data-reveal="stagger"].is-revealed > *:nth-child(n+7){ transition-delay: 660ms; }


/* ==========================================================================
   Keyframes
   ========================================================================== */

/* Hero scroll line pulse */
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Brand carousel infinite scroll */
@keyframes brandsScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Fade up */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Slide in left */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: none; }
}

/* Slide in right */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: none; }
}

/* Subtle floating */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Underline grow */
@keyframes underlineGrow {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); }
}

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


/* ==========================================================================
   Utility animation classes (apply via class)
   ========================================================================== */
.anim-fade-up   { animation: fadeUp 900ms var(--ease-out) both; }
.anim-fade-in   { animation: fadeIn 800ms var(--ease-out) both; }
.anim-slide-left  { animation: slideInLeft 900ms var(--ease-out) both; }
.anim-slide-right { animation: slideInRight 900ms var(--ease-out) both; }
.anim-float    { animation: floatY 6s ease-in-out infinite; }


/* ==========================================================================
   Counter readiness (hide raw target until animation starts)
   ========================================================================== */
[data-count] { display: inline-block; min-width: 2ch; }


/* ==========================================================================
   Hero entrance (initial paint)
   ========================================================================== */
.hero-eyebrow,
.hero-heading,
.hero-subheading,
.hero-cta-group { animation: fadeUp 1000ms var(--ease-out) both; }
.hero-eyebrow     { animation-delay: 120ms; }
.hero-heading     { animation-delay: 260ms; }
.hero-subheading  { animation-delay: 420ms; }
.hero-cta-group   { animation-delay: 580ms; }
.hero-scroll-indicator { animation: fadeIn 1200ms var(--ease-out) 1.4s both; }


/* ==========================================================================
   Page hero entrance
   ========================================================================== */
.page-hero .breadcrumbs,
.page-hero-eyebrow,
.page-hero-heading,
.page-hero-lead { animation: fadeUp 900ms var(--ease-out) both; }
.page-hero .breadcrumbs { animation-delay: 100ms; }
.page-hero-eyebrow      { animation-delay: 200ms; }
.page-hero-heading      { animation-delay: 320ms; }
.page-hero-lead         { animation-delay: 460ms; }


/* ==========================================================================
   Reduced motion respects user pref
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .hero-eyebrow, .hero-heading, .hero-subheading, .hero-cta-group,
    .page-hero .breadcrumbs, .page-hero-eyebrow, .page-hero-heading, .page-hero-lead,
    .hero-scroll-indicator { animation: none !important; }
}