/* rain sounds — a 2am rain-streaked window.
   Tokens first; every value is a step on a scale. */

:root {
  /* type scale (1.25) */
  --t-xs: 0.813rem;  /* 13px — captions only */
  --t-sm: 0.938rem;  /* 15px — controls */
  --t-md: 1.125rem;  /* 18px — body/tagline */
  --t-lg: 1.75rem;
  --t-display: clamp(3rem, 9vw, 5.5rem);
  /* space scale */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --fade: 800ms;

  /* night — the identity */
  --bg-0: #070b12;
  --bg-1: #0b1322;
  --ink: #e8edf5;
  --ink-soft: #93a3ba;
  --glow: #a8c4e6;
  --line: rgba(168, 196, 230, 0.22);
  --grain-op: 0.05;
}

[data-theme="day"] {
  /* overcast morning — a designed theme, not an inversion */
  --bg-0: #b6c2cf;
  --bg-1: #d4dce4;
  --ink: #1b2634;
  --ink-soft: #46566b;
  --glow: #33475f;
  --line: rgba(27, 38, 52, 0.25);
  --grain-op: 0.04;
}

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

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: var(--t-md);
  color: var(--ink);
  background: linear-gradient(to bottom, var(--bg-0), var(--bg-1));
  overflow: hidden;
  transition: background 1.2s var(--ease), color 1.2s var(--ease);
  -webkit-font-smoothing: antialiased;
}

body.hide-cursor { cursor: none; }

.bgvideo {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 2.5s var(--ease), filter 1.2s var(--ease);
  /* night grade: the daylight window becomes a 2am one */
  filter: brightness(0.38) saturate(0.7) contrast(1.05);
}
.bgvideo.on { opacity: 0.85; }
[data-theme="day"] .bgvideo { filter: brightness(1.02) saturate(0.85); }
[data-theme="day"] .bgvideo.on { opacity: 0.9; }

canvas#rain { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,0.35));
}
[data-theme="day"] .vignette {
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgba(27,38,52,0.18));
}

/* film grain: tiled SVG noise, faint */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 900ms steps(3) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1%); }
  66% { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- intro ---------- */

.intro {
  position: fixed; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-3); text-align: center; padding: var(--s-3);
  transition: opacity 1.4s var(--ease), visibility 1.4s;
  /* soft pool of ground color so the words hold against the live footage */
  background: radial-gradient(ellipse 62% 55% at 50% 50%,
    color-mix(in srgb, var(--bg-0) 62%, transparent), transparent 72%);
}
.intro.gone { opacity: 0; visibility: hidden; pointer-events: none; }

.wordmark {
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 500;
  font-size: var(--t-display);
  letter-spacing: 0.01em;
  text-shadow: 0 0 60px color-mix(in srgb, var(--glow) 35%, transparent);
}

.tagline { color: var(--ink-soft); font-size: var(--t-md); }

