/*!
 * BappaTrain — the scene, the train, and the coach in the middle.
 * https://bappatutions.in
 *
 * The strip is authored 900 units wide and scaled to whatever the stage is, so
 * every measurement below is in those units and none of them change with the
 * screen.
 */

.tr-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 48vh;
  border-radius: 24px;
  overflow: hidden;
  border: 6px solid #8A5A2B;
  box-shadow: 0 8px 0 #6B4A22, 0 16px 22px rgb(0 0 0 / 0.28);
  background: linear-gradient(180deg, #9FD9FF 0%, #CFEEFF 62%, #E8F7FF 100%);
}

/* ── sky ──────────────────────────────────────────────────────────────────── */
.tr-sky { position: absolute; inset: 0 0 32% 0; }

.tr-sun {
  position: absolute; right: 8%; top: 10%;
  width: 13%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFF3B0, #FFD54F 60%, #FFB300);
  box-shadow: 0 0 34px rgb(255 200 60 / 0.75);
}

.tr-cloud {
  position: absolute;
  width: 14%; height: 20%;
  background: #fff;
  border-radius: 999px;
  opacity: 0.92;
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.06));
}
.tr-cloud::before, .tr-cloud::after {
  content: ''; position: absolute; background: #fff; border-radius: 50%;
}
.tr-cloud::before { width: 58%; aspect-ratio: 1; top: -46%; left: 10%; }
.tr-cloud::after  { width: 44%; aspect-ratio: 1; top: -30%; right: 12%; }

