/* =========================
   Animation System
   Disabled by prefers-reduced-motion in base.css
   ========================= */

/* ---------- Animated gradient for hero ---------- */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Hero entrance ---------- */
@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-animate .header-text {
    animation: heroFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero-animate .page-payoff {
    animation: heroFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

.hero-animate .btn {
    animation: heroFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

/* ---------- Scroll reveal (gated behind .js so content is visible without JavaScript) ---------- */
.js .reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---------- Staggered reveal for grids ---------- */
.js .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; }

.reveal-stagger.visible > * {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---------- Section title accent animation ---------- */
.section-intro h2::after,
.service-intro h2::after,
.initiatives-intro h2::after {
    transition: width 0.6s var(--ease-out-expo) 0.3s;
}

.reveal .section-intro h2::after,
.reveal .service-intro h2::after,
.reveal .initiatives-intro h2::after {
    width: 0;
}

.reveal.visible .section-intro h2::after,
.reveal.visible .service-intro h2::after,
.reveal.visible .initiatives-intro h2::after {
    width: 4rem;
}

/* ---------- Hero orb floating ---------- */
@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(0.9); }
    33% { transform: translate(30px, -20px) scale(1.1); }
    66% { transform: translate(-15px, 15px) scale(1.0); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1.0); }
    33% { transform: translate(-25px, 15px) scale(0.9); }
    66% { transform: translate(20px, -25px) scale(1.15); }
}

@keyframes floatOrb3 {
    0%, 100% { transform: translate(0, 0) scale(1.1); }
    33% { transform: translate(20px, 25px) scale(0.9); }
    66% { transform: translate(-30px, -10px) scale(1.05); }
}

.hero-orb-1 { animation: floatOrb1 15s ease-in-out infinite; }
.hero-orb-2 { animation: floatOrb2 18s ease-in-out infinite; }
.hero-orb-3 { animation: floatOrb3 20s ease-in-out infinite; }

/* ---------- Scroll indicator bounce ---------- */
@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.6; }
    50% { transform: rotate(45deg) translateY(8px); opacity: 0.3; }
}

.scroll-indicator span {
    animation: scrollBounce 2s ease-in-out infinite;
}

/* ---------- Hero entrance — additional elements ---------- */
.hero-animate .hero-microcopy {
    animation: heroFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.45s both;
}

.hero-animate .scroll-indicator {
    animation: heroFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

/* ============================================================
   SHINE-7 — Motion identity
   ============================================================
   Defines the entrance choreography for the new homepage hero
   (the legacy heroFadeIn was disabled in shine-1 because it was
   tuned for the old centered-text layout). The new sequence
   reveals each hero element in a quick stagger so the wordmark
   feels deliberate rather than flat-on-paint. Plus a small
   delight: the brand-stamp slides in from the right at the end.

   Reduced-motion users get the final state immediately.
   ============================================================ */

@keyframes heroWordmarkIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

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

.welcome-page-header.hero-animate .availability-indicator {
    animation: heroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0s both;
}
.welcome-page-header.hero-animate .header-text {
    animation: heroWordmarkIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
}
.welcome-page-header.hero-animate .page-payoff {
    animation: heroFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.welcome-page-header.hero-animate .btn-header-ca,
.welcome-page-header.hero-animate .hero-microcopy {
    animation: heroFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.welcome-page-header.hero-animate .hero-stamp {
    animation: heroStampSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

@media (prefers-reduced-motion: reduce) {
    .welcome-page-header.hero-animate .availability-indicator,
    .welcome-page-header.hero-animate .header-text,
    .welcome-page-header.hero-animate .page-payoff,
    .welcome-page-header.hero-animate .btn-header-ca,
    .welcome-page-header.hero-animate .hero-microcopy,
    .welcome-page-header.hero-animate .hero-stamp {
        animation: none;
    }
}

/* ---------- Focus ring transition ---------- */
:focus-visible {
    transition: outline-offset var(--transition-fast);
}