/* Hero "street" (views/partials/hero/street.php, js/hero-street.js).
   A pinned stage: the still image (phones, fallbacks), the 3D canvas over it, and the crisp HTML copy on top.
   .is-pin: the 3D runs and the hero is 1.5 screens taller for the walk down the street. .is-static: still image only. */
.hero--street { height: 100vh; height: 100svh; }
.hero--street.is-pin { height: calc(100svh + 150vh); }
.hs__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; isolation: isolate;
  background: linear-gradient(180deg, #f9f6f1 0%, #f6efe5 55%, #f1e4d4 100%);
}
.hs__still, .hs__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs__still { display: none; background: center bottom / cover no-repeat; }
.hs__gl { display: block; opacity: 0; transition: opacity 1.1s var(--ease); }
.hero--street.is-live .hs__gl { opacity: 1; }
.hero--street.is-static .hs__gl { display: none; }
/* The still: always under the canvas on phones (so the street is there from the first paint); on larger screens only
   when the 3D won't run. */
.no-js .hs__still, .hero--street.is-static .hs__still { display: block; }
.hs__still { background-image: url("/assets/img/hero/street-1600.webp"); background-image: image-set(url("/assets/img/hero/street-1600.avif") type("image/avif"), url("/assets/img/hero/street-1600.webp") type("image/webp")); }
@media (max-width: 760px) {
  .hs__still { display: block; background-image: url("/assets/img/hero/street-800.webp"); background-image: image-set(url("/assets/img/hero/street-800.avif") type("image/avif"), url("/assets/img/hero/street-800.webp") type("image/webp")); }
}
/* A soft paper wash at the top, so the headline always sits on calm ground. */
.hs__stage::after { content: ""; position: absolute; inset: 0 0 auto; height: 52%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(249, 246, 241, .74) 0%, rgba(249, 246, 241, .46) 55%, rgba(249, 246, 241, 0) 100%); }

.hs__copy, .hs__mid, .hs__end { position: absolute; z-index: 2; inset: 0 0 auto; padding-top: calc(var(--header-h) + clamp(var(--space-md), 5.5vh, var(--space-4xl))); }
.hs__eyebrow { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 clamp(var(--space-md), 2.4vh, var(--space-xl)); }
.hs__spark { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(241, 95, 34, .14); }
.hs__title { font-size: clamp(2.5rem, min((100vw - 2 * var(--gutter)) / 8.6, 7.4vw, (100svh - 300px) / 5.1), 9rem); line-height: .94; }
.hs__title .kt__line { padding-bottom: .02em; }
.hs__title .k-serif { color: var(--terracotta-ink, var(--terracotta)); }
.hs__title .hs__street { color: var(--sage-700); }
.hs__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) clamp(var(--space-xl), 4vw, 56px); margin-top: clamp(var(--space-lg), 3vh, var(--space-2xl)); }
.hs__sub { margin: 0; max-width: 31rem; font-size: var(--step-0, 1rem); line-height: 1.5; color: var(--ink-soft); }
.hs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-xl); }

/* Mid-walk caption and the end of the street (real HTML; shown by the 3D as the camera arrives). */
.hs__mid, .hs__end { opacity: 0; pointer-events: none; }
.hs__mid { margin-block: 0; font: 600 clamp(2rem, 4.4vw, 4.6rem)/1 var(--display); letter-spacing: -.035em; color: var(--ink); }
.hs__mid { padding-right: min(30vw, 420px); }
.hs__mid em, .hs__end em { font: italic 400 1.04em/1 var(--serif); letter-spacing: -.02em; color: var(--terracotta-ink, var(--terracotta)); }
.hs__end-title { margin: 0; max-width: 13em; font: 600 clamp(2.2rem, 4.6vw, 4.8rem)/.98 var(--display); letter-spacing: -.035em; }
.hs__end p { margin: var(--space-lg) 0 var(--space-xl); max-width: 27rem; font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); }
.hs__end.is-on, .hs__end:focus-within { pointer-events: auto; }
.hs__end:focus-within { opacity: 1 !important; transform: none !important; }
.hero--street:not(.is-pin) :is(.hs__mid, .hs__end) { display: none; }

@media (max-width: 760px) {
  .hs__copy, .hs__mid, .hs__end { padding-top: calc(var(--header-h) + clamp(var(--space-sm), 2.6vh, 28px)); }
  .hs__stage::after { height: 62%; }
  .hs__br { display: block !important; }
  .hs__title { font-size: clamp(2.25rem, min((100vw - 2 * var(--gutter)) / 5.4, (100svh - 360px) / 3.6), 5.2rem); }
  .hs__row { margin-top: clamp(var(--space-sm), 2vh, 20px); gap: var(--space-md); }
  .hs__sub { font-size: .97rem; }
  .hs__actions { width: 100%; gap: var(--space-xs) var(--space-lg); }
  .hs__actions .btn-xl { min-height: 54px; padding: .8em 1.5em; font-size: 1.05rem; }
  .hs__mid { padding-right: 0; font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
}
@media (max-width: 760px) and (max-height: 700px) { .hs__eyebrow { display: none; } .hs__sub { font-size: .92rem; } }
@media (max-width: 380px) { .hs__eyebrow { font-size: .7rem; letter-spacing: .12em; } }
@media (min-width: 761px) and (max-height: 620px) { .hs__eyebrow { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero--street, .hero--street.is-pin { height: 100vh; height: 100svh; }
  .hs__still { display: block; }
  .hs__gl, .hs__mid, .hs__end { display: none; }
}
@media (forced-colors: active) {
  .hs__gl, .hs__still, .hs__stage::after { display: none !important; }
}

/* Shopfronts (js/hero-street.js drawShopfronts): one per catalog app, in street order, each one a real link. Only the
   items the script marks .hs__shop get these rules, so the still and no-WebGL fallbacks keep the plain list. The accent
   is the app's own token (--shop-accent); until an app has one, the awning uses the coral token. No motion here: the
   street has no duration token yet (see TASK-REPORT.md). */
.hero--street .hs__shops { gap: var(--space-md); }
.hero--street .hs__shop { display: flex; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
.hero--street .hs__shop-link {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); max-width: 100%;
  min-height: var(--control); padding: var(--space-sm) var(--space-lg);
  border: 0; border-top: var(--space-xs) solid var(--shop-accent, var(--coral));
  border-radius: var(--radius-md); background: var(--card); color: var(--ink); text-decoration: none;
  font-size: var(--step--1); letter-spacing: 0;
}
.hero--street .hs__shop-link:hover { background: var(--paper-2); }
/* The focus ring is the base :focus-visible rule (token colour, token offset). */
.hero--street .hs__mark { width: var(--control-sm); height: var(--control-sm); object-fit: contain; border-radius: var(--radius-xs); }
.hero--street .hs__name { overflow-wrap: anywhere; }