/* ---- tokens ---- */
:root{
  --bg-0: oklch(0.11 0.035 268);
  --bg-1: oklch(0.14 0.05 270);
  --bg-2: oklch(0.18 0.06 275);
  --fg:   oklch(0.94 0.015 270);
  --dim:  oklch(0.66 0.03 270);
  --faint:oklch(0.42 0.04 270);

  --a-hue-1: 290;
  --a-hue-2: 210;
  --a-hue-3: 55;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'JetBrains Mono', ui-monospace, monospace;

  --glow-x: 50%;
  --glow-y: 45%;
}

[data-theme="serif-mono"]{ --font-display:'Fraunces', serif; --font-body:'JetBrains Mono', monospace; }
[data-theme="instrument"] { --font-display:'Instrument Serif', serif; --font-body:'Inter', sans-serif; }
[data-theme="grotesk"]    { --font-display:'Space Grotesk', sans-serif; --font-body:'Space Grotesk', sans-serif; }
[data-theme="mono"]       { --font-display:'IBM Plex Mono', monospace; --font-body:'IBM Plex Mono', monospace; }

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--bg-0);color:var(--fg);}
body{
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0.01em;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ---- background layers ---- */
.night{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 110%, oklch(0.22 0.10 var(--a-hue-1) / 0.55), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 100%, oklch(0.24 0.12 var(--a-hue-2) / 0.45), transparent 55%),
    radial-gradient(ellipse 50% 45% at 90% 95%, oklch(0.24 0.10 var(--a-hue-3) / 0.30), transparent 55%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, var(--bg-2) 100%);
}
.horizon{
  position:fixed; left:0; right:0; bottom:62vh; height:1px; z-index:1;
  background: linear-gradient(90deg, transparent, oklch(0.55 0.10 var(--a-hue-2) / 0.35), transparent);
  filter: blur(0.3px);
}
.skyline{
  position:fixed; left:0; right:0; bottom:0; height:70vh; z-index:2;
  pointer-events:none;
  background: linear-gradient(180deg, transparent 0%, oklch(0.07 0.02 270 / 0.4) 45%, oklch(0.06 0.02 270) 85%);
}
.skyline .back { position:absolute; inset:auto 0 0 0; width:100%; height:85%; opacity:.6; filter:blur(0.4px); }
.skyline .front{ position:absolute; inset:auto 0 0 0; width:100%; height:100%; }

.cursor-glow{
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle 420px at var(--glow-x) var(--glow-y),
    oklch(0.78 0.18 var(--a-hue-1) / 0.18),
    oklch(0.78 0.18 var(--a-hue-1) / 0.06) 40%,
    transparent 70%);
  mix-blend-mode: screen;
  transition: background 120ms linear;
}
canvas#stars{ position: fixed; inset: 0; z-index: 2; pointer-events: none; }

/* ---- layout ---- */
main{
  position: relative; z-index: 5;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 3vw, 40px);
}
header.bar, footer.bar{
  display:flex; align-items:center; justify-content:space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}
footer.bar{ align-items: flex-end; font-size: 10px; letter-spacing: .22em; color: var(--faint); gap: 20px;}
.mark{ display:flex; align-items:center; gap: 10px; }
.mark .dot{
  width:8px; height:8px; border-radius:50%;
  background: oklch(0.82 0.16 var(--a-hue-2));
  box-shadow: 0 0 14px oklch(0.82 0.16 var(--a-hue-2) / .9), 0 0 28px oklch(0.82 0.16 var(--a-hue-2) / .5);
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.6} }
.mark .name{ color: var(--fg); letter-spacing: 0.22em; font-weight: 400;}
.coords{ font-variant-numeric: tabular-nums; opacity: .7; }

.center{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: clamp(20px, 2.5vw, 36px);
  padding: 0 16px;
}

h1.hero{
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
  white-space: nowrap;
}
h1.hero .still{ color: var(--fg); }
h1.hero .dreaming-hero{
  font-style: italic;
  background: linear-gradient(100deg,
    oklch(0.92 0.14 var(--a-hue-3)) 0%,
    oklch(0.88 0.18 var(--a-hue-1)) 50%,
    oklch(0.90 0.16 var(--a-hue-2)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 24px oklch(0.85 0.18 var(--a-hue-1) / 0.45));
}
h1.hero .dots{
  display: inline-block;
  color: oklch(0.82 0.16 var(--a-hue-2));
  animation: breathe 4.6s ease-in-out infinite;
  margin-left: 0.05em;
}
@keyframes breathe{
  0%,100%{ opacity: 0.3; letter-spacing: 0; }
  50%    { opacity: 1;   letter-spacing: 0.12em; }
}

.cta{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  border: 1px solid oklch(0.5 0.05 270 / 0.5);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  background: oklch(0.14 0.04 270 / 0.4);
  backdrop-filter: blur(8px);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s;
  position: relative; overflow: hidden;
}
.cta:hover{ transform: translateY(-2px); background: oklch(0.2 0.06 var(--a-hue-2) / 0.4); }
.cta .arrow{ display:inline-block; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.cta:hover .arrow{ transform: translateX(4px); }

footer .time{ font-variant-numeric: tabular-nums; }
footer .phase{ display:flex; align-items:center; gap:10px; }
footer .phase .moon{
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, oklch(0.96 0.02 80), oklch(0.7 0.02 80) 70%, oklch(0.3 0.02 80));
  box-shadow: 0 0 10px oklch(0.9 0.02 80 / 0.6);
}

/* ---- tweaks panel ---- */
.tweaks{
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  background: oklch(0.12 0.04 270 / 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid oklch(0.3 0.04 270 / 0.6);
  border-radius: 14px; padding: 16px; width: 260px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--fg); display: none;
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.5);
}
.tweaks.open{ display:block; }
.tweaks h3{ margin:0 0 12px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); font-weight: 400; }
.tweaks .row{ margin-bottom: 12px; }
.tweaks label{ display:block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.tweaks .btns{ display:flex; flex-wrap:wrap; gap: 6px; }
.tweaks button{
  background: oklch(0.18 0.03 270); color: var(--fg);
  border: 1px solid oklch(0.3 0.03 270);
  border-radius: 8px; padding: 6px 10px;
  font: inherit; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
}
.tweaks button.active{
  background: oklch(0.78 0.18 var(--a-hue-1) / 0.25);
  border-color: oklch(0.78 0.18 var(--a-hue-1));
}
.tweaks input[type=range]{ width: 100%; }
.tweaks .swatches{ display:flex; gap:6px; }
.tweaks .sw{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid oklch(0.3 0.03 270); cursor:pointer; }
.tweaks .sw.active{ outline: 2px solid var(--fg); outline-offset: 2px;}

@media (max-width: 640px){
  h1.hero{ font-size: clamp(34px, 10vw, 60px); white-space: normal; }
  footer.bar{ font-size: 9px; }
}