/* Hero battle (agent H): the live battle behind the homepage hero.
   Scene: js/scenes/hero-battle.js · markup: src/partials/home/hero.html.
   Loads after site.css + fx.css, so these rules refine F's hero block. */

/* ---------------------------------------------------------------- the poster
   Rendered from the scene itself. The camera "covers" the same world frame with the same
   anchor, so the cross-fade to the live canvas does not jump:
     landscape → the wide frame, anchored right   (object-position 100% 50%)
     portrait  → the tall frame, anchored top     (object-position 50% 0%)
   Keep in step with FRAME_WIDE / FRAME_TALL / TALL_BELOW in hero-battle.js. */
.hero-scene > picture.scene-poster { display: block; }
.hero-scene > picture.scene-poster img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  object-position: 100% 50%;
}
@media (max-aspect-ratio: 9/10) {
  .hero-scene > picture.scene-poster img { object-position: 50% 0%; }
}

/* ---------------------------------------------------------------- the field is clickable
   The text column must not swallow clicks on the empty field to its right: each block is
   only as wide as its text. (The section listens; links and text are excluded in JS.) */
.hero-inner > * { width: fit-content; max-width: 100%; }
.hero-sub { max-width: min(34rem, 100%); }
.hero-scene { cursor: crosshair; }

/* The scrim: F's gradients, a touch deeper under the headline so the brighter live scene
   never costs the text its contrast. */
.hero-scrim {
  background:
    linear-gradient(90deg, rgba(var(--void-rgb), 0.92) 0%, rgba(var(--void-rgb), 0.72) 32%, rgba(var(--void-rgb), 0.18) 58%, transparent 74%),
    linear-gradient(0deg, rgba(var(--void-rgb), 0.55) 0%, rgba(var(--void-rgb), 0.35) 18%, transparent 42%),
    linear-gradient(180deg, rgba(var(--void-rgb), 0.62) 0%, transparent 16%);
}
/* No seam into the next section: the battle and its scrim dissolve into the page (and P's sky)
   over the hero's last fifth instead of ending on a hard edge. */
.hero-scene, .hero-scrim {
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 76%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, black 76%, transparent 100%);
}

/* ---------------------------------------------------------------- tower lock label
   Follows the tower that tracks the cursor: "RAILGUN RIG  LV 5" in a bracketed HUD tag.
   Positioned by JS (transform); the offset below centres it above the tower. */
.hb-lock {
  position: absolute; left: 0; top: 0; z-index: 2;
  pointer-events: none;
  display: flex; align-items: baseline; gap: 0.7em;
  padding: 0.38rem 0.6rem 0.36rem;
  translate: -50% -100%;
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink);
  background: rgba(var(--void-rgb), 0.62);
  border: 1px solid rgba(var(--machine-rgb), 0.28);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
  will-change: transform;
}
.hb-lock::before, .hb-lock::after {            /* amber corner ticks */
  content: ""; position: absolute; width: 7px; height: 7px; border: 0 solid var(--amber);
}
.hb-lock::before { left: -1px; top: -1px; border-left-width: 1px; border-top-width: 1px; }
.hb-lock::after { right: -1px; bottom: -1px; border-right-width: 1px; border-bottom-width: 1px; }
.hb-lock.is-on { opacity: 1; }
.hb-lock { flex-direction: column; align-items: flex-start; gap: 0.32rem; }
.hb-lock-row { display: flex; align-items: baseline; gap: 0.7em; }
.hb-lock-lv { color: var(--amber); }
.hb-lock-hint { font-size: 0.56rem; font-weight: 500; letter-spacing: 0.2em; color: rgba(var(--star-rgb), 0.62); }

/* ---------------------------------------------------------------- HUD corner
   "● LIVE · WAVE 07", tucked inside the hero frame's top-left tick (the frame hides on phones). */
.hb-live {
  position: absolute; z-index: 3; pointer-events: none;
  left: calc(var(--gutter) + 1.1rem); top: calc(var(--head-h) + 1.25rem);
  display: flex; align-items: center;
  font-size: 0.64rem; letter-spacing: 0.2em;
  color: rgba(var(--star-rgb), 0.7);
  animation: hb-in 800ms var(--ease-out) 250ms both;   /* arrives with the live canvas */
}
@keyframes hb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hb-live .sep { margin: 0 0.6em; }
.hb-live-wave { color: var(--ink); font-weight: 700; margin-left: 0.5em; }
.hb-live-dot {
  width: 6px; height: 6px; margin-right: 0.75em; border-radius: 50%;
  background: var(--magenta); box-shadow: 0 0 10px rgba(var(--monster-rgb), 0.9);
  animation: hb-live 1.6s var(--ease-quart) infinite;
}
@keyframes hb-live { 0%, 100% { opacity: 1; } 55% { opacity: 0.25; } }
@media (max-width: 700px) { .hb-live { display: none; } }

/* ---------------------------------------------------------------- readout
   Counters (P's [data-count-to]) keep a steady width while they run. */
.hero-readout strong { font-variant-numeric: tabular-nums; min-width: 1.3em; text-align: right; }

/* ---------------------------------------------------------------- phones
   The camera frames the whole defense (Command Center to fog) in the top of the screen; the
   text block sits lower and a little tighter, so the board reads above the logo. */
@media (max-width: 700px) {
  .hero { padding-bottom: 2.6rem; }
  .hero-logo img { width: clamp(180px, 52vw, 240px); }
  .hero-scrim {
    background:
      linear-gradient(0deg, var(--void) 0%, rgba(var(--void-rgb), 0.86) 40%, rgba(var(--void-rgb), 0.35) 62%, rgba(var(--void-rgb), 0.12) 78%, rgba(var(--void-rgb), 0.5) 100%);
  }
  /* on phones the text block fills the lower half: the scrim carries it, the scene fades early */
  .hero-scene { -webkit-mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 92%); mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 92%); }
  .hero-scrim { -webkit-mask-image: linear-gradient(180deg, black 0%, black 93%, transparent 100%); mask-image: linear-gradient(180deg, black 0%, black 93%, transparent 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hb-lock, .hb-live { display: none; }
}