/**
 * Tile Fade Animations
 * - Fade-out: Left-to-right fade when guess is submitted
 * - Fade-in: Left-to-right fade when tiles appear/repopulate
 *
 * Timing:
 * - 0.2s per tile fade duration
 * - 0.2s stagger between tiles
 * - Total: 1.4s (top row 0-0.8s, bottom row 0.8-1.4s)
 */

@keyframes tile-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes tile-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Top row - 4 tiles (indices 0-3) */
#tiles-row-top .tile.tile-fade-out:nth-child(1) {
  animation: tile-fade-out 0.2s ease-out forwards;
  animation-delay: 0s;
}

#tiles-row-top .tile.tile-fade-out:nth-child(2) {
  animation: tile-fade-out 0.2s ease-out forwards;
  animation-delay: 0.2s;
}

#tiles-row-top .tile.tile-fade-out:nth-child(3) {
  animation: tile-fade-out 0.2s ease-out forwards;
  animation-delay: 0.4s;
}

#tiles-row-top .tile.tile-fade-out:nth-child(4) {
  animation: tile-fade-out 0.2s ease-out forwards;
  animation-delay: 0.6s;
}

/* Bottom row - 3 tiles (indices 0-2) */
#tiles-row-bottom .tile.tile-fade-out:nth-child(1) {
  animation: tile-fade-out 0.2s ease-out forwards;
  animation-delay: 0.8s;
}

#tiles-row-bottom .tile.tile-fade-out:nth-child(2) {
  animation: tile-fade-out 0.2s ease-out forwards;
  animation-delay: 1.0s;
}

#tiles-row-bottom .tile.tile-fade-out:nth-child(3) {
  animation: tile-fade-out 0.2s ease-out forwards;
  animation-delay: 1.2s;
}

/* Fade-In Animation - Same timing as fade-out */
/* Tiles start invisible and fade in */
.tile.tile-fade-in {
  opacity: 0;
}

/* Top row - 4 tiles (indices 0-3) */
#tiles-row-top .tile.tile-fade-in:nth-child(1) {
  animation: tile-fade-in 0.2s ease-in forwards;
  animation-delay: 0s;
}

#tiles-row-top .tile.tile-fade-in:nth-child(2) {
  animation: tile-fade-in 0.2s ease-in forwards;
  animation-delay: 0.2s;
}

#tiles-row-top .tile.tile-fade-in:nth-child(3) {
  animation: tile-fade-in 0.2s ease-in forwards;
  animation-delay: 0.4s;
}

#tiles-row-top .tile.tile-fade-in:nth-child(4) {
  animation: tile-fade-in 0.2s ease-in forwards;
  animation-delay: 0.6s;
}

/* Bottom row - 3 tiles (indices 0-2) */
#tiles-row-bottom .tile.tile-fade-in:nth-child(1) {
  animation: tile-fade-in 0.2s ease-in forwards;
  animation-delay: 0.8s;
}

#tiles-row-bottom .tile.tile-fade-in:nth-child(2) {
  animation: tile-fade-in 0.2s ease-in forwards;
  animation-delay: 1.0s;
}

#tiles-row-bottom .tile.tile-fade-in:nth-child(3) {
  animation: tile-fade-in 0.2s ease-in forwards;
  animation-delay: 1.2s;
}