/* =========================================================
   DATOS · transiciones entre índice / liga / equipo
   ========================================================= */

.datos-view-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;

  --datos-page-duration: .34s;
  --datos-page-distance: 24px;
  --datos-page-ease: cubic-bezier(.22, .9, .28, 1);
}

.datos-view-layer {
  width: 100%;
  min-width: 0;
  transform-origin: center top;
}

.datos-view-layer.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  position: relative;
  transform: none;
  will-change: auto;
}

.datos-view-layer.is-hidden {
  opacity: 0;
  pointer-events: none !important;
  visibility: hidden;
  position: absolute;
  inset: 0;
}

.datos-view-layer.is-hidden.is-left {
  transform: translateX(calc(-1 * var(--datos-page-distance)));
  will-change: opacity, transform;
}

.datos-view-layer.is-hidden.is-right {
  transform: translateX(var(--datos-page-distance));
  will-change: opacity, transform;
}

/* Solo animar cuando cambiamos de fase */
.datos-view-stage.nav-forward .datos-view-layer.is-visible {
  animation: datosPageInFromRight var(--datos-page-duration) var(--datos-page-ease);
}

.datos-view-stage.nav-back .datos-view-layer.is-visible {
  animation: datosPageInFromLeft var(--datos-page-duration) var(--datos-page-ease);
}

/* Importante: cambio interno de liga/equipo SIN animar toda la página */
.datos-view-stage.nav-same .datos-view-layer.is-visible {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

@keyframes datosPageInFromRight {
  from {
    opacity: 0;
    transform: translateX(var(--datos-page-distance));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes datosPageInFromLeft {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--datos-page-distance)));
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* =========================================================
   DATOS · bloque superior de scopes F11/F7/Debutante
   ========================================================= */

.datos-index-scope-wrap {
  overflow: hidden;
  width: 100%;
  min-width: 0;

  max-height: 90px;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 12px;
  pointer-events: auto;

  transition:
    max-height .30s cubic-bezier(.22, .9, .28, 1),
    opacity .24s ease,
    transform .30s cubic-bezier(.22, .9, .28, 1),
    margin-bottom .30s cubic-bezier(.22, .9, .28, 1);
}

.datos-index-scope-wrap.is-visible {
  max-height: 90px;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 12px;
  pointer-events: auto;
}

.datos-index-scope-wrap.is-hidden {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  margin-bottom: 0;
  pointer-events: none;
}


/* =========================================================
   DATOS · sub-vistas internas liga / equipo
   ========================================================= */

.datos-subview {
  width: 100%;
  min-width: 0;
}

.datos-subview.is-hidden {
  display: none;
}

.datos-subview.is-visible {
  display: block;
}


/* =========================================================
   Accesibilidad: reducir movimiento si el usuario lo pide
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .datos-view-stage.nav-forward .datos-view-layer.is-visible,
  .datos-view-stage.nav-back .datos-view-layer.is-visible,
  .datos-view-stage.nav-same .datos-view-layer.is-visible {
    animation: none;
  }

  .datos-view-layer,
  .datos-index-scope-wrap {
    transition: none !important;
  }
}