/* Home hero (owned by the home-hero rebuild): the living Atlas world, its
   overlay labels, the map readout, the lens control and the domain probe. */

/* ---------------------------------------------------------------- stage */

.stage--home { will-change: opacity; }
.stage.stage--home > div.hh-layer { opacity: 1; }
.hh-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: strict; }

/* The world owns the right of the hero, the headline the left. */
.hero.hh { cursor: grab; touch-action: pan-y pinch-zoom; }
.hero.hh.is-hh-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.hh .hero__inner > *, .hh-map > * { cursor: auto; }
.hero.hh::before {
  background:
    linear-gradient(90deg, rgba(7, 9, 13, .9) 0%, rgba(7, 9, 13, .62) 30%, rgba(7, 9, 13, .08) 52%, transparent 64%),
    linear-gradient(0deg, rgba(7, 9, 13, .5), transparent 24%);
}

/* ---------------------------------------------------------------- labels */

.hh-cl { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 4px; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.hh-cl b { font: 600 10.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(214, 224, 242, .86); text-shadow: 0 1px 14px #07090d, 0 0 4px #07090d; transition: color .25s, letter-spacing .35s var(--ease); }
.hh-cl span { font: 500 11px/1 var(--font-body); color: #93c5fd; opacity: 0; transform: translateY(-3px); transition: opacity .25s, transform .25s; text-shadow: 0 0 8px #07090d; }
.hh-cl::after { content: ""; width: 1px; height: 16px; background: linear-gradient(rgba(147, 197, 253, .55), rgba(147, 197, 253, 0)); }
.hh-cl.is-hot b { color: #fff; letter-spacing: .2em; }
.hh-cl.is-hot span { opacity: 1; transform: none; }

.hh-seed { position: absolute; left: 0; top: 0; padding: 5px 11px; border-radius: 999px; white-space: nowrap; font: 600 11.5px/1 var(--font-body); letter-spacing: .02em; color: var(--ice); background: rgba(7, 9, 13, .5); border: 1px solid rgba(147, 197, 253, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .4s; will-change: transform, opacity; }

.hh-card {
  position: absolute; left: 0; top: 0; display: grid; gap: 4px; width: max-content; max-width: min(320px, 78vw);
  padding: 11px 15px 12px; border-radius: 12px; background: rgba(9, 13, 20, .8);
  border: 1px solid rgba(147, 197, 253, .24); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(96, 165, 250, .5);
  opacity: 0; transition: opacity .18s; will-change: transform, opacity;
}
.hh-card.is-on { opacity: 1; }
.hh-card::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; margin-left: -5px; transform: rotate(45deg); background: rgba(9, 13, 20, .9); border-right: 1px solid rgba(147, 197, 253, .24); border-bottom: 1px solid rgba(147, 197, 253, .24); }
.hh-card b { font: 600 14px/1.3 var(--font-body); color: #fff; }
.hh-card span { font: 500 12px/1.45 var(--font-body); color: var(--brand-muted); }
.hh-card i { font: 500 12px/1.45 var(--font-body); font-style: normal; color: #93c5fd; }
.hh-card i:empty { display: none; }
.hh-card[data-kind="saucer"] { border-color: rgba(248, 113, 113, .38); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(239, 68, 68, .55); }
.hh-card[data-kind="saucer"] i { color: #fca5a5; }

/* ---------------------------------------------------------------- probe */

.hh-probe { display: grid; gap: 0; }
.hh .probe { overflow: hidden; }
.hh .probe.is-busy { border-color: rgba(147, 197, 253, .6); box-shadow: 0 0 0 4px rgba(96, 165, 250, .1), 0 0 70px -18px rgba(96, 165, 250, .7); }
.hh .probe.is-busy::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(147, 197, 253, .22) 45%, transparent 70%);
  background-size: 250% 100%; animation: hh-sweep 1.2s linear infinite;
}
.hh .probe.is-busy .btn { pointer-events: none; }
@keyframes hh-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.hh-status { margin: 12px 0 0 20px; min-height: 1.45em; max-width: 72ch; font: 500 12.5px/1.45 var(--font-body); color: var(--brand-muted); }
.hh-status.is-error { color: #fca5a5; }

/* ---------------------------------------------------------------- map panel */

.hero.hh > .hh-map {
  position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(36px, 6.5vh, 76px);
  width: min(480px, 38vw); display: grid; justify-items: end; gap: 16px; text-align: right; pointer-events: none;
}
.hh-map > * { pointer-events: auto; }

.hh-hint {
  display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 13px; border-radius: 999px;
  font: 500 12.5px/1.2 var(--font-body); color: var(--text-2); background: rgba(7, 9, 13, .55);
  border: 1px solid rgba(147, 197, 253, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity .8s ease, transform .8s ease;
}
.hh-hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #93c5fd; box-shadow: 0 0 10px #60a5fa; animation: hh-pulse 1.6s ease-in-out infinite; }
.hh-hint.is-faded { opacity: 0; transform: translateY(6px); pointer-events: none; }
@keyframes hh-pulse { 50% { opacity: .3; } }

.hh-readout { margin: 0; display: grid; justify-items: end; gap: 12px; }
.hh-readout__src { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1.35 var(--font-body); color: var(--brand-muted); }
.hh-readout__src i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c5d2eb; box-shadow: 0 0 10px rgba(147, 197, 253, .8); }
.hh-readout.is-probed .hh-readout__src { color: var(--ice); }
.hh-readout.is-probed .hh-readout__src i { background: #60a5fa; box-shadow: 0 0 12px #60a5fa; }
.hh-readout__stats { display: flex; gap: clamp(18px, 2.2vw, 32px); }
.hh-readout__stats > span { display: grid; justify-items: end; gap: 6px; }
.hh-readout__stats b { font: 600 clamp(1.55rem, 2.3vw, 2.25rem)/1 var(--font-display); letter-spacing: -.035em; color: var(--ice); font-variant-numeric: tabular-nums; }
.hh-readout__stats small { font: 500 11.5px/1 var(--font-body); color: var(--muted); letter-spacing: .02em; }
.hero.hh.is-mapping .hh-readout__stats b { animation: hh-flicker .9s steps(2) infinite; }
@keyframes hh-flicker { 50% { opacity: .45; } }

.hh-lens { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(11, 15, 21, .62); border: 1px solid var(--line-2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hh-lens button {
  --c: #93c5fd;
  appearance: none; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; font: 600 13px/1 var(--font-body); color: var(--muted);
  transition: color .25s, background-color .3s, box-shadow .3s;
}
.hh-lens button[data-lens="1"] { --c: #fbbf24; }
.hh-lens button[data-lens="2"] { --c: #8ab4ff; }
.hh-lens button[data-lens="3"] { --c: #f87171; }
.hh-lens button:hover { color: var(--ice); }
.hh-lens button:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.hh-lens button[aria-pressed="true"] { color: #07090d; background: var(--c); box-shadow: 0 0 26px -6px var(--c); }
.hh-lens kbd { font: 600 10px/1 var(--font-mono); padding: 3px 5px; border-radius: 5px; border: 1px solid currentColor; opacity: .5; }
.hh-note { margin: 0; max-width: 44ch; min-height: 3em; font: 400 13px/1.5 var(--font-body); color: var(--muted); }

.hh--static .hh-lens, .hh--static .hh-note, .hh--static .hh-hint { display: none; }

@media (pointer: coarse) { .hh-lens kbd { display: none; } }

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1100px) and (min-width: 761px) {
  .hero.hh > .hh-map { width: min(420px, 44vw); }
  .hh-lens button { padding: 8px 11px; font-size: 12.5px; }
  .hh-lens kbd { display: none; }
}

/* Phones: the world sits in the top of the hero, its panel under it, the
   headline below. */
@media (max-width: 760px) {
  .hero.hh { padding-top: calc(var(--header-h) + 36svh); align-items: start; align-content: start; }
  .hero.hh > .hh-map { position: relative; order: -1; right: auto; bottom: auto; width: auto; margin: 0 var(--gutter) 30px; justify-items: center; text-align: center; gap: 12px; }
  .hh-readout { justify-items: center; }
  .hh-readout__src { display: block; max-width: 34ch; }
  .hh-readout__src i { display: inline-block; margin-right: 8px; vertical-align: 1px; }
  .hh-readout__stats > span { justify-items: center; }
  .hh-readout__stats b { font-size: 1.5rem; }
  .hh-lens button { padding: 8px 10px; font-size: 12.5px; }
  .hh-note { min-height: 4.5em; font-size: 12.5px; }
  .hh-hint { font-size: 12px; }
  .hero.hh::before { background: linear-gradient(0deg, rgba(7, 9, 13, .97) 38%, rgba(7, 9, 13, .6) 62%, rgba(7, 9, 13, 0) 78%); }
  .hh-status { margin-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-hint::before, .hero.hh.is-mapping .hh-readout__stats b, .hh .probe.is-busy::after { animation: none; }
}