/* ==========================================================
   MASSA V3 · Movimiento
   Todo lo que se anima responde a una acción o cuenta algo.
   Con prefers-reduced-motion se apaga al final del archivo.
   ========================================================== */

/* ---------- Portada: mano que saluda y Polaroid que respira ---------- */
.print__badge { transform-origin: 50% 90%; animation: badgePop .7s 1.35s cubic-bezier(.2, 1.5, .3, 1) both; }
.print__badge img { transform-origin: 50% 85%; animation: wave 1.5s 2.1s ease-in-out 2; }
.print { transition: rotate .5s var(--ease), translate .5s var(--ease); }
@media (hover: hover) { .print:hover { rotate: 3deg; translate: 0 -4px; } }
.tape { animation: tapeIn .45s 1.2s var(--ease) both; }
.tape--r { animation-delay: 1.32s; }
.hero__logo { animation-delay: .05s; }
@keyframes badgePop { from { scale: 0; rotate: -40deg; } to { scale: 1; rotate: -12deg; } }
@keyframes wave { 0%, 100% { rotate: 0deg; } 20% { rotate: 16deg; } 40% { rotate: -10deg; } 60% { rotate: 12deg; } 80% { rotate: -5deg; } }
@keyframes tapeIn { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }

/* ---------- Collages: máscara que descubre la foto + pequeño asentado de papel ---------- */
/* La máscara va en la imagen (no en la figura): un elemento recortado por completo no dispara el IntersectionObserver */
.js .tile.reveal, .js .pieces__grid li.reveal {
  opacity: 0; translate: 0 18px; rotate: calc(var(--rot, 0deg) - 5deg);
  transition: opacity .3s linear, translate .8s var(--ease), rotate .9s cubic-bezier(.2, 1.3, .3, 1);
}
.js .tile.reveal.is-in, .js .pieces__grid li.reveal.is-in { opacity: 1; translate: 0 0; rotate: var(--rot, 0deg); }
.js .tile.reveal img, .js .pieces__grid li.reveal img { clip-path: inset(0 0 100% 0); transition: clip-path .9s .15s cubic-bezier(.7, 0, .2, 1); }
.js .tile:nth-of-type(even).reveal img, .js .pieces__grid li:nth-child(even).reveal img { clip-path: inset(0 100% 0 0); }
.js .tile.reveal.is-in img, .js .pieces__grid li.reveal.is-in img { clip-path: inset(0 0 0 0); }
.tile, .pieces__grid li { transition: rotate .35s var(--ease), translate .35s var(--ease); }
@media (hover: hover) {
  .tile:hover, .pieces__grid li:hover { rotate: calc(var(--rot, 0deg) * -.4); translate: 0 -5px; z-index: 5; }
}
.js .pieces__grid li:nth-child(2).reveal { transition-delay: .08s; }
.js .pieces__grid li:nth-child(3).reveal { transition-delay: .16s; }
.js .pieces__grid li:nth-child(4).reveal { transition-delay: .24s; }

/* ---------- Menú: indicador que se desliza ---------- */
.tabs { position: relative; }
.tabs__ind {
  position: absolute; z-index: 0; left: 0; top: 4px; height: 46px; width: var(--w, 0); translate: var(--x, 0) 0;
  border-radius: 999px; background: var(--red); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  pointer-events: none; opacity: 0; rotate: -1.5deg;
  transition: translate .45s cubic-bezier(.5, 1.35, .4, 1), width .45s cubic-bezier(.5, 1.35, .4, 1), opacity .2s;
}
.tabs.has-ind .tabs__ind { opacity: 1; }
.tabs.has-ind .tab { position: relative; z-index: 1; }
.tabs.has-ind .tab[aria-selected="true"] { background: transparent; box-shadow: none; rotate: 0deg; border-color: transparent; }
.tab { transition: color .25s, scale .15s var(--ease), background .2s; }
.tab:active { scale: .93; }
@media (hover: hover) { .tab[aria-selected="false"]:hover { background: rgba(189, 40, 53, .1); } }
.tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Menú: cambio de categoría con dirección ---------- */
#dishes, #cat-banner { transition: opacity .14s linear, translate .14s linear; }
#dishes.is-out, #cat-banner.is-out { opacity: 0; translate: calc(var(--dir, 1) * -22px) 0; }
#dishes[data-dir] .dish { animation-name: dishSlide; animation-duration: .5s; }
#dishes[data-dir="-1"] .dish { --from: -26px; }
#dishes[data-dir="1"] .dish { --from: 26px; }
@keyframes dishSlide { from { opacity: 0; translate: var(--from, 0) 12px; } to { opacity: 1; translate: 0 0; } }
#cat-banner .cat-banner { animation: bannerIn .6s var(--ease) both; }
@keyframes bannerIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* Tarjeta tocada: respuesta táctil */
.dish { transition: scale .18s var(--ease), box-shadow .2s; }
.dish:active { scale: .975; }
@media (hover: hover) { .dish:hover .dish__more { translate: 4px 0; } }
.dish__more { transition: translate .25s var(--ease); }

