/* ============================================================================
 * DivestWorld — How It Works page enhancements
 * Scroll-triggered animations + hover polish for the step cards and CTA.
 * Scoped to .how-it-works so nothing leaks to other pages.
 * ========================================================================== */

:root {
    --hiw-accent: #1e3a8a;
    --hiw-accent-2: #3b5fd9;
    --hiw-accent-soft: #5b8dee;
    --hiw-accent-bg: #eff4ff;
    --hiw-shadow-card-hover: 0 4px 16px rgba(30, 58, 138, .12), 0 16px 48px rgba(30, 58, 138, .14);
    --hiw-shadow-circle-hover: 0 10px 28px rgba(30, 58, 138, .35);
    --hiw-shadow-cta: 0 12px 32px rgba(30, 58, 138, .35);
}

/* ── Defensive: ensure the hero text always renders ─────────────────────── */
.hero h1,
.hero .hero-content h1,
.hero p,
.hero .hero-content p {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* ── Section titles ─────────────────────────────────────────────────────── */
.how-it-works .hiw-section h2 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
    position: relative;
}

/* Subtle accent line that animates below each section title */
.how-it-works .hiw-section h2::after {
    content: "";
    display: block;
    margin: 12px auto 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hiw-accent), var(--hiw-accent-soft));
    border-radius: 2px;
    transition: width .7s .2s cubic-bezier(.22, 1, .36, 1);
}

.how-it-works .hiw-section.is-visible h2 {
    opacity: 1;
    transform: translateY(0);
}
.how-it-works .hiw-section.is-visible h2::after {
    width: 56px;
}

/* ── Step cards: stagger fade-up ────────────────────────────────────────── */
.how-it-works .step-card {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .55s ease,
        transform .55s cubic-bezier(.22, 1, .36, 1),
        box-shadow .25s ease;
    will-change: transform;
}

.how-it-works .hiw-section.is-visible .step-card {
    opacity: 1;
    transform: translateY(0);
}

/* Cascade — each card 100ms after the previous */
.how-it-works .hiw-section.is-visible .step-card:nth-child(1) { transition-delay: .10s; }
.how-it-works .hiw-section.is-visible .step-card:nth-child(2) { transition-delay: .20s; }
.how-it-works .hiw-section.is-visible .step-card:nth-child(3) { transition-delay: .30s; }
.how-it-works .hiw-section.is-visible .step-card:nth-child(4) { transition-delay: .40s; }

/* ── Hover: card lifts, shadow grows ────────────────────────────────────── */
.how-it-works .step-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--hiw-shadow-card-hover);
}

/* ── Step circles: bounce-in + transform setup ──────────────────────────── */
.how-it-works .step-circle {
    /* Idle state used by the bounce-in keyframe end frame and hover transitions */
    transition:
        transform .3s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .3s ease;
    will-change: transform;
}

/* When section enters viewport, circles pop in with overshoot */
.how-it-works .hiw-section.is-visible .step-circle {
    animation: hiwCirclePop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.how-it-works .hiw-section.is-visible .step-card:nth-child(1) .step-circle { animation-delay: .25s; }
.how-it-works .hiw-section.is-visible .step-card:nth-child(2) .step-circle { animation-delay: .35s; }
.how-it-works .hiw-section.is-visible .step-card:nth-child(3) .step-circle { animation-delay: .45s; }
.how-it-works .hiw-section.is-visible .step-card:nth-child(4) .step-circle { animation-delay: .55s; }

@keyframes hiwCirclePop {
    0%   { transform: scale(0)   rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.12) rotate(5deg);  opacity: 1; }
    80%  { transform: scale(.96)  rotate(-2deg); }
    100% { transform: scale(1)    rotate(0);     opacity: 1; }
}

/* On card hover, the circle tilts and scales slightly */
.how-it-works .step-card:hover .step-circle {
    transform: scale(1.08) rotate(-6deg);
    box-shadow: var(--hiw-shadow-circle-hover);
}

/* ── CTA section: fade-in + button polish ───────────────────────────────── */
.how-it-works .hiw-cta {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22, 1, .36, 1);
}
.how-it-works .hiw-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Force pure white text on the blue CTA background. We hit every possible
   override path: color, opacity, and -webkit-text-fill-color (in case the
   existing site uses gradient text or transparent fill anywhere). */
.how-it-works .hiw-cta h2,
.how-it-works .hiw-cta p {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Button — subtle lift, glow on hover */
.how-it-works .hiw-cta .btn {
    transition:
        transform .25s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow .25s ease,
        background .25s ease;
    will-change: transform;
}
.how-it-works .hiw-cta .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--hiw-shadow-cta);
}
.how-it-works .hiw-cta .btn:active {
    transform: translateY(-1px);
}

/* ── Respect users who prefer reduced motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .how-it-works .hiw-section h2,
    .how-it-works .hiw-section h2::after,
    .how-it-works .step-card,
    .how-it-works .step-circle,
    .how-it-works .hiw-cta,
    .how-it-works .hiw-cta .btn {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        width: 56px !important;
    }
}