/* ========================================================================== RODCARS · Escena de fondo del sitio público -------------------------------------------------------------------------- El sitio va en oscuro, que es lo que permite que la luz se vea como luz. La escena la arma includes/header.php (div.rc-escena) y tiene cuatro capas, de atrás hacia adelante: 1. AURORAS · manchones enormes y desenfocados que van y vienen muy despacio. Es la iluminación ambiental. 2. PISO · una malla en perspectiva que corre hacia el espectador, como el asfalto pasando bajo el coche. 3. HORIZONTE · el filo brillante donde muere el piso. 4. ESTELAS · rastros finos que cruzan, como faros en larga exposición. 5. VIÑETA · oscurece las orillas para que el contenido mande. Todo lo que se mueve son `transform` sobre capas propias, así que lo resuelve el compositor: no repinta. Sin JavaScript. ========================================================================== */ /* Base. El negro va en el propio : su fondo se propaga al lienzo, y la escena (fija, z-index -1) se pinta por encima, así que se ve igual y no hace falta :has(), que no todos los navegadores traen. */ body.rc-public { background-color: #04060a; color: rgba(255,255,255,.80); } .rc-escena { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #0b1218 0%, #04060a 62%), #04060a; } /* ────────────────────────────────────────────────────────────────────────── 1) AURORAS · la iluminación ambiental ────────────────────────────────────────────────────────────────────────── */ .rc-escena .rc-aurora { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; } .rc-escena .rc-aurora-1 { top: -18vh; left: -10vw; width: 62vw; height: 62vh; background: radial-gradient(circle at 50% 50%, rgba(53,183,195,.38), rgba(53,183,195,.10) 55%, transparent 72%); animation: rcAurora1 34s ease-in-out infinite; } .rc-escena .rc-aurora-2 { top: -8vh; right: -14vw; width: 54vw; height: 54vh; background: radial-gradient(circle at 50% 50%, rgba(221,171,62,.26), rgba(221,171,62,.07) 55%, transparent 72%); animation: rcAurora2 41s ease-in-out infinite; } .rc-escena .rc-aurora-3 { top: 22vh; left: 26vw; width: 46vw; height: 46vh; background: radial-gradient(circle at 50% 50%, rgba(90,140,255,.20), rgba(90,140,255,.05) 55%, transparent 72%); animation: rcAurora3 29s ease-in-out infinite; } @keyframes rcAurora1 { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(14vw, 8vh, 0) scale(1.18); } } @keyframes rcAurora2 { 0%, 100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-12vw, 11vh, 0) scale(.92); } } @keyframes rcAurora3 { 0%, 100% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(8vw, -9vh, 0) scale(1.22); } } /* ────────────────────────────────────────────────────────────────────────── 2) PISO · la malla que corre hacia el espectador El contenedor aplica la perspectiva y recorta; la malla de dentro es un patrón que se repite y solo se desplaza (una celda por ciclo, así el bucle cierra sin salto). Mover la malla y no el fondo es lo que lo hace barato. ────────────────────────────────────────────────────────────────────────── */ .rc-escena .rc-piso { position: absolute; left: -25%; right: -25%; bottom: 0; height: 34vh; overflow: hidden; perspective: 240px; perspective-origin: 50% 0%; opacity: .55; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 42%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.45) 42%, #000 100%); } .rc-escena .rc-piso-malla { position: absolute; top: 0; left: -50%; width: 200%; height: 300%; transform-origin: 50% 0%; transform: rotateX(72deg); background-image: repeating-linear-gradient(90deg, rgba(53,183,195,.20) 0 1px, transparent 1px 74px), repeating-linear-gradient(0deg, rgba(53,183,195,.14) 0 1px, transparent 1px 74px); will-change: transform; animation: rcPiso 2.6s linear infinite; } @keyframes rcPiso { from { transform: rotateX(72deg) translate3d(0, 0, 0); } to { transform: rotateX(72deg) translate3d(0, 74px, 0); } } /* ────────────────────────────────────────────────────────────────────────── 3) HORIZONTE · el filo donde muere el piso ────────────────────────────────────────────────────────────────────────── */ .rc-escena .rc-horizonte { position: absolute; left: 0; right: 0; bottom: 34vh; height: 1px; background: linear-gradient(90deg, transparent, rgba(53,183,195,.65) 26%, rgba(221,171,62,.55) 50%, rgba(53,183,195,.65) 74%, transparent); box-shadow: 0 0 30px 8px rgba(53,183,195,.16); opacity: .5; animation: rcHorizonte 7s ease-in-out infinite; } @keyframes rcHorizonte { 0%, 100% { opacity: .34; } 50% { opacity: .62; } } /* ────────────────────────────────────────────────────────────────────────── 4) ESTELAS · rastros de faros Una sola capa de 200vw con las mismas estelas duplicadas a +100vw; al desplazarse -100vw el dibujo queda igual y el bucle no tiene costura. ────────────────────────────────────────────────────────────────────────── */ .rc-escena .rc-estelas { position: absolute; top: -10vh; left: 0; width: 200vw; height: 90vh; transform: rotate(-3deg); will-change: transform; background-repeat: no-repeat; background-image: linear-gradient(90deg, rgba(53,183,195,.85), rgba(53,183,195,.34) 14%, rgba(53,183,195,.05) 62%, transparent), linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.20) 16%, rgba(255,255,255,.03) 66%, transparent), linear-gradient(90deg, rgba(221,171,62,.70), rgba(221,171,62,.26) 16%, rgba(221,171,62,.04) 66%, transparent), linear-gradient(90deg, rgba(53,183,195,.60), rgba(53,183,195,.24) 15%, rgba(53,183,195,.04) 64%, transparent), /* — copia a +100vw — */ linear-gradient(90deg, rgba(53,183,195,.85), rgba(53,183,195,.34) 14%, rgba(53,183,195,.05) 62%, transparent), linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.20) 16%, rgba(255,255,255,.03) 66%, transparent), linear-gradient(90deg, rgba(221,171,62,.70), rgba(221,171,62,.26) 16%, rgba(221,171,62,.04) 66%, transparent), linear-gradient(90deg, rgba(53,183,195,.60), rgba(53,183,195,.24) 15%, rgba(53,183,195,.04) 64%, transparent); background-size: 26vw 1px, 34vw 1px, 18vw 2px, 29vw 1px, 26vw 1px, 34vw 1px, 18vw 2px, 29vw 1px; background-position: 6vw 16%, 38vw 38%, 61vw 57%, 82vw 78%, 106vw 16%, 138vw 38%, 161vw 57%, 182vw 78%; animation: rcEstelas 7.5s linear infinite; } @keyframes rcEstelas { from { transform: rotate(-3deg) translate3d(0, 0, 0); } to { transform: rotate(-3deg) translate3d(-100vw, 0, 0); } } /* ────────────────────────────────────────────────────────────────────────── 5) VIÑETA · apaga las orillas para que mande el contenido ────────────────────────────────────────────────────────────────────────── */ .rc-escena .rc-vineta { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4,6,10,.55) 100%), radial-gradient(115% 80% at 50% 40%, transparent 34%, rgba(4,6,10,.80) 100%); } /* ────────────────────────────────────────────────────────────────────────── 6) Teléfonos · menos capas La malla en perspectiva es la más cara; en pantallas chicas se queda pero más lenta, y las auroras se reducen a dos. ────────────────────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { .rc-escena .rc-aurora-3 { display: none; } .rc-escena .rc-piso { height: 26vh; opacity: .4; } .rc-escena .rc-horizonte { bottom: 26vh; } .rc-escena .rc-piso-malla { animation-duration: 3.6s; } .rc-escena .rc-estelas { animation-duration: 9s; } } /* ────────────────────────────────────────────────────────────────────────── 7) Menos movimiento a quien lo pide · e impresión La escena no desaparece: se queda quieta, que sigue viéndose bien. ────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .rc-escena .rc-aurora, .rc-escena .rc-piso-malla, .rc-escena .rc-horizonte { animation: none; } .rc-escena .rc-estelas { display: none; } } @media print { .rc-escena { display: none; } }