/* jamestan.io: H (Long exposure). Pick a colourway with data-palette on <html>. */

:root {
  --text: #E8ECF1;
  --muted: #7D8594;
  --line: #2A2F3A;
  --paper: #F4F1E8;
  --boost: 0; /* 0 to 1, driven by pointer movement in main.js */
}

[data-palette="amber"]    { --bg: #07080C; --far: #12151D; --near: #0B0D13; --snow: #262C38; --accent: #FFC46B; --t1: #FFE7B3; --t2: #FFC46B; --t3: #FF4D3A; }
[data-palette="ice"]      { --bg: #060A10; --far: #101824; --near: #0A1019; --snow: #25324A; --accent: #9CC9F0; --t1: #F2F7FF; --t2: #9CC9F0; --t3: #FF3B47; }
[data-palette="dusk"]     { --bg: #141026; --far: #221B3A; --near: #1A1530; --snow: #3D3560; --accent: #FF9F43; --t1: #FFD9A0; --t2: #FF9F43; --t3: #FF4D6D; }
[data-palette="teal"]     { --bg: #0B0F14; --far: #151C26; --near: #0F141B; --snow: #2A3442; --accent: #5EE6D0; --t1: #E9FFFA; --t2: #5EE6D0; --t3: #FF7A59; }
[data-palette="sodium"]   { --bg: #0E0A07; --far: #1C1510; --near: #140F0B; --snow: #3A2E24; --accent: #FF9A3C; --t1: #FFE2BD; --t2: #FF9A3C; --t3: #FF5A1F; }
[data-palette="aurora"]   { --bg: #050B10; --far: #0C1A20; --near: #08131A; --snow: #1F3A40; --accent: #7CF3D6; --t1: #E6FFF8; --t2: #7CF3D6; --t3: #B48CFF; }
[data-palette="mono"]     { --bg: #0A0A0A; --far: #161616; --near: #101010; --snow: #2E2E2E; --accent: #FFFFFF; --t1: #FFFFFF; --t2: #BDBDBD; --t3: #FF3B30; }
[data-palette="bluehour"] { --bg: #0D1630; --far: #17244A; --near: #111C3C; --snow: #34477A; --accent: #FFD27A; --t1: #FFF1CC; --t2: #FFD27A; --t3: #FF5C5C; }

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 5vw, 64px);
}

/* Scene */
#scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.far  { fill: var(--far); }
.near { fill: var(--near); }
.snow { fill: var(--snow); }

.streaks path { fill: none; stroke-linecap: round; }
.t1 { stroke: var(--t1); }
.t2 { stroke: var(--t2); }
.t3 { stroke: var(--t3); }
.faint { stroke-width: 2; stroke-opacity: calc(0.16 + 0.18 * var(--boost)); }
.glow  { stroke-width: calc(12px + 6px * var(--boost)); stroke-opacity: calc(0.22 + 0.3 * var(--boost)); stroke-dasharray: 34 66; }
.core  { stroke-width: calc(2.6px + 1.4px * var(--boost)); stroke-dasharray: 34 66; }

/* Header */
.top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mark { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pill {
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .2s, color .2s;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill:focus-visible, .cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Hello */
.intro { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; pointer-events: none; }
.hello { margin: 0; font-size: clamp(84px, 14vw, 180px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; }
.blink { color: var(--accent); animation: blink 1.1s step-end infinite; }
.small { margin: 0; font-size: 15px; color: var(--muted); }

/* Colourway picker */
.foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; pointer-events: auto; }
.picker { display: flex; align-items: center; gap: 2px; opacity: .55; transition: opacity .2s; }
.picker:hover, .picker:focus-within { opacity: 1; }
.picker button {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 13px/1 "Space Grotesk", system-ui, sans-serif;
  cursor: pointer;
}
.picker .auto { padding: 0 8px; }
.picker .auto[aria-pressed="true"] { color: var(--text); }
.picker .sw::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}
.picker .sw[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--text); }
.picker .sw.now::before { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--muted); }
.picker button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Smooth hand-over between colourways */
body, .dot, .blink, .shadow { transition: background-color 2s ease, color 2s ease; }
#scene path { transition: fill 2s ease, stroke 2s ease; }

/* Garfield */
.cat {
  position: absolute;
  right: clamp(12px, 4vw, 56px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 3;
  width: 100px;
  height: 124px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.shadow {
  position: absolute;
  left: 12px;
  bottom: 0;
  width: 66px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  animation: shadow 3.6s ease-in-out infinite;
}
.cat-float { position: absolute; inset: 0; animation: float 3.6s ease-in-out infinite; }
.cat img {
  position: absolute;
  left: 6px;
  top: 0;
  width: 89px;
  height: 110px;
  filter:
    drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper))
    drop-shadow(0 2px 0 var(--paper)) drop-shadow(0 -2px 0 var(--paper));
  transform-origin: 40% 100%;
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.bubble {
  position: absolute;
  right: 92px;
  top: -10px;
  white-space: nowrap;
  background: var(--paper);
  color: #0B0F14;
  font: 500 15px/1 "Space Grotesk", system-ui, sans-serif;
  padding: 10px 14px;
  border-radius: 14px 14px 2px 14px;
  opacity: 0;
  transform: translateY(8px) scale(.9);
  transform-origin: 100% 100%;
  transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.cat:hover img, .cat.talk img { transform: rotate(-6deg) scale(1.06); }
.cat:hover .bubble, .cat.talk .bubble, .cat.monday .bubble { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .cat { transform: scale(.85); transform-origin: 100% 100%; }
}

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.78); opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .blink, .cat-float, .shadow { animation: none; }
  .cat img, .bubble { transition: none; }
}