/* ============================================================= anim.css — Capa aditiva 1) Video de fondo fijo (images/adn.mp4) con máscara blanca 2) Animación de los círculos del hero (.hero__atmos) 3) Animación de las sombras/halos ::before decorativos No sustituye a ningún archivo: se carga DESPUÉS de pages.css y sólo sobreescribe lo necesario para estos dos efectos. ============================================================= */ :root { /* Ajusta estos valores para calibrar el fondo de video */ --bgv-veil: 0.86; /* opacidad de la máscara blanca (0 = video puro, 1 = blanco) */ --bgv-blur: 3px; /* desenfoque del video bajo la máscara */ --bgv-sat: 0.55; /* saturación del video (bajo = casi monocromo) */ /* Valor "vivo" del velo: js/bg-scroll.js lo reescribe al hacer scroll. Si el script está desactivado, hereda el valor fijo de arriba. */ --bgv-veil-live: var(--bgv-veil); } /* ============================================================= 1. FONDO DE VIDEO FIJO + MÁSCARA BLANCA ============================================================= */ /* El body deja de pintar blanco para que el video respire por debajo. conserva el blanco como fallback si el video no carga. */ body { background: transparent; } .bgv { position: fixed; inset: 0; z-index: -2; /* detrás de todo el contenido */ overflow: hidden; pointer-events: none; background: #ffffff82; /* fallback mientras carga el video */ contain: paint; } /* Capa que desplaza el parallax (la mueve js/bg-scroll.js). Sobresale por arriba y por abajo para que el desplazamiento nunca deje ver un borde vacío. */ .bgv__inner { position: absolute; inset: -12% 0; will-change: transform; } .bgv__video { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.08); /* evita bordes visibles con el blur */ filter: saturate(var(--bgv-sat)) contrast(1.04) brightness(1.06) blur(var(--bgv-blur)); animation: bgvDrift 46s ease-in-out infinite; } /* La máscara blanca: vela el video y lo funde con la paleta clara */ .bgv__mask { position: absolute; inset: 0; background: radial-gradient(120% 85% at 50% 8%, rgba(255, 255, 255, calc(var(--bgv-veil-live) - 0.16)), rgba(255, 255, 255, var(--bgv-veil-live)) 55%, rgba(255, 255, 255, calc(var(--bgv-veil-live) + 0.08)) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.00) 35%, rgba(255, 255, 255, 0.18) 100%); } /* Un tinte de marca muy leve para que el video no se vea gris */ .bgv__mask::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 620px at 82% 12%, rgba(196, 181, 253, 0.16), transparent 62%), radial-gradient(760px 560px at 8% 92%, rgba(37, 99, 235, 0.07), transparent 60%); animation: bgvTint 34s ease-in-out infinite alternate; } @keyframes bgvDrift { 0%, 100% { transform: scale(1.08) translate3d(0, 0, 0); } 50% { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); } } @keyframes bgvTint { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-3%, 2%, 0); } } /* ---- Superficies claras: translúcidas para que el video se intuya ---- */ .hero { background: radial-gradient(1200px 700px at 78% 20%, rgba(196, 181, 253, 0.26), transparent 60%), radial-gradient(900px 600px at 10% 90%, rgba(37, 99, 235, 0.08), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(246, 247, 251, 0.72) 100%); } .hero--split { background: radial-gradient(1000px 700px at 82% 18%, rgba(196, 181, 253, 0.28), transparent 62%), radial-gradient(800px 600px at 6% 88%, rgba(37, 99, 235, 0.07), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(246, 247, 251, 0.72) 100%); } .sec--soft { background: rgba(246, 247, 251, 0.62); } .problem__card { background: rgba(255, 255, 255, 0.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* En móvil el video fijo penaliza mucho: se congela y se aclara más */ @media (max-width: 780px) { :root { --bgv-veil: 0.90; --bgv-blur: 1px; } .bgv__video { animation: none; transform: scale(1.02); } .bgv__inner { inset: -6% 0; } .bgv__mask::after { animation: none; } } /* ============================================================= 2. CÍRCULOS DEL HERO (.hero__atmos) — ahora se desplazan ============================================================= */ .hero__atmos > * { will-change: transform; } /* Orbe principal: deriva amplia + respiración */ .orb--main { animation: orbWander 28s ease-in-out infinite; } .orb--main::after { animation: ringBreath 12s ease-in-out infinite; } /* Halos de color: cada uno con su propia órbita y ritmo */ .glow--purple { animation: glowWanderA 21s ease-in-out infinite; } .glow--blue { animation: glowWanderB 26s ease-in-out infinite; } /* Nebulosa: giro lento y continuo */ .nebula { transform-origin: 70% 40%; animation: nebulaSwirl 70s linear infinite; } /* Rejilla: deriva diagonal infinita */ .grid-lines { animation: gridDrift 24s linear infinite; } /* Hélice: además de su parpadeo, ondula de arriba a abajo */ .helix { animation: helixSway 16s ease-in-out infinite; } @keyframes orbWander { 0% { transform: translate3d(0, 0, 0) scale(1); } 20% { transform: translate3d(-46px, -34px, 0) scale(1.05); } 40% { transform: translate3d(28px, -62px, 0) scale(0.97); } 60% { transform: translate3d(58px, -18px, 0) scale(1.06); } 80% { transform: translate3d(16px, 34px, 0) scale(1.01); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @keyframes ringBreath { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.05); opacity: 0.45; } } @keyframes glowWanderA { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; } 33% { transform: translate3d(-70px, 46px, 0) scale(1.12); opacity: 1; } 66% { transform: translate3d(52px, 74px, 0) scale(0.94); opacity: 0.78; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; } } @keyframes glowWanderB { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; } 30% { transform: translate3d(88px, -52px, 0) scale(1.16); opacity: 0.95; } 65% { transform: translate3d(-46px, -86px, 0) scale(0.9); opacity: 0.7; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.6; } } @keyframes nebulaSwirl { 0% { transform: rotate(0deg) scale(1.4); } 100% { transform: rotate(360deg) scale(1.4); } } @keyframes gridDrift { 0% { background-position: 0 0, 0 0; } 100% { background-position: 64px 64px, 64px 64px; } } @keyframes helixSway { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-14px, 26px, 0) rotate(2.5deg); } } /* ============================================================= 3. SOMBRAS / HALOS ::before — ahora se mueven ============================================================= */ /* Blob difuso dentro de la tarjeta "problema" */ .problem__card::before { will-change: transform; animation: blobWander 26s ease-in-out infinite; } /* Anillos punteados del diagrama orbital */ .orbit::before { animation: ringSpin 34s linear infinite; } .orbit::after { animation: ringSpinRev 52s linear infinite, ringScale 11s ease-in-out infinite; } /* Halo cónico del retrato de la bio: gira y respira */ .bio-band__portrait::before { animation: haloSpin 22s linear infinite, haloBreath 9s ease-in-out infinite; } @keyframes blobWander { 0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } 25% { transform: translate3d(90px, 60px, 0) scale(1.14); opacity: 0.8; } 50% { transform: translate3d(180px, -20px, 0) scale(0.92); opacity: 1; } 75% { transform: translate3d(70px, 110px, 0) scale(1.08); opacity: 0.85; } 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; } } @keyframes ringSpin { to { transform: rotate(360deg); } } @keyframes ringSpinRev { to { transform: rotate(-360deg); } } @keyframes ringScale { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.03; opacity: 0.55; } } @keyframes haloSpin { to { transform: rotate(360deg); } } @keyframes haloBreath { 0%, 100% { opacity: 0.85; filter: blur(2px); } 50% { opacity: 1; filter: blur(6px); } } /* ============================================================= ACCESIBILIDAD / RENDIMIENTO ============================================================= */ @media (prefers-reduced-motion: reduce) { .bgv__inner { transform: none !important; } .bgv__video, .bgv__mask::after, .hero__atmos > *, .orb--main::after, .problem__card::before, .orbit::before, .orbit::after, .bio-band__portrait::before { animation: none !important; } }