/* ================================================================
   ANIMATIONS.CSS — Sistema global de animaciones SYKII.GG
   Incluir en todas las páginas después de base.css
   ================================================================ */


/* ── 2. SKELETON LOADERS ─────────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.skel {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 25%,
    rgba(255,255,255,.09) 50%,
    rgba(255,255,255,.04) 75%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
  border-radius: 3px;
}
.skel-card {
  height: 110px;
  clip-path: polygon(8px 0%,100% 0%,100% calc(100% - 8px),calc(100% - 8px) 100%,0% 100%,0% 8px);
}
.skel-row  { height: 14px; margin-bottom: 8px; }
.skel-row.w-60  { width: 60%; }
.skel-row.w-80  { width: 80%; }
.skel-row.w-40  { width: 40%; }
.skel-avatar { width: 60px; height: 60px; flex-shrink: 0; }

/* ── 3. CAROUSEL TRANSITIONS ─────────────────────────────────── */
.carousel-slide-enter {
  animation: slide-in-right .18s ease forwards;
}
.carousel-slide-exit {
  animation: slide-out-left .18s ease forwards;
}
.carousel-slide-enter-prev {
  animation: slide-in-left .18s ease forwards;
}
.carousel-slide-exit-prev {
  animation: slide-out-right .18s ease forwards;
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-16px); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

/* ── 4. STAGGERED CARD ENTRY ─────────────────────────────────── */
@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-stagger {
  opacity: 0;
  animation: card-in .25s ease forwards;
}
/* JS sets --delay on each card */
.card-stagger { animation-delay: var(--delay, 0ms); }

/* ── 5. NUMBER COUNT-UP ──────────────────────────────────────── */
.count-up { font-variant-numeric: tabular-nums; }

/* ── 6. TIER BADGE SHIMMER (S+ only) ─────────────────────────── */
@keyframes tier-shimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}
.tier-badge-splus {
  position: relative;
  overflow: hidden;
}
.tier-badge-splus::after {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: tier-shimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}

/* ── 7. SCROLL REVEAL ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── 8. SCROLL INDICATOR (hero) ──────────────────────────────── */
.scroll-indicator {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: .4; transition: opacity .3s;
  pointer-events: none;
  z-index: 10;
}
.scroll-indicator.hidden { opacity: 0; }
.scroll-indicator span {
  font-family: var(--font-body); font-size: 9px;
  letter-spacing: .2em; color: var(--gold); text-transform: uppercase;
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}
.scroll-chevron {
  width: 16px; height: 16px; border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  animation: bounce-down 1.4s ease-in-out infinite;
}

/* ── 9. HOVER GLOW BY TIER ──────────────────────────────────── */
.tier-hover-splus:hover { filter: drop-shadow(0 0 10px rgba(200,155,60,.55)); }
.tier-hover-s:hover     { filter: drop-shadow(0 0 10px rgba(200,155,60,.35)); }
.tier-hover-aplus:hover { filter: drop-shadow(0 0 10px rgba(79,195,247,.4)); }
.tier-hover-a:hover     { filter: drop-shadow(0 0 8px  rgba(79,195,247,.3)); }
.tier-hover-b:hover     { filter: drop-shadow(0 0 8px  rgba(74,222,128,.3)); }
.tier-hover-c:hover     { filter: drop-shadow(0 0 6px  rgba(250,204,21,.3)); }
.tier-hover-d:hover     { filter: drop-shadow(0 0 6px  rgba(251,146,60,.3)); }
.tier-hover-f:hover     { filter: drop-shadow(0 0 8px  rgba(239,83,80,.35)); }



/* ── 12. PAGE TRANSITION ─────────────────────────────────────── */
/* Sin fade-in — la loading screen ya gestiona la transición de entrada */