/* ============================================================ FOCUS — Capa inmersiva ──────────────────────────────────────────────────────────── LA REGLA DE ESTE FICHERO, Y NO ES NEGOCIABLE: Todo elemento tiene que ser visible y estar en su posición final SÓLO CON CSS. Cualquier estado oculto vive exclusivamente dentro de @media (prefers-reduced-motion: no-preference). La plantilla es el bloque .reveal de styles.css. Cópiala tal cual para cada clase de movimiento nueva. Si algún día la página sale en blanco, será porque alguien se saltó esto. ──────────────────────────────────────────────────────────── ============================================================ */ /* ============================================================ CORTAFUEGOS FOCUS.failSafe() y el nivel 0 ponen .no-motion en . Tiene que ganar a todo, incluidas las animaciones de styles.css que están gateadas por media query y no por clase. ============================================================ */ .no-motion *, .no-motion *::before, .no-motion *::after{ animation-duration:1ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:1ms !important; transition-delay:0s !important; } .no-motion{scroll-behavior:auto !important} /* Nada puede quedarse invisible ni desplazado. Los `animation: ... both` de styles.css caen solos en su fotograma final; esto cubre el resto. `.fx-line` son las líneas que parte SplitText, y `!important` gana al estilo inline que escribe GSAP: si GSAP muere a media inicialización, los titulares vuelven a verse. */ .no-motion .reveal, .no-motion .fx-line, .no-motion .hero-inner, .no-motion .blur-demo .sharp, .no-motion [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; visibility:visible !important; } .no-motion .blur-demo .fuzz{ opacity:var(--lens-dim) !important; filter:blur(var(--lens-blur)) !important; } /* ============================================================ LA LENTE DEL CURSOR La idea de toda la marca, hecha interacción: el cursor es una lente. Alrededor del titular flotan fragmentos de ruido operativo, borrosos. Lo que la lente toca se ve nítido y en ámbar. Por qué va a 60 fps: el desenfoque se calcula UNA vez y se queda cacheado como textura — nunca cambia. Por frame sólo se regenera la máscara de la capa nítida, y sólo en el área del hero. Progresivo por defecto: sin JS, sin ratón o con movimiento reducido, la capa nítida no existe y el ruido borroso se queda como textura. ============================================================ */ @property --lens-x{syntax:'';inherits:true;initial-value:-9999px} @property --lens-y{syntax:'';inherits:true;initial-value:-9999px} .hero-noise{ position:absolute;inset:0;pointer-events:none;user-select:none; overflow:hidden; } .hero-noise span{ position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%); font-family:'Sora',sans-serif;font-weight:600;white-space:nowrap; font-size:clamp(12px,1.35vw,17px); color:var(--niebla);opacity:.3; filter:blur(var(--lens-blur)); } /* La capa nítida es un CLON del ruido, hermano y nunca hijo: si fuese hijo heredaría el filter y no habría nada que enfocar. */ .hero-sharp{ position:absolute;inset:0;pointer-events:none;user-select:none;overflow:hidden; z-index:var(--z-lens); -webkit-mask-image:radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y), #000 0 var(--lens-feather), rgba(0,0,0,.35) 84%, transparent 100%); mask-image:radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y), #000 0 var(--lens-feather), rgba(0,0,0,.35) 84%, transparent 100%); } .hero-sharp span{filter:none;opacity:.92;color:var(--ambar)} /* Un anillo tenue que hace visible la propia lente: es un visor. */ .hero-lens-ring{ position:absolute;top:0;left:0;pointer-events:none;z-index:var(--z-lens); width:calc(var(--lens-r) * 2);height:calc(var(--lens-r) * 2); border-radius:50%;border:1px solid rgba(245,179,1,.16); transform:translate(calc(var(--lens-x) - var(--lens-r)), calc(var(--lens-y) - var(--lens-r))); opacity:0;transition:opacity var(--dur-base); } .hero.lens-on .hero-lens-ring{opacity:1} .no-motion .hero-sharp, .no-motion .hero-lens-ring{display:none} /* ============================================================ CONMUTADOR DE MOVIMIENTO ============================================================ */ .motion-toggle{ font-family:'Inter',sans-serif;font-size:12.5px; background:none;border:none;padding:0;cursor:pointer; color:var(--niebla);border-bottom:1px solid transparent; transition:color var(--dur-fast),border-color var(--dur-fast); } .motion-toggle:hover{color:var(--ambar);border-color:var(--ambar)} .motion-toggle:focus-visible{ outline:none;color:var(--ambar); box-shadow:0 0 0 3px rgba(245,179,1,.28);border-radius:3px; } /* ============================================================ VISOR FIJO (HUD) Una apertura que se cierra con el progreso del scroll y lee en qué sección vas. Lectura de visor de cámara, que es de lo que va la marca. ============================================================ */ .vf-hud{ position:fixed;right:26px;bottom:26px;z-index:var(--z-header); display:flex;align-items:center;gap:9px;pointer-events:none; opacity:0;transform:translateY(8px); transition:opacity var(--dur-slow),transform var(--dur-slow); } .vf-hud.is-on{opacity:1;transform:none} .vf-hud-ring{width:38px;height:38px;transform:rotate(-90deg)} .vf-hud-track{fill:none;stroke:rgba(154,163,172,.28);stroke-width:1.5} .vf-hud-prog{ fill:none;stroke:var(--ambar);stroke-width:1.5;stroke-linecap:round; stroke-dasharray:1;stroke-dashoffset:1; } .vf-hud-label{ font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500; color:var(--ambar);letter-spacing:.06em; } .vf-hud-total{ font-family:'JetBrains Mono',monospace;font-size:11px; color:var(--niebla);letter-spacing:.06em; } .no-motion .vf-hud{display:none} @media(max-width:1023px){.vf-hud{display:none}} /* ============================================================ UTILIDADES ============================================================ */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }