/* INVICTUS — shared.css: animaciones y utilidades */

/* ── ANIMACIONES DE ENTRADA ── */
.inv-pkg-card,
.inv-cat-card,
.inv-why-card,
.inv-info-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease, border-color .2s, box-shadow .2s;
}

.inv-pkg-card:nth-child(2) { transition-delay: .05s; }
.inv-pkg-card:nth-child(3) { transition-delay: .10s; }
.inv-pkg-card:nth-child(4) { transition-delay: .15s; }
.inv-pkg-card:nth-child(5) { transition-delay: .20s; }
.inv-pkg-card:nth-child(6) { transition-delay: .25s; }

.inv-cat-card:nth-child(2) { transition-delay: .04s; }
.inv-cat-card:nth-child(3) { transition-delay: .08s; }
.inv-cat-card:nth-child(4) { transition-delay: .12s; }
.inv-cat-card:nth-child(5) { transition-delay: .16s; }
.inv-cat-card:nth-child(6) { transition-delay: .20s; }

.inv-animate-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Fallback: si JS no corre, mostrar todo */
@media (prefers-reduced-motion: reduce) {
  .inv-pkg-card,
  .inv-cat-card,
  .inv-why-card,
  .inv-info-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── HEADER SCROLLED ── */
.inv-header--scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  border-bottom-color: rgba(200,164,74,0.2) !important;
}

/* ── TOAST ── */
.inv-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: var(--inv-surface);
  border: 1px solid rgba(200,164,74,0.25);
  border-radius: 10px;
  padding: 14px 20px;
  font-size: .86rem;
  color: var(--inv-bright);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: inv-toast-in .3s ease;
}

@keyframes inv-toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── MEDIA / SLIDER ── */
.inv-media-wrap {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--inv-border);
  background: var(--inv-surface2);
}

.inv-media-wrap img {
  width: 100%;
  object-fit: contain;
  max-height: 360px;
}

/* ── TIERED CATEGORIES ── */
.inv-tiered {
  background: var(--inv-surface2);
  border: 1px solid var(--inv-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.inv-tiered-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--inv-border);
  text-align: center;
}

.inv-tiered-header h1,
.inv-tiered-header h2 {
  font-family: 'Cinzel', serif;
  color: var(--inv-bright);
}

/* ── UTILIDADES ── */
.inv-text-gold   { color: var(--inv-gold2); }
.inv-text-dim    { color: var(--inv-dim); }
.inv-text-bright { color: var(--inv-bright); }
.inv-font-cinzel { font-family: 'Cinzel', serif; }
.inv-font-mono   { font-family: 'JetBrains Mono', monospace; }