.chapter-stage { --chapter-bg: #090909; --chapter-fg: #f5f5f5; --chapter-enter: 1; --chapter-exit: 0; --chapter-travel: .5; position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; isolation: isolate; overflow: clip; background: var(--chapter-bg); color: var(--chapter-fg); }
.is-inverted .chapter-stage { --chapter-bg: #f5f5f5; --chapter-fg: #111; }
.chapter-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--chapter-fg) 7%, transparent), transparent 65%); }
.chapter-frame { position: absolute; inset: clamp(18px, 3vw, 48px); border: 1px solid color-mix(in srgb, var(--chapter-fg) 15%, transparent); transform: scale(calc(.88 + var(--chapter-enter) * .12)) rotate(calc((.5 - var(--chapter-travel)) * 10deg)); border-radius: 2px; opacity: calc(1 - var(--chapter-exit)); pointer-events: none; }
.chapter-meta, .chapter-bottom { position: absolute; left: clamp(28px, 5vw, 80px); right: clamp(28px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 9px/1.5 var(--mono); letter-spacing: 2px; }
.chapter-meta { top: max(112px, 17vh); }
.chapter-index { opacity: .55; }
.chapter-bottom { bottom: max(98px, 12vh); }
.chapter-hint { opacity: .65; }
.chapter-arrow { font: 36px/1 var(--heading); }
.chapter-copy { position: relative; width: 100%; text-align: center; perspective: 900px; }
.chapter-word, .chapter-outline { font: 600 clamp(64px, calc(150vw / var(--chapter-length, 8)), 320px)/.9 var(--heading); letter-spacing: -.075em; white-space: nowrap; }
.chapter-word { position: relative; z-index: 1; margin: 0; padding: .16em .1em .24em; color: var(--chapter-fg); text-shadow: 0 0 36px color-mix(in srgb, var(--chapter-fg) 18%, transparent); }
.chapter-letter { --letter-progress: clamp(0, calc(var(--chapter-enter) * 1.55 - var(--letter-index) * .055), 1); display: inline-block; opacity: calc(var(--letter-progress) * (1 - var(--chapter-exit))); transform: translate3d(0, calc((1 - var(--letter-progress)) * 125% - var(--chapter-exit) * 100%), 0) rotateX(calc((1 - var(--letter-progress)) * 65deg)); transform-origin: center bottom; }
.chapter-outline { position: absolute; left: 0; top: 50%; width: 100%; color: transparent; -webkit-text-stroke: 1px var(--chapter-fg); opacity: calc(.16 * (1 - var(--chapter-exit))); transform: translate3d(calc((.5 - var(--chapter-travel)) * 32%), -65%, 0) scale(1.2); }
.chapter-rule { position: absolute; left: 5vw; right: 5vw; bottom: max(72px, 9vh); height: 1px; background: var(--chapter-fg); opacity: .35; transform: scaleX(var(--chapter-enter)); transform-origin: left; }
.chapter-curtain { position: fixed; inset: 0; z-index: 2400; overflow: clip; pointer-events: auto; will-change: clip-path; }
.chapter-curtain .chapter-stage { position: absolute; inset: 0; height: 100%; }
.chapter-curtain .chapter-meta { top: 7vh; }
.chapter-curtain .chapter-bottom { bottom: 8vh; }
.chapter-curtain .chapter-rule { bottom: 5vh; }
@media (max-width: 991.98px) { .chapter-word, .chapter-outline { font-size: clamp(42px, calc(150vw / var(--chapter-length, 8)), 210px); } .chapter-meta, .chapter-bottom { font-size: 8px; letter-spacing: 1px; } }
@media (prefers-reduced-motion: reduce) { .chapter-letter, .chapter-outline, .chapter-frame { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
    :root.scroll-scenes[data-motion="full"] main > [data-scroll-scene] { isolation: isolate; overflow-x: clip; }
    :root.scroll-scenes[data-motion="full"] #contact { content-visibility: visible; }
    :root.scroll-scenes[data-motion="full"] .scroll-item { translate: var(--scroll-x, 0px) var(--scroll-y, 0px); rotate: var(--scroll-turn, 0deg); scale: var(--scroll-scale, 1); opacity: var(--scroll-opacity, 1); transform-origin: 50% 35%; }
    :root.scroll-scenes[data-motion="full"] .section-header.scroll-item { transform-origin: left center; }
    :root.scroll-scenes[data-motion="full"] .scroll-item.is-scroll-active { will-change: translate, rotate, scale, opacity; }
    :root.scroll-scenes[data-motion="full"] .scroll-image { translate: 0 var(--image-y, 0px); scale: var(--image-scale, 1); transform-origin: center 30%; }
    :root.scroll-scenes[data-motion="full"] .scroll-image.is-scroll-active { will-change: translate, scale; }
    /* El foco del teclado tiene que verse incluso durante la entrada xd. */
    :root.scroll-scenes[data-motion="full"] .scroll-item:focus-within { translate: none; rotate: none; scale: none; opacity: 1; }
}
@media print {
    .chapter-curtain { display: none !important; }
    .scroll-item, .scroll-image { translate: none !important; rotate: none !important; scale: none !important; opacity: 1 !important; }
}