/* =========================================================================
   Off-Grid Volt — Section Foundation Layer
   Motion tokens, scroll-reveal classes, and section rhythm.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Motion Tokens
   --------------------------------------------------------------------------- */
:root {
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

    --duration-reveal: 650ms;
    --duration-hover:  250ms;
    --duration-fast:   150ms;

    --stagger-gap: 80ms;
}

/* ---------------------------------------------------------------------------
   2. Scroll Reveal System
   Elements start hidden. JS adds `.revealed` on intersection.
   --------------------------------------------------------------------------- */

/* Base: fade + rise */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-reveal) var(--ease-out-expo),
        transform var(--duration-reveal) var(--ease-out-expo);
    will-change: opacity, transform;
}

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

/* Variant: fade + slide from left */
.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition:
        opacity var(--duration-reveal) var(--ease-out-expo),
        transform var(--duration-reveal) var(--ease-out-expo);
    will-change: opacity, transform;
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Variant: fade + slide from right */
.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition:
        opacity var(--duration-reveal) var(--ease-out-expo),
        transform var(--duration-reveal) var(--ease-out-expo);
    will-change: opacity, transform;
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Variant: fade + subtle scale */
.reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity var(--duration-reveal) var(--ease-out-expo),
        transform var(--duration-reveal) var(--ease-out-expo);
    will-change: opacity, transform;
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ---------------------------------------------------------------------------
   3. Stagger Delays
   Parent gets [data-stagger]. Children use inline --i for index.
   Example: <div data-stagger> <div class="reveal" style="--i:0"> ...
   --------------------------------------------------------------------------- */
[data-stagger] > .reveal,
[data-stagger] > .reveal-left,
[data-stagger] > .reveal-right,
[data-stagger] > .reveal-scale {
    transition-delay: calc(var(--i, 0) * var(--stagger-gap));
}

/* ---------------------------------------------------------------------------
   4. Reduced Motion — Accessibility
   Vestibular disorders affect ~35% of adults over 40.
   Provide crossfade-only alternative.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        transform: none;
        transition: opacity 200ms ease-out;
    }
}

/* ---------------------------------------------------------------------------
   5. Section Transition — Smooth color bleed into footer
   Apply to the last light section before footer.
   --------------------------------------------------------------------------- */
.section-fade-to-dark::after {
    content: '';
    display: block;
    height: 120px;
    background: linear-gradient(to bottom, transparent, #021A2E);
    pointer-events: none;
}