/* ═══════════════════════════════════════════════════════════
   DOMICILE — ANIMATION SYSTEM
   Scroll reveals, transitions, entrance animations
   ═══════════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* Stagger children */
.stagger>.reveal:nth-child(1) {
    transition-delay: 0ms;
}

.stagger>.reveal:nth-child(2) {
    transition-delay: 100ms;
}

.stagger>.reveal:nth-child(3) {
    transition-delay: 200ms;
}

.stagger>.reveal:nth-child(4) {
    transition-delay: 300ms;
}

.stagger>.reveal:nth-child(5) {
    transition-delay: 400ms;
}

/* ── GOLD RULE DRAW ── */
.gold-rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--gold), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.gold-rule.visible {
    transform: scaleX(1);
}

/* ── COUNTER ── */
.counter {
    font-variant-numeric: tabular-nums;
}

/* ── HERO AMBIENT ── */
@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(12px, -8px) scale(1.03);
    }

    66% {
        transform: translate(-6px, 10px) scale(0.98);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

.ambient-ring {
    animation: drift 18s ease-in-out infinite;
    pointer-events: none;
}

.ambient-ring:nth-child(2) {
    animation-delay: -6s;
    animation-duration: 22s;
}

.ambient-ring:nth-child(3) {
    animation-delay: -12s;
    animation-duration: 26s;
}

/* ── HERO TEXT ENTRANCE ── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-eyebrow {
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

.hero-title {
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.25s;
    opacity: 0;
}

.hero-sub {
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.hero-cta {
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.55s;
    opacity: 0;
}

.hero-trust {
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.7s;
    opacity: 0;
}

/* ── NAV SCROLL TRANSITION ── */
.nav-transparent {
    background: transparent;
}

.nav-solid {
    background: var(--midnight);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(201, 168, 76, 0.15);
    transition: all 0.3s ease;
}

/* ── ELIGIBILITY METER ANIMATION ── */
@keyframes meterFill {
    from {
        width: 0%;
    }
}

.meter-fill {
    animation: meterFill 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── SLIDE TRANSITIONS (Quiz) ── */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-40px);
    }
}

.slide-in {
    animation: slideInRight 0.28s ease forwards;
}

.slide-out {
    animation: slideOutLeft 0.28s ease forwards;
}

/* ── PULSE (Urgency indicators) ── */
@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ── SMOOTH APPEAR ── */
@keyframes appear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.appear {
    animation: appear 0.5s ease forwards;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .gold-rule {
        transform: scaleX(1);
    }
}