/* ── Tile rack: animated WELCOME tiles ── */

/*
 * Layout: a fixed-size container holding 7 absolutely-positioned tiles.
 * Each tile is 32×32px on a 36px pitch (32px tile + 4px gap).
 * Total rack width: 7×32 + 6×4 = 248px.  Height: 32px.
 *
 * Animation uses the layered-animation technique from Tobias Ahlin:
 * the outer <div> (.tile-x) animates translateX, and the inner <img>
 * (.tile-y) animates translateY with a different easing, producing
 * curved paths.  Both use animation-fill-mode: forwards so the tiles
 * stay put once they spell WELCOME.
 *
 * Starting order:  O  L  M  E  W  E  C   (slots 0–6)
 * Ending order:    W  E  L  C  O  M  E   (slots 0–6)
 */

.tile-rack {
    position: relative;
    width: 248px;
    height: 32px;
    flex-shrink: 0;
}

/* Outer wrappers: positioned at starting slots */
.tile-x {
    position: absolute;
    top: 0;
    width: 32px;
    height: 32px;
}
.tile-x-0 { left: 144px; } /* O → final slot 4 */
.tile-x-1 { left:  72px; } /* L → final slot 2 */
.tile-x-2 { left: 180px; } /* M → final slot 5 */
.tile-x-3 { left:  36px; } /* E → final slot 1 */
.tile-x-4 { left:   0px; } /* W → final slot 0 */
.tile-x-5 { left: 216px; } /* E → final slot 6 */
.tile-x-6 { left: 108px; } /* C → final slot 3 */

/* Inner images */
.tile-y {
    display: block;
    width: 32px;
    height: 32px;
}

/* ── X-axis animations (on .tile-x wrappers) ── */

.tile-x-0 { animation: x0 2.5s 2s cubic-bezier(0.25, 0.1, 0.25, 1) backwards; }
.tile-x-1 { animation: x1 2.5s 2s cubic-bezier(0.25, 0.1, 0.25, 1) backwards; }
.tile-x-2 { animation: x2 2.5s 2s cubic-bezier(0.25, 0.1, 0.25, 1) backwards; }
.tile-x-3 { animation: x3 2.5s 2s cubic-bezier(0.55, 0.0,  0.45, 1) backwards; }
.tile-x-4 { animation: x4 2.5s 2s cubic-bezier(0.25, 0.1, 0.25, 1) backwards; }
.tile-x-5 { animation: x5 2.5s 2s cubic-bezier(0.25, 0.1, 0.25, 1) backwards; }
.tile-x-6 { animation: x6 2.5s 2s cubic-bezier(0.55, 0.0,  0.45, 1) backwards; }

/* tile 0 (O): starts at slot 0, ends at slot 4 — offset from: -144px */
@keyframes x0 { from { transform: translateX(-144px); } }
/* tile 1 (L): starts at slot 1, ends at slot 2 — offset from: -36px */
@keyframes x1 { from { transform: translateX(-36px);  } }
/* tile 2 (M): starts at slot 2, ends at slot 5 — offset from: -108px */
@keyframes x2 { from { transform: translateX(-108px); } }
/* tile 3 (E): starts at slot 3, ends at slot 1 — offset from: +72px */
@keyframes x3 { from { transform: translateX(72px);   } }
/* tile 4 (W): starts at slot 4, ends at slot 0 — offset from: +144px */
@keyframes x4 { from { transform: translateX(144px);  } }
/* tile 5 (E): starts at slot 5, ends at slot 6 — offset from: -36px */
@keyframes x5 { from { transform: translateX(-36px);  } }
/* tile 6 (C): starts at slot 6, ends at slot 3 — offset from: +108px */
@keyframes x6 { from { transform: translateX(108px);  } }

/* ── Y-axis animations (on .tile-y images) ──
 *
 * Only applied to tiles that need curved paths.
 * The Y translation goes to a peak mid-animation then returns to 0,
 * using a single 50% keyframe.  The easing curve differs from the
 * X-axis easing, which is what produces the curved path.
 *
 * Tiles moving right arc upward (negative Y).
 * Tiles moving left arc downward (positive Y).
 * Short-hop tiles (L, E₂) have no Y animation.
 */

/* tile 0 (O): big arc up, -40px at midpoint */
.tile-y-0 { animation: y0 2.5s 2s cubic-bezier(0.5, 0, 0.5, 1) backwards; }
@keyframes y0 {
    from { transform: translateY(0);     }
    50%  { transform: translateY(-40px); }
    to   { transform: translateY(0);     }
}

/* tile 1 (L): no Y animation — short hop */

/* tile 2 (M): medium arc down, +35px at midpoint */
.tile-y-2 { animation: y2 2.5s 2s cubic-bezier(0.5, 0, 0.5, 1) backwards; }
@keyframes y2 {
    from { transform: translateY(0);    }
    50%  { transform: translateY(35px); }
    to   { transform: translateY(0);    }
}

/* tile 3 (E₁): small arc up, -25px at midpoint */
.tile-y-3 { animation: y3 2.5s 2s cubic-bezier(0.5, 0, 0.5, 1) backwards; }
@keyframes y3 {
    from { transform: translateY(0);     }
    50%  { transform: translateY(-25px); }
    to   { transform: translateY(0);     }
}

/* tile 4 (W): big arc down, +40px at midpoint */
.tile-y-4 { animation: y4 2.5s 2s cubic-bezier(0.5, 0, 0.5, 1) backwards; }
@keyframes y4 {
    from { transform: translateY(0);    }
    50%  { transform: translateY(40px); }
    to   { transform: translateY(0);    }
}

/* tile 5 (E₂): no Y animation — short hop */

/* tile 6 (C): medium arc up, -35px at midpoint */
.tile-y-6 { animation: y6 2.5s 2s cubic-bezier(0.5, 0, 0.5, 1) backwards; }
@keyframes y6 {
    from { transform: translateY(0);     }
    50%  { transform: translateY(-35px); }
    to   { transform: translateY(0);     }
}

/* ── Reduced motion / no animation fallback ──
 * Tiles are positioned at their final WELCOME slots by default,
 * so disabling animation leaves them correctly arranged. */
@media (prefers-reduced-motion: reduce) {
    .tile-x,
    .tile-y {
        animation: none !important;
    }
}