/* Coetu pre-launch teaser. Same tokens and rules as docs/design/design.md (exploratory, ADR 0005). */
@font-face { font-family: "Sora"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/sora-700.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/manrope-600.woff2") format("woff2"); }

:root {
  --bg:#FBF8F4; --bg2:#F3EEE7; --surface:#FFFFFF; --fg:#17151F; --muted:#57536A; --line:rgba(23,21,31,.10);
  --card-hi:rgba(255,255,255,.92); --accent:#F2683A; --accent2:#5B48E0; --accent3:#0F8F84; --on-accent:#17151F;
  --ring:#5B48E0; --glowA:rgba(242,104,58,.30); --glowB:rgba(91,72,224,.22); --glowC:rgba(15,143,132,.18);
  --shadow:0 1px 2px rgba(40,30,60,.06),0 12px 32px rgba(40,30,60,.08); --shadow-hi:0 2px 4px rgba(40,30,60,.06),0 24px 56px rgba(40,30,60,.16);
  --g-a:rgba(255,255,255,.62); --g-b:rgba(255,255,255,.38); --g-clear:rgba(255,255,255,.22); --g-edge:rgba(255,255,255,.72);
  --g-spec:rgba(255,255,255,.95); --g-shade:rgba(23,21,31,.06); --g-drop:rgba(40,30,60,.22); --g-sheen:rgba(255,255,255,.55);
  --dot:rgba(23,21,31,.16); --accent-text:#C2461C; 
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:#0A0A10; --bg2:#11111A; --surface:#14141F; --fg:#F5F2EC; --muted:#A7A4B6; --line:rgba(255,255,255,.10);
  --card-hi:rgba(255,255,255,.09); --accent:#FF8A5C; --accent2:#9D8CFF; --accent3:#4FD1C5; --on-accent:#1A0F0A;
  --ring:#9D8CFF; --glowA:rgba(255,138,92,.30); --glowB:rgba(157,140,255,.30); --glowC:rgba(79,209,197,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35); --shadow-hi:0 2px 4px rgba(0,0,0,.4),0 28px 64px rgba(0,0,0,.55);
  --g-a:rgba(255,255,255,.13); --g-b:rgba(255,255,255,.05); --g-clear:rgba(255,255,255,.07); --g-edge:rgba(255,255,255,.16);
  --g-spec:rgba(255,255,255,.30); --g-shade:rgba(0,0,0,.40); --g-drop:rgba(0,0,0,.55); --g-sheen:rgba(255,255,255,.14);
  --dot:rgba(255,255,255,.14); --accent-text:#FF8A5C; 
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0A0A10; --bg2:#11111A; --surface:#14141F; --fg:#F5F2EC; --muted:#A7A4B6; --line:rgba(255,255,255,.10);
    --card-hi:rgba(255,255,255,.09); --accent:#FF8A5C; --accent2:#9D8CFF; --accent3:#4FD1C5; --on-accent:#1A0F0A;
    --ring:#9D8CFF; --glowA:rgba(255,138,92,.30); --glowB:rgba(157,140,255,.30); --glowC:rgba(79,209,197,.16);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35); --shadow-hi:0 2px 4px rgba(0,0,0,.4),0 28px 64px rgba(0,0,0,.55);
    --g-a:rgba(255,255,255,.13); --g-b:rgba(255,255,255,.05); --g-clear:rgba(255,255,255,.07); --g-edge:rgba(255,255,255,.16);
    --g-spec:rgba(255,255,255,.30); --g-shade:rgba(0,0,0,.40); --g-drop:rgba(0,0,0,.55); --g-sheen:rgba(255,255,255,.14);
    --dot:rgba(255,255,255,.14); --accent-text:#FF8A5C; 
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; transition: background-color .45s ease, color .45s ease; }
h1 { font-family: Sora, system-ui, sans-serif; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 0; font-size: clamp(40px, 6.6vw, 78px); }
/* Headline in three lines: "Coming soon to" · smaller "Fabulous" · large "Las Vegas." */
h1 { display: flex; flex-direction: column; align-items: center; gap: .14em; }
.h-lead { font-family: Manrope, system-ui, sans-serif; font-weight: 600; font-size: max(20px, .4em); letter-spacing: .01em; line-height: 1.25; padding-bottom: .08em; color: var(--fg);
  background: linear-gradient(100deg, var(--fg) 0%, var(--fg) 42%, var(--accent) 48%, var(--accent2) 52%, var(--fg) 58%, var(--fg) 100%);
  background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shine 4.5s ease-in-out 1.2s infinite; }
/* A light band sweeps across "Coming soon to", then rests. Off with reduced motion. */
@keyframes shine { 0% { background-position: 100% 0; } 45% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
.h-fab { font-family: Manrope, system-ui, sans-serif; font-weight: 600; font-style: italic; font-size: max(14px, .3em); letter-spacing: .42em; text-transform: uppercase; padding-left: .42em; color: var(--accent-text); }
.h-lv { font-size: 1em; line-height: .95; padding-bottom: .06em; }
/* Location pin before "Las Vegas.": drops in with a small bounce, then a soft ring pulses beneath it. */
.h-lv-row { display: inline-flex; align-items: center; gap: .1em; }
/* Symmetry: an invisible spacer the width of each icon balances the line, so the words share one centre axis. */
.wordmark::after { content: ""; width: .35em; flex-shrink: 0; } /* smaller than the mark: optical centring of logo + name as one group */
.h-lv-row::after { content: ""; width: .6em; flex-shrink: 0; }

.pin { width: .6em; height: .7em; flex-shrink: 0; overflow: visible; }
.pin .p { fill: none; stroke: var(--accent2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-box: view-box; transform-origin: 12px 24px; animation: pin-drop .9s cubic-bezier(.34,1.56,.64,1) .5s both; }
.pin .dot { fill: var(--accent2); stroke: none; }
.pin .pulse { fill: none; stroke: var(--accent2); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out 1.4s infinite; }
@keyframes pin-drop { 0% { transform: translateY(-10px); opacity: 0; } 60% { transform: translateY(1px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--surface); color: var(--fg); font-weight: 600; }
.skip:focus { top: 16px; }
.i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.page { position: relative; min-height: 100%; display: flex; flex-direction: column; overflow-x: clip; }

/* Atmosphere: aurora glows, cursor dot field, spotlight */
.atmo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; }
.blob.a { width: 640px; height: 640px; top: -220px; left: -180px; background: radial-gradient(circle, var(--glowA), transparent 65%); animation: drift1 16s ease-in-out infinite alternate; }
.blob.b { width: 720px; height: 720px; top: -100px; right: -240px; background: radial-gradient(circle, var(--glowB), transparent 65%); animation: drift2 19s ease-in-out infinite alternate; }
.blob.c { width: 560px; height: 560px; bottom: -260px; left: 30%; background: radial-gradient(circle, var(--glowC), transparent 65%); animation: drift1 18s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(70px, -40px) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-60px, 40px) scale(.95); } }
.dots { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 78%); }
.spot { position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; opacity: 0; transition: opacity .5s ease; background: radial-gradient(circle, var(--glowB), transparent 62%); will-change: transform; }
.spot.on { opacity: 1; }

