/* Pringao’s · animaciones y microinteracciones (va después de styles.css). */

/* portada: el sándwich flota y sigue un poco al ratón (--mx/--my desde main.js) */
.portada__img {
  animation: flotar 6s ease-in-out infinite;
  translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 10px);
  transition: translate 600ms var(--sc-ease-out);
}
@keyframes flotar { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1.2deg); } }

/* círculo: anillo de texto que gira y texto que crece al pasar */
.circulo { overflow: hidden; }
.circulo__anillo { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); animation: girar 18s linear infinite; pointer-events: none; }
.circulo__anillo text { font-family: var(--f-texto); font-size: 13.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: var(--amarillo); }
.circulo__texto { position: relative; max-width: 120px; transition: transform var(--sc-d-base) var(--sc-ease-out); }
.circulo:hover .circulo__texto { transform: scale(1.08); }
.circulo:hover .circulo__anillo { animation-duration: 6s; }
@keyframes girar { to { transform: rotate(360deg); } }

/* mascota: entra patinando desde la izquierda y luego da saltitos */
.js .mascota.entra { transform: translateX(-220px) rotate(-6deg); transition: opacity 600ms, transform 1100ms cubic-bezier(.2, .9, .25, 1.15); }
.cargada .mascota.entra { transform: none; transition-delay: 700ms; }
.mascota img { animation: patinar 1.6s ease-in-out infinite; }
@keyframes patinar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px) rotate(-1deg); } }

/* cuadros de la esquina: se invierten (main.js alterna .invertido) */
.pixeles > * { transition: background 300ms; }
.pixeles.invertido i { background: transparent; }
.pixeles.invertido b { background: #fff; }

/* titular amarillo: la sombra se despega al pasar */
.linea--amarilla > span { transition: text-shadow var(--sc-d-base), transform var(--sc-d-base) var(--sc-ease-out); }
.cargada .linea--amarilla:hover > span { text-shadow: 9px 10px 0 var(--marino); transform: translate(-3px, -3px); }

/* etiquetas */
.etiquetas li { transition: transform var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base); }
.etiquetas li:hover { transform: translateY(-3px) rotate(-3deg); background: var(--amarillo); }

/* cinta: la mueve main.js según la velocidad del scroll */
.js .cinta__pista { animation: none; will-change: transform; }

/* títulos manuscritos: se escriben al entrar */
.js .titular .guion, .js .nosotros__texto .guion { clip-path: inset(0 100% 0 0); transition: clip-path 1400ms cubic-bezier(.6, .1, .2, 1) 250ms; }
.titular.sc-in .guion, .nosotros__texto.sc-in .guion { clip-path: inset(-20% -10% -20% -10%); }

/* botones: suben un poco y se hunden al pulsar */
.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8, 16, 90, .25); }
.boton:active { transform: translateY(0) scale(.97); box-shadow: none; }

/* pegatinas: se ladean más al pasar */
.pegatina { transition: transform 400ms cubic-bezier(.3, 1.6, .5, 1); }
.pegatina--a:hover { transform: rotate(-4deg) scale(1.08); }
.pegatina--b:hover { transform: rotate(6deg) scale(1.08); }

/* tarjetas */
.llama { transform-origin: 50% 100%; animation: llama 1.8s ease-in-out infinite; }
@keyframes llama { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(1.03, .96) skewX(-2deg); } 60% { transform: scale(.98, 1.05) skewX(2deg); } }
.js .tarjeta__recorte { transform: translate(-50%, 70px); opacity: 0; transition: transform 1000ms cubic-bezier(.2, .9, .25, 1.12) 350ms, opacity 500ms 350ms; }
.tarjeta-marco.sc-in .tarjeta__recorte { transform: translate(-50%, 0); opacity: 1; }
.tarjeta-marco.sc-in .tarjeta--azul:hover .tarjeta__recorte { transform: translate(-50%, -8px) rotate(-2deg); transition-delay: 0s; }
.js .tarjeta__foto { transform: rotate(-3deg) translateY(40px); opacity: 0; transition: transform 900ms var(--sc-ease-out) 300ms, opacity 500ms 300ms; }
.tarjeta-marco.sc-in .tarjeta__foto { transform: rotate(-3deg); opacity: 1; }
.tarjeta-marco.sc-in .tarjeta--cielo:hover .tarjeta__foto { transform: rotate(0deg) scale(1.03); transition-delay: 0s; }
.ticket { transform-origin: 50% -20px; transition: transform 700ms cubic-bezier(.3, 1.7, .5, 1); }
.tarjeta--ticket:hover .ticket { transform: rotate(3deg); }
.ticket__barras { position: relative; overflow: hidden; }
.ticket__barras::after { content: ""; position: absolute; top: 0; bottom: 0; left: -20%; width: 14%; background: linear-gradient(90deg, transparent, rgba(255, 60, 60, .85), transparent); opacity: 0; }
.tarjeta--ticket:hover .ticket__barras::after { opacity: 1; animation: escaner 1.1s ease-in-out infinite alternate; }
@keyframes escaner { to { left: 106%; } }
.sello { transition: transform 500ms cubic-bezier(.3, 1.8, .5, 1); }
.tarjeta--ticket:hover .sello { transform: rotate(18deg) scale(1.1); }

