/* ================================================== ANIMACIONES Capa de movimiento común a todas las páginas públicas (el admin no la carga). No cambia la maqueta: solo entradas, transiciones y efectos al pasar el ratón o pulsar, con el tema de imprenta de la marca (tintas cian, rosa y amarillo que se desfasan y vuelven a su sitio, como en un registro). Va justo antes de tema.css. animaciones.js pone las clases de entrada; sin JavaScript todo se ve como antes. Reglas para no romper nada: · Todo el movimiento va dentro de prefers-reduced-motion: no-preference. Con "reducir movimiento" la web se queda quieta. · Ningún transform, translate, scale, filter ni will-change se queda puesto en un contenedor: dentro hay barras y paneles con position: fixed (carrito lateral, diálogos, barra del móvil) que dejarían de ir pegados a la pantalla. En los contenedores, solo opacidad. · Se usan translate, scale y rotate sueltos, no transform: se suman al transform que ya tenga cada pieza en vez de pisarlo. · Las entradas usan animation-fill-mode: backwards: al terminar, manda el CSS de cada página (su :hover incluido). · Nada en el área de diseño del personalizador (personaliza.js la mueve por id). · Al imprimir, todo visible (las páginas legales se descargan imprimiéndolas). ================================================== */ /* ================================================== VARIABLES ================================================== */ :root { --anim-rapida: 0.18s; --anim-media: 0.45s; --anim-lenta: 0.75s; --anim-curva: cubic-bezier(0.2, 0.8, 0.2, 1); --anim-rebote: cubic-bezier(0.34, 1.56, 0.64, 1); /* El desfase de tintas de botones y tarjetas */ --anim-tinta-1: #13aec0; --anim-tinta-2: #ff006e; } /* ================================================== SELECCIÓN Y FOCO Sin movimiento: van siempre. El foco solo con teclado (:focus-visible) y con especificidad 0, así que el foco propio de cada página sigue mandando. ================================================== */ ::selection { background: #ff006e; color: #ffffff; } :where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible { outline: 3px solid #13aec0; outline-offset: 3px; } /* ================================================== MENÚ · PÁGINA ACTUAL (ESCRITORIO) animaciones.js marca el enlace de la página con aria-current="page" (fiesta.html ya lo trae). La pestaña de la página en la que estás va en amarillo y un poco más larga. ================================================== */ @media (min-width: 901px) { .menu-principal a[aria-current="page"] { padding-bottom: 27px; background: #ffd600; border-bottom-color: #ff006e; } } /* ================================================== TODO EL MOVIMIENTO ================================================== */ @media (prefers-reduced-motion: no-preference) { /* ----- TRANSICIÓN ENTRE PÁGINAS ----- */ /* Navegadores que la admiten (Chrome, Edge, Safari 18.2+): al pasar de una página a otra, la vieja se funde y la nueva entra un poco desde abajo. Los demás cambian de página como siempre. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: anim-pagina-sale 0.2s var(--anim-curva) both; } ::view-transition-new(root) { animation: anim-pagina-entra 0.35s var(--anim-curva) both; } /* ----- ENTRADA AL HACER SCROLL ----- */ /* animaciones.js pone .anim-entrada (piezas sueltas: sube y aparece) o .anim-entrada-suave (contenedores: solo aparece) a lo que está por debajo de la pantalla al cargar, y .anim-visible cuando llega. Al terminar quita las tres. */ .anim-entrada { opacity: 0; translate: 0 28px; } .anim-entrada-suave { opacity: 0; } .anim-entrada.anim-visible { opacity: 1; translate: none; transition: opacity var(--anim-lenta) var(--anim-curva) var(--anim-retraso, 0s), translate var(--anim-lenta) var(--anim-curva) var(--anim-retraso, 0s); } .anim-entrada-suave.anim-visible { opacity: 1; transition: opacity var(--anim-lenta) var(--anim-curva) var(--anim-retraso, 0s); } /* ----- TARJETAS QUE LLEGAN (TIENDA) ----- */ /* Las tarjetas que pinta tienda.js al cargar los productos entran en cascada. Cada producto, una sola vez por visita (animaciones.js recuerda su id), aunque la tienda se vuelva a pintar. */ .anim-aparece { animation: anim-aparece 0.6s var(--anim-curva) var(--anim-retraso, 0s) backwards; } /* ----- BOTONES · DESFASE DE TINTAS ----- */ /* Al pasar el ratón el botón se levanta y deja debajo dos capas de tinta (cian y rosa), como una impresión fuera de registro; al pulsar, se hunde y las tintas vuelven a su sitio. */ .crear-ahora, .boton-finalizar, .boton-personalizar-producto, .boton-carrito-producto, .boton-comprar-producto, .boton-anadir-personalizado, .boton-seguir-comprando, .tienda-personalizar, .tienda-ver-producto, .tienda-vacia-boton, .fiesta-boton, .fiesta-boton-whatsapp, .pago-boton, .historial-boton, .empresas-boton-whatsapp { transition: translate var(--anim-rapida) var(--anim-curva), box-shadow var(--anim-rapida) var(--anim-curva), filter var(--anim-rapida) ease, background-color var(--anim-rapida) ease, color var(--anim-rapida) ease; } @media (hover: hover) { .crear-ahora:hover, .boton-finalizar:hover:not(:disabled), .boton-personalizar-producto:hover:not([aria-disabled="true"]), .boton-carrito-producto:hover:not(:disabled), .boton-comprar-producto:hover:not(:disabled), .boton-anadir-personalizado:hover:not(:disabled), .boton-seguir-comprando:hover, .tienda-personalizar:hover:not([aria-disabled="true"]), .tienda-ver-producto:hover, .tienda-vacia-boton:hover, .fiesta-boton:hover:not(:disabled), .fiesta-boton-whatsapp:hover, .pago-boton:hover, .historial-boton:hover:not(:disabled), .empresas-boton-whatsapp:hover { translate: -2px -2px; box-shadow: 2px 2px 0 var(--anim-tinta-1), 4px 4px 0 var(--anim-tinta-2); } } .crear-ahora:active, .boton-finalizar:active:not(:disabled), .boton-personalizar-producto:active:not([aria-disabled="true"]), .boton-carrito-producto:active:not(:disabled), .boton-comprar-producto:active:not(:disabled), .boton-anadir-personalizado:active:not(:disabled), .boton-seguir-comprando:active, .tienda-personalizar:active:not([aria-disabled="true"]), .tienda-ver-producto:active, .tienda-vacia-boton:active, .fiesta-boton:active:not(:disabled), .fiesta-boton-whatsapp:active, .pago-boton:active, .historial-boton:active:not(:disabled), .empresas-boton-whatsapp:active { translate: 1px 1px; box-shadow: none; transition-duration: 0.06s; } /* ----- TARJETAS E IMÁGENES ----- */ /* El mismo desfase de tintas en las fotos de la tienda, de "Lo más pedido" y del portfolio. Se mueve el marco de la foto, no la tarjeta. */ .tienda-producto-imagen, .producto-inicio-imagen, .portfolio-imagen, .cierre-imagen { transition: translate 0.3s var(--anim-curva), box-shadow 0.3s var(--anim-curva); } @media (hover: hover) { .tienda-producto:hover .tienda-producto-imagen, .producto-inicio:hover .producto-inicio-imagen, .portfolio-imagen:hover, .cierre-imagen:hover { translate: -4px -4px; box-shadow: 4px 4px 0 var(--anim-tinta-1), 8px 8px 0 var(--anim-tinta-2); } } /* ----- MENÚ ----- */ @media (min-width: 901px) { /* Las pestañas cuelgan de arriba: al pasar el ratón, se alargan como si tiraras de ellas. */ .menu-principal a { transition: padding-bottom var(--anim-rapida) var(--anim-curva), filter var(--anim-rapida) ease, background-color var(--anim-rapida) ease; } .menu-principal a:hover { padding-bottom: 27px; } /* En la portada, al llegar, las pestañas caen una a una desde arriba. Con :has para que vaya en el CSS desde el primer pintado, sin parpadeo. */ body:has(.hero-video) .menu-principal a { animation: anim-pestana 0.6s var(--anim-rebote) backwards; } body:has(.hero-video) .menu-principal a:nth-child(1) { animation-delay: 0.10s; } body:has(.hero-video) .menu-principal a:nth-child(2) { animation-delay: 0.16s; } body:has(.hero-video) .menu-principal a:nth-child(3) { animation-delay: 0.22s; } body:has(.hero-video) .menu-principal a:nth-child(4) { animation-delay: 0.28s; } body:has(.hero-video) .menu-principal a:nth-child(5) { animation-delay: 0.34s; } body:has(.hero-video) .menu-principal a:nth-child(n + 6) { animation-delay: 0.40s; } } @media (max-width: 900px) { /* Menú del móvil: al abrirlo, las opciones entran en cascada. */ .menu-principal.menu-abierto a { animation: anim-menu 0.35s var(--anim-curva) backwards; } .menu-principal.menu-abierto a:nth-child(2) { animation-delay: 0.04s; } .menu-principal.menu-abierto a:nth-child(3) { animation-delay: 0.08s; } .menu-principal.menu-abierto a:nth-child(4) { animation-delay: 0.12s; } .menu-principal.menu-abierto a:nth-child(5) { animation-delay: 0.16s; } .menu-principal.menu-abierto a:nth-child(n + 6) { animation-delay: 0.20s; } } /* ----- ICONOS ----- */ /* El logo: al pasar el ratón, las tintas cian y rosa vuelven a su sitio y el "2" queda en registro. */ .logo-mini span { transition: text-shadow 0.3s var(--anim-curva); } .logo-mini:hover span, .logo-mini:focus-visible span { text-shadow: 0 0 0 #13aec0, 0 0 0 #ff006e; } /* Las dos rayas del menú del móvil se cruzan en una X */ .menu-toggle::before, .menu-toggle::after { transition: top 0.25s var(--anim-curva), width 0.25s var(--anim-curva), rotate 0.25s var(--anim-curva); } /* Las X de cerrar giran un cuarto de vuelta */ .cerrar-carrito svg, .hoja-descuento-cerrar svg { transition: rotate 0.25s var(--anim-curva); } .cerrar-carrito:hover svg, .hoja-descuento-cerrar:hover svg { rotate: 90deg; } /* El sol gira un poco y la luna se inclina */ .tema-boton svg { transition: rotate 0.4s var(--anim-curva); } .tema-boton:hover .tema-icono-sol { rotate: 45deg; } .tema-boton:hover .tema-icono-luna { rotate: -18deg; } /* La tinta del carrito se mueve fuera de registro */ .carrito-cabecera .icono-tinta { transition: translate 0.25s var(--anim-curva); } .carrito-cabecera:hover .icono-tinta { translate: 1.5px 1.5px; } /* Redes del pie: se levantan con su sombra de tinta */ .footer-redes a { transition: translate var(--anim-rapida) var(--anim-curva), box-shadow var(--anim-rapida) var(--anim-curva); } @media (hover: hover) { .footer-redes a:hover { translate: -2px -2px; box-shadow: 2px 2px 0 #ffd600; } } /* ELIMINAR del carrito lateral: la papelera se inclina */ .item-lateral-eliminar svg { transition: rotate 0.2s var(--anim-curva); } .item-lateral-eliminar:hover svg { rotate: -10deg; } /* ----- CARRITO DE LA CABECERA ----- */ /* Al añadir algo, el número salta y el carrito se sacude (animaciones.js, solo cuando el número sube, no al cargar la página). */ .carrito-cantidad.anim-salto { animation: anim-salto 0.55s var(--anim-rebote); } .carrito-cabecera.anim-sacudida svg { animation: anim-sacudida 0.55s ease; } /* ----- PORTADA · LA PRUEBA DE IMPRENTA ----- */ /* Mientras no hay foto, la portada es una prueba de imprenta: el logotipo entra con las tres tintas separadas y se ajustan hasta quedar en registro; la marca de registro gira hasta su sitio y las muestras CMYK salen una a una. */ .hueco-foto-marca { animation: anim-registro 1.1s var(--anim-curva) 0.2s backwards; } .hueco-foto-registro { animation: anim-giro-registro 0.9s var(--anim-curva) backwards; } .hueco-foto-lema { animation: anim-fundido 0.8s ease 0.8s backwards; } .hueco-foto-tintas li { animation: anim-muestra 0.45s var(--anim-rebote) backwards; } .hueco-foto-tintas li:nth-child(1) { animation-delay: 1.00s; } .hueco-foto-tintas li:nth-child(2) { animation-delay: 1.08s; } .hueco-foto-tintas li:nth-child(3) { animation-delay: 1.16s; } .hueco-foto-tintas li:nth-child(4) { animation-delay: 1.24s; } /* ----- CREA TU FIESTA · CAMBIO DE PASO ----- */ /* Cada paso, al aparecer, se funde. Solo opacidad: es un contenedor. */ .fiesta-paso:not([hidden]) { animation: anim-fundido 0.4s var(--anim-curva) backwards; } /* ----- FICHA · CUIDADOS ----- */ .producto-cuidados[open] summary ~ * { animation: anim-mensaje 0.3s var(--anim-curva) backwards; } /* ----- MENSAJES ----- */ /* "Producto añadido al carrito" y demás avisos: entran en vez de aparecer de golpe (animaciones.js). */ .anim-mensaje { animation: anim-mensaje 0.35s var(--anim-curva) backwards; } /* ----- BOTÓN DE WHATSAPP ----- */ .whatsapp-flotante { animation: anim-pop 0.6s var(--anim-rebote) 0.9s backwards; } /* ----- BARRA DE LECTURA (PÁGINAS LEGALES) ----- */ /* Una línea de tinta arriba que avanza con la lectura. Solo en navegadores con animation-timeline; en los demás no sale. */ @supports (animation-timeline: scroll()) { @media screen { body:has(.legal-pagina)::before { content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: 4px; background: linear-gradient( 90deg, #13aec0, #ff006e, #ffd600 ); transform-origin: 0 50%; pointer-events: none; animation: anim-progreso linear both; animation-timeline: scroll(root); } } } } /* ================================================== FOTOGRAMAS ================================================== */ @keyframes anim-pagina-sale { to { opacity: 0; } } @keyframes anim-pagina-entra { from { opacity: 0; translate: 0 10px; } } @keyframes anim-aparece { from { opacity: 0; translate: 0 18px; scale: 0.98; } } @keyframes anim-fundido { from { opacity: 0; } } @keyframes anim-mensaje { from { opacity: 0; translate: 0 6px; } } @keyframes anim-pop { from { opacity: 0; scale: 0.4; } } @keyframes anim-pestana { from { translate: 0 -110%; } } @keyframes anim-menu { from { opacity: 0; translate: -12px 0; } } @keyframes anim-salto { 35% { scale: 1.55; } } @keyframes anim-sacudida { 20% { rotate: -12deg; } 40% { rotate: 10deg; } 60% { rotate: -6deg; } 80% { rotate: 3deg; } } @keyframes anim-registro { 0% { opacity: 0; letter-spacing: 0.02em; text-shadow: -16px 0 0 rgba(19, 174, 192, 0.85), 16px 0 0 rgba(255, 0, 110, 0.85), 0 12px 0 rgba(255, 214, 0, 0.85); } 35% { opacity: 1; } } @keyframes anim-giro-registro { from { opacity: 0; rotate: -180deg; scale: 0.4; } } @keyframes anim-muestra { from { opacity: 0; translate: 0 10px; scale: 0.6; } } @keyframes anim-progreso { from { scale: 0 1; } to { scale: 1 1; } } /* ================================================== AL IMPRIMIR Lo que aún no había entrado con el scroll se imprime igual (desistimiento.html se descarga así). ================================================== */ @media print { .anim-entrada, .anim-entrada-suave { opacity: 1 !important; translate: none !important; } }