/* Glass (Apple-inspired, our own) */
.glass, .glass-thick, .glass-clear { position: relative; isolation: isolate; border: 1px solid var(--g-edge); -webkit-backdrop-filter: blur(var(--gb)) saturate(180%); backdrop-filter: blur(var(--gb)) saturate(180%); }
.glass { --gb: 22px; background: linear-gradient(180deg, var(--g-a), var(--g-b)); box-shadow: inset 0 1px 0 0 var(--g-spec), inset 0 -1px 0 0 var(--g-shade), 0 10px 30px -10px var(--g-drop); }
.glass-clear { --gb: 12px; background: var(--g-clear); box-shadow: inset 0 1px 0 0 var(--g-spec); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: radial-gradient(120% 70% at 15% -10%, var(--g-sheen), transparent 55%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass-thick, .glass-clear { background: var(--surface); } }
@media (prefers-reduced-transparency: reduce) { .glass, .glass-thick, .glass-clear { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); } }

.brand { display: inline-flex; align-items: center; gap: 8px; font-family: Sora, system-ui, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--fg); }
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; }
.seg button { width: 36px; height: 36px; border-radius: 999px; border: 0; display: grid; place-items: center; color: var(--fg); background: transparent; cursor: pointer; transition: background-color .2s ease; }
.seg button[aria-pressed="true"] { background: var(--card-hi); box-shadow: var(--shadow); }

/* Main: centered copy, minimal */
.main { position: relative; z-index: 1; flex: 1; width: min(980px, calc(100% - 32px)); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 48px); padding: clamp(48px, 9vh, 96px) 0 40px; text-align: center; outline: none; }

