/* ========================================================= MESH GRADIENT (componente reutilizable) LedLab — landing. --------------------------------------------------------- El degradado animado que armamos para el hero, sacado a componente en otras secciones sin duplicar los siete degradados. Uso: Modificador: .mesh--mirror espeja la composición en horizontal (los colores quedan del otro lado) El contenedor de la sección tiene que ser position: relative y el contenido ir por encima (z-index). ========================================================= */ .mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* --------------------------------------------------------------- VELOCIDAD DEL DEGRADADO — el unico numero que hay que tocar. 1 = como esta ahora 1.5 = 50% mas rapido 2 = el doble de rapido 0.6 = mas lento Afecta a las cuatro capas a la vez y mantiene la proporcion entre ellas. Cambia solo este valor. --------------------------------------------------------------- */ --mesh-speed: 1; /* Base del MESH GRADIENT: la rampa horizontal crimson -> magenta -> lavanda (centro) -> magenta -> crimson. Queda QUIETA: es el esqueleto de la composición. Los blobs que se mueven están en .mesh__layer, más abajo. */ background-color: var(--color-4); background-repeat: no-repeat; /* La rampa se dibuja 1.4x mas ancha que el contenedor para que background-position-x tenga recorrido y la banda lavanda pueda viajar. Stops convertidos con (stop_original + 20) / 1.4. */ background-size: 140% 100%; background-image: linear-gradient( 90deg, var(--color-4) 14.29%, var(--color-5) 31.43%, var(--color-6) 44.29%, var(--color-6) 54.29%, var(--color-5) 64.29%, var(--color-4) 85.71% ); animation: meshBaseSlide calc(9s / var(--mesh-speed)) ease-in-out infinite alternate; } /* La banda lavanda viaja ~15% del ancho del contenedor y vuelve. */ @keyframes meshBaseSlide { from { background-position: 30% 50%; } to { background-position: 70% 50%; } } /* ========================================================= MESH GRADIENT — el movimiento --------------------------------------------------------- Cómo se reparte el movimiento (y por qué así): Las direcciones estan repartidas a proposito para que el movimiento no se lea como un barrido horizontal: base -> horizontal esquinas -> vertical + rotacion (cada esquina para otro lado) velos arriba -> diagonal velos derecha -> vertical, en contrafase con las esquinas La base es la unica que solo puede ir en horizontal: es un linear-gradient de 90deg, o sea uniforme en vertical, y moverlo hacia arriba o abajo no cambiaria ni un pixel. Todo el movimiento vertical y diagonal viene de las capas de blobs. - La BASE (la rampa horizontal, arriba en .mesh) es la que se mueve de verdad: se dibuja 1.4x más ancha que el contenedor y se anima su background-position-x, así la banda lavanda del centro viaja unos 15% del ancho. Es la única capa con contraste de color real, o sea la única que produce un cambio de pixel perceptible. - Las ESQUINAS de color (naranja arriba-izq, crimson arriba-der, amarillo abajo-der) se desplazan poco y sobre todo ROTAN, para que cada una salga en una dirección distinta. - Los cuatro ritmos son distintos y sin múltiplo común (9s la base, 13s las esquinas, 8s los velos de arriba, 11s los de la derecha) para que el conjunto nunca se sincronice ni se lea como una sola cosa moviéndose. Las cuatro duraciones se dividen por --mesh-speed (declarada arriba, en .mesh), así que ese único valor acelera o frena todo junto sin romper la proporción. - Los VELOS pastel aportan el "respiro": se mueven poco pero modulan su opacidad (0.45 a 1), que en una superficie suave se lee mejor que el desplazamiento. Tres intentos fallidos antes de esto, para no repetirlos: 1) Blobs como background-image del contenedor animando background-position: NO movía nada. Sin un background-size mayor a 100%, el área de posicionamiento mide igual que la caja y todo background-position resuelve a 0. 2) Capas con transform, desplazamiento 1.6% en 34s: correcto pero invisible (menos de 1px por segundo). 3) Desplazamientos y opacidades muy grandes en todas las capas: se veía mucho, pero el naranja y el amarillo desaparecían medio ciclo. Medido con capturas comparadas pixel a pixel (1600x900): el cambio promedio en una ventana de 1.5s pasó de 1.0/255 (invisible) a 6.7/255, y de 2.3 a 19.1 en 7.5s. Ojo con los porcentajes: en un radial-gradient, la posición (at X Y) y el tamaño de la elipse son relativos a la caja. Las capas miden 200% (inset: -50%) para que al desplazarse no quede una franja sin pintar en el borde contrario, así que los valores están convertidos con pos_capa = (pos_original + 50) / 2 tam_capa = tam_original / 2 y cada blob cae en el mismo punto y tamaño que en la referencia de Figma. Si movés un blob, recalculá con esas dos fórmulas. ========================================================= */ .mesh__layer { position: absolute; inset: -50%; display: block; background-repeat: no-repeat; will-change: transform, opacity; } /* Esquinas de color. El orden importa: la primera va arriba. */ .mesh__layer--corners { background-image: radial-gradient(ellipse 17% 22% at 24% 25%, var(--color-2) 0%, transparent 74%), radial-gradient(ellipse 18% 22% at 76% 25%, var(--color-4) 0%, transparent 76%), radial-gradient(ellipse 29% 48% at 77% 69%, var(--color-1) 0%, transparent 80%); animation: meshCorners calc(13s / var(--mesh-speed)) ease-in-out -7s infinite alternate; } /* Velos pastel del sector superior. */ .mesh__layer--veils-top { background-image: radial-gradient(ellipse 15% 17% at 62% 33%, rgba(255, 249, 227, 0.30) 0%, transparent 72%), radial-gradient(ellipse 17% 15% at 38% 27%, rgba(255, 249, 227, 0.26) 0%, transparent 72%); animation: meshVeilsTop calc(8s / var(--mesh-speed)) ease-in-out -6s infinite alternate; } /* Velos pastel del sector derecho e inferior. */ .mesh__layer--veils-right { background-image: radial-gradient(ellipse 20% 17% at 59% 73%, rgba(255, 249, 227, 0.40) 0%, transparent 74%), radial-gradient(ellipse 23% 23% at 69% 56%, rgba(255, 249, 227, 0.40) 0%, transparent 76%); animation: meshVeilsRight calc(11s / var(--mesh-speed)) ease-in-out infinite alternate; } /* Los % de translate3d son de la capa (2x el contenedor): 2% acá = 4% del contenedor. Las esquinas de color se mueven poco, pero se mueven. El truco es la ROTACIÓN: al girar la capa sobre su centro, cada esquina sale para un lado distinto (el naranja de arriba-izq baja, el amarillo de abajo-der sube), así que las tres no se leen como un bloque desplazándose. El desplazamiento es chico a propósito: si se van de su esquina, el contenedor pierde el naranja y el amarillo y deja de parecerse al Figma. */ @keyframes meshCorners { from { transform: translate3d(-1.5%, -6.5%, 0) scale(1) rotate(-3.5deg); } to { transform: translate3d(1.5%, 6.5%, 0) scale(1.06) rotate(3.5deg); } } @keyframes meshVeilsTop { from { transform: translate3d(7%, 6.5%, 0) scale(1.06); opacity: 0.5; } to { transform: translate3d(-7%, -6.5%, 0) scale(1); opacity: 1; } } @keyframes meshVeilsRight { from { transform: translate3d(3.5%, -8%, 0) scale(1); opacity: 1; } to { transform: translate3d(-3.5%, 8%, 0) scale(1.07); opacity: 0.5; } } /* Si el sistema del usuario pide menos movimiento, se congela todo (incluida la base). OJO: en Windows, "Efectos de animación" apagado activa esto y el degradado queda quieto por más que subamos valores. */ /* --------------------------------------------------------- MESH EN PANTALLAS ANGOSTAS En vertical, la rampa lineal de 90deg mete sus 6 paradas en pocos cientos de píxeles y se lee como un arcoíris horizontal, no como un mesh. Así que en angosto la base deja de ser lineal y pasa a ser ella misma un conjunto de blobs radiales, con recorrido en los DOS ejes (background-size 140% 140%) para que el movimiento no sea solo horizontal. Las capas animadas siguen encima igual. --------------------------------------------------------- */ @media (max-width: 900px) { .mesh { background-size: 140% 140%; background-image: radial-gradient(ellipse 62% 34% at 14% 6%, var(--color-2) 0%, transparent 72%), radial-gradient(ellipse 58% 30% at 92% 18%, var(--color-4) 0%, transparent 74%), radial-gradient(ellipse 78% 42% at 30% 44%, var(--color-6) 0%, transparent 70%), radial-gradient(ellipse 62% 32% at 96% 60%, var(--color-5) 0%, transparent 74%), radial-gradient(ellipse 66% 34% at 10% 78%, var(--color-5) 0%, transparent 74%), radial-gradient(ellipse 72% 40% at 86% 96%, var(--color-1) 0%, transparent 76%); animation-name: meshBaseSlideMesh; } /* Recorrido en diagonal, no solo de lado a lado. */ @keyframes meshBaseSlideMesh { from { background-position: 26% 22%; } to { background-position: 74% 78%; } } } @media (prefers-reduced-motion: reduce) { .mesh, .mesh__layer { animation: none; } } /* Espejado en horizontal: misma composición, colores del otro lado. */ .mesh--mirror { transform: scaleX(-1); } /* --------------------------------------------------------- MODIFICADOR .mesh--purple El mismo degradado pero sin naranjas ni ambares: se redefinen los tokens de color DENTRO del componente, asi las capas de abajo (que ya usan var(--color-N)) quedan en rosas, lilas y violetas sin duplicar ni un degradado. Se usa en la pagina de Mapeo de Personas y Equipos. --------------------------------------------------------- */ .mesh--purple { --color-1: var(--color-7); /* ambar -> lila */ --color-2: var(--color-8); /* naranja -> violeta */ --color-3: var(--color-8); /* naranja fuerte -> violeta */ }