/* “It’s a Wonderful Night…”: the sonogram hero. Page-specific; album.css has
   the shared layout. */
:root {
  --ink: #07090b;
  --cream: #e6ecee;
  --cream-dim: rgba(230, 236, 238, 0.66);
  --muted: #7f949c;
  --rule: rgba(230, 236, 238, 0.1);
  --gold: #9fd8e3;          /* the accent: album.css uses it for labels and buttons */
  --topbar: #c9d3d8;
  --scan-ink: rgba(159, 216, 227, 0.8);
}

.hero.scan {
  /* The still cover is the fallback when the shader can't run. */
  background: #07090b url(../assets/iawn/sonogram.webp) center -5% / auto 116% no-repeat;
}

.hero.scan.is-live { background-image: none; }

/* Dusk at the bottom of the screen so the title reads over the scan. */
.hero.scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(7, 9, 11, 0.9), rgba(7, 9, 11, 0.55) 40%, rgba(7, 9, 11, 0));
  pointer-events: none;
  z-index: 1;
}

.hero.scan .hero-title,
.hero.scan .hud { z-index: 2; }

#scan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- the machine's chrome ---------------------------------------------- */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--scan-ink);
  line-height: 1.9;
}

.hud .tl,
.hud .tr {
  position: absolute;
  top: 5rem;
}

.hud .tl { left: clamp(1rem, 4vw, 3rem); }
.hud .tr { right: clamp(1rem, 4vw, 3rem); text-align: right; }

/* Depth scale down the right of the sector. */
.hud .depth {
  position: absolute;
  right: 15%;
  top: 16%;
  bottom: 18%;
  width: 9px;
  border-right: 1px solid var(--scan-ink);
  background: repeating-linear-gradient(to bottom, var(--scan-ink) 0 1px, transparent 1px 10%);
  opacity: 0.6;
}

/* Grey-scale bar at the top left. */
.hud .bar {
  position: absolute;
  left: 15%;
  top: 16%;
  width: 6px;
  height: 96px;
  background: linear-gradient(to bottom, #f4f7f8, #06080a);
  outline: 1px solid rgba(230, 236, 238, 0.18);
  opacity: 0.8;
}

.hud canvas.trace {
  position: absolute;
  left: clamp(1rem, 4vw, 3rem);
  bottom: clamp(2.5rem, 7vh, 5rem);
  width: 240px;
  height: 56px;
  color: var(--scan-ink);
}

/* ---- title ------------------------------------------------------------- */
.hero.scan .hero-title h1 {
  color: #eef2f4;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.7);
}

.hero.scan .hero-title .band { color: var(--cream-dim); }

@media (max-width: 640px) {
  .hud .depth, .hud .bar { display: none; }
  .hud canvas.trace { width: 150px; height: 40px; bottom: auto; top: 8rem; }
  .hud .tr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hud canvas.trace { display: none; }
}