/* =================================================================== AD CAROUSEL · 4 efectos de transición seleccionables por pauta Cada efecto se aplica al slide ENTRANTE durante ~900ms. Cuando el editor activa un efecto, JS añade `fx-{slug}` al slide al hacerse `.is-active`; la clase se quita al terminar la animación. Respeta `prefers-reduced-motion`. =================================================================== */ .ad-carousel__slide { will-change: transform, opacity, filter, clip-path; backface-visibility: hidden; } /* ── 1) glass-break · romper vidrio agresivo ─────────────────────────── Flash blanco → cascada de grietas (overlay) + shake con RGB split. */ .ad-carousel__slide.is-active.fx-glass-break { animation: fx-glass-break 950ms steps(40, end) both; } .ad-carousel__slide.fx-glass-break::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 49%, rgba(255,255,255,.85) 50%, transparent 51%) 0 0/200% 200%, linear-gradient( 25deg, transparent 49%, rgba(255,255,255,.75) 50%, transparent 51%) 0 0/200% 200%, linear-gradient(155deg, transparent 49.5%, rgba(255,255,255,.7) 50%, transparent 50.5%) 0 0/200% 200%, linear-gradient( 5deg, transparent 49.5%, rgba(255,255,255,.65) 50%, transparent 50.5%) 0 0/200% 200%; background-position: 30% 40%, 70% 60%, 20% 75%, 80% 30%; mix-blend-mode: screen; opacity: 0; animation: fx-glass-cracks 950ms steps(20, end) both; z-index: 3; } @keyframes fx-glass-break { 0% { transform: scale(1.6) translate(0, 0); opacity: 0; filter: brightness(3) blur(10px); } 6% { transform: scale(1.05) translate(-12px, 0); opacity: 1; filter: brightness(2) drop-shadow(0 0 60px #fff); } 12% { transform: scale(0.97) translate(14px, -4px); filter: brightness(1.4) drop-shadow(-10px 0 0 rgba(255,0,80,.85)) drop-shadow(10px 0 0 rgba(0,220,255,.85)); } 18% { transform: scale(1.02) translate(-8px, 3px); filter: drop-shadow(-6px 0 0 rgba(255,0,80,.6)) drop-shadow(6px 0 0 rgba(0,220,255,.6)); } 25% { transform: translate(6px, -2px) rotate(.4deg); filter: contrast(1.2); } 35% { transform: translate(-4px, 2px) rotate(-.3deg); filter: brightness(1.1); } 50% { transform: translate(2px, 0); filter: none; } 70% { transform: translate(-1px, 0); } 100% { transform: translate(0); filter: none; } } @keyframes fx-glass-cracks { 0% { opacity: 0; } 8% { opacity: 1; } 35% { opacity: 0.9; } 65% { opacity: 0.4; } 100% { opacity: 0; } } /* ── 2) rgb-shockwave · onda de choque RGB ───────────────────────────── La imagen explota desde el centro con tres copias rojo/cian/blanco que se desplazan radialmente y vuelven al centro. */ .ad-carousel__slide.is-active.fx-rgb-shockwave { animation: fx-rgb-shockwave 900ms cubic-bezier(.16,.84,.44,1) both; } .ad-carousel__slide.fx-rgb-shockwave::before { content: ""; position: absolute; inset: 50% 50% 50% 50%; pointer-events: none; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 0, 80, .55), 0 0 0 8px rgba(0, 220, 255, .55); opacity: 0; animation: fx-rgb-ring 900ms ease-out both; z-index: 3; } @keyframes fx-rgb-shockwave { 0% { transform: scale(.55); opacity: 0; filter: brightness(3) saturate(0); } 14% { transform: scale(1.1); opacity: 1; filter: brightness(2) saturate(1.5) drop-shadow(-18px 0 0 rgba(255,0,80,.85)) drop-shadow(18px 0 0 rgba(0,220,255,.85)); } 30% { transform: scale(.98); filter: drop-shadow(-10px 0 0 rgba(255,0,80,.6)) drop-shadow(10px 0 0 rgba(0,220,255,.6)); } 55% { transform: scale(1.02); filter: drop-shadow(-4px 0 0 rgba(255,0,80,.35)) drop-shadow(4px 0 0 rgba(0,220,255,.35)); } 100% { transform: scale(1); filter: none; } } @keyframes fx-rgb-ring { 0% { inset: 50%; opacity: 1; } 100% { inset: -30%; opacity: 0; } } /* ── 3) liquid-warp · distorsión líquida ─────────────────────────────── Skew + scale alternados que evocan onda líquida, con blur radial. */ .ad-carousel__slide.is-active.fx-liquid-warp { animation: fx-liquid-warp 1000ms cubic-bezier(.55,.05,.35,.95) both; transform-origin: 50% 50%; } @keyframes fx-liquid-warp { 0% { transform: scale(1.15, .35) skewX(-25deg); opacity: 0; filter: blur(24px) hue-rotate(-30deg) saturate(1.6); } 18% { transform: scale(.92, 1.15) skewX(18deg); opacity: 1; filter: blur(8px) hue-rotate(20deg) saturate(1.4); } 35% { transform: scale(1.08, .94) skewX(-9deg); filter: blur(2px) saturate(1.2); } 52% { transform: scale(.97, 1.05) skewX(5deg); filter: blur(0) saturate(1.1); } 72% { transform: scale(1.02, .99) skewX(-2deg); filter: none; } 100% { transform: none; filter: none; } } /* ── 4) kaleido-zoom · zoom caleidoscópico ───────────────────────────── Polígono estrella se abre + rotación + hue-rotate. */ .ad-carousel__slide.is-active.fx-kaleido-zoom { animation: fx-kaleido-zoom 950ms cubic-bezier(.2,.7,.25,1) both; transform-origin: 50% 50%; } @keyframes fx-kaleido-zoom { 0% { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%); transform: scale(.4) rotate(-180deg); opacity: 0; filter: hue-rotate(0deg) saturate(2.4) brightness(1.8); } 25% { clip-path: polygon(50% 0%, 80% 20%, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0% 50%, 20% 20%); transform: scale(1.15) rotate(-45deg); opacity: 1; filter: hue-rotate(120deg) saturate(2) brightness(1.4); } 55% { clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%); transform: scale(.97) rotate(15deg); filter: hue-rotate(240deg) saturate(1.4); } 80% { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0); transform: scale(1.02) rotate(-3deg); filter: hue-rotate(360deg); } 100% { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0); transform: none; filter: none; } } /* ── prefers-reduced-motion · degradado a crossfade limpio ─────────── */ @media (prefers-reduced-motion: reduce) { .ad-carousel__slide.is-active[class*="fx-"] { animation: none !important; } .ad-carousel__slide[class*="fx-"]::before, .ad-carousel__slide[class*="fx-"]::after { display: none !important; } }