/* ============================================================ CLICK — CAPA CINEMATOGRAFICA ------------------------------------------------------------ TODO lo de este archivo esta encerrado bajo html[data-cine="on"]. Para apagarlo por completo: cambiar data-cine="on" por "off" en la etiqueta . Nada de aqui vuelve a aplicar y la pagina queda exactamente como estaba antes. Recetas de hyperframes-animation implementadas: waterfall-entry . spring-pop-entrance . svg-path-draw depth-scatter-assemble . 3d-text-depth-layers . split-tilt-cards ambient-glow-bloom . motion-blur-streak . depth-of-field-blur press-release-spring . counting-dynamic-scale . viewport-change ============================================================ */ /* ---------- 1. CORTINA DE ENTRADA (overtura) ---------- */ #cine-overtura{ position:fixed;inset:0;z-index:9999; display:flex;align-items:center;justify-content:center; background:var(--bg); } html:not([data-cine="on"]) #cine-overtura{display:none} #cine-overtura .marca{width:min(190px,42vw);opacity:0;will-change:transform,opacity} #cine-overtura .trazo{width:min(260px,58vw);height:2px;overflow:visible} #cine-overtura .trazo line{stroke:url(#cineGrad);stroke-width:2;stroke-linecap:round} #cine-overtura .hoja{position:fixed;left:0;right:0;height:50.5vh;background:var(--bg);z-index:2;will-change:transform} #cine-overtura .hoja.arriba{top:0} #cine-overtura .hoja.abajo{bottom:0} #cine-overtura .centro{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:26px} html[data-cine="on"] body.cine-cargando{overflow:hidden} /* La pagina espera detras del telon ligeramente ampliada y se asienta cuando se abre: el gesto de apertura clasico. */ html[data-cine="on"] body.cine-cargando main{will-change:transform} /* ---------- 2. AMBIENT-GLOW-BLOOM tras el titular ---------- */ html[data-cine="on"] .cine-bloom{ position:absolute;pointer-events:none;z-index:0; width:min(760px,92vw);aspect-ratio:1;left:50%;top:38%; transform:translate(-50%,-50%) scale(.6);opacity:0; background:radial-gradient(circle,rgba(2,173,245,.4) 0%,rgba(255,194,0,.13) 38%,transparent 68%); filter:blur(48px);will-change:transform,opacity; } html[data-cine="on"] .hero2{position:relative;z-index:1} /* ---------- 3. Elementos que gobierna la capa cine ---------- */ html[data-cine="on"] .cine-own{transition:none!important} /* ---------- 4. (libre) ---------- Aqui vivio una extrusion 3d-text-depth-layers sobre el titular del hero. Retirada el 2026-08-01: el titular ya lleva su propio degradado ambar-cian y las copias en cian detras ensuciaban el contraste. El titular se queda como estaba. No reintroducir. */ /* ---------- 5. DEPTH-SCATTER-ASSEMBLE + linea guia (metodo) ---------- */ html[data-cine="on"] .pasos{perspective:1500px;perspective-origin:50% 40%;position:relative} html[data-cine="on"] .pasos .paso{transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity} html[data-cine="on"] .cine-guia{ position:absolute;left:38px;top:0;bottom:0;width:2px;overflow:visible;pointer-events:none;z-index:0; } html[data-cine="on"] .cine-guia line{stroke:url(#cineGuiaGrad);stroke-width:2;stroke-linecap:round} @media(max-width:680px){html[data-cine="on"] .cine-guia{display:none}} /* ---------- 6. Camara por scroll (viewport-change) ---------- */ html[data-cine="on"] .cine-camara{perspective:1600px;perspective-origin:50% 50%} html[data-cine="on"] .cine-plano{transform-style:preserve-3d;will-change:transform,opacity,filter} /* ---------- 7. SPLIT-TILT-CARDS: tarjetas que se inclinan ---------- */ html[data-cine="on"] .g3{perspective:1200px} html[data-cine="on"] .cine-tarjeta{transform-style:preserve-3d;will-change:transform} html[data-cine="on"] .cine-tarjeta > *{transform:translateZ(24px)} /* ---------- 8. CIERRE: destello que recorre la superficie ---------- Forma "traveling sheen" de ambient-glow-bloom. Reemplaza al estallido de confeti, que no correspondia al tono de la marca. */ html[data-cine="on"] .cta-final{position:relative;overflow:hidden} html[data-cine="on"] .cine-destello{ position:absolute;top:-40%;left:0;width:38%;height:180%; pointer-events:none;z-index:0;opacity:0; background:linear-gradient(100deg,transparent,rgba(2,173,245,.15) 38%,rgba(255,255,255,.09) 50%,rgba(255,194,0,.13) 62%,transparent); filter:blur(26px);will-change:transform,opacity; } html[data-cine="on"] .cine-marco{ position:absolute;inset:clamp(14px,3vw,34px);pointer-events:none;z-index:0;overflow:visible; } html[data-cine="on"] .cine-marco rect{fill:none;stroke:url(#cineGrad2);stroke-width:1.4;rx:22} html[data-cine="on"] .cta-final .wrap{position:relative;z-index:1} /* ---------- 9. Barra de progreso de lectura ---------- */ html[data-cine="on"] #cine-progreso{ position:fixed;top:0;left:0;right:0;height:2px;z-index:200; background:linear-gradient(90deg,var(--ci),var(--am)); transform:scaleX(0);transform-origin:0 50%;will-change:transform; } /* ---------- 10. Contadores ---------- OJO: el numero NO puede llevar transform propio. Vive dentro de .mt .n, que pinta con background-clip:text; si el hijo recibe un transform se compone aparte, pierde el fondo recortado y hereda color:transparent — es decir, desaparece. La escala se aplica al contenedor .n, que es quien lleva el degradado. */ html[data-cine="on"] .mt .n{transform-origin:center bottom;will-change:transform} /* ---------- 11. Respeto a quien pide menos movimiento ---------- */ @media (prefers-reduced-motion: reduce){ html[data-cine="on"] .cine-bloom, html[data-cine="on"] .cine-destello, html[data-cine="on"] .cine-marco, html[data-cine="on"] .cine-guia, html[data-cine="on"] #cine-progreso{display:none} html[data-cine="on"] .cine-plano, html[data-cine="on"] .cine-tarjeta, html[data-cine="on"] .pasos .paso{transform:none!important;filter:none!important;opacity:1!important} #cine-overtura{display:none} }