/* roshandaan.css — one portal, three rooms.
 *
 * Each mood owns a palette, and the whole chrome re-tints when you switch:
 * focus is cool and overcast, evening is warm over near-black, and Sunday is
 * the only light theme — the portal itself brightens for the afternoon.
 */

/* ------------------------------------------------------------------ tokens */

:root {
  --radius: 14px;
  --bar-h: 76px;
  --font-display: "Anek Devanagari", "Nirmala UI", system-ui, sans-serif;
  --font-ui: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --live: oklch(76% 0.18 145);

  /* defaults = focus */
  --bg: oklch(13% 0.028 250);
  --ink: oklch(96% 0.010 240);
  --dim: oklch(70% 0.020 245);
  --line: oklch(100% 0 0 / 0.13);
  --glass: oklch(16% 0.030 250 / 0.40);
  --accent: oklch(80% 0.115 205);
  --accent-ink: oklch(18% 0.03 250);
  --shadow: 0 18px 50px oklch(0% 0 0 / 0.45);
}

body[data-mood="focus"] {
  --bg: oklch(13% 0.028 250);
  --ink: oklch(96% 0.010 240);
  --dim: oklch(70% 0.020 245);
  --line: oklch(100% 0 0 / 0.13);
  --glass: oklch(16% 0.030 250 / 0.40);
  --accent: oklch(80% 0.115 205);
  --accent-ink: oklch(18% 0.03 250);
  --shadow: 0 18px 50px oklch(0% 0 0 / 0.45);
}

body[data-mood="evening"] {
  --bg: oklch(9% 0.028 45);
  --ink: oklch(94% 0.025 70);
  --dim: oklch(68% 0.035 60);
  --line: oklch(100% 0 0 / 0.12);
  --glass: oklch(13% 0.035 45 / 0.42);
  --accent: oklch(78% 0.150 62);
  --accent-ink: oklch(16% 0.04 45);
  --shadow: 0 18px 50px oklch(0% 0 0 / 0.55);
}

body[data-mood="sunday"] {
  --bg: oklch(91% 0.045 88);
  --ink: oklch(26% 0.050 45);
  --dim: oklch(45% 0.045 50);
  --line: oklch(30% 0.05 45 / 0.20);
  --glass: oklch(95% 0.035 88 / 0.52);
  --accent: oklch(56% 0.170 42);
  --accent-ink: oklch(97% 0.02 88);
  --shadow: 0 18px 50px oklch(35% 0.06 50 / 0.28);
}

/* -------------------------------------------------------------- foundation */

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow-x: hidden;
  transition: background 900ms ease, color 900ms ease;
}

/* the scene sits behind everything */
#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#stage .scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* crossfade between rooms */
#stage .scene-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1100ms ease;
}
#stage .scene-wrap.on { opacity: 1; }

/* A vignette so text always has something to sit on.
 *
 * Kept deliberately light. The dark rooms are already dark, and stacking two
 * heavy black gradients over them erased the scene completely — the fan, the
 * rain and the lit windows were all still being drawn, just invisible. The
 * readable text comes from the blurred glass panels, not from drowning the art. */
#stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(125% 95% at 50% 32%, transparent 45%, oklch(0% 0 0 / 0.26) 100%),
    linear-gradient(to bottom, oklch(0% 0 0 / 0.24) 0%, transparent 22%, transparent 62%, oklch(0% 0 0 / 0.42) 100%);
}
body[data-mood="sunday"] #stage::after {
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 42%, oklch(40% 0.06 55 / 0.24) 100%),
    linear-gradient(to bottom, oklch(30% 0.05 50 / 0.20) 0%, transparent 24%, transparent 56%, oklch(30% 0.05 50 / 0.34) 100%);
}

main {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--bar-h) + 20px);
}

/* ------------------------------------------------------------------ topbar */

header.top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  flex-wrap: wrap;
}

.clock {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}

.listeners {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--dim);
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(76% 0.18 145 / 0.55); }
  70%  { box-shadow: 0 0 0 9px oklch(76% 0.18 145 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(76% 0.18 145 / 0); }
}
.listeners b { color: var(--ink); font-weight: 600; font-family: var(--font-mono); }

header.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 200ms, transform 200ms, background 200ms;
}
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip[hidden] { display: none; }
.chip svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

