/* ============================================================
   heroart.css — full-bleed character-select illustration as the
   hero art layer. HUD/cards/chrome sit on top; this fades out to
   reveal the office on activation. Cursor parallax + hover focus.
   ============================================================ */
.heroart {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  background: linear-gradient(100deg, #140d06 0%, #0d0a09 50%, #07070c 100%);
  transition: opacity 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.stage[data-phase="activating"] .heroart { filter: brightness(1.06) saturate(1.05); }
.stage[data-phase="office"] .heroart { opacity: 0; }

/* ---- side rails: EDGE-STRETCH (pixel-clamp) bleed. Each rail stretches just
   the outermost column of the art outward to fill the margin, so the colour
   at the seam matches the foreground edge EXACTLY (no line, no brightness
   cliff) and no character/face is ever repeated — only a smooth edge smear.
   backgroundImage is set inline (per-state src) to resolve correctly. */
.heroart__rail {
  position: absolute; top: 0; bottom: 0; width: 46vw; z-index: 0;
  background-repeat: no-repeat; background-size: 14000% 100%;
  filter: brightness(0.5) saturate(0.9);
  transition: opacity 0.55s var(--ease-inout);
}
.heroart__rail--l { left: 0; background-position: 0% 50%; }
.heroart__rail--r { right: 0; background-position: 100% 50%; }
.heroart__rail--c { opacity: 0; }
.stage[data-hover="codezero"] .heroart__rail--m { opacity: 0; }
.stage[data-hover="codezero"] .heroart__rail--c { opacity: 1; }

/* ---- foreground: the SHARP, UNCROPPED characters, fit by HEIGHT (width auto)
   and centred so nothing is ever cropped or quality-reduced. A tiny edge
   feather reveals the colour-matched rail behind for a seamless join. */
.heroart__state {
  position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; z-index: 2;
  transform: translateX(-50%) scale(1.01) translate(var(--art-x, 0px), var(--art-y, 0px));
  transition: transform 0.5s var(--ease-out), opacity 0.55s var(--ease-inout), filter 0.6s var(--ease-out);
  -webkit-mask: url("../assets/edge-halftone-mask.png") center / 100% 100% no-repeat;
          mask: url("../assets/edge-halftone-mask.png") center / 100% 100% no-repeat;
}
.heroart__state--m { opacity: 1; }
.heroart__state--c { opacity: 0; }
/* hover / select CodeZero -> crossfade to his lit composition */
.stage[data-hover="codezero"] .heroart__state--m { opacity: 0; }
.stage[data-hover="codezero"] .heroart__state--c { opacity: 1; }
/* selecting Mihai keeps his composition; whole layer pushes in then fades */
.stage[data-phase="activating"] .heroart__state { transform: translateX(-50%) scale(1.1) translate(2%, 0); }

/* video overlay: identical geometry to the still base, sits on top, but only
   becomes visible once frames are flowing (.is-playing) so a paused/unbuffered
   video never flashes black during a side switch. */
.heroart__vid {
  position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; z-index: 3;
  transform: translateX(-50%) scale(1.01) translate(var(--art-x, 0px), var(--art-y, 0px));
  -webkit-mask: url("../assets/edge-halftone-mask.png") center / 100% 100% no-repeat;
          mask: url("../assets/edge-halftone-mask.png") center / 100% 100% no-repeat;
  opacity: 0; transition: opacity 0.35s var(--ease-inout);
  pointer-events: none;
}
.heroart__vid.is-playing { opacity: 1; }
.stage[data-phase="activating"] .heroart__vid { transform: translateX(-50%) scale(1.1) translate(2%, 0); }

/* ---- ambient WebGL shader layer (flowing energy + scanline shimmer) ---- */
.shaderfx {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: screen; opacity: 0.55;
  transition: opacity 0.7s var(--ease-out);
}
.stage[data-phase="activating"] .shaderfx,
.stage[data-phase="office"] .shaderfx { opacity: 0; }

/* DEFAULT (nothing hovered): both characters dormant in black & white;
   hovering a side lights only that persona (the active state image is full
   colour, the other half of that image is already B&W). */
.stage[data-hover="none"] .heroart__state,
.stage[data-hover="none"] .heroart__rail { filter: grayscale(1) brightness(0.9) contrast(1.03); }
.heroart__rail { transition: opacity 0.55s var(--ease-inout), filter 0.6s var(--ease-out); }

/* gentle idle glow-pulse on the active character — "alive" without video */
.heroart__pulse {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(34% 52% at 34% 52%, rgb(var(--orange-glow) / 0.16), transparent 70%);
  animation: hero-pulse 6s var(--ease-inout) infinite;
}
.stage[data-hover="codezero"] .heroart__pulse {
  background: radial-gradient(34% 52% at 60% 52%, rgb(var(--acid-glow) / 0.16), transparent 70%);
}
@keyframes hero-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.6; } }
.stage[data-hover="none"] .heroart__pulse { opacity: 0; animation: none; }
.stage[data-phase="activating"] .heroart__pulse, .stage[data-phase="office"] .heroart__pulse { opacity: 0; }

/* bottom floor scrim so cards / legend stay legible */
.heroart__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(6,5,9,0.72) 78%);
}
/* top scrim so nav / brand / roster stay legible on any art */
.heroart__top {
  position: absolute; left: 0; right: 0; top: 0; height: 15%;
  background: linear-gradient(180deg, rgba(6,5,9,0.66), rgba(6,5,9,0));
}

/* hover focus — lift the chosen side, shade the other */
.heroart__tint { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease-out); mix-blend-mode: screen; }
.heroart__tint--warm { background: radial-gradient(48% 70% at 33% 48%, rgb(var(--orange-glow) / 0.28), transparent 70%); }
.heroart__tint--acid { background: radial-gradient(52% 76% at 62% 50%, rgb(var(--acid-glow) / 0.3), transparent 72%); }
.stage[data-hover="mihai"] .heroart__tint--warm { opacity: 1; }
.stage[data-hover="codezero"] .heroart__tint--acid { opacity: 1; }

.heroart__shade { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease-out); }
.heroart__shade--r { background: linear-gradient(90deg, transparent 44%, rgba(6,5,9,0.55)); }
.heroart__shade--l { background: linear-gradient(270deg, transparent 44%, rgba(6,5,9,0.5)); }
.stage[data-hover="mihai"] .heroart__shade--r { opacity: 1; }
.stage[data-hover="codezero"] .heroart__shade--l { opacity: 1; }

/* === art-pass 2026-06-12 === */
/* roster strip answers the cursor's side: the lit indicator swells + glows */
.roster i {
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}
.stage[data-hover="mihai"] .roster i.is-on {
  box-shadow: 0 0 14px rgb(var(--orange-glow) / 0.6);
}
.stage[data-hover="codezero"] .roster i.is-cz {
  box-shadow: 0 0 14px rgb(var(--acid-glow) / 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .stage[data-hover="mihai"] .roster i.is-on,
  .stage[data-hover="codezero"] .roster i.is-cz {
    transform: scale(1.08);
  }
}