/* hero.css — hero section (full-width pixel headline over flat ground,
   lede + actions + corner-anchored telemetry, unveiled media panel with
   HUD atmosphere) plus the proof-rail marquee that closes the hero.

   Composition contract (round 3): the headline and the hardware macro
   never overlap. Type lives on the near-black ground; the media panel is
   lit, not veiled — edge shading only where HUD labels need it, plus a
   radial focal lift on the gimbal lens and light-pipe. */

.hero {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: 7.4rem;
  padding-bottom: 0;
}

/* --- Headline block: full content width, flat ground only --------------- */
.hero-head {
  position: relative;
}

.hero-context {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1.3rem, 2.6vh, 2.2rem);
  letter-spacing: 0.18em;
}

.hero-context::before {
  width: 2.5rem;
  height: 1px;
  background: var(--phosphor);
  content: "";
}

.hero h1 {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(3rem, 6.6vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.88;
  text-transform: uppercase;
}

.hero h1 .hero-line {
  display: block;
  white-space: nowrap;
}

.hero h1 .hero-line-base {
  color: var(--paper);
}

.hero h1 .hero-line-accent {
  color: var(--phosphor);
}

/* Corner-anchored micro instrument riding the negative space beside the
   second headline line — mono, letter-spaced, alive (JS stamps the date). */
.hero-head-meta {
  position: absolute;
  right: var(--page-gutter);
  bottom: 0.4rem;
  display: grid;
  gap: 0.55rem;
  justify-items: end;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.55rem;
  letter-spacing: 0.26em;
  text-align: right;
  text-transform: uppercase;
}

.hero-head-meta span {
  display: block;
}

/* --- Lower deck: copy column + media panel ------------------------------ */
.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: clamp(2rem, 4vw, 5rem);
  margin-top: clamp(2.1rem, 4.4vh, 3.5rem);
  min-width: 0;
}

.hero-copy {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 0.4rem;
  padding-bottom: 2.1rem;
}

.hero-lede {
  /* Two auto margins (here + telemetry) split the column's spare height
     evenly, centering the lede + actions block against the media panel. */
  margin-top: auto;
  max-width: 34rem;
  color: var(--paper-soft);
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.3vw, 1.26rem);
  font-weight: 380;
  letter-spacing: 0.004em;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: clamp(1.9rem, 3.6vh, 2.8rem);
}

.hero-actions .primary-action {
  min-width: 12.2rem;
}

.text-action {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  width: max-content;
  color: var(--paper);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.text-action span {
  color: var(--phosphor);
  font-family: var(--display);
  font-size: 1rem;
  transition: transform var(--dur-1) var(--ease-glide);
}

.text-action:hover span {
  transform: translate(2px, 2px);
}

/* Telemetry row — pinned to the composition's bottom-left corner so the
   mono instruments align with the media figcaption bar across the gutter.
   The live clock cell only appears once JS is running. */
.hero-telemetry {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.6rem, 2.6vw, 3.1rem);
  margin-top: auto;
  padding-top: 1.05rem;
  border-top: 1px solid var(--hairline-soft);
}

.telemetry-cell {
  display: grid;
  gap: 0.5rem;
}

.telemetry-label {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.52rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.telemetry-value {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--paper-soft);
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.telemetry-dot {
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--phosphor);
  box-shadow: 0 0 0 3px var(--phosphor-soft);
  animation: telemetry-pulse 2.4s var(--ease-glide) infinite;
}

@keyframes telemetry-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 3px var(--phosphor-soft);
  }

  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 1px var(--phosphor-faint);
  }
}

.no-js .telemetry-clock-cell {
  display: none;
}

/* --- Media panel — the money shot, lit not veiled ----------------------- */
.hero-media {
  position: relative;
  z-index: var(--z-media);
  align-self: stretch;
  min-height: clamp(23rem, 44vh, 40rem);
  margin-right: calc(var(--page-gutter) * -1);
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-bottom: 0;
  background: var(--panel);
  isolation: isolate;
}

.hero-picture {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  transform: scale(1.06);
  will-change: transform;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 46%;
  filter: saturate(0.88) contrast(1.07) brightness(0.99);
  transform: scale(1.015);
}

/* Edge shading only — a top band for the HUD row, a bottom band for the
   figcaption bar, a whisper on the left seam. The center stays open. */
.hero-media-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.5), transparent 15%),
    linear-gradient(0deg, rgba(var(--ink-rgb), 0.52), transparent 17%),
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.26), transparent 18%);
  mix-blend-mode: multiply;
}

/* Lighting wash — radial focal lifts keyed to the gimbal lens and the
   phosphor light-pipe so the hardware punches instead of reading flat. */
.hero-media-atmos {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}

.hero-media-atmos::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(26rem 20rem at 76% 58%, rgba(var(--paper-rgb), 0.12), transparent 62%),
    radial-gradient(17rem 13rem at 33% 60%, rgba(var(--phosphor-rgb), 0.14), transparent 66%),
    radial-gradient(42rem 18rem at 55% -6%, rgba(var(--paper-rgb), 0.07), transparent 62%);
  mix-blend-mode: screen;
}

.hero-media-atmos::after {
  content: "";
  position: absolute;
  inset: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  opacity: 0.15;
}

.hero-media-frame {
  --bracket: rgba(var(--paper-rgb), 0.52);
  position: absolute;
  z-index: 4;
  inset: 0.95rem;
  pointer-events: none;
  background-image:
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket));
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
  background-size: 0.95rem 1px, 1px 0.95rem, 0.95rem 1px, 1px 0.95rem, 0.95rem 1px, 1px 0.95rem, 0.95rem 1px, 1px 0.95rem;
}