/* ---------- Ficha: entrada desde abajo, cambio lateral y salida ---------- */
.modal__card { transition: translate .42s cubic-bezier(.2, .9, .25, 1), scale .3s var(--ease); }
.modal:not(.is-open) .modal__card { translate: 0 40px; scale: .98; }
.ficha__media.swap-next { animation: swapNext .42s var(--ease) both; }
.ficha__media.swap-prev { animation: swapPrev .42s var(--ease) both; }
.ficha__body.swap-next, .ficha__body.swap-prev { animation: textSwap .4s var(--ease) both; }
@keyframes swapNext { from { opacity: 0; translate: 36px 0; rotate: 2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes swapPrev { from { opacity: 0; translate: -36px 0; rotate: -2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes textSwap { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Botones: respuesta al toque ---------- */
.btn { transition: translate .18s var(--ease), box-shadow .18s var(--ease), scale .15s var(--ease), background .2s, color .2s; }
.btn:active { scale: .96; translate: 2px 2px; box-shadow: 0 0 0 var(--ink); }
.dock__item { transition: scale .15s var(--ease), color .2s, background .2s; }
.dock__item:active { scale: .9; }

/* ---------- Club: sellos ---------- */
.stamp-slot.is-fresh { animation: stampIn .6s cubic-bezier(.2, 1.4, .3, 1) both; animation-delay: calc(var(--k, 0) * 220ms + .25s); }
.loyal.is-gain { animation: cardNudge .6s var(--ease); }
@keyframes cardNudge { 0% { scale: 1; } 30% { scale: 1.025; rotate: -.7deg; } 100% { scale: 1; rotate: 0deg; } }
.loyal__n { display: inline-block; }
.loyal.is-gain .loyal__n { animation: numPop .6s .3s cubic-bezier(.2, 1.6, .3, 1) both; }
@keyframes numPop { 0% { scale: .6; } 100% { scale: 1; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 238, 226, .0); scale: 1; } 50% { box-shadow: 0 0 0 8px rgba(245, 238, 226, .35); scale: 1.06; } }

/* Celebración al llegar al sello 8: el confeti radial vive en modules.css */
.loyal.is-ready .loyal__msg { animation: readyIn .7s var(--ease) both; }
@keyframes readyIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* Vista del cliente: entrada de la tarjeta */
.club__mine .loyal { animation: cardIn .7s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; translate: 0 24px; rotate: -2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* ---------- Encuesta ---------- */
.rate__star { transition: background .2s, color .2s, translate .2s var(--ease), rotate .2s var(--ease), scale .15s; }
.rate__opt:active .rate__star { scale: .88; }
.rate__star.tap { animation: starTap .45s cubic-bezier(.2, 1.6, .3, 1); }
@keyframes starTap { 0% { scale: .7; rotate: -25deg; } 60% { scale: 1.22; rotate: 8deg; } 100% { scale: 1; rotate: 0deg; } }
.survey__bar { height: 8px; border-radius: 99px; background: rgba(24, 24, 24, .12); overflow: hidden; }
.survey__bar::after { content: ""; display: block; height: 100%; width: var(--prog, 0%); background: var(--red); border-radius: inherit; transition: width .45s cubic-bezier(.5, 1.3, .4, 1); }
.survey__prog.is-full { color: var(--red); font-weight: 700; }
.thanks { animation: cardIn .7s var(--ease) both; }
.thanks .stamp, .thanks__icon { animation: stampIn .7s .15s cubic-bezier(.2, 1.4, .3, 1) both; }

/* ---------- Panel del dueño: barras y línea que se dibujan ---------- */
.bars__row:nth-child(2) .bars__track i { animation-delay: .06s; }
.bars__row:nth-child(3) .bars__track i { animation-delay: .12s; }
.bars__row:nth-child(4) .bars__track i { animation-delay: .18s; }
.bars__row:nth-child(5) .bars__track i { animation-delay: .24s; }
.tr__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s .2s var(--ease) forwards; }
.tr__dot { opacity: 0; animation: fadeUp .4s 1.1s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Cambio de vista (Inicio / Club / Encuesta / Personal) ---------- */
.view.is-entering { animation: viewIn .55s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }

/* ==========================================================
   Reducir movimiento: sin desplazamientos, sin giros, sin confeti
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .tile.reveal img, .js .pieces__grid li.reveal img { clip-path: none; }
  .tr__line { stroke-dashoffset: 0; }
  .line > span { transform: none; }
  .tabs__ind { transition: none; }
}