/* hx-wall: the draggable game wall, as a fixed layer BEHIND the real homepage.
   z-index -1 puts it above the black canvas but below .veil and everything else. */
.hx-wall {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  contain: layout paint size; background: #000;
  animation: hx-in 1.6s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes hx-in { from { opacity: 0; } to { opacity: 1; } }
.hx-fx {
  position: absolute; inset: 0; transform-origin: 0 0; will-change: transform, opacity;
}
.hx-persp { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 46%; }
.hx-persp.flat { perspective: none; }
.hx-plane {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d; will-change: transform;
}
.hx-persp.flat .hx-plane { transform-style: flat; }
.hx-tile { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hx-tile .in { position: absolute; inset: 0; border-radius: 14px; background: #101014; overflow: hidden; }
.hx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 14px; opacity: 0; transition: opacity .8s; }
.hx-tile img.ok { opacity: .9; }
.hx-dim { position: absolute; inset: 0; border-radius: 14px; background: #000; opacity: 0; transition: opacity .7s cubic-bezier(.22, 1, .36, 1); }
/* static darkening behind the wordmark and cube so they stay the hero */
.hx-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 54% at 50% 52%, rgba(0,0,0,.8), rgba(0,0,0,.3) 74%, transparent 100%),
    linear-gradient(180deg, rgba(0,0,0,.5), transparent 24%, transparent 74%, rgba(0,0,0,.7) 100%);
}
html.hx-grab body { cursor: grab; }
html.hx-grab body a, html.hx-grab body button { cursor: pointer; }
html.hx-drag, html.hx-drag body { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
@media (prefers-reduced-motion: reduce) { .hx-wall { animation: none; } }

/* hovered tile in the hero (spot mode): lifts, brightens, names the game */
.hx-tile .in { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.hx-tile.hx-hot .in { transform: translateZ(46px) scale(1.07); box-shadow: 0 24px 60px -18px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.35); }
.hx-tile.hx-hot .hx-dim { opacity: 0 !important; }
.hx-tile.hx-hot img.ok { opacity: 1; }
.hx-name {
  position: absolute; left: 12px; bottom: 10px; right: 12px; display: flex; flex-direction: column; gap: 3px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  z-index: 2; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.9); opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s cubic-bezier(.22,1,.36,1); pointer-events: none;
}
.hx-name b { font-family: 'Archivo', system-ui, sans-serif; font-variation-settings: 'wdth' 115; font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.hx-name span { color: #3ddc84; }
.hx-tile.hx-hot .hx-name { opacity: 1; transform: none; }
.hx-tile .in::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: 0; transition: opacity .3s; pointer-events: none; }
.hx-tile.hx-hot .in::after { opacity: 1; }
html.hx-point body { cursor: pointer; }