/* UX premium — shimmer, skeletons, particles */

.shimmer {
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;}

@keyframes shimmer {
  0% { background-position: 200% 0;}
  100% { background-position: -200% 0;}
}

.skeleton-line {
  height: 12px;
  border-radius: var(--radio);
  margin-bottom: 8px;}

.app-splash.premium-splash .splash-icon {
  animation: splash-float 2s ease-in-out infinite;}

@keyframes splash-float {
  50% { transform: translateY(-8px) scale(1.05);}
}

.particle-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.4;}

.particle-bg span {
  position: absolute;
  font-size: 12px;
  animation: particle-drift 12s linear infinite;
  opacity: 0.35;}

@keyframes particle-drift {
  from { transform: translateY(100vh) rotate(0deg);}
  to { transform: translateY(-20vh) rotate(360deg);}
}

/* Objetivo táctil mínimo. La barra inferior define el suyo (56px) en
   premium.css: no se incluye aquí o esta regla, que carga después, lo pisa. */
.btn,
.onboarding-chip,
.cloud-sync-pill,
select,
input:not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--toque-min);}

@media (prefers-reduced-motion: reduce) {
  .shimmer,
  .onboarding-animate,
  .particle-bg span,
  .app-splash.premium-splash .splash-icon {
    animation: none !important;}
}