/* ---------- Choo-Choo Sounds ---------- */
/* A sunny toy railway: sun, drifting clouds, rolling hills, trees, flowers, a main line and a siding. */
.tr-area { display: flex; flex-direction: column; background: linear-gradient(180deg, #5cc8ff 0%, #9fe3ff 45%, #d8f6ff 62%); box-shadow: inset 0 0 0 4px #ffffff44; }
.tr-sun { position: absolute; left: 7%; top: 8%; width: clamp(60px, 9vw, 100px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 40%, #fff7b0, #ffd23a 60%, #ffb21a); box-shadow: 0 0 0 14px #ffe36a44, 0 0 60px 20px #ffe36a88; animation: pz-sun 4s ease-in-out infinite; }
.tr-cloud { position: absolute; top: 10%; left: 0; width: 130px; height: 40px; border-radius: 40px; background: #fff; opacity: .95; pointer-events: none; animation: pz-cloud 38s linear infinite; }
.tr-cloud::before, .tr-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.tr-cloud::before { width: 60px; height: 60px; left: 18px; top: -28px; }
.tr-cloud::after { width: 46px; height: 46px; left: 64px; top: -18px; }
.tr-cloud.two { top: 22%; scale: .7; animation-duration: 52s; animation-delay: -24s; }
.tr-hill { position: absolute; left: -10%; right: -10%; bottom: 0; height: 66%; border-radius: 50% 50% 0 0 / 30% 30% 0 0; pointer-events: none;
  background: linear-gradient(180deg, #7ddc5a, #4fbf43 40%, #3aa83c); }
.tr-hill.far { height: 74%; left: -30%; right: 20%; background: linear-gradient(180deg, #a6e88a, #7ccf62); border-radius: 50% 60% 0 0 / 40% 50% 0 0; }
.tr-tree { position: absolute; bottom: 52%; width: calc(70px * var(--s, 1)); height: calc(96px * var(--s, 1)); pointer-events: none; }
.tr-tree::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 18%; height: 40%; translate: -50% 0; background: #8a5a2e; border-radius: 4px; }
.tr-tree::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 74%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8ee86a, #2f9e3a); box-shadow: inset -6px -8px 0 #0002; }
.tr-flowers { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none;
  background-image: radial-gradient(circle at 10px 10px, #ff4fa3 4px, transparent 5px), radial-gradient(circle at 50px 30px, #ffe03a 4px, transparent 5px), radial-gradient(circle at 90px 14px, #fff 4px, transparent 5px), radial-gradient(circle at 130px 36px, #b06bff 4px, transparent 5px);
  background-size: 230px 80px; opacity: .55; }
.tr-top { display: none; }
.tr-pic.tr-pic-in { animation: pop-in .45s cubic-bezier(.2, 1.5, .4, 1); }
.tr-ear { position: absolute; right: 14px; top: 14px; z-index: 4; }

/* The main line: rails with sleepers, and the train sitting on them. */
.tr-line { position: relative; z-index: 2; flex: 1.2; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 12px; }
.tr-rail { position: absolute; left: 0; right: 0; bottom: 6px; height: 16px; pointer-events: none;
  background: linear-gradient(180deg, transparent 0 3px, #8a8fb5 3px 7px, transparent 7px 11px, #8a8fb5 11px 15px, transparent 15px),
    repeating-linear-gradient(90deg, #8a5a2e 0 12px, transparent 12px 34px); }
.tr-train { --u: 110px; position: relative; display: flex; align-items: flex-end; gap: calc(var(--u) * .1); margin-bottom: 12px; }
.tr-engine { position: relative; width: calc(var(--u) * 1.95); flex: none; }
.tr-train > :first-child::before { display: none; }
.tr-engine-svg { display: block; width: 100%; overflow: visible; }
.tr-driver { position: absolute; left: 11%; top: 22%; width: 22%; aspect-ratio: 1; border-radius: 30%; overflow: hidden; background: #bfe9ff; }
.tr-driver svg { width: 100%; height: 100%; display: block; }
.tr-driver .emoji-av { display: grid; place-items: center; height: 100%; font-size: calc(var(--u) * .28); }
.moving .tr-w { animation: tr-spin .5s linear infinite; }
.moving .tr-wheel { animation: tr-spin .5s linear infinite; }
.moving .tr-engine, .moving .tr-car, .moving .tr-flat { animation: tr-chug .25s ease-in-out infinite alternate; }

/* Carriages: one per sound, in bright colours with a big letter plate. */
.tr-car, .tr-spare, .tr-fly, .tr-flat { position: relative; flex: none; display: grid; place-items: center; border-radius: 14% 14% 10% 10%; }
.tr-car, .tr-fly { width: var(--u); height: calc(var(--u) * .95); margin-bottom: calc(var(--u) * .12);
  background: linear-gradient(180deg, color-mix(in srgb, var(--car) 70%, #fff), var(--car) 40%, color-mix(in srgb, var(--car) 75%, #000)); box-shadow: inset 0 -6px 0 #0002; }
.tr-car::before, .tr-spare::before, .tr-flat::before { content: ''; position: absolute; left: -12%; bottom: 14%; width: 12%; height: 8%; background: #2a2350; border-radius: 3px; }
.tr-roof { position: absolute; left: -6%; right: -6%; top: -8%; height: 14%; border-radius: 8px; background: #2a2350; }
.tr-plate { position: relative; display: grid; place-items: center; min-width: 64%; height: 58%; margin-top: 4%; padding: 0 6%; border-radius: 14px; background: #fffdf5; color: #2a2350;
  font-size: calc(var(--u) * .44); font-weight: 700; line-height: 1; box-shadow: inset 0 -4px 0 #0001; }
.tr-wheel { position: absolute; bottom: -14%; left: 12%; width: 26%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #2a2350;
  background: conic-gradient(#ffcf3a 0 20%, #2a2350 20% 25%, #ffcf3a 25% 45%, #2a2350 45% 50%, #ffcf3a 50% 70%, #2a2350 70% 75%, #ffcf3a 75% 95%, #2a2350 95%); }
.tr-wheel.two { left: auto; right: 12%; }
.tr-car.tr-lit { animation: tr-lit .5s ease-out; }
.tr-car.tr-lit .tr-plate { background: #fff36a; }
.tr-gap { position: relative; width: var(--u); height: calc(var(--u) * .95); margin-bottom: calc(var(--u) * .12); flex: none; display: grid; place-items: center;
  border: 4px dashed #fff; border-radius: 14%; background: #ffffff55; animation: pulse 1.2s ease-in-out infinite; }
.tr-gap b { font-size: calc(var(--u) * .5); color: #fff; text-shadow: 0 3px 0 #0003; }

/* The last wagon carries the word's picture; tap it to hear the word. */
.tr-flat { width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.1); margin-bottom: calc(var(--u) * .12); align-items: end; }
.tr-flat::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; border-radius: 8px; background: linear-gradient(180deg, #c8693a, #8a3a1a); z-index: 0; }
.tr-flat span { position: relative; z-index: 1; font-size: calc(var(--u) * .78); line-height: 1; margin-bottom: 12%; filter: drop-shadow(0 4px 0 #0002); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.tr-flat .tr-wheel { z-index: 1; }
.tr-flat.tr-wiggle span { animation: tr-wiggle .5s ease-in-out; }

/* The siding below, with three spare carriages to choose from. */
.tr-siding { position: relative; z-index: 3; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 12px 4px; }
.tr-spares { --u: clamp(96px, 14vw, 140px); position: relative; display: flex; gap: clamp(18px, 5vw, 56px); margin-bottom: 14px; }
.tr-spare { width: var(--u); height: calc(var(--u) * .95); margin-bottom: calc(var(--u) * .12);
  background: linear-gradient(180deg, color-mix(in srgb, var(--car) 70%, #fff), var(--car) 40%, color-mix(in srgb, var(--car) 75%, #000));
  box-shadow: inset 0 -6px 0 #0002, 0 8px 0 #0002; animation: tr-roll-in .6s cubic-bezier(.2, 1.4, .4, 1) calc(var(--i) * .12s) backwards; }
.tr-spare::before { display: none; }
.tr-spare:active { scale: .94; }
.tr-spare.tr-nope .tr-plate { animation: shake .45s; background: #ffd0d0; }
.tr-spare.hint { box-shadow: 0 0 0 7px var(--gold), 0 0 30px 8px #ffe36a !important; }
.tr-spare.gone { animation: tr-roll-out .5s ease-in forwards; }
.tr-fly { position: absolute; z-index: 6; margin: 0; pointer-events: none; --u: clamp(96px, 14vw, 140px); }

.tr-puff { position: absolute; z-index: 5; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 40% 35%, #fff, #e8eef8 70%); box-shadow: inset -4px -4px 0 #0001; }
.splash-word.tr-choo { color: #fff; -webkit-text-stroke-color: #ff4a5a; z-index: 7; }
.splash-word.tr-clunk { color: #ffe03a; -webkit-text-stroke-color: #2a2350; z-index: 7; font-size: clamp(34px, 6vw, 56px); }

@media (max-aspect-ratio: 3/4) {
  .tr-top { position: relative; z-index: 2; display: flex; justify-content: center; padding-top: clamp(70px, 10vh, 110px); }
  .tr-line { flex: 1; }
  .tr-siding { flex: 1; }
  .tr-spares { gap: clamp(12px, 4vw, 40px); }
}

@keyframes tr-spin { to { rotate: 360deg; } }
@keyframes tr-chug { to { translate: 0 -3px; } }
@keyframes tr-lit { 40% { transform: translateY(-14px) scale(1.08); } }
@keyframes tr-wiggle { 25% { rotate: -12deg; scale: 1.15; } 50% { rotate: 10deg; } 75% { rotate: -6deg; } }
@keyframes tr-roll-in { from { translate: -60vw 0; } }
@keyframes tr-roll-out { to { translate: 0 30px; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tr-cloud, .tr-gap, .tr-spare, .moving .tr-w, .moving .tr-wheel, .moving .tr-engine, .moving .tr-car, .moving .tr-flat { animation: none; }
}