/* ============================================================
   PRISM — Keyframes & Animation Utilities
   Minimal professional set only
   ============================================================ */

/* ---- Entrance Animations ---- */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- Feed Scroll ---- */
@keyframes feedScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Live dot pulse ---- */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ---- Won overlay effects ---- */
@keyframes raysSpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes wonGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(91, 156, 242, 0.15), 0 0 40px rgba(139, 92, 246, 0.08); }
  50%      { box-shadow: 0 0 30px rgba(91, 156, 242, 0.25), 0 0 60px rgba(139, 92, 246, 0.12); }
}

/* ---- Spinner deceleration (controlled via JS) ---- */
@keyframes spinnerSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--spinner-end, -5000px)); }
}

/* ============================================================
   CARD STAGGER ENTRANCE
   ============================================================ */
.case-card:nth-child(1)  { animation-delay: 0.00s; }
.case-card:nth-child(2)  { animation-delay: 0.04s; }
.case-card:nth-child(3)  { animation-delay: 0.08s; }
.case-card:nth-child(4)  { animation-delay: 0.12s; }
.case-card:nth-child(5)  { animation-delay: 0.16s; }
.case-card:nth-child(6)  { animation-delay: 0.20s; }
.case-card:nth-child(7)  { animation-delay: 0.24s; }
.case-card:nth-child(8)  { animation-delay: 0.28s; }
.case-card:nth-child(9)  { animation-delay: 0.32s; }
.case-card:nth-child(10) { animation-delay: 0.36s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  /* Hero */
  .hero {
    min-height: auto;
    padding-top: calc(var(--content-top) + 24px);
    padding-bottom: 40px;
  }

  .hero__stats {
    flex-direction: column;
    gap: 20px;
  }

  .hero__cta {
    flex-direction: column;
    gap: 12px;
  }

  /* Cases */
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .case-card__image {
    height: 140px;
  }

  .case-card__img {
    width: 100px;
    height: 80px;
  }

  /* Inventory */
  .inventory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .cases-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .case-card__img-wrap {
    height: 100px;
  }

  .case-card__img {
    width: 100px;
    height: 75px;
  }

  .case-card__info {
    padding: 8px 10px 12px;
  }

  .case-card__name {
    font-size: 0.7rem;
  }

  .case-card__price {
    font-size: 0.68rem;
    padding: 4px 10px;
  }

  .cases-filters {
    gap: 2px;
  }

  .filter-btn {
    padding: 6px 12px;
    font-size: 0.72rem;
  }

  .inventory-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ---- Respect reduced-motion preference ----
   NÃO inclui .spinner-track / .battle-spinner: o GIRO da roleta é a interação
   central do produto (mostra o que caiu). Em reduced-motion o JS usa um giro
   mais CURTO (não inexistente) — feedback preservado, movimento reduzido. */
@media (prefers-reduced-motion: reduce) {
  .live-feed__track,
  .pulse-dot,
  .btn__shimmer,
  [class*="animate"] {
    animation: none !important;
    transition: none !important;
  }
}