/* new-home HERO - concentric rings of real footage around the headline (owner: agent 2).
 * Layout: the section is tall (the scroll runway of the camera push); the stage inside is sticky and
 * exactly one viewport high. Everything that moves is transform/opacity only (see sections/hero.js). */

.nh-hero {
  --hero-bg: var(--nh-bg, #050808);
  --hero-ink: var(--nh-heading, #fff);
  --hero-text: var(--nh-text, #f3f6f5);
  --hero-muted: var(--nh-text-muted, #b3bdbb);
  --hero-accent: var(--nh-accent, #62d6cd);
  --hero-line: rgba(233, 242, 240, 0.16);
  --hero-tile-bg: #0c1413;
  --hero-tile-edge: rgba(255, 255, 255, 0.10);
  --hero-tile-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85);
  --hero-shade: radial-gradient(ellipse 34% 36% at 50% var(--hero-cy, 50%), rgba(5, 8, 8, 0.86) 0%, rgba(5, 8, 8, 0.62) 45%, rgba(5, 8, 8, 0) 100%);
  --hero-glow: radial-gradient(circle, rgba(47, 186, 179, 0.20) 0%, rgba(47, 186, 179, 0.07) 38%, rgba(47, 186, 179, 0) 70%);
  --hero-vignette: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.62) 100%);
  position: relative;
  height: 250vh;
  min-height: 250vh;
  background: var(--hero-bg);
  color: var(--hero-text);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nh-hero {
    --hero-line: rgba(12, 18, 17, 0.10);
    --hero-tile-bg: #e7ecea;
    --hero-tile-edge: rgba(12, 18, 17, 0.08);
    --hero-tile-shadow: 0 30px 60px -30px rgba(12, 30, 28, 0.45);
    --hero-shade: radial-gradient(ellipse 34% 36% at 50% var(--hero-cy, 50%), rgba(251, 252, 251, 0.92) 0%, rgba(251, 252, 251, 0.7) 45%, rgba(251, 252, 251, 0) 100%);
    --hero-glow: radial-gradient(circle, rgba(19, 152, 154, 0.16) 0%, rgba(19, 152, 154, 0.05) 38%, rgba(19, 152, 154, 0) 70%);
    --hero-vignette: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 58%, rgba(210, 222, 219, 0.55) 100%);
  }
}
:root[data-theme="light"] .nh-hero {
  --hero-line: rgba(12, 18, 17, 0.10);
  --hero-tile-bg: #e7ecea;
  --hero-tile-edge: rgba(12, 18, 17, 0.08);
  --hero-tile-shadow: 0 30px 60px -30px rgba(12, 30, 28, 0.45);
  --hero-shade: radial-gradient(ellipse 34% 36% at 50% var(--hero-cy, 50%), rgba(251, 252, 251, 0.92) 0%, rgba(251, 252, 251, 0.7) 45%, rgba(251, 252, 251, 0) 100%);
  --hero-glow: radial-gradient(circle, rgba(19, 152, 154, 0.16) 0%, rgba(19, 152, 154, 0.05) 38%, rgba(19, 152, 154, 0) 70%);
  --hero-vignette: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 58%, rgba(210, 222, 219, 0.55) 100%);
}

/* ---------- the stage ---------- */
.nh-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}
/* film vignette on top of the footage, under the words */
.nh-hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--hero-bg) 0, transparent 150px), var(--hero-vignette);
}

.nh-hero__space {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1000px;
  perspective-origin: 50% var(--hero-cy, 50%);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.nh-hero__world {
  position: absolute;
  left: 50%;
  top: var(--hero-cy, 50%);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.nh-hero__ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.nh-hero__ring { transform-style: flat; }

/* the orbit: a hairline ellipse through the tile centres - the concentric drawing under the footage */
.nh-hero__orbit {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 1px solid var(--hero-line);
}

.nh-hero__tile {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--hero-tile-bg);
  box-shadow: var(--hero-tile-shadow);
  backface-visibility: hidden;
}
.nh-hero__ring--round .nh-hero__tile { border-radius: 50%; }
.nh-hero__stage.is-running .nh-hero__tile { will-change: transform; }

.nh-hero__img,
.nh-hero__vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--nh-ease-out, ease-out);
  /* the originals are ungraded: a light film grade, baked into the tile's own layer (it never animates) */
  filter: var(--nh-grade-filter, contrast(1.06) saturate(0.92) brightness(0.98));
}
.nh-hero__img.is-graded, .nh-hero__vid.is-graded { filter: none; }
.nh-hero__img.is-in,
.nh-hero__vid.is-in { opacity: 1; }
.nh-hero__vid { z-index: 1; }

/* a soft light edge on every tile, like glass catching the light */
.nh-hero__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hero-tile-edge);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

