/* ============================================================
   Pastoral scene — the bus's little world.
   data-state: A (morning wait) / B (on the road, lurching) / C (evening)
   data-tod:   dawn / day / dusk / night   (sky backdrop, lerps via JS)
   data-dir:   to_work / from_work          (bus facing + travel direction)
   The moving bus is REQUIRED at every breakpoint (brand core).
   ============================================================ */

.scene {
  position: relative;
  height: 170px;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  isolation: isolate;
}

/* ---- Sky (time-of-day) ---- */
.scene .sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: background var(--motion-slow) var(--ease-smooth);
  background: linear-gradient(to bottom, #EAE9CF 0%, var(--sky-day) 48%);
}
.scene[data-tod="dawn"] .sky  { background: linear-gradient(to bottom, #F4DDB4 0%, var(--sky-dawn) 52%); }
.scene[data-tod="day"]  .sky  { background: linear-gradient(to bottom, #EAE9CF 0%, var(--sky-day) 48%); }
.scene[data-tod="dusk"] .sky  { background: linear-gradient(to bottom, #E8A06A 0%, #EBB07E 40%, var(--sky-dusk) 70%); }
.scene[data-tod="night"] .sky { background: linear-gradient(to bottom, var(--sky-night) 0%, var(--sky-night-2) 70%); }

/* ---- Stars (night only) ---- */
.scene .stars {
  position: absolute;
  inset: 0 0 50% 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-slow) var(--ease-smooth);
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, var(--star) 50%, transparent 50%),
    radial-gradient(1.2px 1.2px at 38% 12%, var(--star) 50%, transparent 50%),
    radial-gradient(1.6px 1.6px at 60% 26%, var(--star) 50%, transparent 50%),
    radial-gradient(1.2px 1.2px at 78% 14%, var(--star) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 30%, var(--star) 50%, transparent 50%);
}
.scene[data-tod="night"] .stars { opacity: 0.7; }

/* ---- Hills ---- */
.scene .hill {
  position: absolute;
  bottom: 36px;
  width: 150%;
  height: 84px;
  z-index: 2;
  pointer-events: none;
}
.scene .hill.h1 { left: -28%; background: radial-gradient(ellipse at 50% 100%, #A9C68C 0, #A9C68C 60%, transparent 62%); }
.scene .hill.h2 { right: -32%; bottom: 40px; background: radial-gradient(ellipse at 50% 100%, #BBD19C 0, #BBD19C 60%, transparent 62%); }
.scene[data-tod="dusk"] .hill.h1 { background: radial-gradient(ellipse at 50% 100%, #8FA876 0, #8FA876 60%, transparent 62%); }
.scene[data-tod="night"] .hill.h1 { background: radial-gradient(ellipse at 50% 100%, #2C3A52 0, #2C3A52 60%, transparent 62%); }
.scene[data-tod="night"] .hill.h2 { background: radial-gradient(ellipse at 50% 100%, #35455F 0, #35455F 60%, transparent 62%); }

/* ---- Ground + road ---- */
.scene .ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  z-index: 3;
  background: var(--leaf-soft);
}
.scene[data-tod="night"] .ground { background: #3A4A30; }
.scene .road {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  height: 24px;
  z-index: 5;
  background: var(--ink-soft);
}
.scene[data-tod="night"] .road { background: #161E16; }
.scene .road::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  transform: translateY(-50%);
  background-image: repeating-linear-gradient(to right, var(--am-soft) 0 14px, transparent 14px 26px);
}

/* ---- Props ---- */
.scene .tree {
  position: absolute;
  bottom: 44px;
  width: 4px; height: 18px;
  z-index: 4;
  background: #6B5A36;
}
.scene .tree::before {
  content: "";
  position: absolute;
  top: -15px; left: -9px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--leaf);
}
.scene .tree.t1 { left: 24px; }
.scene .tree.t2 { right: 40px; bottom: 48px; }
.scene[data-tod="night"] .tree::before { background: #3F6A2E; }

.scene .house {
  position: absolute;
  bottom: 44px; left: 38px;
  width: 32px; height: 24px;
  z-index: 4;
  background: var(--pm-soft);
  border: 1px solid var(--pm-deep);
}
.scene .house::before {
  content: "";
  position: absolute;
  top: -11px; left: -3px;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-bottom: 11px solid var(--pm-deep);
}

.scene .office {
  position: absolute;
  bottom: 44px; right: 58px;
  width: 22px; height: 46px;
  z-index: 4;
  background: #BFC9C0;
  border: 1px solid var(--ink-muted);
}
.scene .office::after {
  content: "";
  position: absolute;
  inset: 4px;
  background-image:
    repeating-linear-gradient(to bottom, var(--am-soft) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(to right, var(--am-soft) 0 4px, transparent 4px 9px);
  opacity: 0.8;
}
.scene[data-tod="night"] .office::after { background-image:
  repeating-linear-gradient(to bottom, #F2D08A 0 4px, transparent 4px 9px),
  repeating-linear-gradient(to right, #F2D08A 0 4px, transparent 4px 9px); }

.scene .stopsign-mini {
  position: absolute;
  bottom: 36px; right: 18px;
  width: 3px; height: 30px;
  z-index: 6;
  background: var(--ink-muted);
}
.scene .stopsign-mini::before {
  content: "";
  position: absolute;
  top: -2px; left: -8px;
  width: 17px; height: 13px;
  background: var(--am);
  border: 1px solid var(--am-deep);
  border-radius: 2px;
}

/* Stationmaster figure — a small ink silhouette by the stop */
.scene .master {
  position: absolute;
  bottom: 36px; right: 40px;
  width: 8px; height: 18px;
  z-index: 6;
  background: var(--ink-soft);
  border-radius: 3px 3px 0 0;
}
.scene .master::before {
  content: "";
  position: absolute;
  top: -7px; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
}

/* ---- Bus — sits flush on the road; lurches in state B ---- */
.scene .bus {
  position: absolute;
  bottom: 12px;
  left: 12%;
  width: 78px;
  height: auto;
  z-index: 7;
  filter: drop-shadow(0 2px 2px rgba(80, 55, 20, 0.28));
  will-change: left, transform;
}

/* State A (morning wait, to_work) parks LEFT; C (evening wait, from_work) parks RIGHT */
.scene[data-state="A"] .bus { left: 18%; }
.scene[data-state="C"] .bus { left: 64%; }

/* State B: lurching across the road (kick-and-stop) + subtle bob */
.scene[data-state="B"][data-dir="to_work"] .bus {
  animation: bus-lurch 6s cubic-bezier(.6, .05, .4, .95) infinite, bus-bob 0.6s ease-in-out infinite;
}
.scene[data-state="B"][data-dir="from_work"] .bus {
  animation: bus-lurch-rev 6s cubic-bezier(.6, .05, .4, .95) infinite, bus-bob 0.6s ease-in-out infinite;
}

@keyframes bus-lurch {
  0%   { left: 8%; }
  16%  { left: 24%; } 22% { left: 24%; }
  40%  { left: 44%; } 46% { left: 44%; }
  66%  { left: 64%; } 72% { left: 64%; }
  100% { left: 82%; }
}
@keyframes bus-lurch-rev {
  0%   { left: 82%; }
  16%  { left: 66%; } 22% { left: 66%; }
  40%  { left: 46%; } 46% { left: 46%; }
  66%  { left: 26%; } 72% { left: 26%; }
  100% { left: 8%; }
}
@keyframes bus-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-1.5px) rotate(-0.5deg); }
}

/* ---- Caption ---- */
.scene .scene-caption {
  position: absolute;
  top: 8px; left: 10px;
  z-index: 8;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: rgba(248, 242, 222, 0.7);
  padding: 2px 6px;
  border-radius: 2px;
}
.scene[data-tod="night"] .scene-caption { color: var(--star); background: rgba(31, 41, 64, 0.6); }

/* Reduced motion: bus stays on the road but does not move */
@media (prefers-reduced-motion: reduce) {
  .scene .bus { animation: none !important; }
  .scene[data-state="B"][data-dir="to_work"] .bus { left: 24%; }
  .scene[data-state="B"][data-dir="from_work"] .bus { left: 66%; }
}

@media (min-width: 720px) {
  .scene { height: 210px; }
  .scene .bus { width: 96px; }
}