/* The train window and the carriage around it, and the colours of everything outside. */

.window {
  --w-sky-a: #ffd9b8;
  --w-sky-b: #ffe9cf;
  --w-sky-c: #bfe4df;
  --w-range: #b6d2d3;
  --w-snow: #fffaf0;
  --w-hill-far: #a3cbb3;
  --w-hill: #86bd97;
  --w-fir-far: #4c9963;
  --w-fir-far2: #3c8854;
  --w-ground-far: #73ab7b;
  --w-ground: #95c983;
  --w-fir: #3b8f4f;
  --w-fir2: #2c7841;
  --w-leaf: #62b05c;
  --w-leaf2: #3f934f;
  --w-trunk: #7a5a43;
  --w-water: #63bcbd;
  --w-water-hi: #e8fbf6;
  --w-wall0: #fff6e5;
  --w-wall1: #f2c14e;
  --w-wall2: #ffd9b8;
  --w-roof: #d6602b;
  --w-roof2: #1f8a8a;
  --w-block0: #eadfc8;
  --w-block1: #bcd8d4;
  --w-block2: #f7cba7;
  --w-pane: #5f7f90;
  --w-lamp: #d7eff0;
  --w-parapet: #ebe1cf;
  --w-parapet-top: #d3c6ad;
  --w-pole: #55597a;
  --w-wire: rgba(34, 34, 59, 0.45);
  --w-platform: #efe4cd;
  --w-edge: #f2c14e;
  --w-canopy: #1f8a8a;
  --w-sign: #22223b;
  --w-sign-dot: #f2702f;
  --w-sign-text: #fff6e5;
  --w-wood: #a07752;
  --w-wood-dark: #6b5843;
  --w-reed: #4f7d3a;
  --w-cattail: #7a4e2e;
  --w-duck: #6a5844;
  --w-car: #b8432f;
  --w-car-roof: #6b3a2c;
  --w-ink: #22223b;
  --w-orange: #f2702f;
  --w-yellow: #f2c14e;
  --w-teal: #1f8a8a;
  --w-green: #3b8f4f;
  --w-skin: #e2b48c;
  --w-skin2: #9c6a45;
  --w-olympics: #92b5c6;
  --w-sound: #3f9aa8;
  --w-sand: #ead6aa;
  --w-path: #eadbbb;
  --w-streak: transparent;
  --w-wash: rgba(242, 112, 47, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .window {
    --w-sky-a: #2a2450;
    --w-sky-b: #1a1c38;
    --w-sky-c: #0e1022;
    --w-range: #262b4d;
    --w-snow: #8d93b8;
    --w-hill-far: #1d2244;
    --w-hill: #181c39;
    --w-fir-far: #12283a;
    --w-fir-far2: #0f2131;
    --w-ground-far: #14212f;
    --w-ground: #182633;
    --w-fir: #13303a;
    --w-fir2: #0e2530;
    --w-leaf: #1b3a3e;
    --w-leaf2: #153036;
    --w-trunk: #2b2633;
    --w-water: #1c3a52;
    --w-water-hi: #ffd678;
    --w-wall0: #2c2f4b;
    --w-wall1: #33304a;
    --w-wall2: #2b2a46;
    --w-roof: #3a2a3b;
    --w-roof2: #173f4a;
    --w-block0: #262942;
    --w-block1: #22283f;
    --w-block2: #2d2840;
    --w-pane: #1a1c30;
    --w-lamp: #ffd678;
    --w-parapet: #2a2d46;
    --w-parapet-top: #353956;
    --w-pole: #3c4062;
    --w-wire: rgba(255, 214, 120, 0.3);
    --w-platform: #2b2e48;
    --w-edge: #f2c14e;
    --w-canopy: #1b5c5e;
    --w-sign: #0b0c18;
    --w-sign-dot: #f2702f;
    --w-sign-text: #ffd678;
    --w-wood: #4b3c3a;
    --w-wood-dark: #3a302e;
    --w-reed: #1e3433;
    --w-cattail: #3b2b2a;
    --w-duck: #4a4560;
    --w-car: #6e2e2c;
    --w-car-roof: #3a2228;
    --w-ink: #0b0c18;
    --w-orange: #c6602f;
    --w-yellow: #b99640;
    --w-teal: #1b5c5e;
    --w-green: #24533a;
    --w-skin: #9c7d66;
    --w-skin2: #6e4e38;
    --w-olympics: #1f2645;
    --w-sound: #16304a;
    --w-sand: #2c2d3f;
    --w-path: #2a2d40;
    --w-streak: #ffd678;
    --w-wash: rgba(18, 20, 36, 0.35);
  }
}
:root[data-theme="dark"] .window {
  --w-sky-a: #2a2450;
  --w-sky-b: #1a1c38;
  --w-sky-c: #0e1022;
  --w-range: #262b4d;
  --w-snow: #8d93b8;
  --w-hill-far: #1d2244;
  --w-hill: #181c39;
  --w-fir-far: #12283a;
  --w-fir-far2: #0f2131;
  --w-ground-far: #14212f;
  --w-ground: #182633;
  --w-fir: #13303a;
  --w-fir2: #0e2530;
  --w-leaf: #1b3a3e;
  --w-leaf2: #153036;
  --w-trunk: #2b2633;
  --w-water: #1c3a52;
  --w-water-hi: #ffd678;
  --w-wall0: #2c2f4b;
  --w-wall1: #33304a;
  --w-wall2: #2b2a46;
  --w-roof: #3a2a3b;
  --w-roof2: #173f4a;
  --w-block0: #262942;
  --w-block1: #22283f;
  --w-block2: #2d2840;
  --w-pane: #1a1c30;
  --w-lamp: #ffd678;
  --w-parapet: #2a2d46;
  --w-parapet-top: #353956;
  --w-pole: #3c4062;
  --w-wire: rgba(255, 214, 120, 0.3);
  --w-platform: #2b2e48;
  --w-edge: #f2c14e;
  --w-canopy: #1b5c5e;
  --w-sign: #0b0c18;
  --w-sign-dot: #f2702f;
  --w-sign-text: #ffd678;
  --w-wood: #4b3c3a;
  --w-wood-dark: #3a302e;
  --w-reed: #1e3433;
  --w-cattail: #3b2b2a;
  --w-duck: #4a4560;
  --w-car: #6e2e2c;
  --w-car-roof: #3a2228;
  --w-ink: #0b0c18;
  --w-orange: #c6602f;
  --w-yellow: #b99640;
  --w-teal: #1b5c5e;
  --w-green: #24533a;
  --w-skin: #9c7d66;
  --w-skin2: #6e4e38;
  --w-olympics: #1f2645;
  --w-sound: #16304a;
  --w-sand: #2c2d3f;
  --w-path: #2a2d40;
  --w-streak: #ffd678;
  --w-wash: rgba(18, 20, 36, 0.35);
}

/* ---------- the carriage: a cream wall, a teal stripe, the window, the seat ---------- */

.carriage {
  position: relative;
  padding: 18px 18px 30px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, transparent 0 86%, var(--teal) 86% 89%, transparent 89%),
    linear-gradient(180deg, var(--wall), var(--wall-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--shadow);
}
.carriage .seat {
  position: absolute;
  left: 7%;
  bottom: -14px;
  width: 38%;
  height: 46px;
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--seat) 80%, white), var(--seat));
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.45);
}
.carriage .seat::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 9px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 246, 229, 0.35);
}

