/* Bidirectional scroll orchestration — cards, headings, lists */

:root {
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-duration: 0.7s;
    --reveal-distance: 1.75rem;
}

/* Hidden only after JS arms reveals — avoids a blank first paint if JS is slow */
html.mira-reveal-on [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0) scale(0.985);
    filter: blur(4px);
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter calc(var(--reveal-duration) * 0.85) var(--reveal-ease);
    will-change: opacity, transform, filter;
    transition-delay: var(--reveal-delay, 0ms);
}

html.mira-reveal-on [data-reveal].is-revealed {
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter calc(var(--reveal-duration) * 0.85) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
}

html.mira-reveal-on [data-reveal="left"]:not(.is-revealed) {
    transform: translate3d(calc(var(--reveal-distance) * -1.15), 0.35rem, 0) scale(0.985);
}

html.mira-reveal-on [data-reveal="right"]:not(.is-revealed) {
    transform: translate3d(calc(var(--reveal-distance) * 1.15), 0.35rem, 0) scale(0.985);
}

html.mira-reveal-on [data-reveal="scale"]:not(.is-revealed) {
    transform: translate3d(0, 0.6rem, 0) scale(0.92);
    filter: blur(6px);
}

html.mira-reveal-on [data-reveal="fade"]:not(.is-revealed) {
    transform: none;
    filter: none;
}

/* Scroll-down enter */
html.mira-reveal-on [data-reveal].is-revealed,
html.mira-reveal-on [data-reveal].is-revealed[data-reveal-dir="down"] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* Scroll-up: enter/re-enter from the opposite direction */
html.mira-reveal-on [data-reveal][data-reveal-dir="up"]:not(.is-revealed) {
    transform: translate3d(0, calc(var(--reveal-distance) * -1), 0) scale(0.985);
    filter: blur(4px);
}

html.mira-reveal-on [data-reveal="left"][data-reveal-dir="up"]:not(.is-revealed) {
    transform: translate3d(calc(var(--reveal-distance) * 1.15), -0.35rem, 0) scale(0.985);
}

html.mira-reveal-on [data-reveal="right"][data-reveal-dir="up"]:not(.is-revealed) {
    transform: translate3d(calc(var(--reveal-distance) * -1.15), -0.35rem, 0) scale(0.985);
}

html.mira-reveal-on [data-reveal].is-revealed[data-reveal-dir="up"] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* Soft exit when leaving the viewport (both directions) */
html.mira-reveal-on [data-reveal].is-exiting[data-reveal-dir="down"] {
    opacity: 0.2;
    transform: translate3d(0, calc(var(--reveal-distance) * -0.45), 0) scale(0.98);
    filter: blur(2px);
}

html.mira-reveal-on [data-reveal].is-exiting[data-reveal-dir="up"] {
    opacity: 0.2;
    transform: translate3d(0, calc(var(--reveal-distance) * 0.45), 0) scale(0.98);
    filter: blur(2px);
}

/* Section heading accent line draws in */
.section-heading[data-reveal].is-revealed::after {
    animation: reveal-accent 0.55s var(--reveal-ease) both;
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes reveal-accent {
    from {
        transform: scaleX(0);
        opacity: 0;
    }
    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.section-heading::after {
    transform-origin: center;
}

.section-heading-left::after {
    transform-origin: left center;
}

/* Stagger helper on grids */
[data-reveal-stagger] > [data-reveal] {
    transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    html.mira-reveal-on [data-reveal],
    html.mira-reveal-on [data-reveal]:not(.is-revealed) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto;
    }

    .section-heading[data-reveal].is-revealed::after {
        animation: none;
    }
}