/* ==========================================================================
   Corre Cancún — Animaciones (scroll-reveal, hover, contadores)
   Todo se desactiva con prefers-reduced-motion.
   ========================================================================== */

/* ---- Scroll reveal --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal--zoom { transform: scale(.94); }
.reveal--left { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }

/* ---- Tarjeta de jugador (portada + rejilla) ------------------------ */
.player-card {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.player-card img {
  transition: transform .5s var(--ease), filter .4s var(--ease);
}
.player-card::after {
  transition: opacity .35s var(--ease);
}
.player-card__no {
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.player-card__body { transition: transform .35s var(--ease); }
.player-card__body h3 { transition: color .25s var(--ease); }

.player-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .45);
}
.player-card:hover img {
  transform: scale(1.07);
  filter: saturate(1.08);
}
.player-card:hover .player-card__no {
  color: var(--brand-orange);
  transform: scale(1.06);
}
.player-card:hover .player-card__body { transform: translateY(-4px); }
.player-card:hover .player-card__body h3 { color: var(--brand-orange); }
.player-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
  z-index: 3;
}
.player-card:hover::before { transform: scaleX(1); }

/* ---- Chips de filtro (jugadores.html) ----------------------------- */
.chip {
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.chip:active { transform: scale(.95); }
.chip.is-active { animation: chipPop .3s var(--ease); }
@keyframes chipPop {
  0% { transform: scale(.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ---- Rejilla que reaparece al filtrar ---------------------------- */
.squad__grid.is-swapping { opacity: 0; transform: translateY(10px); }
.squad__grid {
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.squad__grid .player-card {
  animation: cardIn .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* ---- Ficha de jugador (jugador.html) --------------------------- */
.jficha__wm { animation: wmIn 1s var(--ease) both; }
@keyframes wmIn {
  from { opacity: 0; transform: translateX(-4rem); }
  to { opacity: 1; transform: none; }
}
.jficha__hero-main > * { animation: heroFade .7s var(--ease) both; }
.jficha__hero-main .eyebrow { animation-delay: .05s; }
.jficha__hero-main h1 { animation-delay: .12s; }
.jficha__hero-main .jficha__stats { animation-delay: .2s; }
.jficha__photo { animation: photoRise .8s var(--ease) both; animation-delay: .15s; }
@keyframes photoRise {
  from { opacity: 0; transform: translateY(3rem); }
  to { opacity: 1; transform: none; }
}
.jficha__plate { animation: heroFade .7s var(--ease) both; animation-delay: .5s; }
.jficha__rail { animation: heroFade .6s var(--ease) both; animation-delay: .55s; }
.jficha__stats .jficha__stat { animation: statIn .55s var(--ease) both; }
.jficha__stats .jficha__stat:nth-child(2) { animation-delay: .1s; }
.jficha__stats .jficha__stat:nth-child(3) { animation-delay: .2s; }
@keyframes statIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.jficha__stat strong { font-variant-numeric: tabular-nums; }

.jhonor {
  animation: cardIn .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.jhonor { transition: transform .3s var(--ease), border-color .3s var(--ease); }
.jhonor:hover { transform: translateY(-6px); border-color: rgba(226,100,30,.55); }
.jnews-card__media img { transition: transform .5s var(--ease); }
.jnews-card:hover .jnews-card__media img { transform: scale(1.06); }

/* ---- Botón "volver arriba" e íconos con micro-interacción ------- */
.to-top { transition: opacity .2s var(--ease), transform .25s var(--ease), background-color .2s var(--ease); }
.to-top:hover { transform: translateY(-3px); background: var(--primary-hover); }

.link-arrow svg,
.shop-card__link svg,
.cta-band .btn,
.header-plans { transition: transform .2s var(--ease), background-color .18s var(--ease); }

/* ---- Aparición de secciones "hero" de página ------------------- */
.page-hero > .wrapper > * {
  animation: heroFade .7s var(--ease) both;
}
.page-hero .breadcrumb { animation-delay: 0s; }
.page-hero .eyebrow { animation-delay: .06s; }
.page-hero h1 { animation-delay: .12s; }
.page-hero p { animation-delay: .2s; }
@keyframes heroFade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---- Respeto a reduce-motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--zoom, .reveal--left, .reveal--right { opacity: 1 !important; transform: none !important; }
  .squad__grid .player-card,
  .jficha__wm,
  .jficha__hero-main > *,
  .jficha__photo,
  .jficha__plate,
  .jficha__rail,
  .jficha__stat,
  .jhonor,
  .page-hero > .wrapper > * { animation: none !important; }
  .chip.is-active { animation: none !important; }
}