/* Giant Entity: the home hero (look-v3 section 7). Text in columns 1 to 6; the relief and its legend
   line in columns 7 to 12. The spec's 1 to 5 split breaks the proposed line onto three lines at
   1366 and 1440 (measured), and the line must hold two; the relief is height-bound there, so it
   loses nothing. The planner's first question sits under the actions in the text's columns, not
   under the relief: six columns under the relief wrapped the seven chips to five rows and pushed
   them under the fold, while the text column stood empty. Nothing sits above the headline. */

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* the second row takes whatever the relief leaves, so the question sits right under the actions */
  grid-template-rows: auto 1fr;
  column-gap: var(--gutter);
  row-gap: var(--sp-m);
  align-items: start;
  min-height: calc(100dvh - var(--nav-h));
  padding-block: clamp(1.5rem, 4.5vh, 5.5rem) var(--sp-l);
  view-timeline-name: --hero;
}
.hero__text { grid-column: 1 / span 6; grid-row: 1; display: grid; gap: var(--sp-m); align-content: start; min-width: 0; }
.hero__title { max-width: none; }
.hero__lede { font-size: var(--fs-lead); line-height: 1.32; letter-spacing: -0.008em; max-width: 30ch; }
.hero__lede p { max-width: none; }
.hero__actions { margin-top: var(--sp-2xs); }
.hero__start { grid-column: 1 / span 6; grid-row: 2; display: grid; gap: var(--sp-s); align-content: start; min-width: 0; }
.hero__plan { color: var(--fg-muted); }
.hero__plan a { color: var(--fg); font-weight: 500; }
/* On short screens the line repeats the Not sure yet chip and the header's planner link, and costs
   the chips their place in the first viewport; taller screens keep it. */
@media (max-height: 760px) {
  .hero__plan { display: none; }
}

.hero__stage { grid-column: 7 / -1; grid-row: 1 / span 2; min-width: 0; container-type: inline-size; }

/* Laptop screens with the browser's chrome (657 px tall at 1366 to 1920): the relief is bound by
   the height there and needs only five columns, so the text takes seven, the lede runs two lines,
   and the gaps close a step; the question and all seven chips land in the first viewport. */
@media (min-width: 1100px) and (max-height: 760px) {
  .hero { row-gap: var(--sp-s); }
  .hero__text { gap: var(--sp-s); }
  .hero__text,
  .hero__start { grid-column: 1 / span 7; }
  .hero__stage { grid-column: 8 / -1; }
  /* the headline keeps its full gap, so its descenders' box stays clear of the lede */
  .hero__lede { max-width: 46ch; margin-top: calc(var(--sp-m) - var(--sp-s)); }
  .hero__actions { margin-top: 0; }
}

/* ---------- The relief ---------- */

/* The cell: the column's width over the drawing's 25.5 cells, or a share of the screen under the bar
   over its 18 rows, whichever is smaller. The share is 0.58 on laptop screens (657 px tall, where the
   legend must stay in the first viewport) and 0.74 on full screens, where 0.58 left the lower
   quarter to a third of the first screen empty (1920 by 1080 to 3840 by 2160, measured). The box
   keeps 4:3, so it reserves its place (no shift). */
.relief {
  --cell: min(100cqw / 25.5, var(--relief-share, 0.58) * (100dvh - var(--nav-h)) / 18);
  margin: 0;
}
.relief__box {
  position: relative;
  width: calc(var(--cell) * 25.5);
  max-width: 100%;
  aspect-ratio: 4 / 3;
  touch-action: pan-y;
}
.relief__svg,
.relief__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.relief__canvas { pointer-events: none; opacity: 0; }
.relief.is-settled .relief__canvas { opacity: 1; transition: opacity 200ms var(--ease-out); }

/* With a script, the drawing starts as the plan and is built in front of the visitor. */
@media (prefers-reduced-motion: no-preference) {
  .js .relief:not(.is-built):not(.is-gl) .pc__top,
  .js .relief:not(.is-built):not(.is-gl) .fc,
  .js .relief:not(.is-built):not(.is-gl) .body__shadow { opacity: 0; }
  .js .relief:not(.is-built):not(.is-gl) .pc__plan { opacity: 1; }
  .js .relief:not(.is-built):not(.is-gl) .body__lattice { opacity: 1; }
}

/* The still's stepped sweep: each piece fills in 480 ms, waiting on its diagonal. */
.relief--still .pc__top,
.relief--still .fc,
.relief--still .pc__plan,
.relief--still .body__shadow,
.relief--still .body__lattice {
  transition: opacity 480ms var(--ease-out) calc(var(--o, 0) * 45ms), fill var(--dur-hover) var(--ease-out);
}
.relief--still .body__shadow { transition-delay: 300ms; }
/* Without WebGL, hover or focus deepens the piece's top to its -deep tone over 180 ms (site.css). */

/* WebGL running: the SVG is only the pointer and focus layer. The outlines fade in the first
   300 ms of the arrival, the lattice over the whole 1500 ms. */
