/* * Fondo animado — capa decorativa fija detrás del contenido. * * Misma regla de la casa que dlt-theme.css: ningún color literal, todo sale * de las custom properties que genera theme.json (--wp--preset--color--*), * aquí con color-mix() donde hace falta transparencia extra. Así el fondo se * adapta solo si el equipo cambia la paleta o activa la variación de estilo * oscura (styles/tierra-oscura.json). * * COSTO — por qué las @keyframes solo tocan `transform`: * * Cada mancha animaba antes `border-radius` (la silueta orgánica se * deformaba) a la vez que `transform`. `transform`/`opacity` son * composición pura: el navegador arma una textura de la mancha una sola * vez y de ahí en adelante solo la traslada/rota/escala en la GPU, a costo * prácticamente cero por fotograma. `border-radius`, en cambio, es una * propiedad de forma: NINGÚN navegador la puede animar así, sin * excepción — cambiar el contorno obliga a rehacer esa textura (repintar * la mancha) en cada fotograma, y el `filter: blur()` se vuelve a aplicar * sobre ese repintado. Eso vale sea cual sea el hardware: no es una * cuestión de mover el trabajo de CPU a GPU, es que repintar una forma * siempre cuesta más que solo moverla. * * Por eso las @keyframes de más abajo ya NO tocan `border-radius`: cada * mancha se queda con el contorno orgánico fijo que trae su propia clase * (`.dlt-fondo-animado__blob--1/2/3`) y solo se anima su posición, * rotación y escala — el mismo recorrido, la misma duración, los mismos * puntos de la curva, nada más que ya no "respira" cambiando de silueta. * Con eso la animación completa es composición pura: costo casi nulo, * corre enteramente en la GPU sin tocar el hilo principal fotograma a * fotograma. * * Se mantiene acotado igual, por las dudas: 3 manchas nada más, blur bajo * (9 px), tamaño limitado con max-width/max-height, y sin animación en * absoluto por debajo de 782 px ni con `prefers-reduced-motion`. */ .dlt-fondo-animado { position: fixed; inset: 0; /* Ojo: NO -1. Un z-index negativo cae detrás del propio fondo opaco que pinta (var(--wp--preset--color--crema) por theme.json) y el fondo animado quedaría invisible. 0 alcanza: por ser el primer elemento después de (wp_body_open), el resto del sitio ya pinta encima en el orden natural del DOM. */ z-index: 0; overflow: hidden; pointer-events: none; /* Aísla el repintado de las manchas para que no invalide el resto de la página. Sin `size` (no `contain: strict`): el tamaño ya viene de `inset: 0`, así que la contención de tamaño no aporta nada. */ contain: layout paint style; /* Transparencia global del fondo. Se multiplica con la opacidad propia de cada mancha (.16 / .14 / .12), así que baja las tres a la vez sin tener que retocarlas una por una. No crea un contexto de apilado nuevo: `position: fixed` + `z-index: 0` ya lo creaban. */ opacity: 0.5; } /* Manchas de pigmento ------------------------------------------------------ */ .dlt-fondo-animado__blob { position: absolute; display: block; max-width: 1100px; max-height: 900px; /* `contain: paint` aísla a cada mancha de sus hermanas y de la malla — ya no hay repintado de forma que aislar (ver COSTO arriba), pero de todos modos evita que un reflow de la página fuerce a revisar las tres juntas. `will-change` solo pide `transform`: es la única propiedad que se anima, así que es lo único que hace falta adelantarle al navegador para que reserve la capa compuesta. */ contain: paint; will-change: transform; filter: blur(9px); } .dlt-fondo-animado__blob--1 { left: -22vw; top: -18vw; width: 75vw; height: 65vw; background: radial-gradient( ellipse at 48% 48%, var(--wp--preset--color--terracota) 0%, var(--wp--preset--color--terracota-ink) 45%, color-mix(in srgb, var(--wp--preset--color--terracota-ink) 40%, transparent) 65%, transparent 76% ); border-radius: 67% 33% 72% 28% / 42% 68% 32% 58%; opacity: 0.16; animation: dltPintura1 18s ease-in-out infinite alternate; } .dlt-fondo-animado__blob--2 { right: -25vw; top: -5vw; width: 80vw; height: 70vw; background: radial-gradient( ellipse at 48% 50%, var(--wp--preset--color--terracota-ink) 0%, var(--wp--preset--color--terracota) 43%, color-mix(in srgb, var(--wp--preset--color--terracota) 35%, transparent) 66%, transparent 78% ); border-radius: 31% 69% 42% 58% / 61% 37% 63% 39%; opacity: 0.14; animation: dltPintura2 23s ease-in-out infinite alternate; } .dlt-fondo-animado__blob--3 { left: 15vw; bottom: -35vw; width: 90vw; height: 65vw; background: radial-gradient( ellipse at 50% 48%, var(--wp--preset--color--verde) 0%, var(--wp--preset--color--terracota-ink) 42%, color-mix(in srgb, var(--wp--preset--color--terracota-ink) 35%, transparent) 65%, transparent 78% ); border-radius: 56% 44% 31% 69% / 37% 63% 67% 33%; opacity: 0.12; animation: dltPintura3 27s ease-in-out infinite alternate; } /* * Mismo recorrido de traslación/rotación/escala de siempre, en los mismos * puntos de la curva (15/30/45/60/80% …) — solo se quitó `border-radius` * de cada paso. El contorno lo pone la propia clase `.dlt-fondo-animado__blob--N` * de arriba y se queda fijo durante toda la animación. */ @keyframes dltPintura1 { 0% { transform: translate3d(-4vw, -2vw, 0) rotate(-8deg) scale3d(1, 1, 1); } 15% { transform: translate3d(5vw, 4vw, 0) rotate(3deg) scale3d(1.14, 0.86, 1); } 30% { transform: translate3d(14vw, -3vw, 0) rotate(11deg) scale3d(0.84, 1.19, 1); } 45% { transform: translate3d(8vw, 9vw, 0) rotate(-3deg) scale3d(1.2, 0.82, 1); } 60% { transform: translate3d(-2vw, 6vw, 0) rotate(-9deg) scale3d(0.91, 1.16, 1); } 80% { transform: translate3d(-9vw, -1vw, 0) rotate(-14deg) scale3d(1.13, 0.89, 1); } 100% { transform: translate3d(-3vw, -7vw, 0) rotate(-5deg) scale3d(0.96, 1.09, 1); } } @keyframes dltPintura2 { 0% { transform: translate3d(4vw, -4vw, 0) rotate(8deg) scale3d(1, 1, 1); } 20% { transform: translate3d(-7vw, 5vw, 0) rotate(-4deg) scale3d(0.84, 1.2, 1); } 40% { transform: translate3d(-15vw, -2vw, 0) rotate(-11deg) scale3d(1.18, 0.83, 1); } 60% { transform: translate3d(-8vw, 10vw, 0) rotate(5deg) scale3d(0.88, 1.17, 1); } 80% { transform: translate3d(2vw, 5vw, 0) rotate(13deg) scale3d(1.21, 0.82, 1); } 100% { transform: translate3d(8vw, -5vw, 0) rotate(4deg) scale3d(0.93, 1.12, 1); } } @keyframes dltPintura3 { 0% { transform: translate3d(-5vw, 3vw, 0) rotate(-4deg) scale3d(1, 1, 1); } 20% { transform: translate3d(7vw, -6vw, 0) rotate(7deg) scale3d(1.19, 0.83, 1); } 40% { transform: translate3d(14vw, -12vw, 0) rotate(13deg) scale3d(0.82, 1.21, 1); } 60% { transform: translate3d(5vw, -16vw, 0) rotate(-7deg) scale3d(1.22, 0.8, 1); } 80% { transform: translate3d(-7vw, -9vw, 0) rotate(-13deg) scale3d(0.89, 1.16, 1); } 100% { transform: translate3d(-12vw, -3vw, 0) rotate(5deg) scale3d(1.13, 0.88, 1); } } /* Malla de puntos ---------------------------------------------------------- * * Grano cerámico discreto en la esquina inferior izquierda, con degradados * repetidos en vez de un de SVG. Estática: no anima nada. */ .dlt-fondo-animado__malla { position: absolute; left: -6%; bottom: -4%; width: 48%; height: 46%; opacity: 0.55; background-image: radial-gradient( color-mix(in srgb, var(--wp--preset--color--terracota-ink) 50%, transparent) 1.3px, transparent 1.4px ); background-size: 34px 34px; transform: rotate(-8deg); -webkit-mask-image: radial-gradient(closest-side ellipse, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side ellipse, #000 40%, transparent 100%); } /* Apagado total del movimiento para quien lo pida. */ @media (prefers-reduced-motion: reduce) { .dlt-fondo-animado__blob { animation: none !important; } } /* No malgastar tinta imprimiendo un fondo decorativo. */ @media print { .dlt-fondo-animado { display: none; } } /* * En tablet/móvil el fondo queda quieto (no solo por costo: es donde menos * se aprecia el detalle) y el desenfoque baja un poco. Los tamaños/posiciones * se ajustan para que las 3 manchas sigan cubriendo bien un viewport angosto * y alto, en vez de dejar huecos por la proporción distinta. */ @media (max-width: 781px) { .dlt-fondo-animado__blob { animation: none; filter: blur(7px); } .dlt-fondo-animado__blob--1 { left: -45vw; top: -25vw; width: 105vw; height: 90vw; } .dlt-fondo-animado__blob--2 { right: -50vw; top: 0; width: 110vw; height: 95vw; } .dlt-fondo-animado__blob--3 { left: -10vw; bottom: -40vw; width: 120vw; height: 90vw; } .dlt-fondo-animado__malla { display: none; } }