/* =========================================================
   hero-intro.css — Cinematic intro overlays for the hero
   ---
   These rules are PURELY ADDITIVE. They overlay the existing
   .p-hero section with: WANTED stamp, scarlet line trace,
   convergent mire, dust wash, black curtain.
   The existing data-render="hero" content stays underneath
   and is rendered by portfolio-app.js::renderHero() as before.

   z-layers inside .p-hero (bottom → top):
     0  particles canvas
     1  .p-hero__bg-glyph (existing G)
     1  .hero-overlay__dust (added)
     2  .hero-overlay__line (added — scarlet trace)
     3  .hero-overlay__wanted (added — WANTED stamp)
     5  .p-hero__inner (existing content, kept above ambience)
     9  .hero-overlay__mire (added — CAD mire during intro)
    10  .hero-overlay__curtain (added — black curtain fades out)
   ========================================================= */

/* Ensure overlay context */
.p-hero { isolation: isolate; }
.p-hero__inner { position: relative; z-index: 5; }

/* Dust wash — radial scarlet ambience */
.hero-overlay__dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, var(--tint-scarlet) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, var(--tint-scarlet) 0%, transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* Scarlet line — drawn left to right during intro */
.hero-overlay__line {
  position: absolute;
  top: 50%; left: 50%;
  width: 0;
  height: 1px;
  transform: translate(-50%, -50%);
  background: var(--scarlet-500);
  box-shadow: 0 0 14px var(--scarlet-glow);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.p-hero.is-intro-firing .hero-overlay__line {
  animation: hero-line-trace 720ms 700ms var(--ease-out-expo) forwards;
}
@keyframes hero-line-trace {
  0%   { width: 0;     opacity: 1; }
  60%  { width: 100vw; opacity: 1; }
  100% { width: 100vw; opacity: 0.18; }
}

/* WANTED stamp — top, slightly rotated */
.hero-overlay__wanted {
  position: absolute;
  top: clamp(56px, 9vh, 88px);
  left: 50%;
  transform: translateX(-50%) rotate(-2.5deg);
  z-index: 3;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: clamp(36px, 7vw, 84px);
  letter-spacing: 0.18em;
  color: var(--scarlet-500);
  text-transform: uppercase;
  padding: 6px 28px 10px;
  border: 2px solid var(--scarlet-500);
  background: rgba(13, 10, 8, 0.45);
  box-shadow: inset 0 0 0 6px var(--bg), 0 0 0 1px var(--scarlet-700);
  filter: contrast(1.05);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.p-hero.is-intro-firing .hero-overlay__wanted {
  animation: hero-stamp-down 480ms 1080ms var(--ease-bounce) forwards;
}
@keyframes hero-stamp-down {
  0%   { opacity: 0; transform: translateX(-50%) rotate(-2.5deg) scale(1.6); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 0.92; transform: translateX(-50%) rotate(-2.5deg) scale(1); }
}
@media (max-width: 640px) {
  .hero-overlay__wanted { font-size: 32px; padding: 4px 18px 8px; top: 56px; }
}

/* Mire CAD — circle + crosshair + ticks, converges to center */
.hero-overlay__mire {
  position: absolute;
  top: 50%; left: 50%;
  width: 360px; height: 360px;
  max-width: 60vw;
  max-height: 60vw;
  transform: translate(-50%, -50%) scale(4);
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  color: var(--ink-50);
}
.hero-overlay__mire svg { width: 100%; height: 100%; display: block; }
.p-hero.is-intro-firing .hero-overlay__mire {
  animation: hero-mire-converge 800ms 220ms var(--ease-out-expo) forwards;
}
@keyframes hero-mire-converge {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(5); }
  40%  { opacity: 1; }
  85%  { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); color: var(--ink-50); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(0.4); color: var(--scarlet-500); }
}

/* Black curtain — covers everything, fades out fast */
.hero-overlay__curtain {
  position: absolute;
  inset: 0;
  background: var(--ink-900);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
}
.p-hero.is-intro-firing .hero-overlay__curtain {
  opacity: 1;
  animation: hero-curtain-out 280ms 200ms var(--ease-out-quart) forwards;
}
@keyframes hero-curtain-out {
  to { opacity: 0; }
}

/* Glyph parallax — applied via inline transform set by hero-intro.js */
.p-hero__bg-glyph { will-change: transform; }

/* Reduced motion: all introduce animations disabled, overlays static */
@media (prefers-reduced-motion: reduce) {
  .p-hero.is-intro-firing .hero-overlay__wanted,
  .p-hero.is-intro-firing .hero-overlay__line,
  .p-hero.is-intro-firing .hero-overlay__mire,
  .p-hero.is-intro-firing .hero-overlay__curtain { animation: none; }
  .hero-overlay__wanted { opacity: 0.85; }
  .hero-overlay__mire,
  .hero-overlay__curtain { display: none; }
  .hero-overlay__line { opacity: 0.18; width: 100%; }
}