.begin {
  margin-top: var(--s-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  background: none; border: none; color: var(--ink);
  font: inherit; font-size: var(--t-sm);
  cursor: pointer; padding: var(--s-2);
  transition: transform 300ms var(--ease), color 300ms;
}
.begin { font-size: var(--t-md); }
.begin svg { width: 104px; height: 104px; opacity: 0.9; transition: opacity 300ms; }
.begin:hover { transform: scale(1.05); }
.begin:hover svg { opacity: 1; }
.begin:focus-visible, .ctl:focus-visible, .mood:focus-visible, input:focus-visible {
  outline: 1px solid var(--glow); outline-offset: 4px; border-radius: 2px;
}

.intro-note { color: var(--ink-soft); font-size: var(--t-sm); max-width: 34ch; }

.about-link {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: var(--t-sm); color: var(--ink-soft);
  min-height: 44px; padding: 0 var(--s-2);
  transition: color 300ms;
}
.about-link:hover { color: var(--ink); }

/* ---------- about panel ---------- */

.about {
  position: fixed; inset: 0; z-index: 5;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.about-inner {
  max-width: 60ch; margin: 0 auto;
  padding: var(--s-5) var(--s-3) var(--s-5);
  position: relative;
}
.about h2 {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
  font-size: var(--t-lg); margin-bottom: var(--s-3);
}
.about h3 {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
  font-size: 1.35rem; margin: var(--s-4) 0 var(--s-2);
}
.about p { line-height: 1.65; margin-bottom: var(--s-2); color: var(--ink); }
.about strong { font-weight: 500; }
.about a { color: var(--glow); text-underline-offset: 3px; }
.about-close {
  position: sticky; top: var(--s-2); float: right;
  min-width: 44px; min-height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--ink); font-size: 1.6rem; line-height: 1;
}

/* ---------- persistent chrome ---------- */

.brand {
  position: fixed; top: var(--s-3); left: var(--s-4); z-index: 2;
  transition: opacity var(--fade) var(--ease);
}
.brand-mark {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: var(--t-lg); color: var(--ink);
  text-shadow: 0 1px 14px rgba(4, 7, 12, 0.55);
}
[data-theme="day"] .brand-mark { text-shadow: 0 1px 14px rgba(224, 230, 236, 0.85); }

.controls {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  padding: var(--s-4) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom));
  transition: opacity var(--fade) var(--ease);
  /* scrim so controls stay readable over live video */
  background: linear-gradient(to top, rgba(4, 7, 12, 0.72), transparent);
}
[data-theme="day"] .controls {
  background: linear-gradient(to top, rgba(212, 220, 228, 0.95) 40%, transparent);
}

body.idle .controls, body.idle .brand { opacity: 0; pointer-events: none; }

.controls-row {
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap; justify-content: center;
}

.ctl {
  min-width: 52px; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ink);
  font: inherit; font-size: var(--t-md); cursor: pointer;
  opacity: 0.9; transition: opacity 200ms, transform 200ms var(--ease);
}
.ctl:hover { opacity: 1; transform: translateY(-1px); }
.ctl svg { width: 32px; height: 32px; }

.play {
  min-width: 64px; min-height: 64px;
  border: 1px solid var(--line); border-radius: 50%;
}
.play svg { width: 30px; height: 30px; }

.play .ic-play { display: none; }
body.paused .play .ic-play { display: block; }
body.paused .play .ic-pause { display: none; }

.moods { display: flex; gap: var(--s-2); }
.mood {
  min-height: 52px; padding: 0 var(--s-2);
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: var(--t-md);
  color: var(--ink-soft);
  transition: color 400ms, text-shadow 400ms;
}
.mood:hover { color: var(--ink); }
.mood.active {
  color: var(--ink);
  text-shadow: 0 0 18px color-mix(in srgb, var(--glow) 60%, transparent);
}

.right { display: flex; align-items: center; gap: var(--s-2); }

.volume { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink-soft); }
.volume svg { width: 24px; height: 24px; flex: none; }
input[type="range"] {
  appearance: none; -webkit-appearance: none;
  width: 140px; height: 52px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--line); border-radius: 1px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); margin-top: -7px;
  transition: transform 150ms var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.25); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--line); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--ink);
}

.timer.armed { color: var(--glow); opacity: 1; }

.wake[aria-pressed="true"] {
  color: var(--glow); opacity: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--glow) 60%, transparent);
}

.theme-corner {
  position: fixed; top: var(--s-3); right: var(--s-4); z-index: 4;
  transition: opacity var(--fade) var(--ease);
}
body.idle .theme-corner { opacity: 0; pointer-events: none; }

.theme .ic-moon { display: none; }
[data-theme="day"] .theme .ic-moon { display: block; }
[data-theme="day"] .theme .ic-sun { display: none; }

.mood-desc {
  color: var(--ink-soft); font-size: var(--t-md);
  min-height: 1.4em; text-align: center;
  transition: opacity 600ms var(--ease);
}
.mood-desc.swap { opacity: 0; }

.noscript {
  position: fixed; inset: 0; display: grid; place-items: center;
  font-size: var(--t-md); color: var(--ink);
}

@media (max-width: 640px) {
  .brand { left: var(--s-3); }
  .theme-corner { right: var(--s-3); }
  .controls-row { gap: var(--s-2); }
  input[type="range"] { width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .begin:hover { transform: none; }
}