/* styles.css — animaciones y utilidades que NO dependen de Tailwind.
   (La paleta y las fuentes se definen con @theme en index.html, porque
   este archivo se carga como CSS plano y no entiende @theme.) */

/* --- Banda gris que "corre" en los estados de carga (skeleton) --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #e9e2cf 25%, #f3efe4 37%, #e9e2cf 63%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* --- Rebote al marcar una lámina (+1 / -1) --- */
@keyframes pulse-mark {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.pulse { animation: pulse-mark .35s ease; }

/* --- Puntito que late mientras el común se mantiene sincronizado --- */
@keyframes syncdot {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}
.syncdot { animation: syncdot 2.4s ease-in-out infinite; }

/* --- Franja de la base de la copa (decorativa) --- */
.stripes {
  background: repeating-linear-gradient(90deg, #0a4a3a 0 6px, #0f8a68 6px 12px);
}

/* --- Tarjeta de lámina: sin selección ni zoom al mantener presionada --- */
.lam {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Utilidades de la vista Comunidad (vienen del diseño) */
.stripes{background:repeating-linear-gradient(90deg,#0a4a3a 0 6px,#0f8a68 6px 12px);}
.ghost{background-image:repeating-linear-gradient(135deg,#d9a531 0 7px,#e7be57 7px 14px);}
.scrolly{scrollbar-width:thin;scrollbar-color:#cfc8b6 transparent;}
.scrolly::-webkit-scrollbar{width:9px}
.scrolly::-webkit-scrollbar-thumb{background:#cfc8b6;border-radius:9px;border:2px solid #fbf8f1}
.fillanim{transition:width 1.1s cubic-bezier(.2,.7,.2,1)}