/* home/hero.css — HERO organism — split from main.css lines 220-315. See docs/ for the reorg record. */
/* ============================================================ HERO ============================================================ */
.hero {
  position:relative; width:100vw; min-height:100vh; min-height:100svh;
  background:var(--color-brand-black); overflow:hidden;
  display:flex; align-items:center; padding-top:var(--nav-height);
}
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__gradient {
  position:absolute; width:160%; height:160%; top:-30%; left:-30%;
  background:
    radial-gradient(ellipse 600px 450px at 18% 50%, rgba(161,0,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 500px 500px at 72% 30%, rgba(70,0,115,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 320px 320px at 50% 82%, rgba(117,0,192,0.05) 0%, transparent 50%);
}
/* The gradient holds still (PR35-Q50): with the typing loop's pause button retired, an endless
   drift would need a WCAG 2.2.2 exception. */
.hero__scrim { position:absolute; inset:0; background:linear-gradient(110deg,rgba(var(--ground),0.72) 0%,rgba(var(--ground),0.38) 50%,rgba(var(--ground),0.58) 100%); }

.hero__inner {
  position:relative; z-index:1; width:100%; max-width:var(--max-content-width);
  margin:0 auto; padding:clamp(2rem,4vw,3rem) var(--gutter);
  display:block;
}
/* PR #35: one left-aligned stage, from the top: attribution, then the two-line heading. */
.hero__stage { position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; }

/* Attribution: name · title (PR35-Q17 retired the "Building in Lima, Peru." badge). */
.hero__attr { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:0.65em; row-gap:0.3rem; margin-bottom:clamp(1.25rem,2.2vw,2rem); }
.hero__attribution { margin:0; font-size:1rem; line-height:1.4; letter-spacing:0.01em; color:var(--color-brand-white); }
.hero__attribution--name { font-weight:var(--fw-bold); }
/* PR #37 (PR37-Q24): the pulsing dot left of the name returns (the pre-PR #35 square, without its Lima label). A
   pseudo-element, so the i18n swap never removes it and it is not part of the name's text. Endless, 2.4 s: a WCAG
   2.2.2 exception registered in the decoration spec v1.3; reduced motion ends it on its last frame (full opacity). */
.hero__attribution--name::before { content:""; display:inline-block; width:0.45rem; height:0.45rem; margin-right:0.6em;
  vertical-align:0.08em; background:var(--color-brand-purple); animation:hero-pulse 2.4s var(--ease-standard) infinite; }
@keyframes hero-pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.hero__attribution--title { font-weight:var(--fw-regular); }
.hero__sep { color:var(--color-brand-purple); font-weight:var(--fw-bold); }

/* Heading: two lines in Archivo Black, upper case; each line's human word in Archivo Italic,
   brand purple. hero.js fits each line to the stage width per language and viewport
   (--l1-size, --l2-size on .hero) and adds .hero--fit; without it the clamp sizes apply
   and the lines wrap. Tracking stays at 0 for the capitals. */
.hero__h1 { margin:0; color:var(--color-brand-white); font-weight:var(--fw-black); line-height:1; letter-spacing:0; text-transform:uppercase; }
.hero__h1-line { display:block; }
.hero__h1-line + .hero__h1-line { margin-top:0.14em; }
.hero__l1 { font-size:var(--l1-size, clamp(2.25rem,8vw,7.5rem)); line-height:1.02; }
.hero__l2 { font-size:var(--l2-size, clamp(2rem,7vw,6.5rem)); line-height:1.08; }
.hero--fit .hero__h1-line { white-space:nowrap; }
/* PR #37 (HX, PR37-Q16, Q23): the verb sits white and italic on a brand-purple block (#FFFFFF on #A100FF, 5.30:1, both
   themes). The block draws once from the left as the hero shows (0.5 s, a one-shot inside the budget); the words are
   in place from the first frame. */
.hero__hook { font-style:italic; color:#FFFFFF; position:relative; z-index:0; padding:0 0.08em; margin:0 0.02em; }
.hero__hook::before { content:""; position:absolute; z-index:-1; left:0; right:0; top:0.12em; bottom:0.04em;
  background:var(--color-brand-purple); transform-origin:left; }
.hero--fit .hero__hook::before { animation:hero-fill .5s cubic-bezier(0,0,.2,1) 1 both; }
@keyframes hero-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
/* PR #37: one element per word (.hero__w). An empty word renders nothing; the verb (.hero__w--brk) starts its own
   row on phones; line 1's opening pair (EL BUEN / GOOD) is a phone-only phrase, so from 768 it is not displayed
   and the heading reads exactly what it shows. */
.hero__w:empty { display:none; }
@media (min-width:768px) { .hero__l1 .hero__pair { display:none; } }

/* HX below 768 (PR37-Q21, Q25, Q28, Q29): small words at 0.45 em, bold; each line opens with a small pair, EL over
   BUEN (italic), its foot on the noun's baseline. In EN the pair is GOOD alone, turned to read upwards, 0.25 em with
   tight tracking, and the nouns grow to 1.2 em, so GOOD stays within the noun's capital height. */
@media (max-width:767px) {
  .hero__w--fn { font-size:0.45em; font-weight:var(--fw-bold); }
  .hero__pair { display:inline-block; vertical-align:baseline; line-height:1; }
  .hero__pair .hero__w--fn { display:block; font-size:0.36em; line-height:1.02; }
  .hero__pair .hero__w--fn:empty { display:none; }
  .hero__w--adj { font-style:italic; }
  html[lang="en"] .hero__pair .hero__w--adj { display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg);
    font-size:0.25em; letter-spacing:0.02em; line-height:1; }
  html[lang="en"] .hero__w--noun { font-size:1.2em; }
}
/* HX from 768 (W3): small words stand vertical, reading upwards, beside the next word; nouns carry a purple underline.
   Line 2's EL and BUEN are two vertical words side by side (the pair dissolves into the line). */
@media (min-width:768px) {
  .hero__pair { display:contents; }
  .hero__w--fn { display:inline-block; writing-mode:vertical-rl; transform:rotate(180deg); font-size:0.3em; font-weight:var(--fw-bold);
    letter-spacing:0.06em; line-height:1; vertical-align:baseline; margin:0 0.08em; }
  .hero__w--noun { text-decoration:underline; text-decoration-color:var(--color-brand-purple); text-decoration-thickness:0.06em; text-underline-offset:0.08em; }
}


/* Value proposition: About's highlight (shared/bridge.css .bridge__heading), size reduced only. */
.hero__sub { margin:clamp(1.75rem,3vw,2.75rem) 0 0; max-width:42rem; }
.hero__sub .hero__sub-hl.bridge__heading { font-size:1.375rem; }

/* The call to see the work: the shared .cta, spaced on the stage's scale. */
.hero__stage > .hero__cta { margin:clamp(1.5rem,2.4vw,2.25rem) 0 0; }

/* While hero.js fits the heading, the hero's content box waits unseen, so nothing on it moves
   after the first paint (a visible box that resizes counts as a layout shift even when its
   content is hidden). If the script never runs, it shows after 3 s regardless. */
html.js .hero:not(.hero--fit) .hero__inner { visibility:hidden; animation:hero-show 0s 3s forwards; }
@keyframes hero-show { to { visibility:visible; } }
/* While hero.js sets the fitted sizes, nothing on the hero eases (see hero.js, fit). */
.hero--sizing, .hero--sizing * { transition:none !important; }

.hero__tags {
  display:none; /* hidden — reserved for future pillar overlay iteration */
  flex-wrap:wrap; gap:0.5rem;
  opacity:1;
}
.hero__tag {
  padding:0.4rem 0.85rem; border:1px solid rgba(var(--ink),0.22);
  color:var(--color-text-muted); font-size:0.8rem; font-weight:var(--fw-medium);
  letter-spacing:0.02em;
  transition:border-color var(--duration-ui) var(--ease-standard), color var(--duration-ui) var(--ease-standard);
}
.hero__tag:hover { border-color:rgba(161,0,255,0.55); color:var(--color-brand-white); }

.hero__right { display:flex; flex-direction:column; gap:clamp(1rem,1.8vw,1.75rem); opacity:1; }
.hero__eyebrow { display:flex; flex-direction:column; align-items:flex-start; gap:0.75rem; font-size:0.8rem; font-weight:var(--fw-semibold); letter-spacing:0.12em; color:var(--color-brand-white); text-transform:uppercase; }
.hero__eyebrow-bar { width:2.5rem; height:3px; background:var(--color-brand-purple); flex-shrink:0; }
.hero__stats { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,1.8vw,1.75rem) clamp(1rem,2vw,2rem); }

/* The CTA (.cta, .cta__label, .cta__icon) lives in shared/cta.css (PR #45, PR45-Q20). */


@media (min-width:768px) and (max-width:1023px) {
  .hero__inner { grid-template-columns:1fr; gap:2.25rem; }
  .hero__right { padding-top:1.5rem; border-top:1px solid var(--color-border-faint); }
}
@media (max-width:767px) {
  .hero { padding-top:var(--nav-height); }
  .hero__inner { grid-template-columns:1fr; gap:1.75rem; padding:3rem var(--gutter) 5rem; align-content:center; }
  /* Phones (JD's line commands): each line's verb starts its own row (PR #37: the break word);
     the attribution stacks, name over title. */
  .hero__w--brk { display:block; width:max-content; }
  .hero__attr { flex-direction:column; align-items:flex-start; row-gap:0.15rem; }
  .hero__attribution { font-size:0.9375rem; }
  .hero__sep { display:none; }
  .hero__sub .hero__sub-hl.bridge__heading { font-size:1.0625rem; }
  .hero__tags { display:none; }
  .hero__right { padding-top:1.5rem; border-top:1px solid var(--color-border-faint); gap:1.25rem; }
  .hero__stats { gap:1rem; }
  .cta__icon { width:1.75rem; height:1.75rem; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; }
  html { scroll-behavior:auto; }
  .hero__h1,.hero__tags,.hero__right { opacity:1; }
}