/* ── ground ───────────────────────────────────────────────────────────────── */
.tr-ground {
  position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(180deg, #86CF6B 0%, #6BB753 40%, #59A344 100%);
}
.tr-track {
  position: absolute; left: 0; right: 0; top: 22%;
  height: 10px; background: #6B4A2E;
  box-shadow: 0 8px 0 rgb(0 0 0 / 0.12);
}
/* Sleepers, drawn as a repeating gradient so there is nothing to lay out. */
.tr-track::after {
  content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 14px;
  background: repeating-linear-gradient(90deg, #7A5636 0 26px, transparent 26px 64px);
}

/* ── the strip ────────────────────────────────────────────────────────────── */
.tr-rail {
  position: absolute; left: 0; bottom: 22%;
  transition: transform 0.8s cubic-bezier(0.32, 0.72, 0.3, 1);
  will-change: transform;
}
.tr-train {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  transform-origin: left bottom;
}

/* ── engine ───────────────────────────────────────────────────────────────── */
.tr-engine {
  position: relative;
  width: 200px; height: 132px;
  flex: none;
  /* The coaches are to its right, so the engine is pulling them leftwards and
     has to face that way. Mirrored rather than rebuilt: nothing inside carries
     a number or a letter, so there is nothing that would come out backwards —
     and the smoke now trails behind the engine instead of running ahead of it. */
  transform: scaleX(-1);
}
.tr-boiler {
  position: absolute; left: 84px; bottom: 26px;
  width: 100px; height: 52px; border-radius: 12px 26px 12px 12px;
  background: linear-gradient(180deg, #E14B3C, #B8332A);
  border: 4px solid #6E2018;
}
.tr-cab {
  position: absolute; left: 12px; bottom: 26px;
  width: 78px; height: 82px; border-radius: 12px 12px 8px 8px;
  background: linear-gradient(180deg, #F2695B, #C93A2F);
  border: 4px solid #6E2018;
}
.tr-window {
  position: absolute; left: 14px; top: 12px;
  width: 44px; height: 34px; border-radius: 8px;
  background: #BFE8FF; border: 3px solid #6E2018;
}
.tr-stack {
  position: absolute; left: 150px; bottom: 74px;
  width: 30px; height: 40px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #3E2A1A, #5A3A22);
  border: 4px solid #2C1B10;
}

.tr-puff {
  position: absolute; left: 152px; bottom: 118px;
  width: 26px; aspect-ratio: 1; border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  opacity: 0;
  animation: tr-puff 2.4s ease-out infinite;
}
.tr-puff--2 { animation-delay: 0.8s; }
.tr-puff--3 { animation-delay: 1.6s; }
@keyframes tr-puff {
  0%   { opacity: 0.9; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0;   transform: translate(-70px, -80px) scale(2.1); }
}

/* ── coaches ──────────────────────────────────────────────────────────────── */
.tr-coach {
  position: relative;
  width: 150px; height: 110px;
  flex: none;
  cursor: pointer;
}
.tr-body {
  position: absolute; inset: auto 0 24px 0; height: 86px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 72%, black));
  border: 5px solid #5A3A22;
  box-shadow: inset 0 6px 0 rgb(255 255 255 / 0.28);
}
/* The number painted on the side, always there, even when not the one now. */
.tr-side {
  position: absolute; left: 0; right: 0; bottom: 44px;
  text-align: center;
  font-size: 44px; font-weight: 800; line-height: 1;
  color: #fff;
  text-shadow: 0 3px 0 rgb(0 0 0 / 0.28);
}

.tr-wheel {
  position: absolute; bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #C9A227 0 18%, #3E2A1A 19%);
  border: 4px solid #2C1B10;
}
.tr-wheel--sm { width: 34px; height: 34px; }
.tr-wheel--lg { width: 46px; height: 46px; bottom: -6px; }

/* Wheels turn only while the train is actually moving. */
.tr-stage.is-moving .tr-wheel { animation: tr-roll 0.5s linear infinite; }
@keyframes tr-roll { to { transform: rotate(360deg); } }

/* ── the number that comes up ─────────────────────────────────────────────── */
.tr-pop {
  position: absolute; left: 50%; bottom: 104px;
  translate: -50% 0;
  display: grid; place-items: center;
  width: 120px; height: 120px;
  opacity: 0;
  scale: 0.3;
  transition: opacity 0.3s ease, scale 0.45s cubic-bezier(0.24, 1.4, 0.4, 1);
  pointer-events: none;
}
.tr-coach.is-now .tr-pop { opacity: 1; scale: 1; }

.tr-rays {
  position: absolute; inset: 0;
  background: conic-gradient(
    from 0deg,
    #FFD54F 0 12deg, transparent 12deg 30deg,
    #FFD54F 30deg 42deg, transparent 42deg 60deg,
    #FFD54F 60deg 72deg, transparent 72deg 90deg,
    #FFD54F 90deg 102deg, transparent 102deg 120deg,
    #FFD54F 120deg 132deg, transparent 132deg 150deg,
    #FFD54F 150deg 162deg, transparent 162deg 180deg,
    #FFD54F 180deg 192deg, transparent 192deg 210deg,
    #FFD54F 210deg 222deg, transparent 222deg 240deg,
    #FFD54F 240deg 252deg, transparent 252deg 270deg,
    #FFD54F 270deg 282deg, transparent 282deg 300deg,
    #FFD54F 300deg 312deg, transparent 312deg 330deg,
    #FFD54F 330deg 342deg, transparent 342deg 360deg
  );
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgb(255 200 60 / 0.7));
  animation: tr-spin 9s linear infinite;
}
@keyframes tr-spin { to { transform: rotate(360deg); } }

.tr-num {
  position: relative;
  width: 74px; height: 74px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #FFF8E6;
  border: 5px solid #5A3A22;
  font-size: 42px; font-weight: 800; line-height: 1;
  color: #2B2118;
}

/* ── the big number above the scene, and the button below it ──────────────── */
.bt-now {
  margin: 0.2rem 0 0.5rem;
  font-size: clamp(2.2rem, 10vw, 3.6rem);
  font-weight: 800; line-height: 1; color: #2B2118;
  text-shadow: 0 3px 0 rgb(255 255 255 / 0.7);
}

.bt-next {
  margin-top: 0.8rem;
  padding: 0.7rem 1.9rem;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #FFB84D, #FF9933);
  box-shadow: 0 5px 0 #C86F14, 0 10px 14px rgb(0 0 0 / 0.22);
  color: #3B2A18; font: inherit; font-weight: 800;
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  cursor: pointer;
}
.bt-next:active { transform: translateY(4px); box-shadow: 0 1px 0 #C86F14; }
.bt-next.is-replay {
  background: linear-gradient(180deg, #9CCC65, #7CB342);
  box-shadow: 0 5px 0 #558B2F, 0 10px 14px rgb(0 0 0 / 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .tr-rail, .tr-pop { transition: none; }
  .tr-rays, .tr-puff, .tr-stage.is-moving .tr-wheel { animation: none; }
  .tr-puff { opacity: 0; }
}