/* ============================================================ 06 · ANIMACIÓN E INTERACCIÓN ------------------------------------------------------------ Contrato de esta capa. Cuatro reglas, sin excepciones: 1. Solo se animan `opacity` y `transform`. Son las dos únicas propiedades que resuelve el compositor sin pasar por layout ni por paint. Nada de width/height/top/margin, nada de filter:blur, nada de backdrop-filter. 2. Toda animación INFINITA lleva `contain: paint`. Sin ella Lighthouse/Lantern la interpreta como candidato LCP nuevo en cada ciclo e infla el LCP de laboratorio (diagnóstico de la auditoría de junio). 3. Nada por encima del pliegue arranca en `opacity: 0`. El hero contiene el elemento LCP: si se pinta tarde, el LCP se retrasa exactamente lo que dure la animación. 4. Cero JavaScript nuevo. Todo lo de aquí funciona con el `yokai.js` que ya existe (IntersectionObserver del reveal) o con CSS puro. No se añade ni un byte de main thread. ------------------------------------------------------------ DEPENDENCIA: el reveal requiere que el elemento raíz del documento lleve la clase yk-js. Ya está resuelto en header.php con un script inline colocado antes de wp_head(), que añade esa clase al cargar la cabecera. Sin ella no falla nada: simplemente no hay animación de entrada y el contenido se ve. Ese es el punto — el estado por defecto es visible, no invisible. ============================================================ */ /* ════════════════════════════════════════════════════════════ 1 · REVEAL AL ENTRAR EN PANTALLA Lo dispara el IntersectionObserver de yokai.js añadiendo `is-in`. Sin `will-change`: declararlo de forma permanente en ~40 elementos promociona 40 capas de GPU en cuanto carga la página. Las transiciones de opacity/transform ya se compositan solas cuando arrancan; adelantarlo aquí solo cuesta memoria. Sin `filter: blur`: animar desenfoque no está compositado y fuerza repintados de GPU en móvil. ════════════════════════════════════════════════════════════ */ .yk-js .yk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--yk-ease), transform .5s var(--yk-ease); } .yk-js .yk-reveal.is-in { opacity: 1; transform: none; } /* Retardo manual, para cabeceras de sección (eyebrow → h2 → lede) */ .yk-js .yk-reveal[data-delay="1"] { transition-delay: .07s; } .yk-js .yk-reveal[data-delay="2"] { transition-delay: .14s; } .yk-js .yk-reveal[data-delay="3"] { transition-delay: .21s; } .yk-js .yk-reveal[data-delay="4"] { transition-delay: .28s; } /* —— Escalonado automático en rejillas —— Se pone `yk-stagger` en el contenedor y los hijos entran en cascada sin tocar el markup de cada uno. El tope son 8 hijos (los de la galería); a partir del noveno todos comparten el último retardo, que es lo correcto: más de medio segundo de espera se percibe como que la página va lenta, no como diseño. */ .yk-js .yk-stagger > .yk-reveal:nth-child(1) { transition-delay: 0s; } .yk-js .yk-stagger > .yk-reveal:nth-child(2) { transition-delay: .06s; } .yk-js .yk-stagger > .yk-reveal:nth-child(3) { transition-delay: .12s; } .yk-js .yk-stagger > .yk-reveal:nth-child(4) { transition-delay: .18s; } .yk-js .yk-stagger > .yk-reveal:nth-child(5) { transition-delay: .24s; } .yk-js .yk-stagger > .yk-reveal:nth-child(6) { transition-delay: .30s; } .yk-js .yk-stagger > .yk-reveal:nth-child(7) { transition-delay: .36s; } .yk-js .yk-stagger > .yk-reveal:nth-child(n+8) { transition-delay: .42s; } /* ════════════════════════════════════════════════════════════ 2 · ZOOM DE IMAGEN AL PASAR EL RATÓN Donde más se nota que la web está viva: la galería y las tarjetas de estilo/artista. Todo dentro de `(hover: hover) and (pointer: fine)`. En táctil no existe el hover: sin este guard, iOS y Android aplican el estado hover al primer toque y lo dejan pegado. Nota de cascada: `.yk-style`, `.yk-gallery__item` y `.yk-where` viven en 07-pages.css, que carga DESPUÉS de esta capa. Por eso los selectores van con el contenedor delante (dos clases): así ganan a una regla de clase simple que llegue después. Nota de conflicto: estos elementos son también dianas del reveal, y `transition` es una sola propiedad — declararla dos veces en el mismo elemento pisa la anterior. Por eso el hover nunca toca el
/
en sí, solo sus hijos y sus pseudo-elementos, que tienen su propia transición. ════════════════════════════════════════════════════════════ */ .yk-styles .yk-style, .yk-artists .yk-artist, .yk-gallery .yk-gallery__item, .yk-showcase .yk-showcase__item, .yk-diagnostic .yk-diag { position: relative; /* clip, no hidden: `hidden` crea contenedor de scroll y rompería la línea de tiempo view() de la sección 15. */ overflow: hidden; overflow: clip; } .yk-styles .yk-style > img, .yk-artists .yk-artist > img, .yk-gallery .yk-gallery__item > img, .yk-showcase .yk-showcase__item img { transition: transform .5s var(--yk-ease); /* Evita el temblor de subpíxel al escalar en WebKit */ backface-visibility: hidden; } @media (hover: hover) and (pointer: fine) { .yk-styles .yk-style:hover > img, .yk-artists .yk-artist:hover > img, .yk-gallery .yk-gallery__item:hover > img, .yk-showcase .yk-showcase__item:hover img { transform: scale(1.045); } } /* —— Marco de neón en la galería —— Un pseudo-elemento con su transición propia. El box-shadow se repinta, pero solo al pasar el ratón y sobre un elemento pequeño: el hover es posterior a la carga y no entra en ninguna métrica de Core Web Vitals. */ .yk-gallery .yk-gallery__item::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 0, 156, 0), inset 0 -70px 60px -50px rgba(255, 0, 156, 0); transition: box-shadow .35s var(--yk-ease); } @media (hover: hover) and (pointer: fine) { .yk-gallery .yk-gallery__item:hover::after { box-shadow: inset 0 0 0 1px var(--yk-neon-soft), inset 0 -70px 60px -50px rgba(255, 0, 156, .38); } } /* ════════════════════════════════════════════════════════════ 3 · ENLACES DE TARJETA — subrayado que se ciñe al texto ------------------------------------------------------------ La versión anterior usaba un pseudo-elemento en absoluto con left:0/right:0, que ocupa el ancho de la CAJA del enlace. Si el enlace es de bloque —o si es un enlace estirado que cubre toda la tarjeta para ampliar el área de clic— la línea salía a lo ancho del contenedor entero en lugar de bajo el texto. `text-decoration-color` no tiene ese problema: el subrayado lo dibuja el propio motor de texto y se ciñe exactamente a los glifos, sea cual sea el display del enlace. Es una animación de pintado, pero solo ocurre en hover y sobre unas pocas palabras: no entra en ninguna métrica de Core Web Vitals. Como efecto lateral, deja libres ::before y ::after del enlace. ════════════════════════════════════════════════════════════ */ .yk-style__body a, .yk-artist__body a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .28em; transition: text-decoration-color .3s var(--yk-ease), color .3s var(--yk-ease); } .yk-style__body a::after, .yk-artist__body a::after { content: '→'; display: inline-block; margin-left: .4em; transition: transform var(--yk-t) var(--yk-ease); } @media (hover: hover) and (pointer: fine) { .yk-style__body a:hover, .yk-artist__body a:hover { text-decoration-color: var(--yk-neon); color: var(--yk-neon); } .yk-style__body a:hover::after, .yk-artist__body a:hover::after { transform: translateX(4px); } } .yk-style__body a:focus-visible, .yk-artist__body a:focus-visible { text-decoration-color: var(--yk-neon); } /* ════════════════════════════════════════════════════════════ 4 · BOTONES CON FLECHA (opcional, por clase) Uso: Va como clase y no aplicado a `.yk-btn--primary` en bloque para no meter una flecha en todos los botones del sitio de golpe. El pseudo-elemento tiene transición propia, así que no pisa la que `.yk-btn` ya declara en 04-components. ════════════════════════════════════════════════════════════ */ .yk-btn--arrow::after { content: '→'; display: inline-block; margin-left: .55em; transition: transform var(--yk-t) var(--yk-ease); } @media (hover: hover) and (pointer: fine) { .yk-btn--arrow:hover::after { transform: translateX(4px); } } /* ════════════════════════════════════════════════════════════ 5 · FAQ — la respuesta entra con desvanecido La altura NO se anima: animar height obliga a recalcular layout en cada fotograma. La caja se abre de golpe y el contenido se desvanece dentro. El salto de altura no cuenta para CLS porque ocurre a menos de 500 ms de un clic del usuario. Se dispara sola al quitar `hidden` desde yokai.js. Cero JS nuevo. ════════════════════════════════════════════════════════════ */ .yk-faq__a:not([hidden]) { animation: yk-faq-in .28s var(--yk-ease) both; } @keyframes yk-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════ 6 · RESPLANDOR QUE RESPIRA EN EL HERO La única animación infinita que queda en el sitio. Es un degradado radial, no una imagen: los degradados CSS no son candidatos a LCP (solo lo son los background-image con URL), así que no compite con la foto del hero. Anima únicamente scale y opacity sobre una capa ya rasterizada — el trabajo lo hace el compositor, el main thread ni se entera. `contain: paint` por la regla 2 del contrato. `isolation` en el padre para que el z-index negativo se quede dentro del hero y no se cuele por debajo del cielo de 09-ambience. 16 segundos a propósito: por debajo de ~10 s el ojo lo lee como parpadeo y distrae del titular. ════════════════════════════════════════════════════════════ */ .yk-hero { isolation: isolate; } .yk-hero::before { content: ''; position: absolute; z-index: -1; inset: -22% -12% auto -22%; height: 95%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 0, 156, .22) 0%, rgba(255, 0, 156, .08) 45%, transparent 72%); animation: yk-breathe 16s var(--yk-ease) infinite; contain: paint; } @keyframes yk-breathe { 0%, 100% { transform: scale(1); opacity: .68; } 50% { transform: scale(1.13); opacity: 1; } } /* Móvil: misma capa, superficie más pequeña. Rasterizar menos píxeles en una GPU modesta es la diferencia entre gratis y no. */ @media (max-width: 768px) { .yk-hero::before { inset: -12% -10% auto -12%; height: 62%; } } /* ════════════════════════════════════════════════════════════ 7 · PULSO NEÓN Para el botón flotante de WhatsApp. Infinita → contenida. ════════════════════════════════════════════════════════════ */ .yk-pulse { animation: yk-pulse 2.6s var(--yk-ease) infinite; contain: paint; } @keyframes yk-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--yk-neon-soft); } 50% { box-shadow: 0 0 0 12px rgba(255, 0, 156, 0); } } /* ════════════════════════════════════════════════════════════ 8 · KINETIC — entrada letra a letra Lo trocea yokai.js (sección 6). Se conserva para wordmarks CORTOS: portada de artista, cabecera de campaña, poco más. ⚠️ NUNCA sobre un H1 largo ni sobre nada que esté por encima del pliegue. Cada letra arranca en opacity:0, así que si el elemento es candidato a LCP, el LCP se retrasa exactamente lo que dure la cascada de letras. En la home NO se usa. ════════════════════════════════════════════════════════════ */ .yk-kinetic span { display: inline-block; opacity: 0; transform: translateY(.5em); animation: yk-kinetic-in .5s var(--yk-ease) forwards; } @keyframes yk-kinetic-in { to { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════ 9 · FOCO DE GALERÍA CON :has() Al pasar el ratón sobre una foto, las otras siete se atenúan. Es el gesto que convierte una cuadrícula en un portfolio. La atenuación va sobre la , NO sobre el
. El figure es diana del reveal y de la animación de scroll: si le tocara la opacidad desde aquí, una animación con `fill: both` ganaría a esta regla y el efecto no se vería nunca. ════════════════════════════════════════════════════════════ */ @media (hover: hover) and (pointer: fine) { .yk-gallery .yk-gallery__item > img { transition: transform .5s var(--yk-ease), opacity .35s var(--yk-ease); } .yk-gallery:has(.yk-gallery__item:hover) .yk-gallery__item:not(:hover) > img { opacity: .42; } } /* ════════════════════════════════════════════════════════════ 10 · PIE DE FOTO DE LA GALERÍA Sube desde abajo con el nombre del artista y el estilo, sobre trama de semitono de manga. Posición absoluta: no participa en el flujo, así que no puede generar CLS por mucho que entre y salga. Siempre presente en el DOM y sin `display:none`, para que los lectores de pantalla y el rastreador lo lean. Solo se oculta visualmente con transform y opacidad. ════════════════════════════════════════════════════════════ */ .yk-gallery__cap { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .6em; padding: var(--yk-s5) var(--yk-s4) var(--yk-s3); pointer-events: none; background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.3px), linear-gradient(to top, rgba(10, 10, 12, .92) 20%, transparent 100%); background-size: 5px 5px, auto; } .yk-gallery__cap b { font-family: var(--yk-f-display); font-weight: 800; letter-spacing: .02em; color: #fff; } .yk-gallery__cap span { font-size: .8em; letter-spacing: .12em; text-transform: uppercase; color: var(--yk-neon); } /* En táctil no hay hover: el pie se queda visible. Es información real sobre quién hizo cada pieza, no debe depender del ratón. */ @media (hover: hover) and (pointer: fine) { .yk-gallery__cap { opacity: 0; transform: translateY(45%); transition: opacity .35s var(--yk-ease), transform .35s var(--yk-ease); } .yk-gallery__item:hover .yk-gallery__cap, .yk-gallery__item:focus-within .yk-gallery__cap { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════ 11 · BARRIDO DE LÍNEA CINÉTICA EN LAS TARJETAS DE ESTILO Un destello diagonal que cruza la tarjeta al pasar el ratón. Un único `translateX` sobre un pseudo-elemento: compositor puro. ⚠️ Si `.yk-style` ya usa ::before en 07-pages.css, hay colisión. ════════════════════════════════════════════════════════════ */ .yk-styles .yk-style::before { content: ''; position: absolute; inset: -10% -40%; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .10) 47%, rgba(255, 0, 156, .22) 50%, rgba(255, 255, 255, .10) 53%, transparent 58%); transform: translateX(-115%); } @media (hover: hover) and (pointer: fine) { .yk-styles .yk-style::before { transition: transform .75s var(--yk-ease); } .yk-styles .yk-style:hover::before { transform: translateX(115%); } } /* ════════════════════════════════════════════════════════════ 12 · BARRIDO DE LUZ EN LA BANDA CTA Dos haces de neón girando muy despacio detrás del texto de cierre. Es el único bloque de la página que pide "reserva aquí", y merece ser el más vivo. Se anima con la propiedad `rotate`, no con `transform`: así no pisa ninguna transformación que la banda pueda llevar. Rotar es compositor puro — la capa se rasteriza una vez. Infinita → `contain: paint`, regla 2 del contrato. 22 segundos: se percibe como que la luz está viva, no como que algo gira. Usa ::before. El ::after de esta banda ya lo ocupa el resplandor de esquina de 09-ambience. ════════════════════════════════════════════════════════════ */ .yk-ctaband::before { content: ''; position: absolute; z-index: 0; top: 50%; left: 50%; width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; pointer-events: none; background: conic-gradient(from 0turn, transparent 0turn, transparent .04turn, rgba(255, 0, 156, .16) .085turn, transparent .13turn, transparent .52turn, rgba(120, 40, 255, .13) .565turn, transparent .61turn, transparent 1turn); animation: yk-sweep 22s linear infinite; contain: paint; } @keyframes yk-sweep { to { rotate: 1turn; } } /* ════════════════════════════════════════════════════════════ 13 · MEDIOS FIJOS EN LAS SECCIONES A DOS COLUMNAS La foto se queda quieta mientras el texto pasa por su lado. `position: sticky` es diseño, no animación: cero fotogramas, cero coste de compositor. Solo a partir de 1024 px, donde estas secciones son de dos columnas. En una sola columna un elemento fijo se solaparía con el texto que viene detrás. ⚠️ Requiere que .yk-mech y .yk-where sean rejilla de dos columnas en escritorio. Si en 07-pages.css no lo son, borra este bloque. ════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { .yk-mech__media, .yk-where__media { position: sticky; top: calc(var(--yk-header-h, 76px) + var(--yk-s5, 24px)); } } /* ════════════════════════════════════════════════════════════ 14 · ANIMACIONES DIRIGIDAS POR SCROLL ------------------------------------------------------------ Aquí está el cambio de fondo. Una animación normal avanza con el reloj; estas avanzan con la posición de scroll. Corren en el hilo del compositor y no necesitan ni un listener ni un IntersectionObserver: el navegador las resuelve solo. Soporte a mediados de 2026: Chrome 115+, Edge 115+, Firefox 132+ y Safari 18+, en torno al 84% del tráfico global. El resto no pierde nada — el bloque @supports simplemente no se aplica y se quedan con el reveal por IntersectionObserver de la capa 1. Eso es mejora progresiva de manual. Nota sobre recorte: `overflow: hidden` convierte un elemento en contenedor de scroll y la línea de tiempo `view()` se resolvería contra la caja equivocada. Por eso todo lo que recorta en este archivo usa `overflow: clip`, que recorta igual sin crear contenedor de scroll. ════════════════════════════════════════════════════════════ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* —— Barra de progreso de lectura —— Sin markup: es el ::after del body, que estaba libre (09-ambience ocupa el ::before con el cielo). Fija y sin participar en el flujo → no puede dar CLS. */ body.yk-body::after { content: ''; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999; pointer-events: none; background: linear-gradient(90deg, var(--yk-neon), #7828ff); transform-origin: 0 50%; transform: scaleX(0); animation: yk-progress linear both; animation-timeline: scroll(root block); } @keyframes yk-progress { to { transform: scaleX(1); } } /* —— Parallax de salida del hero —— El rango es `exit`: al cargar la página el hero todavía no ha empezado a salir, así que la animación está en el 0% y el fotograma inicial es la identidad. La foto LCP se pinta exactamente igual que sin esto. Solo se mueve cuando el usuario ya ha hecho scroll, es decir, después de que el LCP se haya registrado. */ .yk-hero__media, .yk-hero__shot { animation: yk-hero-exit linear both; animation-timeline: view(); animation-range: exit 0% exit 92%; } @keyframes yk-hero-exit { from { transform: none; opacity: 1; } to { transform: translateY(-7%) scale(.955); opacity: .30; } } /* —— Galería atada al dedo —— Cada foto escala y aparece según su posición real en la pantalla, no con un temporizador. Sustituye al reveal por JS en los navegadores que lo soportan (una animación gana a una transición para la misma propiedad). */ .yk-gallery .yk-gallery__item, .yk-showcase .yk-showcase__item, .yk-diagnostic .yk-diag, .yk-principles .yk-principle, .yk-styles .yk-style, .yk-artists .yk-artist { animation: yk-view-rise linear both; animation-timeline: view(); animation-range: entry 8% entry 62%; } @keyframes yk-view-rise { from { opacity: 0; transform: translateY(28px) scale(.955); } to { opacity: 1; transform: none; } } /* —— Deriva del kanji de marca de agua —— El watermark de 09-ambience sube muy despacio mientras cruzas la sección. Le da profundidad al fondo sin que se lea como un efecto. */ .yk-watermark::after { animation: yk-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @keyframes yk-drift { from { transform: translateY(8%) rotate(-1.5deg); } to { transform: translateY(-8%) rotate(1.5deg); } } /* —— La rayita del eyebrow se dibuja sola —— 04-components ya define .yk-eyebrow::before como una línea de neón de 30 px. Aquí solo se le ata la escala al scroll: cero markup nuevo, cero pseudo-elementos nuevos. Es el efecto que MÁS se nota en móvil, porque los eyebrows están en todas las secciones y no dependen del ratón. */ .yk-eyebrow::before { transform-origin: left center; animation: yk-rule-draw linear both; animation-timeline: view(); animation-range: entry 15% entry 70%; } @keyframes yk-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } } } /* —— Mismo motivo, para el envoltorio de 09-ambience —— `.yk-watermark` recorta con overflow:hidden y puede envolver a una sección con animaciones de scroll dentro. Dos clases para ganarle la cascada a 09, que carga después que esta capa. —— */ .yk-section.yk-watermark { overflow: hidden; overflow: clip; } /* ════════════════════════════════════════════════════════════ 15 · TÁCTIL Y MÓVIL ------------------------------------------------------------ En móvil no existe el hover, y ahí se cae la mitad de lo que hemos montado: el zoom de imagen, el foco de galería, el barrido de las tarjetas y el subrayado de los enlaces solo viven bajo el ratón. Por eso la página se siente más quieta en el teléfono. La respuesta no es meter animaciones infinitas —eso sí costaría batería y GPU— sino usar los dos disparadores que SÍ existen en táctil: el scroll y el dedo. ════════════════════════════════════════════════════════════ */ /* —— 1. El dedo como disparador —— Retroalimentación al pulsar. Es lo que separa una web de una app en un móvil: que las cosas respondan al tacto. Un solo `transform`, y solo mientras el dedo está encima. —— */ @media (hover: none) { .yk-gallery__item:active > img, .yk-showcase__item:active img, .yk-style:active > img, .yk-artist:active > img { transform: scale(1.04); transition: transform .18s var(--yk-ease); } .yk-btn:active { transform: scale(.97); } .yk-faq__q:active { color: var(--yk-neon); } } /* —— 2. Las líneas cinéticas vuelven al móvil, en versión ligera —— 09-ambience las retira por debajo de 768 px porque un degradado cónico repetido sobre una sección entera es caro de rasterizar. Pero se rasteriza UNA vez y después solo se compone: no es un coste por fotograma, es un coste de primer pintado. Reduciendo opacidad y estrechando la banda enmascarada, la superficie a rasterizar baja lo suficiente para que compense. Dos clases para ganarle la cascada a 09-ambience, que carga después de esta capa. ⚠️ Si al medir ves que el LCP de móvil sube, este bloque es lo primero que hay que quitar. Es el único de toda la tanda que tiene un coste real de pintado. —— */ @media (max-width: 768px) { .yk-section.yk-atmo--speed::after { display: block; opacity: .22; -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%, #000 58%, transparent); mask-image: linear-gradient(180deg, transparent, #000 42%, #000 58%, transparent); } } /* —— 3. El kanji, algo más presente —— En pantalla estrecha el fondo tiene menos que contar, así que la marca de agua puede permitirse subir un punto. Es texto con contorno: no se rasteriza como una imagen. —— */ @media (max-width: 768px) { .yk-section.yk-watermark::after { opacity: .85; -webkit-text-stroke-width: 1.5px; } } /* ════════════════════════════════════════════════════════════ 16 · RESPETO ABSOLUTO A LA PREFERENCIA DEL USUARIO No es cortesía: `prefers-reduced-motion` lo activa gente con trastornos vestibulares, a la que el movimiento le provoca mareo real. ════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .yk-js .yk-reveal { opacity: 1; transform: none; } .yk-hero::before { animation: none; opacity: .8; } .yk-ctaband::before { animation: none; } .yk-hero__media, .yk-hero__shot { animation: none; transform: none; opacity: 1; } .yk-gallery__item, .yk-showcase__item, .yk-diag, .yk-principle, .yk-style, .yk-artist { animation: none; transform: none; opacity: 1; } .yk-watermark::after { animation: none; } body.yk-body::after { display: none; } .yk-mech__media, .yk-where__media { position: static; } }