/* the CoCentric wheel's six parts, riding one orbit around the goal (the headline) */
.nh-hero__ring--wheel .nh-hero__orbit { border-style: dashed; border-color: var(--hero-line); }
.nh-hero__label {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: var(--nh-weight-medium, 500);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hero-text);
  /* QA 2026-09-27: 0.72 let a bright tile behind a label pull 12 px caps to 3.7:1 - near-opaque plate keeps it >= 4.5 */
  background: var(--hero-label-bg, rgba(8, 14, 13, 0.9));
  box-shadow: inset 0 0 0 1px var(--hero-tile-edge), 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  backface-visibility: hidden;
}
.nh-hero__label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hero-accent);
  box-shadow: 0 0 10px var(--hero-accent);
}
:root[data-theme="light"] .nh-hero { --hero-label-bg: rgba(255, 255, 255, 0.95); --hero-door-bg: rgba(255, 255, 255, 0.82); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .nh-hero { --hero-label-bg: rgba(255, 255, 255, 0.95); --hero-door-bg: rgba(255, 255, 255, 0.82); } }
@media (max-width: 639px) {
  .nh-hero__label { font-size: 0.625rem; letter-spacing: 0.12em; padding: 5px 10px 5px 8px; gap: 6px; }
}

/* depth of field: the nearest ring is out of focus (static - blur is never animated) */
/* (no blur: a filter on a layer that moves every frame is a repaint every frame - F8. Depth reads from size + dimming.) */

/* ---------- the portal: the round window of footage the camera flies into ---------- */
.nh-hero__portal {
  position: absolute;
  left: 50%;
  top: var(--hero-cy, 50%);
  z-index: 3;
  overflow: hidden;
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.035);
  background: var(--hero-tile-bg);
  box-shadow: 0 0 0 1px var(--hero-tile-edge);
  pointer-events: none;
}
/* no will-change on the portal: it grows 30x, and a promoted layer would keep its tiny first raster (blurry at full size) */
.nh-hero__portal-in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(1.12); }
.nh-hero__portal-in::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.45) 72%);
}

/* the CoVince mark at the rings' centre - only where the words are not the centre (portrait phones) */
.nh-hero__core { display: none; }
.nh-hero__stage--portrait .nh-hero__core[data-show] {
  position: absolute;
  left: 50%;
  top: var(--hero-cy, 30%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 186, 179, 0.22) 0%, rgba(47, 186, 179, 0) 70%);
  box-shadow: 0 0 0 1px var(--hero-line);
}
.nh-hero__core-mark { width: 52px; height: 52px; }

/* ---------- centre: the glow, the reading shade, the words ---------- */
.nh-hero__glow {
  position: absolute;
  left: 50%;
  top: var(--hero-cy, 50%);
  z-index: 0;
  width: min(120vmin, 1200px);
  height: min(120vmin, 1200px);
  transform: translate(-50%, -50%);
  background: var(--hero-glow);
  opacity: 0.55;
  pointer-events: none;
}
.nh-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--hero-shade);
  pointer-events: none;
}

.nh-hero__center {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: calc(var(--nh-nav-h, 64px) + 8px) var(--nh-gutter, 16px) 72px;
  pointer-events: none;
}
.nh-hero__center.is-gone { visibility: hidden; }
.nh-hero__copy {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: min(52rem, 100%);
  transform-origin: 50% 50%;
}

.nh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 var(--nh-space-5, 24px);
  font-size: var(--nh-fs-xs, 0.8125rem);
  font-weight: var(--nh-weight-medium, 500);
  letter-spacing: var(--nh-tracking-eyebrow, 0.18em);
  text-transform: uppercase;
  color: var(--hero-text);
}
.nh-hero__mark { width: 28px; height: 28px; flex: none; }

.nh-hero__title {
  margin: 0;
  font-family: var(--nh-font-display, inherit);
  font-size: clamp(2.2rem, 0.9rem + 3.9vw, 4.5rem);
  font-weight: var(--nh-weight-semibold, 600);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--hero-ink);
  text-wrap: balance;
}
.nh-hero__line { display: block; }
.nh-hero__line--accent {
  color: var(--hero-accent);
  font-weight: var(--nh-weight-light, 300);
  font-style: normal;
}
.nh-hero__lead {
  margin: var(--nh-space-5, 24px) 0 0;
  max-width: 36rem;
  font-size: var(--nh-fs-lg, 1.2rem);
  line-height: 1.55;
  color: var(--hero-text);
  text-wrap: pretty;
}
.nh-hero__doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nh-space-3, 12px);
  margin-top: var(--nh-space-6, 32px);
}
.nh-hero__door { min-width: 13.5rem; justify-content: center; }
.nh-hero__door.nh-btn--secondary {
  background: var(--hero-door-bg, rgba(8, 14, 13, 0.62));
}

