/* The hub: one screen, three worlds. The page borrows the colours of whichever product is in front. */
:root { --sans: 'Geist', system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; --ease: cubic-bezier(.19, .9, .22, 1); --bg: #eef2e9; }
.hub { position: relative; --fg: #13231a; --muted: #55675c; --line: rgba(19, 35, 26, .16); --accent: #2c8a62; --btn-fg: #eef2e9; color: var(--fg); transition: color .7s ease; }
.hub[data-active="burble"] { --fg: #191919; --muted: #6b6862; --line: rgba(25, 25, 25, .16); --accent: #191919; --btn-fg: #fbfaf7; }
.hub[data-active="cairn"] { --fg: #ede6da; --muted: #a0978b; --line: rgba(237, 230, 218, .18); --accent: #ff7a1a; --btn-fg: #160a02; }

.hub-bg { position: fixed; inset: 0; z-index: 0; }
.hub-bg i { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hub-bg [data-bg="haste"] { background: radial-gradient(48% 56% at 68% 46%, rgba(169, 210, 189, .85), transparent 70%), radial-gradient(30% 34% at 92% 12%, rgba(243, 174, 69, .16), transparent 70%), #eef2e9; }
.hub-bg [data-bg="burble"] { background: repeating-linear-gradient(transparent 0 47px, #e6e3dc 47px 48px), #fbfaf7; }
.hub-bg [data-bg="cairn"] { background: radial-gradient(ellipse 34% 30% at 66% 76%, rgba(255, 122, 26, .3), transparent 70%), conic-gradient(from 158deg at 66% -14%, transparent 0deg, rgba(255, 176, 112, .12) 10deg, rgba(255, 200, 150, .2) 22deg, rgba(255, 176, 112, .12) 34deg, transparent 44deg), #0a0908; }
.hub[data-active="haste"] [data-bg="haste"], .hub[data-active="burble"] [data-bg="burble"], .hub[data-active="cairn"] [data-bg="cairn"] { opacity: 1; }

.hub-stage { position: absolute; top: 0; left: 0; right: 0; height: 100svh; min-height: 620px; z-index: 1; opacity: 0; transition: opacity 1.2s ease; touch-action: pan-y; cursor: grab; }
.hub-stage.is-ready { opacity: 1; }
.hub-stage.is-dragging { cursor: grabbing; }
.hub-stage canvas { width: 100%; height: 100%; }

.hub-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 56px); }
.hub-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 1.3rem; font-weight: 650; letter-spacing: -.04em; }
.hub-person { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: .95rem; font-weight: 500; transition: background .3s, color .3s, border-color .7s; }
.hub-person:hover { background: var(--fg); color: var(--btn-fg); }

.hub-main { position: relative; z-index: 3; height: 100svh; min-height: 620px; display: grid; grid-template-rows: 1fr auto; padding: 96px clamp(20px, 4vw, 56px) 30px; pointer-events: none; }
.hub-main a, .hub-main button { pointer-events: auto; }
.hub-h1 { position: absolute; top: 92px; left: clamp(20px, 4vw, 56px); max-width: 20em; font-size: 1rem; line-height: 1.4; color: var(--muted); font-weight: 500; transition: color .7s; }
.hub-slides { display: grid; align-content: end; max-width: min(46rem, 58%); padding-bottom: clamp(20px, 5vh, 56px); }
.hub-slide { grid-area: 1 / 1; display: grid; gap: 14px; justify-items: start; align-content: end; opacity: 0; visibility: hidden; transform: translateY(26px); transition: opacity .45s ease, transform .7s var(--ease), visibility 0s .45s; }
.hub-slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .15s, transform .8s var(--ease) .15s; }
.hub-no { font-size: .95rem; font-weight: 500; color: var(--muted); }
.hub-no span { color: var(--fg); }
.hub-name { font-size: clamp(5rem, 15vw, 14rem); line-height: .86; letter-spacing: -.065em; font-weight: 650; margin-left: -.04em; }
[data-slide="burble"] .hub-name { font-family: 'Newsreader', Georgia, serif; font-weight: 500; letter-spacing: -.05em; }
[data-slide="cairn"] .hub-name { font-family: 'Anton', Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0; line-height: .95; }
.hub-line { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1.1; color: var(--accent); }
[data-slide="burble"] .hub-line { color: var(--muted); }
.hub-status { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 500; }
.hub-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hub-enter { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; margin-top: 8px; padding: 0 28px; border-radius: 999px; background: var(--fg); color: var(--btn-fg); font-weight: 600; text-decoration: none; transition: transform .4s var(--ease), background .3s; }
[data-slide="cairn"] .hub-enter { background: var(--accent); }
.hub-enter .icon { transition: transform .4s var(--ease); }
.hub-enter:hover { transform: translateY(-2px); }
.hub-enter:hover .icon { transform: translateX(5px); }

.hub-controls { display: flex; align-items: center; gap: 10px; justify-self: start; padding: 6px; border-radius: 999px; border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .7s; }
.hub-arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; transition: background .25s, color .25s; }
.hub-arrow:hover { background: var(--fg); color: var(--btn-fg); }
.hub-tabs { display: flex; gap: 2px; }
.hub-tabs button { padding: 9px 16px; border: 0; border-radius: 999px; background: none; font-size: .95rem; font-weight: 500; color: var(--muted); transition: background .3s, color .3s; }
.hub-tabs button:hover { color: var(--fg); }
.hub-tabs button[aria-selected="true"] { background: var(--fg); color: var(--btn-fg); }
.hub-hint { position: absolute; right: clamp(20px, 4vw, 56px); bottom: 42px; font-size: .92rem; color: var(--muted); }
.no-webgl .hub-hint { display: none; }

.foot { --foot-bg: transparent; z-index: 3; transition: color .7s, border-color .7s; }

@media (max-width: 820px) {
  .hub-h1 { display: none; }
  .hub-slides { max-width: none; padding-bottom: 20px; }
  .hub-name { font-size: clamp(4.4rem, 22vw, 8rem); }
  .hub-controls { justify-self: center; }
  .hub-hint { display: none; }
  .hub-person span { display: none; }
  .hub-person::before { content: 'Aaron Ko'; }
}