/* ============================================================
   CATBACK hero.css — owned by the `atm` module.
   Hero layout: full-viewport ATM stage, [panel|ATM|panel] grid,
   rig bleed geometry, contract z-order, ambient machine glow,
   idle breathing + scroll-hint bob.
   Panel INTERIORS are styled by css/panels.css — this file only
   places the .term-panel slots.
   ============================================================ */

/* ---- hero shell (mobile-first) ------------------------------- */
.hero {
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + clamp(10px, 2.5vh, 30px)) clamp(10px, 2vw, 28px) 12px;
  /* the rig bleeds sideways for flying notes — never scroll the page */
  overflow-x: clip;
}

/* single column on phones: ATM → CA bar → panels → hint */
.hero-stage {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "rig"
    "ca"
    "stake"
    "left"
    "right"
    "hint";
  align-items: center;
  justify-items: center;
  row-gap: clamp(10px, 1.8vh, 18px);
}

/* ---- on-chain proof panel (user-directed, top-right of the simulator) ---- */
/* placement is owned by .hero-aside (stake.css) — PROOF keeps its own look */
.proof-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  max-width: 210px;
}
.proof-title {
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--gold);
}
.proof-link {
  font-family: var(--font-term);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--terminal);
  min-height: 24px;
}
.proof-link:hover,
.proof-link:focus-visible {
  color: var(--sol-cyan);
  text-shadow: 0 0 10px var(--glow-terminal);
}
.proof-tba {
  font-family: var(--font-term);
  font-size: 14px;
  color: var(--terminal-dim);
}
@media (max-width: 1279.98px) {
  .proof-panel { max-width: none; }
}

/* ---- hero title block (user-directed addition above the machine) ---- */
.hero-title {
  grid-area: title;
  text-align: center;
  padding-top: clamp(2px, 1vh, 10px);
}
.hero-brand {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: clamp(26px, 4.6vw, 52px);
  letter-spacing: 3px;
  /* white lettering with a hard dark pixel edge so it stays legible over
     the branch wall, the trim band and the windows behind it */
  color: #ffffff;
  text-shadow:
    3px 0 0 #14140f, -3px 0 0 #14140f, 0 3px 0 #14140f, 0 -3px 0 #14140f,
    3px 3px 0 #14140f, -3px 3px 0 #14140f, 3px -3px 0 #14140f, -3px -3px 0 #14140f,
    6px 6px 0 rgba(0, 0, 0, 0.35);
}
.hero-tag {
  margin: clamp(6px, 1.2vh, 12px) 0 0;
  font-family: var(--font-pixel);
  font-size: clamp(10px, 1.4vw, 16px);
  letter-spacing: 3px;
  color: #ffffff;
  text-shadow:
    2px 0 0 #14140f, -2px 0 0 #14140f, 0 2px 0 #14140f, 0 -2px 0 #14140f,
    2px 2px 0 #14140f, -2px 2px 0 #14140f, 2px -2px 0 #14140f, -2px -2px 0 #14140f;
}

/* ---- ATM rig: larger than the machine so notes can fly past it */
.atm-rig {
  grid-area: rig;
  position: relative;
  z-index: 3;               /* below the .term-panel slots (z4) */
  --bleed-x: clamp(18px, 7vw, 64px);
  --bleed-y: clamp(28px, 6vh, 80px);
  padding: var(--bleed-y) var(--bleed-x);
  /* cancel the bleed in layout so the grid stays tight — the padded
     box visually overhangs the neighbouring panel columns instead */
  margin: calc(var(--bleed-y) * -1) calc(var(--bleed-x) * -1);
  will-change: transform;   /* JS cursor parallax (atm.js) */
}

/* machine box — every inset-0 overlay matches the img box exactly */
.atm-wrap {
  position: relative;
  z-index: 2;               /* above #wallet-layer, below #notes-canvas */
  width: fit-content;
  animation: atm-breathe 4.4s var(--ease-mech) infinite;
  /* soft ambient glow behind the machine: chunky stepped rings, no blur */
  /* on cream the old stacked glow rings read as grey boxes — the machine
     just sits on the paper now */
  box-shadow: none;
}
/* deployment mode (atm.js toggles data-deploying on .hero) */
.hero[data-deploying] .atm-wrap {
  box-shadow: none;
}

/* height-driven so machine + CA bar always fit the viewport */
#atm-img {
  display: block;
  width: min(92vw, calc(68vh * 650 / 1081));
  height: auto;
  aspect-ratio: 650 / 1081;
  user-select: none;
  -webkit-user-drag: none;
}

/* overlay stack inside the wrap — contract z-order:
   img < #atm-fx < #atm-screen < #atm-hotspots */