/* entrance: words rise in (never opacity 0 - the headline stays an LCP candidate from the first frame) */
.nh-hero .nh-hero__eyebrow,
.nh-hero .nh-hero__line,
.nh-hero .nh-hero__lead,
.nh-hero .nh-hero__doors {
  transform: translateY(calc(18px * var(--nh-move, 1)));
  opacity: 0.02;
  transition: transform 1.2s var(--nh-ease-cinema, ease-out), opacity 0.9s ease-out;
}
.nh-hero .nh-hero__line { transform: translateY(calc(0.3em * var(--nh-move, 1))); }
.nh-hero.is-in .nh-hero__eyebrow,
.nh-hero.is-in .nh-hero__line,
.nh-hero.is-in .nh-hero__lead,
.nh-hero.is-in .nh-hero__doors { transform: none; opacity: 1; }
.nh-hero.is-in .nh-hero__eyebrow { transition-delay: 0.05s; }
.nh-hero.is-in .nh-hero__line { transition-delay: 0.15s; }
.nh-hero.is-in .nh-hero__line--accent { transition-delay: 0.3s; }
.nh-hero.is-in .nh-hero__lead { transition-delay: 0.5s; }
.nh-hero.is-in .nh-hero__doors { transition-delay: 0.65s; }

/* ---------- the scroll cue ---------- */
.nh-hero__cue {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 12px;
  transform: translateX(-50%);
  font-size: var(--nh-fs-2xs, 0.75rem);
  font-weight: var(--nh-weight-medium, 500);
  letter-spacing: var(--nh-tracking-eyebrow, 0.18em);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hero-text);
}
.nh-hero__cue::before {
  content: "";
  position: absolute;
  inset: -40px -90px -30px;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, var(--hero-bg) 0%, transparent 100%);
  opacity: 0.85;
}
.nh-hero__cue:hover { color: var(--hero-text); text-decoration: none; }
.nh-hero__cue-line {
  position: relative;
  width: 1px;
  height: 36px;
  overflow: hidden;
  background: var(--hero-line);
}
.nh-hero__cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 14px;
  background: currentColor;
  animation: nh-hero-cue 2.4s var(--nh-ease-in-out, ease-in-out) infinite;
}
@keyframes nh-hero-cue {
  from { transform: translateY(-14px); }
  to { transform: translateY(36px); }
}

/* ---------- phones ---------- */
@media (max-width: 639px) {
  .nh-hero { height: 200vh; min-height: 200vh; }
  .nh-hero {
    --hero-shade: radial-gradient(ellipse 80% 42% at 50% var(--hero-cy, 50%), rgba(5, 8, 8, 0.9) 0%, rgba(5, 8, 8, 0.7) 60%, rgba(5, 8, 8, 0) 100%);
  }
  .nh-hero__center { padding-top: calc(var(--nh-nav-h, 64px) + 4px); padding-bottom: 20px; }
  .nh-hero__cue { display: none; }
  .nh-hero__lead { font-size: 0.9375rem; line-height: 1.5; margin-top: var(--nh-space-4, 16px); }
  .nh-hero__doors { margin-top: var(--nh-space-5, 24px); }
  .nh-hero__title { font-size: clamp(2.35rem, 1.2rem + 6vw, 3rem); }
  .nh-hero__eyebrow { margin-bottom: var(--nh-space-4, 16px); font-size: 0.6875rem; letter-spacing: 0.14em; }
  .nh-hero__lead { font-size: 1rem; }
  .nh-hero__doors { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
  .nh-hero__door { min-width: 0; width: 100%; }
  .nh-hero__tile { border-radius: 14px; }
}
@media (max-width: 639px) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nh-hero {
    --hero-shade: radial-gradient(ellipse 80% 42% at 50% var(--hero-cy, 50%), rgba(251, 252, 251, 0.94) 0%, rgba(251, 252, 251, 0.75) 60%, rgba(251, 252, 251, 0) 100%);
  }
}
@media (max-width: 639px) {
  :root[data-theme="light"] .nh-hero {
    --hero-shade: radial-gradient(ellipse 80% 42% at 50% var(--hero-cy, 50%), rgba(251, 252, 251, 0.94) 0%, rgba(251, 252, 251, 0.75) 60%, rgba(251, 252, 251, 0) 100%);
  }
}
/* short landscape screens: the words need the room */
@media (max-height: 560px) and (min-width: 640px) {
  .nh-hero__lead { display: none; }
  .nh-hero__eyebrow { margin-bottom: var(--nh-space-3, 12px); }
  .nh-hero__doors { margin-top: var(--nh-space-4, 16px); }
}

/* ---------- reduced motion: a still, composed ring picture; words simply fade in ---------- */
.nh-hero--still { height: auto; min-height: 100vh; min-height: 100svh; }
.nh-hero--still .nh-hero__stage { position: relative; }
.nh-hero--still .nh-hero__cue-line::after { animation: none; transform: translateY(11px); }
.nh-hero--still .nh-hero__eyebrow,
.nh-hero--still .nh-hero__line,
.nh-hero--still .nh-hero__lead,
.nh-hero--still .nh-hero__doors { transform: none; transition: opacity 0.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .nh-hero__img, .nh-hero__vid { transition: opacity 0.8s ease-out; }
}

/* ---------- forced colours: the decoration steps aside, the words stay ---------- */
@media (forced-colors: active) {
  .nh-hero__space, .nh-hero__glow, .nh-hero__shade, .nh-hero__stage::before { display: none; }
}