/* * Animaciones al aparecer en pantalla. * Se activan con clases CSS en cualquier bloque (panel "Animación" del editor): * fz-anim-aparecer | fz-anim-subir | fz-anim-bajar | fz-anim-izquierda | fz-anim-derecha | fz-anim-zoom * fz-anim-cascada → anima los elementos internos uno tras otro * fz-anim-delay-100 … fz-anim-delay-600 → retraso * Solo se ocultan si el script está activo (clase fz-anim-js en ), * así el contenido nunca queda invisible en el editor o sin JavaScript. */ .fz-anim-js :is(.fz-anim-aparecer, .fz-anim-subir, .fz-anim-bajar, .fz-anim-izquierda, .fz-anim-derecha, .fz-anim-zoom, .fz-anim-cascada-item) { opacity: 0; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--fz-anim-delay, 0ms); will-change: opacity, transform; } .fz-anim-js .fz-anim-subir, .fz-anim-js .fz-anim-cascada-item { transform: translateY(40px); } .fz-anim-js .fz-anim-bajar { transform: translateY(-40px); } .fz-anim-js .fz-anim-izquierda { transform: translateX(-60px); } .fz-anim-js .fz-anim-derecha { transform: translateX(60px); } .fz-anim-js .fz-anim-zoom { transform: scale(0.92); } .fz-anim-js .fz-visible:is(.fz-anim-aparecer, .fz-anim-subir, .fz-anim-bajar, .fz-anim-izquierda, .fz-anim-derecha, .fz-anim-zoom, .fz-anim-cascada-item) { opacity: 1; transform: none; } .fz-anim-delay-100 { --fz-anim-delay: 100ms; } .fz-anim-delay-200 { --fz-anim-delay: 200ms; } .fz-anim-delay-300 { --fz-anim-delay: 300ms; } .fz-anim-delay-400 { --fz-anim-delay: 400ms; } .fz-anim-delay-500 { --fz-anim-delay: 500ms; } .fz-anim-delay-600 { --fz-anim-delay: 600ms; } /* Palabra que va rotando: [comercio|ferretería|farmacia] Va en su propia línea para que el resto del título no se mueva al cambiar de palabra. */ .fz-rotar__palabra { display: block; width: fit-content; margin-inline: auto; position: relative; color: #bee45d; transition: opacity 0.35s, transform 0.35s; } .fz-rotar__palabra::after { position: absolute; right: 0; bottom: 0.05em; left: 0; height: 0.08em; border-radius: 1em; background: currentColor; opacity: 0.5; content: ""; } .fz-rotar__palabra.is-saliendo { opacity: 0; transform: translateY(-0.3em); } .fz-rotar__palabra.is-entrando { opacity: 0; transform: translateY(0.3em); transition: none; } @media (prefers-reduced-motion: reduce) { .fz-anim-js [class*="fz-anim-"], .fz-anim-js .fz-anim-cascada-item { opacity: 1 !important; transform: none !important; transition: none !important; } }