/* Vesper — dusk, quiet, atmospheric; placeholder palette; retune when the real image is chosen. */
:root {
  color-scheme: dark;

  /* Color */
  --color-bg-fallback: #14122b;
  --color-text: #e8e4ee;
  --color-text-dim: rgb(232 228 238 / 0.72);
  --color-accent: #f0b48a;
  --color-focus: #f0b48a;
  --hairline: rgb(232 228 238 / 0.14);
  --selection-bg: rgb(240 180 138 / 0.35);

  /* Scrim and legibility */
  --scrim-gradient: linear-gradient(to bottom, rgb(0 0 0 / 0.30), rgb(0 0 0 / 0.12) 40%, rgb(0 0 0 / 0.55));
  --text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);

  /* Background */
  --bg-position: 50% 60%;

  /* Type */
  --font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-body: 300;
  --weight-name: 200;
  --size-name: clamp(2.25rem, 9vw, 4.5rem);
  --size-body: 1rem;
  --size-small: 0.8125rem;
  --tracking-name: 0.38em;
  --tracking-body: 0.02em;
  --leading-body: 1.7;
  --name-transform: uppercase;

  /* Space and layout */
  --page-pad: clamp(1.5rem, 6vw, 3rem);
  --content-width: 34rem;
  --content-justify: flex-start;
  --content-align: center;
  --content-text-align: center;
  --section-gap: 3rem;
  --links-gap: 1.5rem;
  --song-row-pad: 0.9rem;

  /* Artist-name voting */
  --vote-idle-opacity: 0.62;
  --vote-hover-opacity: 0.85;
  --vote-selected-opacity: 1;
  --vote-selected-glow: 0 0 1rem rgb(232 228 238 / 0.4);
  --vote-transition: 400ms var(--ease-slow);

  /* Motion */
  --motion-intensity: 1;
  --duration-fast: 200ms;
  --duration-slow: 12s;
  --ease-slow: cubic-bezier(0.4, 0, 0.2, 1);

  /* FX layer hooks */
  --fx-fog-opacity: 0;
  --fx-clouds-opacity: 0;
  --fx-stars-opacity: 0;
  --fx-rays-opacity: 0;

  /* Framing branches */
  --branches-display: block;
  --branches-opacity: 0.52;
  --branches-transition: 900ms var(--ease-slow);

  /* Sunrays */
  --rays-display: block;
  --rays-x: 1.08;
  --rays-y: -0.12;
  --rays-point: calc(var(--rays-x) * 100%) calc(var(--rays-y) * 100%);
  --rays-box-w: 50vmax;
  --rays-color: 255 243 218;
  --rays-blend: normal;
  --rays-opacity: 1;
  --rays-swell: 0.3;
  --rays-sway: 0.8deg;
  --rays-falloff: linear-gradient(to bottom, #000 0, rgb(0 0 0 / 0.55) 35%, transparent 100%);
  --rays-pulse-min: 0.7;
  --rays-pulse-dur: 20s;
  --rays-pulse-effective-min: calc(1 - (1 - var(--rays-pulse-min)) * var(--motion-intensity));
  --ray-1-angle: 221deg;
  --ray-2-angle: 229deg;
  --ray-3-angle: 240deg;
  --ray-4-angle: 247deg;
  --ray-5-angle: 256deg;
  --ray-1-hw: 4.5deg;
  --ray-2-hw: 3deg;
  --ray-3-hw: 6deg;
  --ray-4-hw: 3.5deg;
  --ray-5-hw: 5deg;
  --ray-1-lit-hw: calc(var(--ray-1-hw) * (1 + var(--rays-swell)) + var(--rays-sway));
  --ray-2-lit-hw: calc(var(--ray-2-hw) * (1 + var(--rays-swell)) + var(--rays-sway));
  --ray-3-lit-hw: calc(var(--ray-3-hw) * (1 + var(--rays-swell)) + var(--rays-sway));
  --ray-4-lit-hw: calc(var(--ray-4-hw) * (1 + var(--rays-swell)) + var(--rays-sway));
  --ray-5-lit-hw: calc(var(--ray-5-hw) * (1 + var(--rays-swell)) + var(--rays-sway));
  --ray-1-len: 120vmax;
  --ray-2-len: 90vmax;
  --ray-3-len: 140vmax;
  --ray-4-len: 100vmax;
  --ray-5-len: 75vmax;
  --ray-1-pk: 0.33;
  --ray-2-pk: 0.42;
  --ray-3-pk: 0.48;
  --ray-4-pk: 0.36;
  --ray-5-pk: 0.30;
  --ray-1-t: 15.5;
  --ray-2-t: 21.5;
  --ray-3-t: 26.5;
  --ray-4-t: 18.5;
  --ray-5-t: 23.5;
  --rays-lit-display: block;
  --rays-lit-color: 255 243 218;
  --rays-lit-opacity: 0.28;
  --rays-lit-length: max(var(--ray-1-len), var(--ray-2-len), var(--ray-3-len), var(--ray-4-len), var(--ray-5-len));
  --rays-lit-fade: radial-gradient(circle at var(--rays-point), #000 0, #000 calc(var(--rays-lit-length) * 0.85), transparent var(--rays-lit-length));
  --rays-lit-mask:
    conic-gradient(from calc(var(--ray-1-angle) - var(--ray-1-lit-hw)) at var(--rays-point), #000 calc(2 * var(--ray-1-lit-hw)), transparent 0),
    conic-gradient(from calc(var(--ray-2-angle) - var(--ray-2-lit-hw)) at var(--rays-point), #000 calc(2 * var(--ray-2-lit-hw)), transparent 0),
    conic-gradient(from calc(var(--ray-3-angle) - var(--ray-3-lit-hw)) at var(--rays-point), #000 calc(2 * var(--ray-3-lit-hw)), transparent 0),
    conic-gradient(from calc(var(--ray-4-angle) - var(--ray-4-lit-hw)) at var(--rays-point), #000 calc(2 * var(--ray-4-lit-hw)), transparent 0),
    conic-gradient(from calc(var(--ray-5-angle) - var(--ray-5-lit-hw)) at var(--rays-point), #000 calc(2 * var(--ray-5-lit-hw)), transparent 0);

  /* Fog layers */
  --fog-1-display: block;
  --fog-1-offset: 0;
  --fog-1-height: 60vh;
  --fog-1-drift: 15s;
  --fog-1-breathe: 37s;
  --fog-1-dir: normal;
  --fog-1-lo: 0.60;
  --fog-1-hi: 1;
  --fog-2-display: block;
  --fog-2-offset: -2vh;
  --fog-2-height: 40vh;
  --fog-2-drift: 13s;
  --fog-2-breathe: 29s;
  --fog-2-dir: reverse;
  --fog-2-lo: 0.45;
  --fog-2-hi: 0.90;

  /* Ambient spores */
  --spores-enabled: block;
  --spores-color: 255 243 218;
  --spores-opacity: 0.72;
  --spores-size: 10px;

  /* Wind gust */
  --gust-display: block;
  --gust-color: rgb(255 243 218 / 0.5);
  --gust-opacity: 0.16;
  --gust-cycle: 68s;
  --gust-cycle-offset: -38s;

  /* Rain */
  --rain-display: block;
  --rain-color: #d7f4ff;
  --rain-opacity-max: 1;
  --rain-cycle: 10s;
  --rain-cycle-offset: -4s;
  --rain-cycle-animation: rain-cycle;
  --rain-fall-far: 1.6s;
  --rain-fall-near: 0.67s;

  /* Player */
  --progress-track: rgb(232 228 238 / 0.2);
  --progress-fill: #e8e4ee;
  --progress-height: 2px;
}

@media (max-aspect-ratio: 1/1) {
  :root {
    --ray-1-angle: 190deg;
    --ray-2-angle: 196deg;
    --ray-3-angle: 204deg;
    --ray-4-angle: 210deg;
    --ray-5-angle: 219deg;
  }
}

@supports (height: 1svh) {
  :root {
    --fog-1-height: 60svh;
    --fog-2-offset: -2svh;
    --fog-2-height: 40svh;
  }
}