/* ================================
   QVII — Tile Synchronized Float Animation
   Simple up-and-down hover effect for all tiles when no tiles are selected
   ================================ */

/* Simple synchronized hover animation inspired by goldFloat */
@keyframes tile-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(var(--float-height)); /* floating upward */
  }
}

/* Sequential wave animation - each tile starts at a different time */
.tiles-panel.cycle-animation .tile.is-selectable:not(.is-selected):not(:hover) {
  animation: tile-float var(--float-duration) infinite var(--float-timing);
  transform-origin: center center;
}

/* Synchronized rows - both start together, left-to-right in each row */
.tiles-panel.cycle-animation #tiles-row-top .tile:nth-child(1),
.tiles-panel.cycle-animation #tiles-row-bottom .tile:nth-child(1) { animation-delay: 0s; }

.tiles-panel.cycle-animation #tiles-row-top .tile:nth-child(2),
.tiles-panel.cycle-animation #tiles-row-bottom .tile:nth-child(2) { animation-delay: 0.2s; }

.tiles-panel.cycle-animation #tiles-row-top .tile:nth-child(3),
.tiles-panel.cycle-animation #tiles-row-bottom .tile:nth-child(3) { animation-delay: 0.4s; }

.tiles-panel.cycle-animation #tiles-row-top .tile:nth-child(4) { animation-delay: 0.6s; }

/* Ensure selected tiles and hovered tiles don't get the animation */
.tiles-panel.cycle-animation .tile.is-selected,
.tiles-panel.cycle-animation .tile:hover {
  animation: none !important;
}

/* Configuration variables for easy tweaking */
:root {
  --float-duration: 3s;
  --float-timing: ease-in-out;
  --float-height: -8px; /* Stronger animation - was -1px */
}