@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
.copy { max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.wordmark { display: inline-flex; align-items: center; gap: .28em; font-family: Sora, system-ui, sans-serif; font-weight: 700; font-size: clamp(40px, 6vw, 64px); letter-spacing: -.04em; line-height: 1; color: var(--fg); margin-bottom: 6px; }
.wordmark .word { background: linear-gradient(90deg, var(--accent2), var(--accent3)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; text-transform: uppercase; letter-spacing: .04em; }
/* Logo mark beside the name: the rings slide together and draw in, then spin once on hover. */
.mark { width: 1.05em; height: 1.05em; overflow: visible; }
.mark .c-a { stop-color: var(--accent); }
.mark .c-b { stop-color: var(--accent2); }
.mark circle { fill: none; stroke: url(#wm); stroke-width: 2.6; stroke-dasharray: 100; stroke-dashoffset: 0; transform-box: view-box; }
.mark .m-l { animation: join-l 1s cubic-bezier(.22,1,.36,1) .2s both, draw 1.2s ease-out .2s both; }
.mark .m-r { animation: join-r 1s cubic-bezier(.22,1,.36,1) .2s both, draw 1.2s ease-out .35s both; }
@keyframes join-l { from { transform: translateX(-6px); } to { transform: none; } }
@keyframes join-r { from { transform: translateX(6px); } to { transform: none; } }
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.mark { transform-origin: 50% 50%; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.wordmark:hover .mark { transform: rotate(360deg); }
.grad { background: linear-gradient(90deg, var(--accent), var(--accent2) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 600px; }
/* Rotating lines: all stacked in one grid cell, so the box is as tall as the longest line and nothing below jumps. */
.rotator { display: grid; max-width: 760px; }
.rotator .rot { text-wrap: balance; }
.rotator .rot { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.rotator .rot.is-on { opacity: 1; transform: none; pointer-events: auto; }
.rotator .rot.is-off { transform: translateY(-8px); }
/* Billboard style: bold display type, the first part in ink and the payoff in coral on its own line. */
.lead.rotator { font-family: Sora, system-ui, sans-serif; font-weight: 700; letter-spacing: -.025em; line-height: 1.14; color: var(--fg); font-size: clamp(19px, min(2.6vw, 3.4vh), 30px); }
.rotator em { display: block; font-style: normal; color: var(--accent-text); }
/* Features: thin line icon beside a short label, no boxes. They fade up one by one; the icon lifts on hover. Decorative only. */
.pills .i { width: 18px; height: 18px; color: var(--accent2); stroke-width: 1.6; flex-shrink: 0; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.pill-item { position: relative; animation: pop .6s cubic-bezier(.22,1,.36,1) both; }
.pill-item:nth-child(1) { animation-delay: .35s; } .pill-item:nth-child(2) { animation-delay: .43s; } .pill-item:nth-child(4) { animation-delay: .51s; } .pill-item:nth-child(6) { animation-delay: .59s; } .pill-item:nth-child(8) { animation-delay: .67s; } /* odd positions after 2 are row breaks */
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.feat { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; transition: color .3s ease; }
.pill-item:hover .feat { color: var(--fg); }
.pill-item:hover .feat .i { transform: translateY(-2px); }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: clamp(6px, 2.6vh, 28px); }
/* Balanced rows: one row when wide, then 3 + 2, then 2 + 2 + 1 on phones. */
.pills .br { display: none; flex-basis: 100%; height: 0; padding: 0; margin: 0; }
@media (max-width: 860px) { .pills .br-3 { display: block; } }
@media (max-width: 480px) { .pills { gap: 10px 22px; } .pills .br-3 { display: none; } .pills .br-2, .pills .br-4 { display: block; } }
/* The headline is likely the LCP element: slide only, never fade. Smaller elements fade in after it. */
.copy > h1 { animation: rise .9s cubic-bezier(.22,1,.36,1) both; }
.copy > .wordmark { animation: rise .9s cubic-bezier(.22,1,.36,1) both; }
.copy > .lead { animation: up .8s cubic-bezier(.22,1,.36,1) both; }
.copy > .lead { animation-delay: .12s; }
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #FFB27A); color: var(--on-accent); box-shadow: 0 8px 24px var(--glowA); }

.foot { position: relative; z-index: 1; width: min(1120px, calc(100% - 32px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 16px 0 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot .copyright { flex: 1; text-align: center; }
.foot .social { display: inline-flex; gap: 2px; }
.foot .social a { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.foot .social a:hover { color: var(--fg); background: var(--card-hi); transform: translateY(-1px); }
.foot .social .fill { fill: currentColor; stroke: none; }
@media (max-width: 560px) { .foot { justify-content: center; row-gap: 2px; column-gap: 12px; } .foot .social { order: 2; } .foot .social a { width: 32px; height: 32px; } .foot .copyright { flex: 0 1 auto; order: 3; font-size: 13px; } }
.notfound { justify-content: flex-start; }


/* Fit the window: spacing and display type scale with the window height too, so a normal desktop or laptop window needs no scrolling. */
.page { min-height: 100vh; min-height: 100dvh; }
.main { padding: clamp(16px, 5vh, 72px) 0 clamp(8px, 2vh, 28px); }
.copy { gap: clamp(16px, 3.4vh, 34px); }
h1 { font-size: clamp(32px, min(5.4vw, 5.8vh), 62px); gap: .24em; }
.wordmark { font-size: clamp(32px, min(6vw, 6.4vh), 64px); }
.lead { font-size: clamp(16px, min(2.2vw, 2.3vh), 20px); }
.foot { padding: clamp(10px, 1.6vh, 16px) 0 clamp(12px, 2vh, 24px); }
/* ===== Panorama band: a slow, Roku-style city scene with friends doing things together ===== */
:root { --sky-a:#FFE2C6; --sky-b:#F9C1CF; --sky-c:#C9B8F5; --ridge:#C99BB8; --city:#A988C9; --mid:#8A6AB5; --ground:#6E4E98; --win:#FFE7A8; --lamp:#FFD36B;
  --p1:#E8603A; --p2:#5B48E0; --p3:#0F8F84; --p4:#C9821D; --p5:#C2407F; --court:#7FB59A; --green:#6FAF6A; --wood:#8B5A3C; --star-o:0; }
:root[data-theme="dark"] { --sky-a:#0A0918; --sky-b:#1C1438; --sky-c:#3A1D52; --ridge:#2A1F45; --city:#1E1838; --mid:#161230; --ground:#100D24; --win:#FFD36B; --lamp:#FFC85C;
  --p1:#FF8A5C; --p2:#9D8CFF; --p3:#4FD1C5; --p4:#F2B544; --p5:#FF6FB1; --court:#2E6B57; --green:#2F6B3A; --wood:#6B4630; --star-o:1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sky-a:#0A0918; --sky-b:#1C1438; --sky-c:#3A1D52; --ridge:#2A1F45; --city:#1E1838; --mid:#161230; --ground:#100D24; --win:#FFD36B; --lamp:#FFC85C;
  --p1:#FF8A5C; --p2:#9D8CFF; --p3:#4FD1C5; --p4:#F2B544; --p5:#FF6FB1; --court:#2E6B57; --green:#2F6B3A; --wood:#6B4630; --star-o:1; } }

.pano { position: relative; z-index: 1; width: 100%; height: clamp(140px, 30vh, 330px); flex-shrink: 0; overflow: hidden; margin-top: -16px;
  /* Sky starts transparent so the page's own background and glows show through; all four edges fade out. */
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sky-b) 55%, transparent) 40%, var(--sky-b) 62%, var(--sky-c) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 90%, transparent 100%), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 90%, transparent 100%), linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; }
.pano .layer { position: absolute; left: 0; bottom: 0; height: 100%; }
.pano .layer svg { display: block; height: 100%; width: auto; animation: pan linear infinite; will-change: transform; }
.pano .back svg { animation-duration: 160s; }
.pano .mid svg { animation-duration: 95s; }
.pano .front svg { animation-duration: 60s; }
@keyframes pan { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pano .stars { opacity: var(--star-o); transition: opacity .45s ease; } .pano .stars circle { fill: #fff; }
.pano .ridge { fill: var(--ridge); } .pano .city { fill: var(--city); } .pano .midb { fill: var(--mid); } .pano .ground { fill: var(--ground); }
.pano .win { fill: var(--win); opacity: .75; } .pano .lamp { fill: var(--lamp); } .pano .pole { stroke: var(--mid); stroke-width: 3; }
.pano .palm { fill: var(--mid); } .pano .court { fill: var(--court); } .pano .green { fill: var(--green); } .pano .wood { fill: var(--wood); } .pano .line { stroke: #fff; stroke-width: 2; opacity: .8; fill: none; }
.pano .f1 { fill: var(--p1); } .pano .f2 { fill: var(--p2); } .pano .f3 { fill: var(--p3); } .pano .f4 { fill: var(--p4); } .pano .f5 { fill: var(--p5); }
.pano .s1 { stroke: var(--p1); } .pano .s2 { stroke: var(--p2); } .pano .s3 { stroke: var(--p3); } .pano .s4 { stroke: var(--p4); } .pano .s5 { stroke: var(--p5); }
.pano .limb { fill: none; stroke-width: 4; stroke-linecap: round; }
.pano .ball { fill: #F5F07A; animation: rally 1.6s ease-in-out infinite alternate; }
@keyframes rally { from { transform: translate(0, 0); } 50% { transform: translate(55px, -26px); } to { transform: translate(110px, 0); } }
.pano .swing { transform-box: fill-box; transform-origin: 0% 0%; animation: swing 2.4s ease-in-out infinite; }
@keyframes swing { 0%, 60%, 100% { transform: rotate(0deg); } 75% { transform: rotate(-70deg); } 85% { transform: rotate(40deg); } }
.pano .bob { animation: bob 1.3s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-3.5px); } }
.pano .head { transform-box: fill-box; transform-origin: 50% 100%; animation: nod 2.6s ease-in-out infinite; }
@keyframes nod { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(1.5px, 1.5px) rotate(6deg); } 60% { transform: translate(-1.5px, 0) rotate(-6deg); } }
.pano .arm { transform-box: fill-box; transform-origin: 50% 0%; animation: armswing 1.8s ease-in-out infinite alternate; }
.pano .arm.r { animation-direction: alternate-reverse; }
@keyframes armswing { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.pano .stride { transform-box: fill-box; transform-origin: 50% 0%; animation: stride .7s ease-in-out infinite alternate; }
.pano .stride.b { animation-direction: alternate-reverse; }
@keyframes stride { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.pano .book { transform-box: fill-box; transform-origin: 50% 50%; animation: page 2.6s ease-in-out infinite; }
@keyframes page { 0%, 70%, 100% { transform: scaleX(1); } 80% { transform: scaleX(.15); } 90% { transform: scaleX(1); } }
.pano .toast { transform-box: fill-box; transform-origin: 0% 100%; animation: toast 2.4s ease-in-out infinite; }
.pano .toast.b { transform-origin: 100% 100%; }
@keyframes toast { 0%, 55%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-16deg); } 80% { transform: rotate(-12deg); } }
.pano .toast.b { animation-name: toast-b; }
@keyframes toast-b { 0%, 55%, 100% { transform: rotate(0deg); } 70% { transform: rotate(16deg); } 80% { transform: rotate(12deg); } }
.pano .glass { fill: none; stroke: #FFE7F1; stroke-width: 1.5; stroke-linejoin: round; }
:root { --trail: #D9906A; --trail-rim: #F2B48F; --rock: #B8704F; --cactus: #5E8F5A; }
:root[data-theme="dark"] { --trail: #6B3F45; --trail-rim: #A8635A; --rock: #57323A; --cactus: #3F6B45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --trail: #6B3F45; --trail-rim: #A8635A; --rock: #57323A; --cactus: #3F6B45; } }
.pano .trail { fill: var(--trail); } .pano .trail-rim { fill: none; stroke: var(--trail-rim); stroke-width: 2; stroke-linecap: round; }
.pano .rock { fill: var(--rock); } .pano .cactus { fill: none; stroke: var(--cactus); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pano .cup { fill: #FFF6EA; stroke: #E8DCCB; stroke-width: 1; }
.pano .steam { fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-linecap: round; opacity: 0; animation: steam 2.8s ease-in-out infinite; }
@keyframes steam { 0% { opacity: 0; transform: translateY(2px); } 35% { opacity: .75; } 100% { opacity: 0; transform: translateY(-9px); } }
.pano .sip { transform-box: fill-box; transform-origin: 0% 100%; animation: sip 3.2s ease-in-out infinite; }
@keyframes sip { 0%, 60%, 100% { transform: rotate(0deg); } 72% { transform: rotate(-35deg); } 86% { transform: rotate(-35deg); } }
.pano .brush { transform-box: fill-box; transform-origin: 0% 100%; animation: brush 1.8s ease-in-out infinite alternate; }
@keyframes brush { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.pano .twinkle { animation: tw 2.6s ease-in-out infinite alternate; }
/* Small Coetu billboards on the skyline */
:root { --bb-bg: #F7F3FC; --bb-edge: #B9AEEA; --bb-text: #5B4BC9; --bb-line: #6E6984; --bb-glow: 0px; }
:root[data-theme="dark"] { --bb-bg: #17132D; --bb-edge: #5A4C9E; --bb-text: #D9D3F5; --bb-line: #9C96B5; --bb-glow: 1.5px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bb-bg: #17132D; --bb-edge: #5A4C9E; --bb-text: #D9D3F5; --bb-line: #9C96B5; --bb-glow: 1.5px; } }
/* Billboards are solid (no transparency), small and muted, mounted on their own rooftop. */ .pano .bb-post { fill: none; stroke: var(--bb-edge); stroke-width: 2.5; stroke-linecap: round; } .pano .bb-base { fill: var(--bb-edge); }
.pano .bb-panel { fill: var(--bb-bg); stroke: var(--bb-edge); stroke-width: 1.2; filter: drop-shadow(0 0 var(--bb-glow) var(--bb-edge)); }
.pano .bb-m1, .pano .bb-m2 { fill: none; stroke-width: 1.5; } .pano .bb-m1 { stroke: #FF8A5C; } .pano .bb-m2 { stroke: #9D8CFF; }
.pano .bb-name { font-family: Sora, system-ui, sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .4px; fill: var(--bb-text); }
.pano .bb-line { font-family: Manrope, system-ui, sans-serif; font-weight: 600; font-size: 7px; letter-spacing: .8px; text-transform: uppercase; text-anchor: middle; fill: var(--bb-line); }
/* Glowing LED sphere: colours cycle slowly; strong glow at night, softer at sunset */
.pano .sphere { animation: sphere-hue 14s linear infinite; }
@keyframes sphere-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.pano .sphere-body { fill: #9D8CFF; opacity: calc(.75 + var(--night) * .25); }
.pano .sphere-glow { fill: #9D8CFF; opacity: calc(var(--night) * .25); filter: blur(8px); }
.pano .sphere-dots circle { fill: #FFFFFF; opacity: calc(.12 + var(--night) * .18); }
.pano .sphere-mark { fill: none; stroke: #FFF6EA; stroke-width: 3; opacity: calc(.55 + var(--night) * .35); }
.pano .sphere-shine { fill: #FFFFFF; opacity: .18; }
/* Night landmarks: pyramid sky beam and the turning lights on the observation wheel */
:root { --night: 0; } :root[data-theme="dark"] { --night: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --night: 1; } }
.pano .sky-beam { fill: #FFF6D8; opacity: calc(var(--night) * .35); animation: beam 4s ease-in-out infinite alternate; }
.pano .sky-beam-glow { fill: #CFC4FF; opacity: calc(var(--night) * .1); filter: blur(4px); }
@keyframes beam { from { filter: brightness(.95); } to { filter: brightness(1.08); } }
.pano .pyr-edge { fill: none; stroke: #FFE7A8; stroke-width: 1.2; opacity: calc(var(--night) * .4); }
.pano .apex { fill: #FFF6D8; opacity: calc(var(--night) * .55); }
.pano .pole-w { fill: none; stroke: var(--city); stroke-width: 4; }
.pano .hub { fill: var(--city); }
.pano .wheel-spin { transform-box: fill-box; transform-origin: center; animation: wheel 70s linear infinite; }
@keyframes wheel { to { transform: rotate(360deg); } }
.pano .wl { opacity: calc(.35 + var(--night) * .65); animation: tw 1.8s ease-in-out infinite alternate; }
.pano .wl0 { fill: #FF8A5C; } .pano .wl1 { fill: #9D8CFF; animation-delay: -.6s; } .pano .wl2 { fill: #4FD1C5; animation-delay: -1.2s; }
@keyframes tw { from { opacity: .35; } to { opacity: .9; } }
.pano-ctrl { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--fg); cursor: pointer; }
.pano-ctrl svg { width: 16px; height: 16px; fill: currentColor; }
.pano.paused *, .pano.paused *::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .pano-ctrl { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Phones: compact spacing so the page still fits one screen (after the fit-the-window rules on purpose). */
@media (max-width: 560px) { .copy { gap: clamp(14px, 2.6vh, 24px); } .main { padding-bottom: 6px; } }
@media (max-height: 800px) and (min-width: 561px) { .copy { gap: clamp(10px, 2.3vh, 20px); } }