/* ER Design System — Motion primitives. Paired with assets/js/motion.js.
 * Every effect here degrades to a static, fully legible state when JS is
 * absent or prefers-reduced-motion is set — motion never carries meaning
 * that isn't also present without it. */

/* ---------- Scroll reveal ---------- */
.er-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--er-motion-slow) var(--er-ease-out),
                transform var(--er-motion-slow) var(--er-ease-out);
}

.er-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.er-reveal--mask {
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--er-motion-slow) var(--er-ease-out);
    opacity: 1;
    transform: none;
}

.er-reveal--mask.is-visible {
    clip-path: inset(0 0 0% 0);
}

@media (prefers-reduced-motion: reduce) {
    .er-reveal,
    .er-reveal--mask {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

/* Stagger children of a reveal group via inline --er-delay set by motion.js */
.er-reveal-group > * {
    transition-delay: var(--er-delay, 0ms);
}

/* ---------- Parallax hero imagery ---------- */
.er-parallax {
    will-change: transform;
    transform: translateY(var(--er-parallax-offset, 0px));
}

@media (prefers-reduced-motion: reduce) {
    .er-parallax {
        transform: none !important;
    }
}

/* ---------- Metallic light sweep ---------- */
.er-sweep {
    position: relative;
    overflow: hidden;
}

.er-sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--er-gradient-emerald-sweep);
    transform: translateX(-120%);
    pointer-events: none;
}

.er-sweep.is-sweeping::after {
    animation: er-sweep-pass var(--er-motion-cinematic) var(--er-ease-in-out);
}

@keyframes er-sweep-pass {
    to {
        transform: translateX(120%);
    }
}

/* ---------- Animated ellipsis ("The How Matters ...") ---------- */
.er-ellipsis {
    display: inline-block;
    min-width: 1.5em;
    text-align: left;
}

.er-ellipsis__dot {
    opacity: 0;
    transition: opacity var(--er-motion-fast) var(--er-ease-standard);
}

.er-ellipsis__dot.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .er-ellipsis__dot {
        opacity: 1;
    }
}

/* ---------- Sticky storytelling section ---------- */
.er-sticky-story {
    position: relative;
}

.er-sticky-story__pin {
    position: sticky;
    top: var(--er-header-height);
    height: calc(100vh - var(--er-header-height));
    display: flex;
    align-items: center;
    overflow: hidden;
}

@media (max-width: 900px) {
    .er-sticky-story__pin {
        position: static;
        height: auto;
        padding-block: var(--er-space-7);
    }
}

/* ---------- Count-up spec numbers ---------- */
.er-count-up {
    font-variant-numeric: tabular-nums;
}

/* ---------- Card hover depth ---------- */
.er-depth-hover {
    transition: transform var(--er-motion-base) var(--er-ease-out);
}

.er-depth-hover:hover {
    transform: translateY(-6px) scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
    .er-depth-hover:hover {
        transform: none;
    }
}

/* ---------- Orbital / technical SVG motion (ASH A(π)) ---------- */
.er-orbit {
    animation: er-orbit-spin 60s linear infinite;
    transform-origin: center;
}

.er-orbit--reverse {
    animation-direction: reverse;
    animation-duration: 90s;
}

@keyframes er-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .er-orbit {
        animation: none;
    }
}

.er-diagram-connector {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    transition: stroke-dashoffset var(--er-motion-cinematic) var(--er-ease-out);
}

.er-diagram-connector.is-drawn {
    stroke-dashoffset: 0;
}