/* Spud & Root: home/index.html, Home: the family room at Mom's, in the
   1990s. Loaded after hub.css, which has the map, the buttons and the
   frame of the scene. This has the sky through the window for the time of
   day (hub.js sets data-time on .hub), the torchiere, the TV's channels
   (home.js sets data-lamp and data-ch, and the VCR's clock), and what moves
   in the room. The scene is drawn by scripts/draw-home.py. See
   docs/pages/home.md. */

.hub {
  --sky0: #7fb6e4;
  --sky1: #b9dcf1;
  --sky2: #e8f2e6;
  --moon-cut: #0d1533;
}
.hub[data-time="dusk"] {
  --sky0: #52548f;
  --sky1: #d98a86;
  --sky2: #ffcf8f;
}
.hub[data-time="night"] {
  --sky0: #0d1533;
  --sky1: #1d2a55;
  --sky2: #34406e;
}

/* Indoors the evening is gentler than out in the park */
.hub[data-time="dusk"] .tint {
  fill: #5a3a4f;
  opacity: 0.16;
}
.hub[data-time="night"] .tint {
  fill: #10163a;
  opacity: 0.42;
}

/* Nobody's home after dark: they're all at Russet's */
.hub[data-time="night"] .day-only {
  display: none;
}

/* The torchiere is on after sunset, and whenever you switch it on */
.lamp-light {
  display: none;
}
.hub[data-lamp="on"] .lamp-light {
  display: inline;
}

/* The TV: one channel showing at a time */
.ch {
  display: none;
}
.hub[data-ch="0"] .ch[data-ch="0"],
.hub[data-ch="1"] .ch[data-ch="1"],
.hub[data-ch="2"] .ch[data-ch="2"],
.hub[data-ch="3"] .ch[data-ch="3"] {
  display: inline;
}

.tv,
.remote,
.lamp,
.fan-chain {
  cursor: pointer;
}
.tv:focus,
.remote:focus,
.lamp:focus,
.fan-chain:focus {
  outline: none;
}
.tv:focus-visible > rect:first-child,
.remote:focus-visible rect,
.lamp:focus-visible path,
.fan-chain:focus-visible path {
  stroke: var(--logo-yellow);
  stroke-width: 3;
}

/* The fan's pull chain gives when you pull it, and springs back */
.fan-chain.is-pulled .fan-chain__pull {
  animation: tug 0.45s ease-out;
}
@keyframes tug {
  30% { transform: translateY(9px); }
  60% { transform: translateY(-2px); }
}

/* Words in the picture */
.rewind {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.5px;
  letter-spacing: 0.02em;
  fill: #1d1d20;
}
.cable-led {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 12px;
  fill: #ff4438;
}
.tv-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  fill: #ffffff;
}
.vcr-clock {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 13px;
  fill: #6dff8a;
}
.pic-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  fill: var(--ink);
}
.pic-text--note {
  font-size: 11px;
}

/* ---------- Things that move ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Without JavaScript; home.js turns them otherwise (data-fan) */
  .hub:not([data-fan]) .fan__blades {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: spin 2.4s linear infinite;
  }
  .flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: flicker 0.9s ease-in-out infinite alternate;
  }
  .snow {
    animation: snow 0.25s steps(3) infinite;
  }
  /* Until home.js sets it (or without JavaScript), the VCR blinks 12:00 */
  .vcr-clock:not(.is-set) {
    animation: blink 1s steps(1) infinite;
  }
  .pipes path {
    stroke-dasharray: 160;
    animation: pipes 9s linear infinite;
  }
  .pipes path:nth-child(2) {
    animation-delay: -3s;
  }
  .pipes path:nth-child(3) {
    animation-delay: -6s;
  }
}

@keyframes spin {
  to { rotate: 360deg; }
}
@keyframes flicker {
  50% { scale: 1.06 0.9; }
  100% { scale: 0.94 1.08; }
}
@keyframes snow {
  to { translate: 0 18px; }
}
@keyframes blink {
  50% { opacity: 0; }
}
@keyframes pipes {
  from { stroke-dashoffset: 160; }
  60%, to { stroke-dashoffset: 0; }
}