.hero-media-hud {
  position: absolute;
  z-index: 5;
  top: 1.3rem;
  right: 2rem;
  left: 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(var(--paper-rgb), 0.78);
  font-family: var(--display);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}

.hero-media figcaption {
  position: absolute;
  z-index: 5;
  right: 2rem;
  bottom: 1.25rem;
  left: 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(var(--paper-rgb), 0.24);
  color: var(--paper-soft);
  font-family: var(--display);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Live gimbal readout — center instrument in the caption bar. Tracks the
   pointer-reactive media shift; drifts on its own while idle. */
.figcaption-gimbal {
  color: rgba(var(--paper-rgb), 0.55);
}

/* --- Proof rail — machined marquee with a reserved control gutter ------- */
.proof-rail {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: rgba(var(--ink-rgb), 0.88);
}

.proof-loop {
  grid-column: 1;
  grid-row: 1;
  display: block;
  min-width: 0;
}

/* Machined edges: marquee text dissolves symmetrically inside its own
   lane — it can never run under the pause control, which lives in a
   reserved gutter. Only while the marquee is actually a marquee — the
   static grids (mobile, reduced motion) keep hard edges. */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .proof-loop {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0.4rem,
      #000 5.5rem,
      #000 calc(100% - 5.5rem),
      transparent calc(100% - 0.4rem)
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0.4rem,
      #000 5.5rem,
      #000 calc(100% - 5.5rem),
      transparent calc(100% - 0.4rem)
    );
  }
}

.proof-track {
  display: flex;
  width: max-content;
  animation: proof-marquee var(--dur-marquee) var(--ease-linear) infinite;
  will-change: transform;
}

@keyframes proof-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.proof-set {
  display: flex;
}

.proof-rail:hover .proof-track {
  animation-play-state: paused;
}

.proof-rail:focus-within .proof-track,
.proof-rail.is-proof-paused .proof-track {
  animation-play-state: paused;
}

.proof-motion {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-width: 5rem;
  padding: 0.6rem 1.3rem;
  border: 0;
  border-left: 1px solid var(--hairline);
  border-radius: 0;
  background: rgb(var(--ink-rgb));
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--dur-2) var(--ease-glide),
    border-color var(--dur-2) var(--ease-glide);
}

.proof-motion:hover,
.proof-motion[aria-pressed="true"] {
  border-color: var(--phosphor);
  color: var(--phosphor);
}

.proof-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.6rem 2.8rem 1.55rem;
  white-space: nowrap;
}

.proof-item::before {
  content: "+";
  position: absolute;
  top: 50%;
  left: -0.36em;
  transform: translateY(-52%);
  color: rgba(var(--paper-rgb), 0.32);
  font-family: var(--display);
  font-size: 0.85rem;
}

.proof-index {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
}

.proof-item strong {
  color: var(--phosphor);
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.proof-desc {
  color: var(--paper-soft);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .proof-set[aria-hidden="true"] {
    display: none;
  }

  .proof-track {
    width: 100%;
  }

  .proof-set {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .proof-item {
    white-space: normal;
  }

  .proof-item::before {
    display: none;
  }
}

@media (max-width: 1240px) {
  .hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 2.2rem;
  }

  .hero-head-meta {
    display: none;
  }
}

@media (max-width: 980px) {
  .no-js .hero {
    padding-top: 13.5rem;
  }

  .hero {
    display: block;
    min-height: auto;
    padding-top: 6.5rem;
    padding-bottom: 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    margin-top: 1.9rem;
  }

  .hero-copy {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-telemetry {
    margin-top: 2.4rem;
  }

  .hero-media {
    min-height: min(62vw, 36rem);
    margin-left: calc(var(--page-gutter) * -1);
    border-bottom: 0;
    border-inline: 0;
  }
}

@media (max-width: 760px) {
  .hero {
    padding-top: 5.4rem;
  }

  .no-js .hero {
    padding-top: 13.5rem;
  }

  .hero h1 {
    max-width: 10ch;
    font-size: clamp(2.45rem, 11.5vw, 4.25rem);
    line-height: 0.84;
  }

  .hero h1 .hero-line {
    white-space: normal;
  }

  .hero-context {
    flex-wrap: wrap;
    font-size: 0.65rem;
  }

  .hero-lede {
    max-width: 31rem;
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 1.8rem;
  }

  .hero-actions .primary-action {
    min-width: 11rem;
  }

  /* Two-column instrument grid — every value holds a single line; the
     live clock takes the full second row. */
  .hero-telemetry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.2rem;
    margin-top: 2.2rem;
  }

  .hero-telemetry .telemetry-clock-cell {
    grid-column: 1 / -1;
  }

  .hero-media {
    min-height: min(88vw, 30rem);
  }

  .hero-image {
    object-position: 58% 46%;
  }

  .hero-media-hud,
  .hero-media figcaption {
    right: 1.4rem;
    left: 1.4rem;
  }

  .proof-rail {
    grid-template-columns: 1fr;
  }

  .proof-set[aria-hidden="true"] {
    display: none;
  }

  .proof-track {
    width: 100%;
    animation: none;
    transform: none;
  }

  .proof-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .proof-item {
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    padding: 1.15rem 1.2rem;
    white-space: normal;
  }

  .proof-item::before {
    display: none;
  }

  .proof-item:nth-child(odd) {
    border-right: 1px solid var(--hairline-soft);
  }

  .proof-item:nth-child(n + 3) {
    border-top: 1px solid var(--hairline-soft);
  }

  .proof-desc {
    flex-basis: 100%;
    font-size: 0.75rem;
  }

  .proof-motion {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .primary-action {
    width: 100%;
  }

  .telemetry-value {
    font-size: 0.62rem;
  }

  .hero-media {
    min-height: 24rem;
  }

  .hero-media-hud,
  .hero-media figcaption {
    font-size: 0.48rem;
  }
}