/* The footer borrows the journal's gray-blue linework; it never becomes a banner. */
.site-footer[data-footer-water] {
  --footer-water-air: 64px;
  position: relative;
  isolation: isolate;
  margin-block-start: 64px;
  border-top-color: transparent;
}

.footer-water {
  position: absolute;
  inset: calc(-1 * var(--footer-water-air)) 0 0;
  z-index: 0;
  pointer-events: none;
  contain: layout style;
}

.footer-water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.footer-water-fallback {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: calc(var(--footer-water-air) + 8px);
  stroke: var(--accent);
  stroke-width: 1;
  opacity: .5;
}

.footer-water.is-water-ready .footer-water-fallback { display: none; }

.footer-water-hit {
  position: absolute;
  inset: calc(var(--footer-water-air) - 17px) 0 auto;
  height: 34px;
  pointer-events: auto;
  touch-action: pan-y;
}

.footer-gamepad {
  position: absolute;
  top: calc(var(--footer-water-air) - 8px);
  left: 64%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.footer-gamepad svg {
  width: 44px;
  height: 28px;
  overflow: visible;
  stroke-width: 1.4;
  transition: color 180ms ease-out;
}

.footer-gamepad-body { fill: var(--canvas); }
.footer-gamepad-key { fill: var(--secondary); stroke: none; }
.footer-gamepad-controls { stroke: var(--accent-bright); }
.footer-gamepad:hover, .footer-gamepad:focus-visible { color: var(--accent-bright); }
.footer-gamepad:focus-visible { outline-offset: 2px; }
.footer-gamepad:disabled { opacity: .7; cursor: default; pointer-events: none; }
.footer-water[data-state="running"] .footer-gamepad { will-change: transform; }
.site-footer[data-footer-water] > .footer-copy,
.site-footer[data-footer-water] > .footer-links { position: relative; z-index: 1; }

.site-footer[data-footer-water="off"] { margin-block-start: 0; border-top-color: var(--line); }
.site-footer[data-footer-water="off"] .footer-water { display: none; }

@media (max-width: 767px) {
  .site-footer[data-footer-water] { --footer-water-air: 52px; margin-block-start: 52px; }
  .site-footer[data-footer-water="off"] { margin-block-start: 0; }
  .footer-gamepad { left: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-gamepad, .footer-gamepad svg { transition: none; }
}