/* ==========================================================================
   Nook — the room (SVG scene)
   Shared by index.html and docs/room-preview.html. No id selectors here:
   the preview repeats the scene, so objects are styled by class/attribute.
   ========================================================================== */

.room { display: block; width: 100%; height: 100%; }

/* --- Fills ---------------------------------------------------------------
   Each class exposes its colour as --c, so a stroked shape (fill="none")
   reuses the same class for its stroke. */
.f-wall      { --c: var(--wall); }
.f-wall-deep { --c: var(--wall-deep); }
.f-wall-lit  { --c: var(--wall-lit); }
.f-ink       { --c: var(--ink); }
.f-iron      { --c: var(--iron); }
.f-iron-lit  { --c: var(--iron-lit); }
.f-wood      { --c: var(--wood); }
.f-wood-dark { --c: var(--wood-dark); }
.f-wood-lit  { --c: var(--wood-lit); }
.f-brass     { --c: var(--brass); }
.f-lamp      { --c: var(--lamp); }
.f-rain      { --c: var(--rain); }
.f-plant     { --c: var(--plant); }
.f-paper     { --c: var(--paper); }
.f-fur       { --c: var(--fur); }
.f-note      { --c: var(--note); }
.f-curtain   { --c: var(--curtain); }
.f-rug       { --c: var(--rug); }
.f-grille    { --c: var(--grille); }
.f-pot       { --c: var(--pot); }
.f-sky       { --c: var(--sky); }
.f-city-far  { --c: var(--city-far); }
.f-city      { --c: var(--city); }
.f-ember     { --c: var(--ember); }

[class*="f-"] { fill: var(--c); }
[class*="f-"][fill="none"] { fill: none; stroke: var(--c); }

/* --- Window -------------------------------------------------------------- */
.city-lights { opacity: var(--city-lights); transition: opacity var(--dur-slow) var(--ease-out); }
.streak      { stroke: var(--streak); stroke-linecap: round; }
.drops       { fill: var(--streak); opacity: 0.55; }
.glass-sheen { opacity: 0.05; }

/* --- Light: flat shapes at low opacity, scaled by tokens ----------------- */
.daylight  { fill: var(--paper); opacity: calc(var(--daylight) * 0.5); }
.lamp-halo { fill: var(--lamp);  opacity: calc(var(--lamp-on) * 0.035); }
.lamp-cone { fill: var(--lamp);  opacity: calc(var(--lamp-on) * 0.13); }
.lamp-pool { fill: var(--lamp);  opacity: calc(var(--lamp-on) * 0.4); }
.bulb      { fill: var(--lamp);  opacity: calc(0.15 + var(--lamp-on) * 0.85); }

/* The lamp warms up: bulb first, then the light it throws. */
.bulb { transition: opacity var(--dur-quick) var(--ease-out); }
.lamp-halo, .lamp-cone, .lamp-pool {
  transition: opacity var(--dur-slow) var(--ease-out) 120ms;
}

/* --- Stove: --fire follows the crackle volume ---------------------------- */
.fire       { opacity: calc(0.25 + var(--fire) * 0.75); transition: opacity var(--dur-slow) var(--ease-out); }
.fire-floor { fill: var(--lamp); opacity: calc(var(--fire) * 0.12); transition: opacity var(--dur-slow) var(--ease-out); }

/* --- Mug ----------------------------------------------------------------- */
.steam { stroke: var(--paper); opacity: 0.32; transition: opacity var(--dur-slow) var(--ease-out); }

/* --- Type inside the scene ----------------------------------------------- */
.clock-digits {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 0.02em;
  fill: var(--lamp);
}
.note-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  fill: var(--ink);
  opacity: 0.7;
}
.note-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-variation-settings: "opsz" 18;
  font-size: 18px;
  fill: var(--ink);
}
.note-text--small { font-size: 15px; }
.note-text--empty { opacity: 0.5; }

.grain { opacity: 0.14; mix-blend-mode: overlay; pointer-events: none; }

/* ==========================================================================
   Object states (set by js/room.js on the object's <g>)
   data-on="false"  the sound is off      --vol  0–1 volume
   data-hover       pointer or focus is on the object's button
   With no data-on (the preview), objects show their "on" look.
   ========================================================================== */

.rain-tier { transition: opacity var(--dur-slow) var(--ease-out); }
[data-on="true"] .rain-tier[data-tier="2"] { opacity: clamp(0, (var(--vol, 1) - 0.15) * 3, 1); }
[data-on="true"] .rain-tier[data-tier="3"] { opacity: clamp(0, (var(--vol, 1) - 0.5) * 3, 1); }
[data-on="false"] .rain-tier[data-tier="2"],
[data-on="false"] .rain-tier[data-tier="3"] { opacity: 0; }

