/*
 * gUI GSAP scene: Cinematic Story
 *
 * The existing design style owns every resting frame. This file only creates
 * the pinned stage, stacks repeater items, and styles temporary transition FX.
 */

.gui_cinematic-story-scene {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    perspective: 1600px;
    transform-style: preserve-3d;
}

.gui_cinematic-story-scene .gui_cinematic-story-module {
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}

.gui_cinematic-story-scene .gui_cinematic-story-intro {
    position: relative;
    z-index: 5;
    width: 100%;
}

/* Core may add this class to several wrappers between the row and repeater. */
.gui_cinematic-story-scene .gui_cinematic-story-fill {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.gui_cinematic-story-scene .gui_cinematic-story-stage {
    position: relative !important;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: var(--gui-cinematic-story-stage-height, 70svh) !important;
    min-height: var(--gui-cinematic-story-stage-height, 70svh) !important;
    margin: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
    perspective: 1600px;
    transform-style: preserve-3d;
    background: var(--gui-colors-dark, #08090b);
}

.gui_cinematic-story-scene .gui_cinematic-story-stage > .gui_list-holder,
.gui_cinematic-story-scene .gui_cinematic-story-stage > .gui_list-holder > .gui_list {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.gui_cinematic-story-scene .gui_cinematic-story-list {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transform-style: preserve-3d;
}

.gui_cinematic-story-scene .gui_cinematic-story-item {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: var(--gui-cinematic-story-frame-bg, transparent);
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    will-change: transform, opacity, clip-path, filter;
    touch-action: pan-y;
    pointer-events: none;
    box-sizing: border-box !important;
}

.gui_cinematic-story-scene .gui_cinematic-story-item::-webkit-scrollbar {
    display: none;
}

.gui_cinematic-story-scene .gui_cinematic-story-item[data-gui-cinematic-state="active"] {
    pointer-events: auto;
}

.gui_cinematic-story-scene .gui_cinematic-story-item:is(
    [data-gui-cinematic-state="covered"],
    [data-gui-cinematic-state="queued"]
) {
    pointer-events: none;
}

/*
 * Preserve arbitrary item styles. These rules only establish a minimum stage
 * depth; they do not replace a module's grid, flex, padding, colour or layout.
 */
.gui_cinematic-story-scene .gui_cinematic-story-item > .gui_expander,
.gui_cinematic-story-scene .gui_cinematic-story-item > .gui_expander > .gui_body,
.gui_cinematic-story-scene .gui_cinematic-story-item > .gui_expander > .gui_body > .gui_expander,
.gui_cinematic-story-scene .gui_cinematic-story-module-holder,
.gui_cinematic-story-scene .gui_cinematic-story-frame {
    position: relative;
    width: 100% !important;
    height: auto;
    min-height: 100%;
    max-height: none;
    box-sizing: border-box !important;
}

.gui_cinematic-story-scene .gui_cinematic-story-copy,
.gui_cinematic-story-scene .gui_cinematic-story-media {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity, clip-path, filter;
}

/* Temporary image proxy used only by the media-takeover transition. */
.gui_cinematic-story-media-proxy {
    position: absolute;
    z-index: 75;
    display: block;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform-origin: 50% 50%;
    will-change: left, top, width, height, transform, opacity, border-radius;
    box-sizing: border-box;
}

.gui_cinematic-story-media-proxy > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: 50% 50%;
    transform-origin: 50% 50%;
    will-change: transform, filter;
}

/* The FX layer never owns content or layout. */
.gui_cinematic-story-effects,
.gui_cinematic-story-effects > * {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gui_cinematic-story-effects {
    z-index: 1000;
    overflow: hidden;
    isolation: isolate;
}

.gui_cinematic-story-vignette {
    z-index: 1;
    background:
        radial-gradient(
            circle at center,
            transparent 34%,
            rgba(0, 0, 0, .07) 62%,
            rgba(0, 0, 0, .42) 122%
        );
}

.gui_cinematic-story-grain {
    z-index: 4;
    opacity: .075;
    background-image:
        repeating-radial-gradient(
            circle at 17% 23%,
            rgba(255, 255, 255, .34) 0 .55px,
            transparent .8px 3px
        ),
        repeating-radial-gradient(
            circle at 73% 61%,
            rgba(255, 255, 255, .20) 0 .5px,
            transparent .8px 4px
        );
    background-size: 8px 8px, 11px 11px;
    mix-blend-mode: soft-light;
    animation: gui-cinematic-story-grain .22s steps(2) infinite;
}

.gui_cinematic-story-scan {
    inset: -8% auto -8% -12%;
    z-index: 3;
    width: 10%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .62),
            transparent
        );
    filter: blur(8px);
    mix-blend-mode: overlay;
    transform: skewX(-12deg);
    will-change: transform, opacity;
}

.gui_cinematic-story-flare {
    z-index: 2;
    width: 28%;
    opacity: 0;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.gui_cinematic-story-flare-left {
    right: auto;
    background: linear-gradient(90deg, rgba(255, 42, 94, .24), transparent);
}

.gui_cinematic-story-flare-right {
    left: auto;
    background: linear-gradient(270deg, rgba(35, 187, 255, .24), transparent);
}

.gui_cinematic-story-effects[data-gui-cinematic-atmosphere="clean"] .gui_cinematic-story-grain,
.gui_cinematic-story-effects[data-gui-cinematic-atmosphere="clean"] .gui_cinematic-story-flare {
    display: none;
}

.gui_cinematic-story-effects[data-gui-cinematic-atmosphere="chromatic"] .gui_cinematic-story-flare {
    filter: saturate(1.3);
}

.gui_cinematic-story-mobile .gui_cinematic-story-stage {
    perspective: 1050px;
}

.gui_cinematic-story-mobile .gui_cinematic-story-item {
    -webkit-overflow-scrolling: touch;
}

.gui_cinematic-story-mobile .gui_cinematic-story-grain {
    opacity: .04;
    animation-duration: .34s;
}

.gui_cinematic-story-mobile .gui_cinematic-story-vignette {
    background:
        radial-gradient(
            circle at center,
            transparent 42%,
            rgba(0, 0, 0, .05) 70%,
            rgba(0, 0, 0, .28) 124%
        );
}

.gui_cinematic-story-mobile .gui_cinematic-story-scan {
    filter: blur(5px);
}

/* Measuring releases only the stage shell; authored module styles stay intact. */
.gui_cinematic-story-measuring .gui_cinematic-story-item {
    will-change: auto;
}

/* Reduced motion and Mobile Off preserve the ordinary repeater flow. */
.gui_cinematic-story-flow .gui_cinematic-story-flow-item {
    position: relative;
}

@keyframes gui-cinematic-story-grain {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-.7%, .8%); }
    50% { transform: translate(.8%, -.6%); }
    75% { transform: translate(.5%, .8%); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .gui_cinematic-story-grain {
        animation: none;
    }
}