/*
 * ScrollStory Runtime CSS v0.9
 * Actors consume the CSS custom properties the engine writes per frame.
 * Pre-JS and no-JS: the custom-property fallbacks are the natural state,
 * so nothing is ever hidden without JavaScript.
 * A matrix frame (--scrollstory-m, authored with the unified-transform tool)
 * replaces the classic translate/scale/rotate chain via the var fallback.
 */
.scrollstory.scrollstory-ready .scrollstory-actor {
    transform: var(--scrollstory-m,
               translate(var(--scrollstory-x, 0px), var(--scrollstory-y, 0px))
               scale(var(--scrollstory-s, 1))
               rotate(var(--scrollstory-r, 0deg)));
    opacity: var(--scrollstory-a, 1);
}

/* ON-duration pinning: the engine wraps pinned actors in a tall relative
 * wrapper and makes the actor sticky — it holds (centered) while `pin`
 * screens of content scroll past. */
.scrollstory-pin {
    position: relative;
}
.scrollstory-pin > .scrollstory-actor {
    position: sticky;
}

/* Accessibility: reduced-motion users get the natural page, always. */
@media (prefers-reduced-motion: reduce) {
    .scrollstory.scrollstory-ready .scrollstory-actor {
        transform: none;
        opacity: 1;
    }
}

/* ── Scenes (v1.0) ───────────────────────────────────────────────────────
 * Fixed background layer behind the page. z-index -1 keeps it under all
 * content (same pattern the demo pages proved on this site); the story
 * container should render transparent to let it show through. */

.scrollstory-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #000;
    overflow: hidden;
}
.scrollstory-bg-img,
.scrollstory-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* video */
    background-size: cover;     /* image */
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.scrollstory-bg-img.active,
.scrollstory-bg-video.active {
    opacity: 1;
}
.scrollstory-bg-dim {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Scene step-navigation: CSS scroll-snap does the wheel/keyboard/touch
 * stepping natively; chevrons are the visible affordance. */
html.scrollstory-snap      { scroll-snap-type: y proximity; }
html.scrollstory-snap-strong { scroll-snap-type: y mandatory; }
html.scrollstory-snap .scrollstory-scene,
html.scrollstory-snap-strong .scrollstory-scene {
    scroll-snap-align: center;
}

.scrollstory-nav {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
}

/* Scene BEATS: a data-steps scene holds its content on screen (sticky
 * inside a tall wrapper) while its actors stagger in one per step. */
.scrollstory-hold { position: relative; }
.scrollstory-hold > .scrollstory-holdstick {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.scrollstory-navbtn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(10, 10, 10, .55);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.scrollstory-navbtn:hover {
    background: rgba(34, 211, 238, .85);
    border-color: #22d3ee;
    color: #000;
}

/* Never fight the CMS editor: no snap, no chevrons while editing. */
body.scrollstory-editing .scrollstory-nav { display: none; }