/* --------------------------------------------------------------- the hero */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 24px 40px;
  gap: 8px;
  /* The scene gets the whole first screen; the footer is a scroll-down. The
     footer lives inside <main>, so main's own min-height cannot push it below
     the fold — the hero has to claim the height itself. */
  min-height: calc(100vh - 172px);
  min-height: calc(100svh - 172px);
}

h1.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 12vw, 148px);
  line-height: 0.92;
  margin: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 8px 40px oklch(0% 0 0 / 0.5);
}
body[data-mood="sunday"] h1.wordmark { text-shadow: 0 8px 34px oklch(40% 0.07 55 / 0.30); }
h1.wordmark .a { color: var(--ink); }
h1.wordmark .b { color: var(--accent); }

.latin {
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.66;
  margin: 6px 0 0;
}

.tagline {
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--ink);
  opacity: 0.82;
  margin: 14px 0 0;
  max-width: 46ch;
}

/* -------------------------------------------------------------- mood cards */

.moods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(1000px, 100%);
  margin-top: 40px;
}

.mood {
  appearance: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  backdrop-filter: blur(20px) saturate(1.12);
  box-shadow: var(--shadow);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms, background 260ms;
  position: relative;
  overflow: hidden;
}
.mood:hover { transform: translateY(-4px); border-color: var(--accent); }
.mood[aria-current="true"] {
  border-color: var(--accent);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--accent);
}
.mood[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}

.mood .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}
.mood .name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.12;
  margin-bottom: 6px;
}
.mood .desc {
  display: block;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.5;
}

/* ------------------------------------------------------- language selector */

.langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  width: min(1000px, 100%);
}

.lang {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: var(--shadow);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), border-color 200ms,
              background 200ms, color 200ms;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lang:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }

.lang[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  font-weight: 600;
}

/* A language with no verified playlist must look unavailable rather than
   silently doing nothing when pressed. */
.lang:disabled {
  opacity: 0.34;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Each script gets the font actually designed for it. Anek Devanagari and Anek
   Bangla are siblings, so the two sit together as one family. Nirmala UI is the
   Windows fallback and covers both. */
.lang .dev { font-family: "Anek Devanagari", "Nirmala UI", system-ui, sans-serif; font-size: 18px; }
.lang .ben { font-family: "Anek Bangla", "Nirmala UI", system-ui, sans-serif; font-size: 18px; }

.lang .n {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------- the mixer */

.mixer {
  width: min(1000px, 100%);
  margin: 22px auto 0;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
}
.mixer > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.mixer > summary::-webkit-details-marker { display: none; }
.mixer > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--dim);
  transition: transform 240ms;
}
.mixer[open] > summary::after { transform: rotate(180deg); }
.mixer .body {
  padding: 4px 18px 18px;
  display: grid;
  gap: 14px;
}

.slider {
  display: grid;
  grid-template-columns: 190px 1fr 44px;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.slider label { color: var(--dim); }
.slider output {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--ink) 22%, transparent);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 15px; height: 15px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 6px oklch(0% 0 0 / 0.4);
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ------------------------------------------------------------- player bar */

.player {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: var(--glass);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.15);
  transition: background 900ms ease;
}

.tbtn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  transition: border-color 180ms, background 180ms, transform 180ms;
}
.tbtn:hover { border-color: var(--accent); }
.tbtn:active { transform: scale(0.94); }
.tbtn.primary {
  width: 48px; height: 48px;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.tbtn svg { width: 17px; height: 17px; fill: currentColor; }
.tbtn.primary svg { width: 19px; height: 19px; }

.nowplaying {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.nowplaying .t {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nowplaying .s {
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}
.nowplaying .s .warn { color: oklch(76% 0.16 60); }

.vol {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 150px;
  flex: none;
}
.vol .cap {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
}

/* the YouTube iframe: present, audible, never seen */
#ytwrap {
  position: fixed;
  width: 320px; height: 180px;
  left: -9999px; top: 0;
  pointer-events: none;
  opacity: 0;
}

/* ------------------------------------------------------------------ footer */

footer {
  position: relative;
  z-index: 1;
  padding: 40px 24px 30px;
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(8px);
  font-size: 13px;
  color: var(--dim);
  line-height: 1.65;
}
footer .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}
footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  margin: 0 0 10px;
  font-weight: 500;
}
footer .mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 6px;
}
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 5px; }
footer a { color: var(--ink); opacity: 0.85; text-decoration: none; border-bottom: 1px solid var(--line); }
footer a:hover { border-bottom-color: var(--accent); }
footer .fine {
  max-width: 1100px;
  margin: 26px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  opacity: 0.8;
}

