/* StreetHeist landing, Track C: the close (beats 18 to 20) and the footer.
   Shared beat frame for #demo, #talk and #credits, then the credits and the
   footer. The street stays behind every beat: nothing here paints an opaque
   full-bleed block. Each beat carries its own light atmosphere
   (.sh-cbeat__atmo) so it reads with the stage missing; once the stage is
   running (html.c-staged, set on sh:stage-ready) the sky layer steps back and
   only the local light stays. Local custom properties use the --c- prefix. */
.sh-cbeat { --c-pad: clamp(96px, 13vh, 150px); position: relative; isolation: isolate; padding: var(--c-pad) var(--sh-gutter) clamp(72px, 10vh, 120px); color: var(--sh-fg); overflow: clip; scroll-margin-top: 0; }
.sh-cbeat > *:not(.sh-cbeat__atmo) { max-width: var(--sh-maxw); }
.sh-cbeat__atmo { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.sh-cbeat__atmo > span { position: absolute; display: block; }
.c-sky { inset: 0; background: radial-gradient(120% 70% at 50% 108%, rgb(242 169 59 / 9%), transparent 60%), linear-gradient(180deg, rgb(11 15 22 / 0%) 0%, rgb(11 15 22 / 86%) 18%, rgb(18 26 40 / 70%) 62%, rgb(7 8 10 / 0%) 100%); }
html.c-staged .c-sky { opacity: 0; }
.c-grid { inset: 0; opacity: .5; background-image: linear-gradient(var(--sh-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(70% 60% at 70% 50%, #000, transparent 75%); }
.c-lamp { top: 4%; width: 52vmax; height: 52vmax; margin-left: -26vmax; border-radius: 50%; background: radial-gradient(circle, rgb(242 169 59 / 20%) 0%, rgb(242 169 59 / 7%) 32%, transparent 64%); }
.c-lamp.is-west { left: -4%; }
.c-lamp.is-east { left: 104%; top: 26%; opacity: .75; }
.c-wet { left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, rgb(20 26 36 / 55%) 40%, rgb(7 8 10 / 80%)), repeating-linear-gradient(90deg, rgb(242 169 59 / 5%) 0 2px, transparent 2px 9px); mask-image: linear-gradient(180deg, transparent, #000 35%); }
.c-rain { inset: -20% 0 0; opacity: .32; background-image: repeating-linear-gradient(104deg, transparent 0 34px, rgb(210 225 255 / 20%) 34px 35px, transparent 35px 71px); background-size: 71px 180px; }
html[data-tier="full"] .sh-cbeat.is-in .c-rain { animation: c-rain 1.1s linear infinite; }
@keyframes c-rain { to { background-position: -40px 180px; } }
.sh-cbeat__kicker { color: var(--sh-gold); font: 700 11px/1 var(--sh-font-mono); letter-spacing: .2em; text-transform: uppercase; }
.sh-cbeat__title { margin: 18px 0 0; font-size: clamp(34px, 4.6vw, 72px); font-weight: 600; line-height: .96; letter-spacing: -.035em; text-wrap: balance; }
.sh-cbeat__title:focus { outline: none; }
.sh-cbeat__body { margin-top: 18px; max-width: 34em; color: rgb(243 242 238 / 86%); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.45; text-wrap: pretty; }
.sh-cbeat__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
html body .sh-cbeat .sh-hud { grid-area: hud; position: static; align-self: end; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; margin: 0; color: rgb(243 242 238 / 72%); font: 500 11px/1.8 var(--sh-font-mono); letter-spacing: .14em; text-align: right; }
html body .sh-cbeat .sh-hud__line { clip-path: none; }
/* the HUD types itself in once per page view (sh-demo.js sets --c-n and .is-typed) */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-tier="still"]) body .sh-cbeat.is-typed .sh-hud__line { animation: c-type calc(var(--c-n, 20) * 26ms) steps(var(--c-n, 20), end) both; }
  html:not([data-tier="still"]) body .sh-cbeat.is-typed .sh-hud__line:nth-child(2) { animation-delay: .5s; }
  html:not([data-tier="still"]) body .sh-cbeat.is-typed .sh-hud__line:nth-child(3) { animation-delay: .95s; }
  html:not([data-tier="still"]) body .sh-cbeat.is-typed .sh-hud__line:nth-child(4) { animation-delay: 1.35s; }
}
@keyframes c-type { from { clip-path: inset(-2px 100% -2px -2px); } to { clip-path: inset(-2px -2px -2px -2px); } }
/* entrance: kicker, title and body rise in as the beat scrolls in (scroll-driven where supported) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-tier="still"]) .sh-cbeat__kicker, html:not([data-tier="still"]) .sh-cbeat__title, html:not([data-tier="still"]) .sh-cbeat__body { animation: c-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes c-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

/* ---- beat 20: credits ---- */
.sh-credits { min-height: 110svh; display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; text-align: center; padding-bottom: clamp(56px, 9vh, 96px); }
.c-dawn { inset: 30% 0 0; background: radial-gradient(90% 70% at 50% 100%, rgb(242 169 59 / 30%), rgb(59 47 42 / 55%) 38%, transparent 72%); opacity: .55; }
.c-sun { left: 50%; bottom: -34vmin; width: 68vmin; height: 68vmin; margin-left: -34vmin; border-radius: 50%; background: radial-gradient(circle, rgb(255 214 150 / 34%), rgb(242 169 59 / 10%) 45%, transparent 70%); opacity: .6; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-tier="still"]) .c-dawn { animation: c-dawn linear both; animation-timeline: view(); animation-range: entry 0% exit 20%; }
    html:not([data-tier="still"]) .c-sun { animation: c-sun linear both; animation-timeline: view(); animation-range: entry 0% exit 20%; }
    html:not([data-tier="still"]) .sh-credits__mark { animation: c-mark linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
@keyframes c-dawn { from { opacity: 0; } to { opacity: 1; } }
@keyframes c-sun { from { opacity: 0; transform: translateY(18vmin); } to { opacity: 1; transform: none; } }
@keyframes c-mark { from { letter-spacing: .02em; opacity: 0; } to { letter-spacing: -.045em; opacity: 1; } }
.sh-credits__mark { position: absolute; top: clamp(90px, 16vh, 170px); left: 50%; transform: translateX(-50%); z-index: -1; margin: 0; width: max-content; max-width: none; font: 400 clamp(64px, 13.4vw, 250px)/.8 var(--sh-font-num); letter-spacing: -.045em; color: transparent; -webkit-text-stroke: 1px rgb(243 242 238 / 18%); background: linear-gradient(100deg, transparent 30%, rgb(229 198 92 / 34%) 50%, transparent 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; user-select: none; }
.sh-credits__stand { position: relative; width: min(620px, 82vw); margin: clamp(120px, 26vh, 260px) auto 0; filter: drop-shadow(0 30px 40px rgb(0 0 0 / 60%)); }
.sh-credits__stand svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-credits__stand::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 28px; border-radius: 50%; background: radial-gradient(closest-side, rgb(242 169 59 / 26%), transparent); }
.sh-credits__body { display: flex; flex-direction: column; align-items: center; }
.sh-credits .sh-cbeat__body { margin-inline: auto; }
.sh-credits .sh-cbeat__cta { justify-content: center; }
.sh-credits__small { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-top: 26px; font: 600 11px/1 var(--sh-font-mono); letter-spacing: .16em; text-transform: uppercase; }
.sh-credits__small a, .sh-credits__top { display: inline-flex; align-items: center; min-height: 44px; color: var(--sh-fg-2); text-decoration: none; }
.sh-credits__small a:hover, .sh-credits__top:hover { color: var(--sh-gold-hi); }
.sh-credits__top { margin-top: 6px; gap: 8px; font-size: 14px; }

/* ---- footer ---- */
.sh-foot { position: relative; padding: 40px var(--sh-gutter) calc(32px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sh-line); background: linear-gradient(180deg, rgb(7 8 10 / 40%), rgb(7 8 10 / 88%)); color: var(--sh-fg-3); font-size: 12px; line-height: 1.6; }
.sh-foot__in { max-width: var(--sh-maxw); margin: 0 auto; display: grid; gap: 14px; }
.sh-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-bottom: 18px; border-bottom: 1px solid var(--sh-line); }
.sh-foot__mark { color: var(--sh-fg); font: 600 20px/1 var(--sh-font-sans); letter-spacing: -.03em; text-decoration: none; }
.sh-foot__studio { margin-top: 6px; }
.sh-foot__links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.sh-foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sh-fg-2); text-decoration: none; font-size: 13px; }
.sh-foot__links a:hover { color: var(--sh-fg); }
.sh-foot__lang { display: flex; gap: 4px; }
.sh-foot__lang button { min-width: 44px; min-height: 44px; border: 1px solid var(--sh-line); border-radius: 999px; background: transparent; color: var(--sh-fg-2); font: 600 11px/1 var(--sh-font-mono); letter-spacing: .14em; cursor: pointer; }
.sh-foot__lang button[aria-pressed="true"] { border-color: rgb(212 175 55 / 60%); color: var(--sh-gold-hi); }
.sh-foot__legal { max-width: 78em; }
.sh-foot__copy { font: 600 11px/1 var(--sh-font-mono); letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 767px) {
  .sh-cbeat { --c-pad: 88px; padding-inline: 16px; }
  .sh-cbeat__title { font-size: clamp(32px, 9.4vw, 42px); }
  .sh-cbeat__body { font-size: 15px; }
  .sh-cbeat__cta .sh-btn { flex: 1 1 140px; }
  .sh-credits { min-height: 100svh; }
  .sh-credits__stand { margin-top: 150px; }
  .sh-foot__row { flex-direction: column; align-items: flex-start; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sh-cbeat { --c-pad: 72px; }
  .sh-cbeat__title { font-size: 30px; }
  .sh-credits { min-height: 130svh; }
}
.sh-credits__svg .m-win { stroke: rgb(255 214 150 / 70%); }
.sh-credits__svg .m-sky { fill: rgb(15 20 28 / 80%); }