.window {
  position: relative;
  overflow: hidden;
  border-radius: 44px;
  background: var(--w-sky-c);
  box-shadow: 0 0 0 12px var(--frame), 0 0 0 14px var(--frame-hi), inset 0 0 0 3px rgba(0, 0, 0, 0.25);
  isolation: isolate;
}
.world {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.world .layer {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  will-change: transform;
}

/* the sky: morning under the day and the evening, which fade in as the ride goes on */
.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--w-sky-c) 0%, var(--w-sky-b) 46%, var(--w-sky-a) 70%);
}
.sky > i {
  position: absolute;
  inset: 0;
  display: block;
}
.sky-day {
  opacity: var(--day, 0);
  background: linear-gradient(180deg, #8fd0e0 0%, #c9ecee 52%, #fff2da 72%);
}
.sky-eve {
  opacity: var(--eve, 0);
  background: linear-gradient(180deg, #6e6aa8 0%, #f29a7a 46%, #ffc36e 70%);
}
.sky-night {
  opacity: 0;
  background: linear-gradient(180deg, #070816 0%, #1b1838 50%, #3a2a55 72%);
}
.sky > .sun {
  inset: auto;
  left: 70%;
  top: 22%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e2 0 55%, rgba(255, 248, 226, 0.4) 62%, transparent 70%);
  transform: translateY(var(--sun-y, 0%));
}
.clouds {
  background:
    radial-gradient(28px 10px at 18% 22%, rgba(255, 255, 255, 0.85) 98%, transparent),
    radial-gradient(44px 13px at 24% 20%, rgba(255, 255, 255, 0.85) 98%, transparent),
    radial-gradient(36px 11px at 58% 34%, rgba(255, 255, 255, 0.7) 98%, transparent),
    radial-gradient(52px 14px at 64% 31%, rgba(255, 255, 255, 0.7) 98%, transparent),
    radial-gradient(30px 9px at 88% 15%, rgba(255, 255, 255, 0.8) 98%, transparent);
  animation: drift 60s linear infinite alternate;
}
.stars {
  opacity: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff6e5 98%, transparent),
    radial-gradient(1.2px 1.2px at 30% 9%, #fff6e5 98%, transparent),
    radial-gradient(1.6px 1.6px at 46% 26%, #fff6e5 98%, transparent),
    radial-gradient(1.2px 1.2px at 61% 12%, #fff6e5 98%, transparent),
    radial-gradient(1.4px 1.4px at 79% 30%, #fff6e5 98%, transparent),
    radial-gradient(1.2px 1.2px at 90% 8%, #fff6e5 98%, transparent),
    radial-gradient(1px 1px at 22% 36%, #fff6e5 98%, transparent),
    radial-gradient(1px 1px at 70% 40%, #fff6e5 98%, transparent);
}
@keyframes drift {
  from {
    transform: translateX(-4%);
  }
  to {
    transform: translateX(4%);
  }
}

.wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 20%, var(--w-wash));
  mix-blend-mode: multiply;
  opacity: var(--eve, 0);
}

/* by night: city lights streaking past, and your own reflection's glow on the glass */
.streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
.streaks i {
  position: absolute;
  left: -40%;
  width: 34%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--w-streak), transparent);
  opacity: 0.55;
  animation: streak 2.8s linear infinite;
}
.streaks i:nth-child(1) {
  top: 56%;
}
.streaks i:nth-child(2) {
  top: 61%;
  animation-delay: -1.1s;
  animation-duration: 3.4s;
}
.streaks i:nth-child(3) {
  top: 66%;
  animation-delay: -2s;
  opacity: 0.35;
}
.streaks i:nth-child(4) {
  top: 52%;
  animation-delay: -0.6s;
  animation-duration: 4.2s;
  opacity: 0.3;
}
.streaks i:nth-child(5) {
  top: 70%;
  animation-delay: -1.7s;
  animation-duration: 2.4s;
}
@keyframes streak {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(420%);
  }
}

.glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.22) 0 9%, transparent 9% 13%, rgba(255, 255, 255, 0.12) 13% 16%, transparent 16%);
  box-shadow: inset 0 10px 24px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sky-night,
  :root:not([data-theme="light"]) .stars {
    opacity: 1;
  }
  :root:not([data-theme="light"]) .sky-day,
  :root:not([data-theme="light"]) .sky-eve,
  :root:not([data-theme="light"]) .clouds {
    opacity: 0;
  }
  :root:not([data-theme="light"]) .sun {
    background: radial-gradient(circle, #f6efd9 0 50%, rgba(246, 239, 217, 0.2) 58%, transparent 66%);
    transform: scale(0.6);
  }
  :root:not([data-theme="light"]) .streaks {
    display: block;
  }
  :root:not([data-theme="light"]) .glass {
    background: radial-gradient(60% 48% at 16% 96%, rgba(255, 214, 120, 0.16), transparent 70%), radial-gradient(30% 40% at 84% 80%, rgba(255, 246, 229, 0.05), transparent 70%), linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0 9%, transparent 9%);
  }
}
:root[data-theme="dark"] .sky-night,
:root[data-theme="dark"] .stars {
  opacity: 1;
}
:root[data-theme="dark"] .sky-day,
:root[data-theme="dark"] .sky-eve,
:root[data-theme="dark"] .clouds {
  opacity: 0;
}
:root[data-theme="dark"] .sun {
  background: radial-gradient(circle, #f6efd9 0 50%, rgba(246, 239, 217, 0.2) 58%, transparent 66%);
  transform: scale(0.6);
}
:root[data-theme="dark"] .streaks {
  display: block;
}
:root[data-theme="dark"] .glass {
  background: radial-gradient(60% 48% at 16% 96%, rgba(255, 214, 120, 0.16), transparent 70%), radial-gradient(30% 40% at 84% 80%, rgba(255, 246, 229, 0.05), transparent 70%), linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0 9%, transparent 9%);
}

