/* ===================================================================== Tradia · capa de PROFUNDIDAD para el home y las landings ===================================================================== EL PROBLEMA QUE RESUELVE Las tres páginas tenían el fondo entero en position:fixed (.aura + #fx). Al hacer scroll el fondo no cambiaba NI UN PÍXEL, y todas las secciones compartían el mismo relleno sin superficie propia. Sin referencias que cambien, el ojo lee la página como un único banner que no termina nunca. CÓMO SE ARREGLA (cinco capas, de atrás hacia adelante) 1. Viñeta fija — oscurece arriba y abajo: la página deja de ser un lienzo plano y pasa a leerse como un escenario. 2. Aura con parallax — sigue fija, pero tq-depth.js la desplaza más despacio que el contenido. Dos velocidades = el cerebro deduce distancia. Es lo que más aporta. 3. Bandas por sección — escalones de valor casi imperceptibles: cada sección es un plano distinto, no la misma pared. 4. Costuras (horizonte)— filo de 1px que brilla en el centro y se apaga en los bordes. Separa planos sin dibujar una línea dura, que es lo que delataría el truco. 5. Grano — ruido al 3%. Rompe el degradado perfectamente liso, que es justo lo que hace que un fondo digital parezca "vinilo impreso" en vez de aire. INDEPENDIENTE DE LA PALETA: no usa las variables de cada página (cada una tiene nombres distintos: --ink, --navy...). Los valores se pueden ajustar por página sobreescribiendo las variables --tqd-* en su :root. Todo se degrada solo: sin JS solo se pierde el parallax; con prefers-reduced-motion el parallax no se activa. ===================================================================== */ :root { --tqd-tinta: #0b1220; /* base de la marca (la misma en las 3 páginas) */ --tqd-banda: rgba(255, 255, 255, .018); /* escalón de valor entre secciones */ --tqd-costura: rgba(120, 165, 255, .28); /* brillo del filo de separación */ --tqd-luz: rgba(47, 123, 255, .10); /* glow de acento por sección */ --tqd-luz2: rgba(18, 181, 168, .07); /* glow alterno (teal) */ } /* ---------- 1. Viñeta: falloff arriba y abajo ---------- */ /* Va en el mismo z-index de fondo que .aura, sin capturar clics. */ .tqd-vineta { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 22%, transparent 74%, rgba(0, 0, 0, .55) 100%), radial-gradient(120% 65% at 50% 42%, transparent 42%, rgba(0, 0, 0, .38) 100%); } /* ---------- 2. Aura con parallax ---------- */ /* tq-depth.js envuelve cada blob en un .tqd-par y mueve EL ENVOLTORIO. Tiene que ser así: los blobs ya tienen una animación de flotado que escribe 'transform', y una animación CSS gana siempre a una declaración normal — el parallax puesto en el propio blob simplemente no se vería. Cada envoltorio a su velocidad, para que haya profundidad también entre los blobs y no parezcan una sola lámina. Sin JS no existe ningún .tqd-par y el aura se queda exactamente como estaba. */ .tqd-par { position: absolute; inset: 0; will-change: transform; } @media (prefers-reduced-motion: reduce) { .tqd-par { transform: none !important; } } /* ---------- 3. Bandas de sección ---------- */ /* Escalón de valor + su propia fuente de luz. El degradado vertical evita que la banda tenga bordes visibles: nace y muere en transparente. */ .tqd-banda { position: relative; isolation: isolate; /* el ::before no se escapa por encima del contenido */ } .tqd-banda::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 100% at 50% 0%, var(--tqd-luz), transparent 70%), linear-gradient(180deg, transparent, var(--tqd-banda) 18%, var(--tqd-banda) 82%, transparent); } /* Alterna el color y el lado de la luz. Que la luz venga de un sitio distinto en cada banda es lo que impide que el patrón se vuelva mecánico al hacer scroll. */ .tqd-banda.alt::before { background: radial-gradient(60% 90% at 82% 8%, var(--tqd-luz2), transparent 68%), linear-gradient(180deg, transparent, var(--tqd-banda) 22%, transparent); } /* ---------- 4. Costura (horizonte) entre planos ---------- */ /* Un borde de 1px a todo el ancho se vería como una tabla. Este brilla en el centro y se disuelve hacia los lados, así separa sin dibujar una línea. */ .tqd-costura { position: relative; } .tqd-costura::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--tqd-costura) 22%, var(--tqd-costura) 78%, transparent); opacity: .55; } .tqd-costura.arriba::after { top: -1px; bottom: auto; } /* ---------- 5. Grano ---------- */ /* feTurbulence en SVG embebido: sin peticiones de red y sin imagen que cargar. Al 3% no se ve como ruido, se percibe como textura: es lo que separa un fondo "impreso" de uno con aire. mix-blend-mode:overlay lo integra en vez de velarlo. */ .tqd-grano { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .032; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Elevación de reposo para las tarjetas ---------- */ /* Antes solo tenían sombra al pasar el ratón: en reposo estaban pegadas al fondo. Una sombra suave permanente las despega del plano de atrás, que es la otra mitad de la sensación de profundidad (la primera es el fondo). */ .tqd-elev { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -28px rgba(0, 0, 0, .9); }