/* elephant.haus — the city section (Marina Bay diorama). The sky is CSS behind a transparent WebGL canvas:
   the page background fades in at the top (so the hero boundary is soft), a pastel glow sits under the board
   by day; at night the section deepens to plum with stars, the sun sinks and the moon rises. --night is 0..1. */
.city {
  position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate;
  background: var(--bg, #FDF7F5); color: var(--ink, #2E2B2C);
  --city-ink: var(--ink, #2E2B2C); --city-ink-night: #F3ECEC; --city-pill: rgba(253, 247, 245, .55); --city-pill-night: rgba(46, 43, 44, .35);
  --night: 0;
  font-family: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
@supports not (height: 100svh) { .city { height: 100vh; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .city { --city-pill: rgba(46, 43, 44, .45); --city-day-a: .1; --city-day-b: .14; } }
:root[data-theme="dark"] .city { --city-pill: rgba(46, 43, 44, .45); --city-day-a: .1; --city-day-b: .14; }
.city.is-night { --city-ink: var(--city-ink-night); --city-pill: var(--city-pill-night); }
.city-sky, .city-sky-night, .city-glow, .city-stars, .city-sun, .city-moon, .city-stage, .city-pops, .city-shadow { position: absolute; }
.city-sky { inset: 0; z-index: 0;
  background: linear-gradient(to bottom, transparent 0, rgba(199, 222, 234, var(--city-day-a, .3)) 22%, rgba(247, 208, 214, var(--city-day-b, .45)) 100%);
  transition: opacity 3.6s ease; opacity: calc(1 - var(--night)); }
.city-sky-night { inset: 0; z-index: 0;
  background: linear-gradient(to bottom, transparent 0, #2A2233 44px, #1B1726 100%);
  transition: opacity 3.6s ease; opacity: var(--night); }
.city-glow { inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 42% at 50% 58%, var(--glow, #F7D0D6) 0, transparent 70%);
  opacity: calc(.9 - var(--night) * .55); transition: opacity 3.6s ease; }
.city-stars { inset: 0; z-index: 0; pointer-events: none; opacity: var(--night); transition: opacity 3.6s ease; overflow: hidden; }
.city-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #F3ECEC; opacity: .85; }
.city.is-live.is-night .city-stars i { animation: city-twinkle 3.4s ease-in-out infinite; }
.city-stars i:nth-child(3n) { width: 2px; height: 2px; animation-duration: 4.6s; }
.city-stars i:nth-child(5n) { background: #F7D0D6; animation-delay: -1.3s; }
.city-stars i:nth-child(7n) { background: #C7DEEA; animation-delay: -2.2s; width: 4px; height: 4px; }
@keyframes city-twinkle { 50% { opacity: .25; } }
.city-sun { z-index: 0; width: 72px; height: 72px; border-radius: 50%; left: 12%; top: 16%; pointer-events: none;
  background: #F6DC9A; box-shadow: 0 0 0 10px rgba(246, 220, 154, .28), 0 0 60px 20px rgba(246, 220, 154, .35);
  transition: transform 3.6s cubic-bezier(.4, 0, .6, 1), opacity 3.6s ease;
  transform: translateY(calc(var(--night) * 70vh)); opacity: calc(1 - var(--night) * 1.3); }
.city-moon { z-index: 0; width: 56px; height: 56px; border-radius: 50%; right: 14%; top: 14%; pointer-events: none;
  background: radial-gradient(circle at 36% 40%, #FBF6F3 0 52%, #DCD2D7 53% 100%);
  box-shadow: 0 0 40px 10px rgba(243, 236, 236, .18);
  transition: transform 3.6s cubic-bezier(.4, 0, .6, 1), opacity 3.6s ease;
  transform: translateY(calc((1 - var(--night)) * 70vh)); opacity: calc(var(--night) * 1.3 - .3); }
.city-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2E2B2C; opacity: .08; }
@media (prefers-reduced-motion: reduce) {
  .city-sky, .city-sky-night, .city-glow, .city-stars, .city-sun, .city-moon { transition-duration: .4s; }
  .city-stars i { animation: none; }
}
.city-shadow { z-index: 0; left: 50%; top: 62%; width: min(78vw, 640px); height: 11vh; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(46, 43, 44, .14) 0, transparent 70%);
  transition: opacity 1.2s ease; pointer-events: none; }
.city.is-loaded .city-shadow { opacity: .55; }

.city-stage { inset: 0; z-index: 1; }
.city-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  opacity: 0; transition: opacity .9s ease; }   /* cursor: the page's (var(--cursor) / the hover variant via data-cursor) */
.city.is-loaded .city-canvas { opacity: 1; }
.city.is-dragging .city-canvas { cursor: grabbing; }
/* Offscreen or tab hidden: nothing composites or animates (the canvas is hidden, the stars stop). */
.city:not(.is-live) .city-canvas { visibility: hidden; }

.city-pops { inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.city-pop { position: absolute; font-weight: 800; font-size: 22px; line-height: 1; color: var(--city-ink); will-change: transform, opacity;
  text-shadow: 0 1px 0 rgba(253, 247, 245, .6); }
.city-pop.heart { color: #F59BAB; font-size: 24px; }
.city-pop.note { color: #DE7450; }
.city-pop.bang { color: #DE7450; font-size: 30px; }
.city-pop.zzz { color: #AFBACA; font-size: 20px; font-style: italic; }
.city.is-night .city-pop.zzz { color: #F3ECEC; }
.city.is-night .city-pop { text-shadow: none; }
.city-dot { position: absolute; border-radius: 50%; will-change: transform, opacity; }

.city-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.city-caption { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: fit-content; width: -moz-fit-content;
  margin: 0 auto; max-width: min(88vw, 520px); box-sizing: border-box; padding: 8px 14px; text-align: center;
  font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--city-ink); opacity: .78; transition: color .8s ease, opacity .5s ease;
  background: var(--city-pill); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.city-caption.is-hint { opacity: 1; color: #DE7450; }
@media (max-width: 699px) { .city[style*="--caption-top"] .city-caption { top: var(--caption-top); bottom: auto; } }
.city-zoom { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
.city-zoom button { appearance: none; -webkit-appearance: none; width: 38px; height: 38px; border-radius: 50%; padding: 0; margin: 0;
  border: 2.5px solid #2E2B2C; background: #FDF7F5; color: #2E2B2C; box-shadow: 0 2px 0 #2E2B2C;
  font: 800 22px/1 "Nunito", ui-rounded, system-ui, sans-serif; display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease, background .8s ease, color .8s ease, border-color .8s ease, box-shadow .8s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.city-zoom button:active { transform: translateY(2px); box-shadow: 0 0 0 #2E2B2C; }
.city-zoom button:focus-visible { outline: 3px solid #DE7450; outline-offset: 2px; }
.city.is-night .city-zoom button { background: #2E2B2C; color: #F3ECEC; border-color: #F3ECEC; box-shadow: 0 2px 0 #F3ECEC; }
@media (max-width: 699px) { .city:not([style*="--caption-top"]) .city-zoom { bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 68px); } }
.city-links { position: absolute; left: max(14px, env(safe-area-inset-left, 0px)); top: max(14px, env(safe-area-inset-top, 0px));
  display: flex; gap: 8px; pointer-events: none; }
.city-link { pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px 0 11px; box-sizing: border-box; border-radius: 999px;
  border: 2.5px solid #2E2B2C; background: #FDF7F5; color: #2E2B2C; box-shadow: 0 2px 0 #2E2B2C; text-decoration: none;
  font: 800 14px/1 "Nunito", ui-rounded, system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .8s ease, color .8s ease, border-color .8s ease, box-shadow .8s ease; }
.city-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.city-link:active { transform: translateY(2px); box-shadow: 0 0 0 #2E2B2C; }
.city-link:focus-visible { outline: 3px solid #DE7450; outline-offset: 2px; }
.city.is-night .city-link { background: #2E2B2C; color: #F3ECEC; border-color: #F3ECEC; box-shadow: 0 2px 0 #F3ECEC; }
.city-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.city-sr-btn { pointer-events: auto; position: absolute; left: 16px; top: 16px; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.city-sr-btn:focus-visible { width: auto; height: auto; clip: auto; clip-path: none; margin: 0; padding: 8px 14px; border-radius: 999px;
  background: #FDF7F5; color: #2E2B2C; font: 700 15px/1.2 "Nunito", system-ui, sans-serif; outline: 3px solid #DE7450; outline-offset: 3px; }