#atm-fx,
.atm-screen,
.atm-hotspots {
  position: absolute;
  inset: 0;
}
/* The FX canvas painted screen/slot/LED glows designed for a dark page.
   On cream they wash out as a grey rectangle around the machine, so the
   layer is off — the machine sits clean on the paper. */
#atm-fx {
  display: none;
}
.atm-screen  { z-index: 3; pointer-events: none; }
/* hotspot layer invariant (owned by eggs.css, which raises z + adds the
   buttons): the layer itself must never catch input — buttons re-enable */
.atm-hotspots { z-index: 4; pointer-events: none; }

/* layers spanning the whole rig (incl. bleed) */
.wallet-layer {
  position: absolute;
  inset: 0;
  z-index: 1;               /* BELOW .atm-wrap */
  pointer-events: none;
}
#notes-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;               /* ABOVE .atm-wrap */
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- terminal panel slots (interiors live in panels.css) ------ */
.term-panel-left,
.term-panel-right {
  position: relative;
  z-index: 4;               /* panels sit above #notes-canvas */
  width: 100%;
  min-width: 0;
}
.term-panel-left  { grid-area: left; }
.term-panel-right { grid-area: right; }

.term-panel-bottom {
  grid-area: ca;
  position: relative;
  z-index: 4;
  justify-self: center;
  max-width: 100%;
  min-width: 0;
}

/* ---- scroll hint ---------------------------------------------- */
.scroll-hint {
  grid-area: hint;
  align-self: end;
  justify-self: center;
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;          /* touch target */
  padding: 10px 18px;
  font-family: var(--font-pixel);
  font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 2px;
  text-align: center;
  color: var(--terminal-dim);
  animation: hint-bob 2.6s var(--ease-mech) infinite;
}
.scroll-hint:hover,
.scroll-hint:focus-visible {
  color: var(--terminal);
  text-shadow: 0 0 12px var(--glow-terminal);
}

/* ---- desktop: [panel 250-280 | ATM stage | panel 250-280] ------ */
@media (min-width: 900px) {
  .hero-stage {
    /* [ STAKE & GROW ] [ ATM ] [ DEPLOYMENT LOG ] pushed to the room's far
       edges: the side columns hug the walls and the machine keeps the whole
       middle of the floor to itself. */
    grid-template-columns: minmax(300px, 350px) minmax(0, 1fr) minmax(300px, 350px);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "title title title"
      "stake rig   right"
      "left  rig   right"
      "ca    ca    ca"
      "hint  hint  hint";
    justify-content: stretch;
    column-gap: clamp(40px, 6vw, 110px);  /* wide, clean air around the machine */
    row-gap: clamp(14px, 2vh, 26px);
  }
  /* the hero spans the full room, not a narrow centred column */
  .hero-stage { max-width: min(1720px, 96vw); }
  /* side fixtures hang from the top of the room; the floor line is drawn
     at the machine's feet by bank.js, so the ATM stays centred and whole */
  .stake-panel, .term-panel-right { align-self: start; }
  .stake-panel { grid-area: stake; align-self: start; }
  .term-panel-left,
  .term-panel-right {
    align-self: center;
    max-height: calc(100vh - var(--nav-h) - 110px);
    overflow-y: auto;
  }
  .atm-rig {
    --bleed-x: clamp(120px, 20vw, 340px);
    --bleed-y: clamp(50px, 10vh, 150px);
  }
  #atm-img {
    /* clamp so machine + CA bar always fit; never overflow the stage.
       The subtrahend must cover BOTH panel tracks + both column gaps +
       the hero padding, or the machine grows past its grid track and eats
       the alley the wallet chips are placed in (deploy.js). */
    width: min(60vw, calc(72vh * 650 / 1081), calc(100vw - 660px));
    max-width: 92vw;
  }
}

/* Narrow desktop: two 280px panels + a full-width machine leave only a few
   px of alley, so the deployment chips end up behind the machine. Give the
   panels less width and the gaps more, and shrink the machine to match. */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-stage {
    grid-template-columns: minmax(200px, 240px) minmax(0, auto) minmax(200px, 240px);
    column-gap: clamp(22px, 3vw, 30px);
  }
  #atm-img {
    width: min(60vw, calc(72vh * 650 / 1081), calc(100vw - 600px));
  }
}

/* ---- keyframes -------------------------------------------------- */
/* idle breathing: whole machine, translation only, 2px over ~4.4s */
@keyframes atm-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(2px); }
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ---- reduced motion (body flag driven by CB.util) --------------- */
body[data-motion="reduce"] .atm-wrap,
body[data-motion="reduce"] .scroll-hint {
  animation: none;
}