/* ═══════════════════════════════════════════════════
   Apex Triad — Hero Art  (hero-site-preview.svg)
   Placement, visibility, hover, and reduced-motion.
   ═══════════════════════════════════════════════════ */

/* ── Placement & visibility ──────────────────────── */
/*   SVG artwork occupies left ~55% of canvas.        */
/*   2% left inset keeps it off the screen edge.      */
/*   Top 50% + translateY(-50%) centres it vertically.*/
.hero-bg {
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  width: 56%;
  height: auto;
  pointer-events: none;
  opacity: 1;
  object-fit: contain;
  object-position: center center;
}

/* Hide on mobile — hero copy is centred, art would overlap */
@media (max-width: 767px) {
  .hero-bg {
    display: none;
  }
}

/* ── Tile base ───────────────────────────────────── */
.hero-tile {
  cursor: pointer;
  outline: 3px solid transparent;
  outline-offset: 4px;
  transition:
    transform      0.22s ease,
    filter         0.22s ease,
    outline-color  0.22s ease;
}

/* ── Tile hover / focus ─────────────────────────── */
.hero-tile:hover,
.hero-tile:focus {
  transform:     translateY(-6px) scale(1.03);
  filter:        drop-shadow(0 12px 36px rgba(2, 6, 23, 0.45));
  outline-color: rgba(184, 134, 11, 0.12);
}

.hero-tile:focus {
  outline-color: rgba(184, 134, 11, 0.52);
}

/* ── Skeleton dim when a tile is hovered ────────── */
/*   Toggle .dimmed on #hero-site via optional JS    */
.hero-site {
  transition: opacity 0.22s ease;
}
.hero-site.dimmed {
  opacity: 0.55;
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-tile {
    transition: none;
  }
  .hero-tile:hover,
  .hero-tile:focus {
    transform: none;
    filter: none;
  }
  .hero-site {
    transition: none;
  }
}