/* ------------------------------------------------------------------- toast */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bar-h) + 22px);
  transform: translate(-50%, 20px);
  z-index: 20;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  color: var(--ink);
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms, transform 260ms;
  max-width: min(92vw, 620px);
  text-align: center;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------- scene animation */

@keyframes fall { to { transform: translateY(880px); } }
.rain { animation-name: fall; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.fan-blades { animation: spin 1.35s linear infinite; transform-origin: 0 0; }

@keyframes steam {
  0%   { opacity: 0;    transform: translateY(6px)  scaleX(0.9); }
  40%  { opacity: 0.34; }
  100% { opacity: 0;    transform: translateY(-30px) scaleX(1.25); }
}
.steam  { animation: steam 7.5s ease-in-out infinite; }
.steam2 { animation-duration: 9.5s; animation-delay: -3s; }

@keyframes twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 0.95; } }
.star { animation-name: twinkle; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: 0.82; }
  98%           { opacity: 0.96; }
}
.bulb, .bulbglow { animation: flicker 9s linear infinite; }

@keyframes lit { 0%,100% { opacity: 0.5; } 50% { opacity: 0.22; } }
.win-lit { animation: lit 14s ease-in-out infinite; }
.win-lit.d1 { animation-duration: 19s; animation-delay: -4s; }
.win-lit.d2 { animation-duration: 23s; animation-delay: -9s; }
.win-lit.d3 { animation-duration: 17s; animation-delay: -13s; }

@keyframes mothpath {
  0%   { transform: translate(300px, 250px) rotate(0deg); }
  25%  { transform: translate(420px, 208px) rotate(12deg); }
  50%  { transform: translate(398px, 320px) rotate(-8deg); }
  75%  { transform: translate(286px, 300px) rotate(6deg); }
  100% { transform: translate(300px, 250px) rotate(0deg); }
}
.moth { animation: mothpath 11s ease-in-out infinite; }

@keyframes curtain {
  0%,100% { transform: translateX(0) skewX(0deg); }
  50%     { transform: translateX(9px) skewX(-1.1deg); }
}
.curtain { animation: curtain 13s ease-in-out infinite; transform-origin: 50% 0; }

@keyframes float {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(26px, -46px); }
  100% { transform: translate(-14px, -96px); opacity: 0; }
}
.mote { animation-name: float; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes shaftsway {
  0%,100% { opacity: 0.5;  transform: translateX(0); }
  50%     { opacity: 0.34; transform: translateX(-16px); }
}
.shaft { animation: shaftsway 21s ease-in-out infinite; }
.shaft.s2 { animation-duration: 27s; animation-delay: -8s; }

@keyframes sway {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(2.2deg); }
}
.cloth { animation: sway 8s ease-in-out infinite; transform-origin: 50% 0; }
.cloth.c2 { animation-duration: 10.5s; animation-delay: -2s; }
.cloth.c3 { animation-duration: 9.2s;  animation-delay: -5s; }

@keyframes leafsway {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(2.6deg); }
}
.leaf { animation: leafsway 7s ease-in-out infinite; transform-origin: 170px 632px; }
.leaf.l2 { animation-duration: 9s; animation-delay: -3s; }
.leaf.l3 { animation-duration: 8s; animation-delay: -5s; }

@keyframes bob {
  0%, 88%, 100% { transform: translateY(0); }
  92%           { transform: translateY(-3px); }
}
.pigeon { animation: bob 6s ease-in-out infinite; }
.pigeon.p2 { animation-duration: 8.5s; animation-delay: -2s; }
.pigeon.p3 { animation-duration: 7.2s; animation-delay: -4s; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .moods { grid-template-columns: 1fr; }
  footer .grid { grid-template-columns: 1fr; gap: 22px; }
  .slider { grid-template-columns: 130px 1fr 40px; }
  .vol { width: 104px; }
  .vol .cap { display: none; }
  .nowplaying .s { font-size: 11px; }
}

@media (max-width: 620px) {
  :root { --bar-h: 68px; }
  header.top { padding: 14px 16px; gap: 12px; }
  .player { gap: 10px; padding: 0 12px; }
  .vol { display: none; }
  .hero { padding-top: 6px; }
  .moods { margin-top: 26px; }
}

/* Someone who has asked for less motion should get a still room, not a
   slightly calmer one. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #stage .scene-wrap { transition: none; }
}