/* =========================================================
   20. MOTION
   ========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(28px);

    transition:
        opacity 700ms var(--ease-standard),
        transform 700ms var(--ease-standard);
}

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

[data-reveal="fade-right"] {
    transform: translateX(-45px);
}

[data-reveal="fade-left"] {
    transform: translateX(45px);
}

[data-reveal="fade-right"].is-visible,
[data-reveal="fade-left"].is-visible {
    transform: translateX(0);
}


/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
}

html.reduced-motion .reveal {
    opacity: 1;
    transform: none;
}

/* =========================================================
   SECTION / ELEMENT REVEAL
   ========================================================= */

/* Element-level only. Major cinematic sections use
   data-section + .is-visible from scroll.js instead. */

.reveal,
[data-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 900ms var(--ease-standard),
        transform 900ms var(--ease-standard);
}

.reveal.is-visible,
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal="fade-right"] {
    transform: translateX(-45px);
}

[data-reveal="fade-left"] {
    transform: translateX(45px);
}

[data-reveal="fade-right"].is-visible,
[data-reveal="fade-left"].is-visible {
    transform: translateX(0);
}

html.reduced-motion .reveal,
html.reduced-motion [data-reveal] {
    opacity: 1;
    transform: none;
}

/* Magnetic uses independent translate so it does not
   overwrite existing transform-based layouts. */

[data-magnetic] {
    --mag-x: 0px;
    --mag-y: 0px;
    translate: var(--mag-x) var(--mag-y);
}

html.no-js .reveal,
html.no-js [data-reveal] {
    opacity: 1;
    transform: none;
}