.relief.is-gl .pc__top,
.relief.is-gl .pc__hit { fill: transparent; stroke: transparent; }
/* the focus ring stays on the SVG layer over the canvas, and sinks with the pressed top (relief.mjs
   sets --press, the press in cells; a cell of height is 0.34 by 0.2 across the screen) */
.relief.is-gl .pc__link:focus-visible .pc__hit { stroke: var(--fg); }
.relief.is-gl .pc__link.is-named:focus-visible .pc__hit { transform: translate(calc(var(--press, 0) * 0.34px), calc(var(--press, 0) * 0.2px)); }
@media (prefers-reduced-motion: no-preference) {
  .relief.is-gl .pc__hit { transition: transform 220ms var(--ease-out); }
}
.relief.is-gl .fc,
.relief.is-gl .body__shadow { opacity: 0; }
/* a lifted top has moved a cell up its projection, and its pointer region goes with it */
.relief.is-gl .pc__link.is-lifted { transform: translate(-0.34px, -0.2px); }
.relief.is-gl .pc__plan { opacity: 0; transition: opacity 300ms var(--ease-out); }
.relief.is-gl .body__lattice { opacity: 0; transition: opacity 1500ms var(--ease-out); }
.relief.is-gl.is-fading:not(.is-settled) .pc__plan,
.relief.is-gl.is-fading:not(.is-settled) .body__lattice { opacity: 1; }
.relief.is-gl.is-fading .pc__plan,
.relief.is-gl.is-fading .body__lattice { transition-duration: 200ms; }

/* Scroll never changes the body; the whole asset only travels 24 px up as the hero leaves. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .relief { animation: relief-exit linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
  }
}
@keyframes relief-exit { from { transform: none; } to { transform: translateY(-24px); } }

/* ---------- The legend line, and the planner's first question ---------- */

.relief__legend {
  display: grid;
  align-items: start;
  min-height: calc(2 * 1.5em);
  margin-top: var(--sp-xs);
  line-height: 1.5;
}
.relief__legend > * { grid-area: 1 / 1; max-width: 68ch; }
.legend__rest { display: flex; flex-wrap: wrap; gap: 0.25em 1.6em; }
.legend__rest a { display: inline-flex; align-items: center; gap: 0.55em; min-height: 1.5rem; text-decoration-color: transparent; }
.legend__rest a:hover { text-decoration-color: currentColor; }
.legend__sq { flex: none; width: 12px; height: 12px; background: var(--m-top); }
.legend__name { font-weight: 500; }
.legend__say .link-cta { min-height: 1.5em; }
.legend__name,
.legend__say { visibility: hidden; opacity: 0; }
.relief__legend > * { transition: opacity 120ms var(--ease-out), visibility 0s linear 120ms; }
.relief__legend[data-mode="name"] .legend__rest,
.relief__legend[data-mode="say"] .legend__rest { visibility: hidden; opacity: 0; }
.relief__legend[data-mode="name"] .legend__name,
.relief__legend[data-mode="say"] .legend__say { visibility: visible; opacity: 1; transition-delay: 0s; }
/* a new sentence crossfades in 160 ms */
.relief__legend.is-swapping .legend__say { animation: legend-swap 160ms var(--ease-out); }
@keyframes legend-swap { from { opacity: 0; } to { opacity: 1; } }

.hero-start { margin: 0; }
.hero-start__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.hero-start__q { padding: 0; font-weight: 500; }
/* the chips at the small step, so the seven wrap to three rows in six columns, not five */
.hero-start__chips { gap: 0.5rem; margin-top: var(--sp-2xs); }
.hero-start__chips .chip > span { font-size: var(--fs-small); }
/* With a script the Continue link lives in the legend line; without one, the form's own button sends. */
.hero-start__go { margin-top: var(--sp-2xs); }
.js .hero-start:not(.is-plain) .hero-start__go { display: none; }

@media (min-width: 1100px) and (min-height: 761px) {
  .relief { --relief-share: 0.74; }
}

@media (min-width: 2400px) {
  /* The relief takes the spec's seven columns (6 to 12) once five hold the line in two (the display
     size stops growing at 200 px); at six it was bound by the column and ended two thirds down. */
  .hero__text,
  .hero__start { grid-column: 1 / span 5; }
  .hero__stage { grid-column: 6 / -1; }
  /* the question sits inline before the chips once the column has room for it */
  .hero-start__q { float: left; display: flex; align-items: center; min-height: 2.75rem; margin: var(--sp-2xs) var(--sp-s) 0 0; }
}

@media (max-width: 1099px) {
  .hero { min-height: 0; }
  .hero { grid-template-rows: none; }
  .hero__text,
  .hero__stage,
  .hero__start { grid-column: 1 / -1; grid-row: auto; }
  .relief { --cell: calc(100cqw / 25.5); }
}

@media (forced-colors: active) {
  .relief__canvas { display: none; }
  .relief.is-gl .pc__top { fill: Canvas; stroke: CanvasText; }
  .legend__sq { forced-color-adjust: none; border: 1px solid CanvasText; }
}