/* Scroll-driven reveal for game cards inside .catalog-tabs-panel */

@keyframes juegos-catalog-slide-in {
  from {
    opacity: 0;
    transform: scale(0.85) rotate(calc(var(--side, 1) * (5deg * var(--amp, 1))));
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes juegos-catalog-slide-in-fallback {
  from {
    opacity: 0;
    transform: scale(0.92) rotate(calc(var(--side, 1) * (3deg * var(--amp, 1))));
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card {
  will-change: transform, opacity;
}

/* Transform origin by column (2 → 3 → 4 → 5 → 6 cols, matches juegos-hub-grid) */
.catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(2n + 1) {
  transform-origin: 30vw 100%;
}
.catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(2n) {
  transform-origin: -30vw 100%;
}

@media (min-width: 640px) {
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(3n + 1) {
    transform-origin: 40vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(3n + 2) {
    transform-origin: 0 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(3n) {
    transform-origin: -40vw 100%;
  }
}

@media (min-width: 768px) {
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(4n + 1) {
    transform-origin: 50vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(4n + 2) {
    transform-origin: 20vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(4n + 3) {
    transform-origin: -20vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(4n) {
    transform-origin: -50vw 100%;
  }
}

@media (min-width: 1024px) {
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(5n + 1) {
    transform-origin: 55vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(5n + 2) {
    transform-origin: 25vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(5n + 3) {
    transform-origin: 0 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(5n + 4) {
    transform-origin: -25vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(5n) {
    transform-origin: -55vw 100%;
  }
}

@media (min-width: 1280px) {
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(6n + 1) {
    transform-origin: 60vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(6n + 2) {
    transform-origin: 35vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(6n + 3) {
    transform-origin: 10vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(6n + 4) {
    transform-origin: -15vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(6n + 5) {
    transform-origin: -40vw 100%;
  }
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card:nth-child(6n) {
    transform-origin: -60vw 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card {
      animation: juegos-catalog-slide-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
  }

  @supports not (animation-timeline: view()) {
    .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card {
      opacity: 0;
      transform: scale(0.92) rotate(calc(var(--side, 1) * (3deg * var(--amp, 1))));
    }

    .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card.juegos-scroll-card--visible {
      animation: juegos-catalog-slide-in-fallback 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-tabs-panel .juegos-hub-grid .game-card.juegos-scroll-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}