/* ============================================================================ 03-LAYOUT.CSS — Structural layout: scenes, containers, the acts track Depends on: 01-tokens.css ---------------------------------------------------------------------------- This file owns POSITION and FLOW only. Cosmetic treatment of the elements inside lives in 04-components.css. ========================================================================== */ /* ---- Cinematic chrome (fixed overlays) -------------------------------- */ .letterbox { position: fixed; left: 0; right: 0; height: 0; /* grows to --letterbox-h via JS/anim */ background: #000; z-index: var(--z-letterbox); pointer-events: none; } .letterbox--top { top: 0; } .letterbox--bottom { bottom: 0; } .progress { position: fixed; top: 0; left: 0; height: var(--progress-h); width: 0%; /* driven by scroll */ background: var(--c-gold); z-index: var(--z-progress); } .grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay; /* Inline fractal-noise SVG (no extra request). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } /* ---- HUD (fixed top nav) ---------------------------------------------- */ /* The menu sits ABOVE the page (fixed). Cliente (PDF 25-jun): al hacer scroll el menú se "transparentaba" con las secciones creando ruido visual. Fix: darle un fondo sólido translúcido + blur + hairline inferior para que el contenido pase por debajo sin mezclarse con el texto del nav. */ .hud { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-hud); display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--gutter); background: rgba(7, 13, 29, 0.82); /* navy-black translúcido */ backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); border-bottom: 1px solid rgba(251, 249, 254, 0.08); } /* ---- Generic full-bleed scene ----------------------------------------- */ .scene { position: relative; min-height: 100svh; /* svh = mobile-safe viewport height */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .scene__bg { position: absolute; inset: -12% 0; z-index: var(--z-scene-bg); } .scene__bg picture { display: block; width: 100%; height: 100%; } .scene__bg img { width: 100%; height: 100%; object-fit: cover; } .scene__veil { position: absolute; inset: 0; z-index: var(--z-scene-veil); background: linear-gradient(180deg, var(--veil-top), var(--veil-mid) 50%, var(--veil-bottom)); } .scene__content { position: relative; z-index: var(--z-scene-content); width: var(--container-wide); margin-inline: auto; text-align: center; } /* ---- Acts: horizontal filmstrip --------------------------------------- * PROGRESSIVE ENHANCEMENT MODEL - Default (no JS / reduced-motion): acts STACK VERTICALLY so every act is reachable even without the GSAP horizontal transform. (The original file overflowed horizontally and hid acts II–IV without JS — fixed here.) - When main.js confirms motion is allowed + GSAP is present it adds `.is-enhanced` to , switching the track to a single horizontal row that ScrollTrigger then pins and translates. ------------------------------------------------------------------------ */ .acts { position: relative; background: var(--c-navy-black); } .acts__track { display: flex; flex-direction: column; /* stacked fallback */ } .act { position: relative; width: 100%; min-height: 100vh; flex: none; display: flex; align-items: center; overflow: hidden; border-bottom: var(--border-hairline); } .act__inner { position: relative; z-index: var(--z-scene-content); width: var(--container-act); margin-inline: auto; } .act__bg { position: absolute; inset: 0; z-index: var(--z-scene-bg); opacity: 0.16; } .act__bg picture { display: block; width: 100%; height: 100%; } .act__bg img { width: 100%; height: 100%; object-fit: cover; } /* Enhanced (JS on): become a horizontal row of full-viewport panels. */ .is-enhanced .acts__track { flex-direction: row; height: 100vh; width: max-content; } .is-enhanced .act { width: 100vw; height: 100vh; min-height: 0; border-bottom: 0; border-right: var(--border-hairline); } /* ---- Credits footer ---------------------------------------------------- */ .credits { background: var(--c-credits-bg); padding: var(--space-2xl) var(--gutter) var(--space-xl); text-align: center; } .credits__roll { display: grid; gap: 1.1rem; max-width: var(--container-narrow); margin-inline: auto; } .credit-line { display: flex; justify-content: space-between; gap: var(--space-md); border-bottom: 1px dotted var(--c-dot-line); padding-bottom: var(--space-2xs); } /* ============================================================================ RESPONSIVE (mobile-first; these are the desktop-down adjustments) ========================================================================== */ @media (max-width: 760px) { .act__inner { width: 88%; } }