/* Motion states. The runtime in /js/motion.js drives them.
   Ported from the Webomat renderer (packages/render/src/motion-css.ts).

   NOTHING HERE HIDES ANYTHING ON ITS OWN. `.fx-armed` is added by the script,
   so a page with JS disabled, blocked or broken never enters the hidden state
   and renders complete. That is why the hiding rule is keyed on a class the
   stylesheet cannot apply to itself. */

:root { --fx-stagger: 55ms; --fx-rise: 22px; }

.fx-armed {
    opacity: 0.001;
    transform: translateY(var(--fx-rise));
    transition:
        opacity .6s cubic-bezier(.22, .61, .36, 1),
        transform .6s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--fx-i, 0) * var(--fx-stagger));
}

.fx-armed.fx-in {
    opacity: 1;
    transform: none;
}

/* Images the runtime drives get the compensating scale as their pre-JS state,
   so the first painted frame and every frame after it describe the same box. */
[data-fx-parallax] {
    will-change: transform;
    transform: scale(1.04);
}

[data-fx-lift] {
    transform-style: preserve-3d;
    transition: transform .18s ease-out;
}

/* Section headings draw their rule as they reveal. */
[data-fx="reveal"] > .container > h2,
[data-fx="reveal"] > h2 {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    padding-bottom: 0.14em;
    transition: background-size .7s cubic-bezier(.22, .61, .36, 1) .15s;
}

.fx-armed[data-fx="reveal"] > .container > h2,
.fx-armed[data-fx="reveal"] > h2 { background-size: 0 2px; }

.fx-armed.fx-in[data-fx="reveal"] > .container > h2,
.fx-armed.fx-in[data-fx="reveal"] > h2 { background-size: 100% 2px; }

/* Inert, not reduced: all content visible, no transform, no animation.
   Belt and braces, because the runtime returns before arming anything. */
@media (prefers-reduced-motion: reduce) {
    .fx-armed,
    [data-fx-parallax],
    [data-fx-lift] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    [data-fx="reveal"] > .container > h2,
    [data-fx="reveal"] > h2 { background-size: 100% 2px !important; }
}