[data-on="false"] .steam { opacity: 0; }
[data-on="true"]  .steam { opacity: calc(0.12 + var(--vol, 1) * 0.28); }

[data-on="false"].stove-group { --fire: 0.1; }
[data-on="true"].stove-group  { --fire: calc(0.3 + var(--vol, 1) * 0.7); }

.radio-dial { transition: fill var(--dur-calm) var(--ease-out); }
[data-on="true"] .radio-dial { fill: var(--lamp); }
.radio-needle, .radio-knob {
  transform-box: view-box;
  transition: transform var(--dur-calm) var(--ease-out);
}
.radio-needle { transform: translateX(calc((var(--vol, 0.5) - 0.5) * 44px)); }
.radio-knob {
  transform-origin: 1183px 606px;
  transform: rotate(calc(-130deg + var(--vol, 0.5) * 260deg));
}

/* --- Clock ----------------------------------------------------------------- */
.clock-digits { transition: fill var(--dur-calm) var(--ease-out), opacity var(--dur-calm) var(--ease-out); }
[data-status="paused"] > .clock-digits { opacity: 0.55; }
[data-phase="short"] > .clock-digits,
[data-phase="long"] > .clock-digits { fill: var(--break-ink); }
.clock-pips circle { fill: var(--wood-dark); transition: fill var(--dur-calm) var(--ease-out); }
.clock-pips .is-done { fill: var(--lamp); }

/* --- Cat: asleep during focus, stretches, then sits up for the break ------- */
.cat-pose { opacity: 0; transition: opacity 260ms var(--ease-out); }
.cat[data-state="asleep"] .cat-pose--asleep,
.cat[data-state="stretch"] .cat-pose--stretch,
.cat[data-state="awake"] .cat-pose--awake { opacity: 1; }
.cat-eye { fill: var(--cat-eye); }

@media (prefers-reduced-motion: no-preference) {
  .cat-pose--asleep .cat-body {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: cat-breathe 2.1s var(--ease-soft) infinite alternate;
  }
  .cat-tail {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: cat-tail 7s var(--ease-soft) infinite;
  }
}
@keyframes cat-breathe { to { transform: scaleY(1.025); } }
@keyframes cat-tail {
  0%, 72%, 100% { rotate: 0deg; }
  82% { rotate: -7deg; }
  91% { rotate: 3deg; }
}

/* --- Motion while a sound plays (none under reduced motion) --------------
   Rain streaks slide down the glass, steam drifts up and thins out, flames
   lick. Each element fades at the ends of its travel, so the restart is
   never seen. Slow, physical, no bounce. */
@media (prefers-reduced-motion: no-preference) {
  [data-on="true"] .streak {
    animation: streak-fall 1.3s linear infinite;
  }
  [data-on="true"] .streak:nth-child(3n)   { animation-duration: 1.05s; }
  [data-on="true"] .streak:nth-child(3n+1) { animation-duration: 1.6s; }
  [data-on="true"] .streak:nth-child(4n)   { animation-delay: -0.4s; }
  [data-on="true"] .streak:nth-child(4n+1) { animation-delay: -0.9s; }
  [data-on="true"] .streak:nth-child(4n+2) { animation-delay: -0.2s; }
  [data-on="true"] .streak:nth-child(5n)   { animation-delay: -1.2s; }

  [data-on="true"] .steam path {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: steam-rise 6s var(--ease-soft) infinite;
  }
  [data-on="true"] .steam path:nth-child(2) { animation-delay: -3s; animation-duration: 6.8s; }

  [data-on="true"] .fire path {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: flame-lick 0.9s var(--ease-soft) infinite alternate;
  }
  [data-on="true"] .fire path + path { animation-duration: 0.7s; animation-delay: -0.3s; }
}

@keyframes streak-fall {
  0%   { transform: translate(2px, -28px); opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(-5px, 34px); opacity: 0; }
}
@keyframes steam-rise {
  0%   { transform: translateY(8px) scaleX(0.9); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(-18px) scaleX(1.15); opacity: 0; }
}
@keyframes flame-lick {
  from { transform: scaleY(0.94) skewX(-1.5deg); }
  to   { transform: scaleY(1.04) skewX(1.5deg); }
}

/* Hover/focus: the object catches a little more light. */
.room [data-hover] { filter: brightness(1.12); }
.room g[id], .room [data-object] { transition: filter var(--dur-quick) var(--ease-out); }

/* Reduced motion: opacity fades stay (they are light, not movement);
   anything that travels or turns snaps into place. */
@media (prefers-reduced-motion: reduce) {
  .radio-needle, .radio-knob { transition: none; }
}