/* ===================================================================== INCOTEM — Capa ambiental viva (fondo técnico de bajo perfil) Vive por debajo de TODO el contenido. Opacidad baja, no distrae. Controlable vía --amb (intensidad) y atributos data-amb-* en . ===================================================================== */ :root { --amb: 0.05; /* intensidad global 0..1 */ --g-line: rgba(255,255,255,0.13); /* rejilla gruesa */ --g-line2: rgba(255,255,255,0.05); /* rejilla fina */ --t-line: rgba(230,254,44,0.10); /* curvas de nivel (tinte lima) */ --mx: 50%; --my: 40%; /* posición del cursor */ } /* El contenido siempre por encima del ambiente */ .slides { z-index: 1; } .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; } .ambient > * { position: absolute; } /* ---- Rejilla técnica (blueprint) ---- */ .ambient__grid { inset: -2px; background-image: linear-gradient(var(--g-line) 1px, transparent 1px), linear-gradient(90deg, var(--g-line) 1px, transparent 1px), linear-gradient(var(--g-line2) 1px, transparent 1px), linear-gradient(90deg, var(--g-line2) 1px, transparent 1px); background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px; opacity: calc(var(--amb) * 0.92); -webkit-mask-image: radial-gradient(130% 130% at 50% 35%, #000 38%, transparent 92%); mask-image: radial-gradient(130% 130% at 50% 35%, #000 38%, transparent 92%); } /* ---- Curvas de nivel (trama de curvas + retícula del cliente) ---- La trama trae stroke-opacity propio (0.16 retícula / 0.35 curvas), así que la capa necesita más opacidad que la anterior para pesar lo mismo. */ .ambient__topo { inset: -18%; opacity: calc(var(--amb) * 1.5); -webkit-mask-image: radial-gradient(120% 110% at 50% 40%, #000 0%, rgba(0,0,0,0.45) 55%, transparent 88%); mask-image: radial-gradient(120% 110% at 50% 40%, #000 0%, rgba(0,0,0,0.45) 55%, transparent 88%); } .ambient__topo-svg { width: 100%; height: 100%; display: block; object-fit: cover; } /* ---- Foco que sigue al cursor ---- */ .ambient__spot { inset: 0; background: radial-gradient(460px 460px at var(--mx) var(--my), rgba(230,254,44,0.07), rgba(230,254,44,0.02) 38%, transparent 62%); mix-blend-mode: screen; opacity: calc(var(--amb) * 1.15); transition: opacity .5s var(--ease); } /* ---- Barrido de escaneo al cambiar de slide ---- */ .ambient__scan { left: 0; right: 0; top: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--accent) 28%, var(--accent) 72%, transparent); box-shadow: 0 0 16px 2px rgba(230,254,44,0.45); will-change: transform, opacity; } /* ---- Viñeta sutil para preservar legibilidad ---- */ .ambient::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 30%, transparent 58%, rgba(8,9,9,0.5) 100%); } /* ---- Modos de fondo (atributo en ) ---- */ body[data-amb-mode="grid"] .ambient__topo { display: none; } body[data-amb-mode="topo"] .ambient__grid { display: none; } body[data-amb-spot="off"] .ambient__spot { display: none; } body[data-amb-scan="off"] .ambient__scan { display: none; } body[data-amb="off"] .ambient { display: none; } /* ===================================================================== Movimiento — sólo si el usuario no pidió reducir movimiento ===================================================================== */ @media (prefers-reduced-motion: no-preference) { .ambient__grid { animation: ambGridDrift 46s linear infinite; } .ambient__topo { animation: ambTopoFloat 60s ease-in-out infinite alternate; } .ambient.scanning .ambient__scan { animation: ambScan 0.95s cubic-bezier(0.4,0,0.2,1); } @keyframes ambGridDrift { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 240px 240px, 240px 240px, 48px 48px, 48px 48px; } } @keyframes ambTopoFloat { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(2.5%, -2%, 0) scale(1.06); } } @keyframes ambScan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { opacity: 0; transform: translateY(100vh); } } } /* ===================================================================== Efectos de primer plano (texto) — clases de revelado ===================================================================== */ /* Cifras que se ensamblan / descifran: la fuente mono evita saltos de ancho */ .fx-num { font-variant-numeric: tabular-nums; } /* Título descifrándose: cursor de bloque mientras resuelve */ .thead h2.decoding::after { content: ''; display: inline-block; width: 0.46em; height: 0.82em; margin-left: 0.08em; background: var(--accent); transform: translateY(0.04em); animation: ambCaret 0.5s steps(2) infinite; } @keyframes ambCaret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .thead h2.decoding::after { display: none; } } /* ===================================================================== Toques premium · sutiles y baratos (sólo si se permite movimiento) ===================================================================== */ /* ---- Parallax de puntero · sólo la excavadora ---- */ /* JS escribe --plx/--ply; `translate` es independiente del `transform` que usa el revelado, así no se pelean. */ #inicio .hero-mach { translate: var(--plx, 0px) var(--ply, 0px); transition: translate .5s cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: no-preference) { /* ---- Destello que cruza el panel lima ---- */ #inicio.on .hero-block::before { content: ''; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 36%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38) 48%, rgba(255,255,255,0.55) 52%, transparent); transform: skewX(-12deg) translateX(0); mix-blend-mode: overlay; opacity: 0; pointer-events: none; animation: heroSheen 8.5s cubic-bezier(.5,0,.3,1) 1.2s infinite; } @keyframes heroSheen { 0% { opacity: 0; transform: skewX(-12deg) translateX(0); } 8% { opacity: 1; } 26% { opacity: 0; } /* el barrido recorre el ancho del panel (~3.6× su propio ancho) */ 26.01%, 100% { transform: skewX(-12deg) translateX(360%); opacity: 0; } } }