/* === Hero section: full viewport (HERO-01) ===
   REVIEWS MEDIUM: 100vh first, 100svh second so old browsers use the vh fallback. */
.hero {
  min-height: 100vh;
  min-height: 100svh; /* svh = address-bar-shown height, CONSTANT — never reflows mid-scroll
                         (dvh is dynamic and re-resizes as the bar hides → Android jitter). */
  --hero-copy-y: -80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4xl) 0 var(--space-3xl);
  position: relative;
  overflow: visible;
}

/* === Background video + dark tint overlay === */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  opacity: 0.72;
  z-index: 1;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 48px between name label, headline, subtitle */
  text-align: left;
  position: relative;
  z-index: 2;
  transform: translateY(var(--hero-copy-y));
}

/* === Name label === */
.hero-name-label {
  font-family: var(--font-mono);
  /* minhpham hero name "Minh Pham" (.h6) is 1rem (16px) on desktop — was 11px. */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* === Headline (h1 wrapper + variant spans) === */
.hero-h1 {
  margin: 0; /* reset h1 default */
  font-weight: 600; /* fallback weight; .hero-headline overrides */
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--color-text);
}

/* Per-word span: needed for the GSAP stagger; inline-block so y-transforms work without breaking text flow */
.hero-headline .word {
  display: inline-block;
  margin-right: 0.25em; /* preserves visual word spacing since spans collapse whitespace */
}

.hero-headline .word:last-child {
  margin-right: 0;
}

/* Accent keywords (HERO-02) — render in accent orange */
.hero-headline .accent {
  color: var(--color-accent);
}

/* Controlled 3-line layout: block forces the three lines on desktop. ≤768px
   goes inline so the Hero reflows naturally on phones (mirrors the
   .reveal-line desktop/mobile pattern in main.css). Whitespace between the
   .hero-line spans in the HTML supplies the inter-line space when inline. */
.hero-headline .hero-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .hero-headline .hero-line {
    display: inline;
    white-space: normal;
  }
}

/* === Subtitle === */
.hero-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 720px;
}

/* === Hero lens overlay — orange circle that tracks the cursor, reveals honest text === */
/* Co-located overlay: inset:0 makes this exactly the size + position of
   .hero-inner at every screen size — no compensation math, no drift. */
.hero-lens {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  z-index: 3;
  pointer-events: none;
}

.hero-lens-inner {
  height: 100%;
  padding: 0 var(--content-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  text-align: left;
}

.hero-lens .hero-name-label {
  color: var(--color-bg);
}

.hero-lens .hero-headline {
  color: var(--color-bg);
}

.hero-lens .hero-headline .accent {
  color: rgba(var(--color-lens-text-rgb), 0.6);
}

.hero-lens .hero-subtitle {
  color: rgba(var(--color-lens-text-rgb), 0.8);
}

/* Desktop hover lens: bleed the orange field far past the text box so the
   cursor-tracked circle is NEVER clipped at an edge (the masked circle limits what
   paints, so the bleed is free and never leaks). lens-inner is pushed back 1000px
   so the honest text stays pixel-aligned with the visible text. Scoped >1024px;
   ≤1024 is the mobile hold path, where this lens is relocated into .region-honest
   (single flood + single mask) and positioned by JS — so it must NOT be full-bleed
   there. */
@media (min-width: 1025px) {
  .hero-lens { inset: -1000px; }
  .hero-lens-inner { position: absolute; inset: 1000px; }
}

/* On touch, mask-size:0 keeps the lens invisible at rest.
   JS spreads it on hold. Only suppress on reduced-motion or honest mode. */

@media (prefers-reduced-motion: reduce) {
  .hero-lens { display: none; }
}

body.mode-honest .hero-lens {
  display: none;
}

:root.theme-light .hero-lens {
  background: var(--color-loader-accent);
}

/* === Dual-Mode Wiring (HERO-04) — scoped through .hero (REVIEWS LOW concern) ===
   These rules apply ONLY to data-professional / data-honest descendants of .hero.
   Other phases (about, projects, timeline) will declare their own scoped rules. */
.hero [data-professional] { display: block; }
.hero [data-honest]       { display: none; }

body.mode-honest .hero [data-professional] { display: none; }
body.mode-honest .hero [data-honest]       { display: block; }

/* === will-change applied ONLY during animation (REVIEWS priority 7) ===
   JS adds .is-animating to .hero-inner before the timeline runs and
   removes it in onComplete. This avoids permanent GPU layers on every word. */
.hero-inner.is-animating .hero-name-label,
.hero-inner.is-animating .hero-headline .word,
.hero-inner.is-animating .hero-subtitle {
  will-change: transform, opacity;
}

/* === Responsive scale (UI-SPEC Typography) === */
@media (max-width: 1024px) {
  .hero-headline { font-size: clamp(54px, 9vw, 92px); }
}

@media (max-width: 768px) {
  .hero {
    padding: var(--space-3xl) 0 var(--space-2xl); /* tighter vertical on mobile */
    /* visible so the hold-reveal flood bleeds into the rest of reveal-region A
       (the video is inset:0 = hero-sized, so it can't leak). */
    overflow: visible;
  }
  .hero-inner,
  .hero-lens-inner {
    gap: var(--space-xl); /* 32px on mobile — lens mirrors base so the
                             revealed headline sits at the same Y */
  }
  .hero-headline {
    font-size: var(--reveal-fs);          /* shared with about + experience */
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  .hero-subtitle {
    font-size: 16px;
  }

}

@media (max-width: 480px) {
  .hero-headline {
    font-size: var(--reveal-fs);
  }
}

/* === Reduced-motion variant (REVIEWS priority 4) ===
   Belt-and-braces: ensures content is fully visible even if JS runs late
   or the reduced-motion JS branch is somehow skipped. JS still short-circuits
   the GSAP timeline; this CSS only takes effect if a tween is applied anyway. */
@media (prefers-reduced-motion: reduce) {
  .hero-inner .hero-name-label,
  .hero-inner .hero-headline .word,
  .hero-inner .hero-subtitle {
    opacity: 1 !important;
    transform: none !important;
  }

}