/* ============================================================
   duskdata — shared sky system
   Five OKLCH stops that travel the full day.
   ============================================================ */

:root {
  /* Sky stops — full cycle */
  --day-sky-top:    oklch(0.94 0.020 230);
  --day-sky-mid:    oklch(0.88 0.028 220);
  --day-sky-bot:    oklch(0.82 0.035 210);
  --day-ink:        oklch(0.22 0.020 250);
  --day-mute:       oklch(0.46 0.020 250);
  --day-hair:       oklch(0.75 0.015 230);

  --sunset-sky-top: oklch(0.78 0.080  60);
  --sunset-sky-mid: oklch(0.72 0.120  45);
  --sunset-sky-bot: oklch(0.58 0.140  30);
  --sunset-ink:     oklch(0.20 0.030  40);

  --dusk-sky-top:   oklch(0.46 0.100 290);
  --dusk-sky-mid:   oklch(0.38 0.130 305);
  --dusk-sky-bot:   oklch(0.28 0.120 320);
  --dusk-ink:       oklch(0.94 0.020 300);
  --dusk-accent:    oklch(0.82 0.140 320);   /* brand moment glow */

  --night-sky-top:  oklch(0.16 0.040 265);
  --night-sky-mid:  oklch(0.12 0.045 270);
  --night-sky-bot:  oklch(0.08 0.030 275);
  --night-ink:      oklch(0.92 0.020 260);

  --dawn-sky-top:   oklch(0.92 0.030  75);
  --dawn-sky-mid:   oklch(0.88 0.040  60);
  --dawn-sky-bot:   oklch(0.82 0.050  45);
  --dawn-ink:       oklch(0.24 0.020  60);

  /* Curves */
  --ease-sky: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-signal: cubic-bezier(0.33, 1, 0.68, 1);

  /* Type */
  --ff-display: "Instrument Serif", ui-serif, Georgia, serif;
  --ff-body: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --ff-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #000;
  color: var(--day-ink);
  font-family: var(--ff-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: currentColor;
  text-decoration: none;
}
.wordmark .mark {
  display: inline-block;
  width: 26px; height: 14px;
  position: relative;
}
.wordmark .mark::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.wordmark .mark::after {
  content: "";
  position: absolute;
  left: 60%; bottom: 2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.wordmark em {
  font-style: italic;
  font-weight: 400;
  opacity: 0.7;
}

/* ---------- Mono label ---------- */
.kicker {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: 0.005em;
  font-weight: 500;
  padding: 12px 20px;
  white-space: nowrap;
  border: 1px solid currentColor;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.4s var(--ease-sky), color 0.4s var(--ease-sky);
}
.btn:hover {
  background: currentColor;
}
.btn:hover > * { color: var(--btn-hover-ink, #000); }
.btn .arrow {
  display: inline-block;
  position: relative;
  width: 20px; height: 10px;
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-sky);
}
.btn .arrow::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 7px;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Striped placeholder (imagery) ---------- */
.placeholder {
  background-image: repeating-linear-gradient(
    135deg,
    currentColor 0, currentColor 1px,
    transparent 1px, transparent 9px
  );
  opacity: 0.35;
  position: relative;
}
.placeholder > .ph-label {
  position: absolute;
  inset: auto 0 8px 10px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ---------- Fine rule ---------- */
.hr {
  height: 1px;
  background: currentColor;
  opacity: 0.18;
  width: 100%;
}

/* ---------- Tweaks panel ---------- */
.tweaks {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 200;
  width: 280px;
  background: rgba(10, 12, 20, 0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f0f0f2;
  padding: 16px 18px 18px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  display: none;
}
.tweaks[data-open="1"] { display: block; }
.tweaks h4 {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.6;
  margin-bottom: 14px;
  font-weight: 500;
}
.tweaks label {
  display: block;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 12px 0 6px;
}
.tweaks input[type="range"] {
  width: 100%;
  accent-color: oklch(0.82 0.14 320);
}
.tweaks .row { display:flex; justify-content:space-between; gap:8px; }
.tweaks .val { opacity: 0.6; }

/* ---------- Scrim for readable overlays ---------- */
.scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0.35) 100%
  );
  pointer-events: none;
}

/* ---------- Horizon line (shared) ---------- */
.horizon {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}

/* reduced motion defaults */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
  }
}