/* ═══════════════════════════════════════════════════════
   MICROINTERACTIONS — Magia móvil para uso diario
   Solo efectos aditivos. No modifica estilos existentes.
   ═══════════════════════════════════════════════════════ */

/* ── 1. KEYFRAMES ─────────────────────────────────── */

/* Entrada en cascada (ficha tiradores) */
@keyframes mi-slideUp {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Flash al terminar conteo de número */
@keyframes mi-numberFlash {
  0%   { color: var(--orange, #ff6b00); text-shadow: 0 0 14px rgba(255,107,0,0.5); }
  100% { color: #fff; text-shadow: none; }
}

/* Ripple táctil */
@keyframes mi-ripple {
  to { transform: scale(3); opacity: 0; }
}

/* Shimmer de carga */
@keyframes mi-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Celebración de puntuación */
@keyframes mi-celebrate {
  0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255,215,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
}

/* Respiración del avatar */
@keyframes mi-breathe {
  0%, 100% {
    box-shadow: 0 0 18px rgba(255,107,0,0.10), inset 0 0 6px rgba(255,107,0,0.04);
    border-color: rgba(255,107,0,0.18);
  }
  50% {
    box-shadow: 0 0 18px rgba(138,43,226,0.10), inset 0 0 6px rgba(138,43,226,0.04);
    border-color: rgba(138,43,226,0.18);
  }
}

/* Flip de dígitos (dashboard countdown) */
@keyframes mi-flipIn {
  from { transform: rotateX(60deg); opacity: 0; }
  to   { transform: rotateX(0); opacity: 1; }
}

/* Bento card entrance */
@keyframes mi-bentoIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── 2. FICHAS DE TIRADORES ────────────────────────── */

/* 1: Entrada en cascada — items dentro de panel visible */
@media (max-width: 768px) {
  .glass-panel.mobile-visible .stat-box,
  .glass-panel.mobile-visible .gallery-item,
  .glass-panel.mobile-visible .training-entry,
  .glass-panel.mobile-visible .resource-item {
    animation: mi-slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* 2: Flash al contar */
.stat-value.mi-counted {
  animation: mi-numberFlash 0.7s ease-out;
}

/* 4: Shimmer de carga */
.loading-shield.active {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}
.loading-shield.active .mi-shimmer-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,107,0,0.10) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: mi-shimmer 1.5s ease-in-out infinite;
}

/* 5: Indicador del nav que se desliza */
.mi-nav-indicator {
  position: absolute;
  top: 0;
  height: 3px;
  background: var(--orange, #ff6b00);
  border-radius: 0 0 4px 4px;
  transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  box-shadow: 0 2px 10px rgba(255,107,0,0.35);
  pointer-events: none;
}
/* Ocultar la barrita original del tab activo */
@media (max-width: 768px) {
  .nav-tab.active::before {
    display: none !important;
  }
}

/* 6: Celebración de puntuación */
.mi-high-score {
  animation: mi-celebrate 0.9s ease-out;
  color: #ffd700 !important;
}

/* 7: Respiración del avatar */
@media (max-width: 768px) {
  .profile-img-wrap.has-image {
    animation: mi-breathe 6s ease-in-out infinite;
    border-style: solid !important;
  }
}

/* 8: Header compacto al hacer scroll */
header {
  transition: padding 0.3s ease, background 0.3s ease !important;
}
header.mi-compact {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  background: rgba(5,5,5,0.96) !important;
}
header.mi-compact .brand-text h1 {
  transform: scale(0.88);
  transform-origin: left center;
  transition: transform 0.3s ease;
}


/* ── 3. RIPPLE TÁCTIL (universal) ──────────────────── */

.mi-ripple-host {
  position: relative;
  overflow: hidden;
}
.mi-ripple-dot {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  background: radial-gradient(circle, rgba(255,107,0,0.18) 0%, transparent 70%);
  animation: mi-ripple 0.55s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}


/* ── 4. DASHBOARD TÁCTICO ──────────────────────────── */

/* 9: Bento cards entrance */
@media (max-width: 768px) {
  .bento-item.mi-hidden {
    opacity: 0;
    transform: translateY(24px);
  }
  .bento-item.mi-visible {
    animation: mi-bentoIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

/* 10: Countdown digit flip */
.countdown-item span {
  display: inline-block !important;
  perspective: 120px;
}
.mi-flip {
  animation: mi-flipIn 0.28s ease-out;
}

/* 11: Info card tilt */
.info-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform-style: preserve-3d;
}


/* ── 5. ENTRENAMIENTOS ─────────────────────────────── */

/* 12: Crossfade entre vistas — solo si la page carga el archivo */
.app-shell .view.mi-crossfade {
  transition: opacity 0.28s ease, transform 0.28s ease;
  opacity: 0;
  transform: translateY(10px);
}
.app-shell .view.mi-crossfade.active {
  opacity: 1;
  transform: translateY(0);
}


/* ── 6. ACCESIBILIDAD ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mi-nav-indicator { transition: none !important; }
  .mi-ripple-dot { display: none !important; }
}