/* la playlist suena */
.pista__foto { transition: transform 500ms var(--sc-ease-out), border-radius 500ms; }
.pista:hover .pista__foto { transform: rotate(-5deg) scale(1.06); }
.pista__play { border: 0; padding: 0; cursor: pointer; flex-shrink: 0; }
.pista__play:hover { transform: scale(1.12); }
.pista__play:active { transform: scale(.94); }
.pista__play .ico-pausa, .pista.sonando .ico-play { display: none; }
.pista.sonando .ico-pausa { display: block; }
.pista.sonando { background: #E3E9FF; box-shadow: inset 0 0 0 2px var(--azul); }
.pista.sonando .pista__foto { animation: girar 6s linear infinite; border-radius: 50%; }
.pista.sonando .pista__barra::before { width: 100%; animation: sonar 9s linear forwards; }
@keyframes sonar { from { transform: scaleX(var(--desde, .1)); } to { transform: scaleX(1); } }
.eq { display: none; gap: 2px; align-items: flex-end; height: 14px; margin-left: 10px; }
.eq i { width: 3px; height: 100%; background: var(--azul); border-radius: 1px; transform-origin: bottom; animation: eq 800ms ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -300ms; }
.eq i:nth-child(3) { animation-delay: -550ms; }
.pista.sonando .eq { display: inline-flex; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* mapa: el pin late y la furgoneta va y viene */
.mapa__pin { position: relative; animation: furgo 5s ease-in-out infinite; }
.mapa__pin::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(255, 210, 63, .8); animation: onda 2.2s ease-out infinite; }
@keyframes onda { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes furgo { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(10px); } }
.js .mapa__calle { opacity: 0; transition: opacity 700ms; }
.mapa.sc-in .mapa__calle { opacity: 1; }
.mapa.sc-in .mapa__calle--b { transition-delay: 300ms; }
.mapa.sc-in .mapa__calle--c { transition-delay: 600ms; }

/* formulario */
.formulario label { transition: color var(--sc-d-base); }
.formulario label:focus-within { color: var(--azul); }
.formulario .boton.enviando { pointer-events: none; color: transparent; position: relative; }
.formulario .boton.enviando::after { content: ""; position: absolute; width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: girar 700ms linear infinite; }
.formulario .boton.hecho { background: var(--amarillo); color: var(--marino); }
.confeti { position: fixed; z-index: 80; width: 10px; height: 10px; pointer-events: none; }

/* instagram */
.posts a { transition: transform 400ms var(--sc-ease-out), box-shadow 400ms; }
.posts a:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 16px 30px rgba(0, 0, 0, .35); }

/* pie: letras que entran y saltan */
.pie__marca span { display: inline-block; transition: transform 450ms cubic-bezier(.3, 1.8, .5, 1), color 300ms; }
.js .pie__marca span { transform: translateY(40%); opacity: 0; transition: transform 800ms cubic-bezier(.2, .9, .25, 1.15) calc(var(--i) * 60ms), opacity 500ms calc(var(--i) * 60ms), color 300ms; }
.pie__marca.visible span { transform: none; opacity: 1; }
.pie__marca.visible span:hover { transform: translateY(-18%) rotate(-6deg); color: var(--amarillo); transition-delay: 0s; }

.pistas { align-items: start; }

/* letra de la canción = ingredientes, al darle al play */
.pista__letra { display: none; grid-column: 1 / -1; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(14, 26, 138, .25); }
.pista.sonando .pista__letra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pista__letra-t { font-family: var(--f-guion); font-size: 28px; line-height: 1; color: var(--azul); margin-right: 4px; }
.pista__letra ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pista__letra li { padding: 7px 13px; border-radius: 999px; background: #fff; color: var(--marino); font-size: 13px; font-weight: 700; box-shadow: 0 2px 0 rgba(14, 26, 138, .12);
  animation: brota 500ms cubic-bezier(.3, 1.6, .5, 1) calc(var(--n) * 180ms) both, canta 2.2s ease-in-out calc(700ms + var(--n) * 2.2s) forwards; }
@keyframes brota { from { opacity: 0; transform: translateY(10px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes canta { 0%, 85% { background: var(--amarillo); transform: scale(1.08) rotate(-2deg); } 100% { background: #fff; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pista__letra li { animation: none; } }

@media (max-width: 860px) {
  .circulo { width: 144px; height: 144px; }
  .circulo__texto { max-width: 78px; font-size: 12px; line-height: 1.1; }
}

@media (prefers-reduced-motion: reduce) {
  .portada__img, .circulo__anillo, .mascota img, .llama, .mapa__pin, .mapa__pin::after, .pista.sonando .pista__foto, .eq i { animation: none !important; }
  .js .mascota.entra, .js .tarjeta__recorte, .js .tarjeta__foto, .js .pie__marca span, .js .mapa__calle { transition: none; opacity: 1; }
  .js .mascota.entra { transform: none; }
  .js .tarjeta__recorte { transform: translate(-50%, 0); }
  .js .tarjeta__foto { transform: rotate(-3deg); }
  .js .pie__marca span { transform: none; }
  .js .titular .guion, .js .nosotros__texto .guion { clip-path: none; transition: none; }
  .pista.sonando .pista__barra::before { animation: none; transform: none; }
}