/* Fitted blocks stay on their grid; cursor feedback marks selectable pieces. */
.landing-page .logo-mosaic {
  gap: 0.55rem;
  /* Keep tilted links above the grid's hit-test plane across their whole face. */
  transform-style: flat;
}

/* Traveling blocks cross the screen edge without adding page scrollbars. */
.landing-page .home-page { overflow: clip; }
.landing-page .logo-only-screen,
.landing-page .logo-mosaic { overflow: visible; }

.landing-page .logo-mosaic__tile {
  --wood-cursor-x: 50%;
  --wood-cursor-y: 50%;
  --wood-tilt-x: 0deg;
  --wood-tilt-y: 0deg;
  pointer-events: auto;
  cursor: pointer;
  scale: 1;
  animation: none;
  translate: none;
  transform: perspective(900px) rotateX(var(--wood-tilt-x)) rotateY(var(--wood-tilt-y));
  transition: transform 220ms cubic-bezier(0.2, 0, 0, 1), border-color 220ms ease, box-shadow 220ms ease;
}

.landing-page .logo-mosaic__tile::before,
.landing-page .logo-mosaic__tile::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  content: "";
  pointer-events: none;
  opacity: 0;
  transform: none;
  transition: opacity 220ms ease;
}

.landing-page .logo-mosaic__tile::before {
  background: radial-gradient(ellipse at var(--wood-cursor-x) var(--wood-cursor-y), rgba(255, 240, 207, 0.24), transparent 72%);
}

.landing-page .logo-mosaic__tile::after {
  border: 1px solid rgba(255, 242, 218, 0.5);
  background: none;
}

.landing-page .logo-mosaic__tile.is-wood-hovered,
.landing-page .logo-mosaic__tile:focus-visible {
  z-index: 4;
  border-color: rgba(118, 78, 36, 0.8);
  box-shadow: 0 8px 22px rgba(61, 38, 19, 0.18), 0 0 15px rgba(168, 115, 51, 0.12);
}

.landing-page .logo-mosaic__tile.is-wood-hovered::before,
.landing-page .logo-mosaic__tile.is-wood-hovered::after,
.landing-page .logo-mosaic__tile:focus-visible::after { opacity: 1; }
.landing-page .logo-mosaic__tile:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* Override the old generic tile hover wash and pressed scaling. */
.landing-page .logo-mosaic__tile:not(.is-wood-hovered):not(:focus-visible):hover { box-shadow: none; }
.landing-page .logo-mosaic__tile:hover::after { transform: none; }
.landing-page .logo-mosaic__tile--neutral:hover .logo-mosaic__fill { filter: none; }
.landing-page .logo-mosaic__tile:active { scale: 1; }
.landing-page.is-page-leaving .logo-mosaic__tile { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .landing-page .logo-mosaic__tile {
    animation: none !important;
    translate: none !important;
    transform: none !important;
    transition: none;
  }
  .landing-page .logo-mosaic__tile::before,
  .landing-page .logo-mosaic__tile::after { transition: none; }
}