/* ══════════════════════════════════════════════════════════════════════ PORTAL COMUNA · SCROLL VIDEO INTRO ────────────────────────────────────────────────────────────────────── Hoja aditiva. No redefine ningun color, tipografia, layout ni breakpoint de landing.html: todo cuelga de selectores .sv-* o de clases que el JS pone en . Si scroll-video.js no arranca, ninguna regla de estado aplica y la landing se ve exactamente como antes. Tres actos, todos gobernados por el scroll: I el video scrubbeado (documentos flotando) II el apagado: la escena se oscurece hasta negro absoluto III el sistema: horizonte, marca que vuela al nav, hero componiendose Clases de estado (las escribe scroll-video.js): html.sv-gsap GSAP cargo y tomo el control del scroll html.sv-armed la intro va a correr html.sv-revealed el scroll ya paso el tramo final de la intro ══════════════════════════════════════════════════════════════════════ */ /* ══ 1 · SCROLL BEHAVIOR ═══════════════════════════════════════════════ landing.html tenia html{scroll-behavior:smooth}, que rompe el manejo de posicion de ScrollTrigger (pin + scrub). Se quito de ahi y se repone aca SOLO cuando GSAP no esta disponible, para no perder el suavizado nativo en el camino de fallback. Con GSAP los anchors los maneja ScrollTo. */ html:not(.sv-gsap){scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ══ 2 · #scroll-demo ══════════════════════════════════════════════════ La CSS transition de .cs-header se sumaba al scrub de GSAP (doble suavizado = lag). Con GSAP activo la neutralizamos; el suavizado ahora lo da scrub. */ html.sv-gsap .cs-header{transition:none} /* ══ 3 · ESTADO ARMADO ═════════════════════════════════════════════════ Estado inicial de lo que la intro compone. Va en CSS y no en JS para que no haya flash: la hoja es bloqueante y se aplica antes del primer pintado. Solo toca opacity y transform. */ /* Canvas detras del body, para que el overscroll no muestre blanco. */ html.sv-armed{background:#04080f} html.sv-armed nav{opacity:0;transform:translate3d(0,-101%,0);will-change:transform,opacity} html.sv-armed .hero-bg{opacity:0;will-change:opacity,transform} html.sv-armed .hero-badge, html.sv-armed .hero h1, html.sv-armed .hero-sub, html.sv-armed .hero-actions, html.sv-armed .hero-visual{opacity:0;will-change:transform,opacity} /* Los flotantes fijos no pueden quedar sobre la escena. Se ocultan con opacity y los devuelve .sv-revealed usando la transicion propia de cada uno, sin que GSAP les toque el transform: asi su :hover sigue igual. */ html.sv-armed .wsp-float, html.sv-armed #hx-chat-btn{opacity:0;pointer-events:none} html.sv-armed .wsp-float{transition:transform .2s,opacity .45s ease} html.sv-armed.sv-revealed .wsp-float, html.sv-armed.sv-revealed #hx-chat-btn{opacity:1;pointer-events:auto} /* Terminada la intro liberamos las capas de composicion. */ html.sv-revealed nav, html.sv-revealed .hero-bg, html.sv-revealed .hero-badge, html.sv-revealed .hero h1, html.sv-revealed .hero-sub, html.sv-revealed .hero-actions, html.sv-revealed .hero-visual{will-change:auto} /* ══ 4 · CAPA DE INTRO ═════════════════════════════════════════════════ La inyecta el JS dentro de .hero. z-index 4 la deja sobre .hero-content (z-2) y sobre .hero::before (z-1). Queda debajo de nav y flotantes, que son fixed y ya estan ocultos por el bloque anterior. Sin background propio: cuando .sv-dim se apaga, lo que asoma por detras es .hero-bg. Ese es el mecanismo del empalme. */ .sv-intro{ position:absolute;top:0;left:0;width:100%;height:100vh; z-index:4;pointer-events:none;overflow:hidden; } /* ── ACTO I · el video ── .sv-stage existe aparte del