.window.paused *,
.window.paused *::before {
  animation-play-state: paused !important;
}

/* ---------- the scenery's colours ---------- */

.window .c-range { fill: var(--w-range); }
.window .c-snow { fill: var(--w-snow); }
.window .c-hill-far { fill: var(--w-hill-far); }
.window .c-hill { fill: var(--w-hill); }
.window .c-fir-far { fill: var(--w-fir-far); }
.window .c-fir-far2 { fill: var(--w-fir-far2); }
.window .c-ground-far { fill: var(--w-ground-far); }
.window .c-ground { fill: var(--w-ground); }
.window .c-fir { fill: var(--w-fir); }
.window .c-fir2 { fill: var(--w-fir2); }
.window .c-leaf { fill: var(--w-leaf); }
.window .c-leaf2 { fill: var(--w-leaf2); }
.window .c-trunk { fill: var(--w-trunk); }
.window .c-water { fill: var(--w-water); }
.window .c-water-hi { fill: var(--w-water-hi); opacity: 0.7; }
.window .c-wall0 { fill: var(--w-wall0); }
.window .c-wall1 { fill: var(--w-wall1); }
.window .c-wall2 { fill: var(--w-wall2); }
.window .c-roof { fill: var(--w-roof); }
.window .c-roof2 { fill: var(--w-roof2); }
.window .c-block0 { fill: var(--w-block0); }
.window .c-block1 { fill: var(--w-block1); }
.window .c-block2 { fill: var(--w-block2); }
.window .c-pane { fill: var(--w-pane); }
.window .lamp { fill: var(--w-lamp); }
.window .c-parapet { fill: var(--w-parapet); }
.window .c-parapet-top { fill: var(--w-parapet-top); }
.window .c-pole { fill: var(--w-pole); }
.window .c-wire,
.window .c-hanger { fill: none; stroke: var(--w-wire); stroke-width: 2; }
.window .c-hanger { stroke: var(--w-pole); }
.window .c-platform { fill: var(--w-platform); }
.window .c-edge { fill: var(--w-edge); }
.window .c-canopy { fill: var(--w-canopy); }
.window .c-sign { fill: var(--w-sign); }
.window .c-sign-dot { fill: var(--w-sign-dot); }
.window .c-sign-text { fill: var(--w-sign-text); font: 800 17px/1 var(--display); font-stretch: 112%; letter-spacing: 0.01em; }
.window .c-plank { fill: none; stroke: var(--w-wood); stroke-width: 5; stroke-linejoin: round; }
.window .c-plank-fill,
.window .c-stage,
.window .c-table,
.window .c-log { fill: var(--w-wood); }
.window .c-post { fill: var(--w-wood-dark); }
.window .c-reed { fill: none; stroke: var(--w-reed); stroke-width: 1.6; }
.window .c-cattail { fill: var(--w-cattail); }
.window .c-duck,
.window .c-dog { fill: var(--w-duck); }
.window .c-shell { fill: var(--w-wall0); }
.window .c-shell-in { fill: var(--w-teal); }
.window .c-bench { fill: none; stroke: var(--w-wood); stroke-width: 4; stroke-linecap: round; }
.window .c-bench-fill { fill: var(--w-orange); }
.window .c-path { fill: var(--w-path); }
.window .c-path-line { fill: none; stroke: var(--w-wall0); stroke-width: 1.5; stroke-dasharray: 8 8; }
.window .c-trailsign { fill: var(--w-green); }
.window .c-wheel { fill: none; stroke: var(--w-ink); stroke-width: 2.4; }
.window .c-frame { fill: none; stroke: var(--w-orange); stroke-width: 2.6; stroke-linecap: round; }
.window .c-legs,
.window .c-rack,
.window .c-pole-line { fill: none; stroke: var(--w-ink); stroke-width: 2.4; stroke-linecap: round; }
.window .c-rack { stroke: var(--w-pole); }
.window .c-skin { fill: var(--w-skin); }
.window .c-skin2 { fill: var(--w-skin2); }
.window .c-jacket { fill: var(--w-orange); }
.window .c-coat { fill: var(--w-teal); }
.window .c-jacket-fill { fill: var(--w-yellow); }
.window .c-tower { fill: var(--w-wood); }
.window .c-tower-leg { fill: none; stroke: var(--w-wood-dark); stroke-width: 3.5; }
.window .c-rail { fill: var(--w-pole); }
.window .c-car { fill: var(--w-car); }
.window .c-car-roof { fill: var(--w-car-roof); }
.window .c-car-win { fill: var(--w-lamp); }
.window .c-car-band { fill: var(--w-yellow); }
.window .c-pole { stroke: none; }
.window path.c-pole { fill: none; stroke: var(--w-ink); stroke-width: 2.4; }
.window .c-door { fill: var(--w-ink); }
.window .c-olympics { fill: var(--w-olympics); }
.window .c-sound { fill: var(--w-sound); }
.window .c-sand { fill: var(--w-sand); }
.window .c-slide { fill: none; stroke: var(--w-orange); stroke-width: 10; stroke-linecap: round; }
.window .c-slide2 { fill: none; stroke: var(--w-yellow); stroke-width: 8; stroke-linecap: round; }
.window .c-wave { fill: none; stroke: var(--w-water); stroke-width: 3; }
.window .c-book0 { fill: var(--w-orange); }
.window .c-book1 { fill: var(--w-teal); }
.window .c-book2 { fill: var(--w-yellow); }
.window .c-book3 { fill: var(--w-green); }
.window .c-awning { fill: var(--w-orange); }
.window .c-awning-stripe { fill: var(--w-wall0); }
.window .c-sign-board { fill: var(--w-ink); }
.window .c-steam { fill: none; stroke: var(--w-wall0); stroke-width: 1.4; opacity: 0.8; stroke-linecap: round; }
.window .c-bread { fill: #e3a65a; }
.window .c-bread-cut { fill: none; stroke: #b9772f; stroke-width: 1.6; stroke-linecap: round; }
.window .c-cup { fill: var(--w-wall0); }

/* calm: the places cross-fade where they stand */
.world.calm .vignette,
.world.calm .station {
  opacity: 0;
  transition: opacity 0.6s ease !important;
}
.world.calm .vignette.shown,
.world.calm .station.shown {
  opacity: 1;
}