/*
  AudioSnag make-good layer
  A small, additive system: graphite, signal orange, phosphor teal.
  It never owns layout; it only gives the supplied pages a little transport.
*/
:root {
  --as-signal: #f26a21;
  --as-phosphor: #46b9a0;
  --as-paper: #f0ebe0;
  --as-black: #0a0908;
  --as-cursor-x: 50vw;
  --as-cursor-y: 50vh;
  --as-level: 0;
}

html { scroll-behavior: smooth; }
body { position: relative; }

/* Quiet machine-grid, kept behind the authored page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(rgba(240,235,224,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,235,224,.14) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  z-index: 2147483001;
  left: calc(var(--as-cursor-x) - 9px);
  top: calc(var(--as-cursor-y) - 9px);
  width: 16px;
  height: 16px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--as-signal) 80%, transparent);
  transform: rotate(45deg) scale(calc(1 + var(--as-level) * .35));
  opacity: 0;
  transition: opacity .18s ease, transform .08s linear;
}

html.as-pointer body::after { opacity: .85; }
html.as-pointer body { cursor: crosshair; }
html.as-pointer a, html.as-pointer button, html.as-pointer [role="button"] { cursor: pointer; }

/* Signal edge: a precise, non-interactive page position cue. */
.as-track {
  position: fixed;
  z-index: 2147483002;
  left: 0;
  top: 0;
  width: calc(var(--as-scroll, 0) * 100%);
  height: 2px;
  pointer-events: none;
  background: var(--as-signal);
  transform-origin: left;
  box-shadow: 6px 0 0 var(--as-phosphor);
}

button.door:focus-visible {
  outline: 1px solid var(--as-signal) !important;
  outline-offset: 3px;
}

/* Pointer-down feedback lives in its own fixed layer and never moves authored UI. */
.as-hit {
  position: fixed;
  z-index: 2147483003;
  left: var(--as-hit-x);
  top: var(--as-hit-y);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--as-signal);
  border-radius: 50%;
  pointer-events: none;
  animation: as-hit .44s steps(6, end) both;
}

@keyframes as-hit {
  0% { opacity: .9; transform: scale(.7); box-shadow: 0 0 0 0 color-mix(in srgb, var(--as-phosphor) 65%, transparent); }
  100% { opacity: 0; transform: scale(3.8); box-shadow: 0 0 0 8px transparent; }
}

.as-track.as-punch {
  height: 4px;
  filter: brightness(1.35);
}

@media (pointer: coarse) {
  html.as-pointer body::after { display: none; }
  html.as-pointer body { cursor: auto; }
}

@media (max-width: 640px) {
  body::before { opacity: .045; background-size: 40px 40px; }
  .as-track { height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { display: none; }
  .as-hit { display: none; }
  .as-track { transition: none; }
}