/*
 * Homepage hero focus candidate, 20 August 2026.
 *
 * This is deliberately scoped to the homepage stage. It keeps the route
 * selector interactive, but gives the active proof image the visual priority
 * that the first viewport needs. The existing stylesheet remains the shared
 * shell; this file is a reversible candidate layer until visual acceptance.
 */
.narrative-hero__stage--focus .opportunity-field {
  aspect-ratio: 1.08 / 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "viewport"
    "nodes"
    "telemetry";
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.narrative-hero__stage--focus .opportunity-field .signal-deck__viewport {
  margin: 16px 16px 12px;
}

.narrative-hero__stage--focus .opportunity-field .signal-deck__active-copy {
  max-width: 22rem;
}

.narrative-hero__stage--focus .opportunity-field .signal-deck__active {
  background-color: #061214;
  background-position: center, center, center top;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, contain;
}

.narrative-hero__stage--focus .opportunity-field .signal-deck__nodes {
  display: grid;
  gap: 8px;
  grid-area: nodes;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  inset: auto;
  padding: 0 16px 14px;
  position: relative;
  z-index: 2;
}

.narrative-hero__stage--focus .opportunity-field .signal-deck__node {
  min-height: 54px;
}

/* Hero-film candidate: a single calm, non-looping evidence montage replaces
   the first-screen selector. The interactive Live Labs remain in their own
   section further down the page. */
.narrative-hero__stage--film {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.narrative-hero__stage--film .signal-deck {
  display: none !important;
}

.home-hero-film {
  background: #061214;
  border: 1px solid rgba(89, 226, 198, .22);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .035);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.home-hero-film::after {
  background: linear-gradient(180deg, transparent 63%, rgba(3, 13, 16, .68));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.home-hero-film__video {
  display: block;
  height: 100%;
  object-fit: cover !important;
  width: 100%;
}

/* Approved neon mark: keep the source image intact and present it as a calm,
   non-animated hero surface. The image itself carries the glow and reflection,
   so no extra overlay is placed over the approved artwork. */
.narrative-hero__stage--still {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

.home-hero-image {
  background: #020506;
  border: 1px solid rgba(89, 226, 198, .22);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .035);
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.home-hero-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* The approved neon mark becomes a section-level atmosphere here rather than
   a small logo card. The copy remains the readable anchor; the image occupies
   the opposite side and dissolves into the dark portfolio field. */
.personal-position.personal-position--neon {
  align-items: stretch;
  background:
    radial-gradient(circle at 78% 42%, rgba(var(--accent-blue-rgb), .16), transparent 27%),
    radial-gradient(circle at 92% 72%, rgba(var(--accent-green-rgb), .12), transparent 25%),
    linear-gradient(112deg, rgba(4, 10, 12, .98) 0%, rgba(4, 10, 12, .9) 48%, rgba(3, 8, 10, .76) 100%);
  border-block: 1px solid rgba(var(--accent-green-rgb), .2);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  isolation: isolate;
  max-width: none;
  min-height: clamp(560px, 50vw, 760px);
  overflow: hidden;
  padding-bottom: clamp(72px, 9vw, 128px);
  padding-top: clamp(72px, 9vw, 128px);
  position: relative;
}

.personal-position--neon::before {
  background-image: linear-gradient(rgba(78, 231, 209, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 231, 209, .045) 1px, transparent 1px);
  background-size: 84px 84px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent, #000 33%, #000 100%);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.personal-position--neon .personal-position__visual {
  inset: 0;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transform: scale(1.035);
  transition: opacity 1100ms ease, transform 1500ms cubic-bezier(.22, 1, .36, 1);
  z-index: -1;
}

.personal-position--neon[data-personal-state="visible"] .personal-position__visual {
  opacity: 1;
  transform: scale(1);
}

.personal-position--neon .personal-position__visual::before {
  background: radial-gradient(circle at 73% 44%, rgba(23, 183, 255, .24), transparent 32%), radial-gradient(circle at 86% 68%, rgba(25, 246, 210, .2), transparent 28%);
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.personal-position--neon .personal-position__visual::after {
  background: linear-gradient(90deg, rgba(4, 10, 12, .04) 0%, rgba(4, 10, 12, .04) 34%, rgba(4, 10, 12, .2) 48%, rgba(4, 10, 12, .72) 70%, rgba(4, 10, 12, .96) 84%, rgba(4, 10, 12, 1) 100%), linear-gradient(180deg, rgba(2, 5, 6, .12), transparent 18%, transparent 82%, rgba(2, 5, 6, .18));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.personal-position--neon .personal-position__image {
  align-items: flex-end;
  display: flex;
  height: 100%;
  margin: 0;
  width: 100%;
}

.personal-position--neon .personal-position__image img {
  display: block;
  filter: saturate(1.2) contrast(1.06) brightness(1.06);
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  width: 100%;
}

/* The contained 16:9 source ends before the full-width section on wide
   screens. Fade that real image edge into the section grid instead of
   leaving a hard vertical seam between two surfaces. */
@media (min-width: 821px) {
  .personal-position--neon .personal-position__image img {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0, 0, 0, .95) 73%, rgba(0, 0, 0, .42) 90%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0, 0, 0, .95) 73%, rgba(0, 0, 0, .42) 90%, transparent 100%);
    width: auto;
  }
}

.personal-position--neon .personal-position__copy {
  align-self: center;
  grid-column: 2;
  max-width: 680px;
  position: relative;
  z-index: 3;
}

.personal-position--neon .personal-position__copy p:not(.eyebrow) {
  max-width: 600px;
}

@media (max-width: 820px) {
  .personal-position.personal-position--neon {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(260px, 42vw);
    min-height: 0;
  }

  .personal-position--neon .personal-position__visual {
    grid-column: 1;
    grid-row: 2;
    inset: auto;
    margin: 34px calc(var(--narrative-edge) * -1) calc(clamp(72px, 9vw, 128px) * -1);
    min-height: 260px;
    position: relative;
    width: calc(100% + (var(--narrative-edge) * 2));
  }

  .personal-position--neon .personal-position__image img {
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: 29% center;
    width: 100%;
  }

  .personal-position--neon .personal-position__visual::after {
    background: linear-gradient(180deg, rgba(4, 10, 12, 1) 0%, rgba(4, 10, 12, .72) 18%, rgba(4, 10, 12, .12) 55%, rgba(4, 10, 12, .7) 100%);
  }

  .personal-position--neon .personal-position__copy {
    grid-column: 1;
    grid-row: 1;
    max-width: 680px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .personal-position--neon .personal-position__visual,
  .personal-position--neon[data-personal-state="visible"] .personal-position__visual {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1080px) {
  .narrative-hero__stage--film {
    order: -1;
  }

  .narrative-hero__stage--still {
    order: -1;
  }
}

@media (max-width: 760px) {
  .narrative-hero__stage--film {
    aspect-ratio: 16 / 9;
    order: -1;
  }

  .narrative-hero__stage--still {
    aspect-ratio: 16 / 9;
    order: -1;
  }

  .narrative-hero__stage--focus .opportunity-field {
    aspect-ratio: 1 / 1.16;
    grid-template-rows: auto minmax(270px, 1fr) auto auto;
  }

  .narrative-hero__stage--focus .opportunity-field .signal-deck__viewport {
    margin: 12px 12px 10px;
  }

  .narrative-hero__stage--focus .opportunity-field .signal-deck__nodes {
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(48px, 1fr));
    padding: 0 12px 12px;
  }

  .narrative-hero__stage--focus .opportunity-field .signal-deck__node {
    min-height: 48px;
  }
}