/* Doppler Effect lesson. All rules scoped under .dop-* */
.dop-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dop-cv { --cap: 9999px; display: block; width: min(100%, calc(var(--cap) * var(--ar, 2))); height: auto; margin: 0 auto; touch-action: none; }
.dop-note { font-size: 12px; color: var(--faint); text-align: center; }

.dop-hero img { display: block; width: 250px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.dop-hero.dop-wide img { width: 320px; }
.dop-hero.dop-small img { width: 84px; }

.dop-gauges { width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; }
.dop-gauges .gauge .gt i { background: var(--gold); }

/* near or far: pitch and loudness, side by side */
.dop-table { width: 100%; display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px 12px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.dop-bar { display: block; height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.dop-bar b { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gold); }
.dop-bar.l0 b, .dop-bar.l1 b { background: var(--violet-bright); }

/* graphs drawn from a formula */
.dop-graph { display: block; width: 100%; height: auto; max-height: 36vh; }
.dop-gbg { fill: var(--surface); }
.dop-gt { font: 600 14px var(--sans); fill: var(--dim); }
.dop-gt.r { text-anchor: end; }
.dop-faint { fill: var(--faint); }
.dop-gold, .dop-goldl.dop-gt { fill: var(--gold); }
.dop-violet, .dop-violetl.dop-gt { fill: var(--violet-bright); }
.dop-base { stroke: rgba(234, 227, 215, .35); stroke-width: 1; stroke-dasharray: 4 5; }
.dop-gline { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.dop-gline.dop-violetl { stroke: var(--violet-bright); }
.dop-graph .dop-goldl.dop-gt, .dop-graph .dop-violetl.dop-gt { opacity: 0; transition: opacity .4s 1.2s; }
.dop-draw .dop-gline { animation: dopDraw 1.4s cubic-bezier(.4, 0, .2, 1) forwards; }
.dop-draw .dop-goldl.dop-gt, .dop-draw .dop-violetl.dop-gt { opacity: 1; }
@keyframes dopDraw { to { stroke-dashoffset: 0; } }

/* gap tiles */
.dop-duo { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dop-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); text-align: center; }
.dop-tile b { font-size: 16px; }
.dop-tile span { font-size: 13px; color: var(--dim); line-height: 1.3; }
.dop-gap { width: 100%; max-width: 130px; height: auto; }
.dop-gap .dop-dot { fill: var(--violet-bright); }
.dop-gap path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dop-up { border-color: rgba(252, 192, 80, .5); } .dop-up .dop-gap path { stroke: var(--gold); }
.dop-down .dop-gap path { stroke: var(--violet-bright); }

/* the train */
.dop-track { position: relative; width: 100%; height: 150px; overflow: hidden; }
.dop-trainimg { position: absolute; bottom: 22px; left: -12%; width: 60%; transition: left 2.9s linear; }
.dop-trainimg.go { left: 62%; }
.dop-listener { z-index: 0; } .dop-trainimg { z-index: 1; }
.dop-listener { position: absolute; bottom: 30px; left: 50%; width: 42px; transform: translateX(-50%); }
.dop-rail { position: absolute; left: 0; right: 0; bottom: 18px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.dop-steps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dop-step { padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--surface); border: 1.5px solid var(--line); color: var(--faint); transition: all .3s; }
.dop-step.on { color: var(--text); border-color: var(--gold); background: rgba(252, 192, 80, .12); }

/* light */
.dop-light, .dop-echo, .dop-sky { display: block; width: 100%; height: auto; overflow: visible; }
.dop-lw { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke .3s; }
.dop-mark { fill: none; stroke: #fff; stroke-width: 3; transition: cx .3s; }
.dop-ew { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; }
.dop-ew.dop-eb { stroke: var(--violet-bright); }
.dop-hit .dop-ew.dop-eb { stroke: var(--gold); }
.dop-hit text.dop-eb { fill: var(--gold); }
.dop-sw { fill: none; stroke: #FF5A4B; stroke-width: 3; stroke-linecap: round; }
.dop-earth { fill: #3E8BFF; }
.dop-star text { text-anchor: middle; }
.dop-sky text { text-anchor: middle; }
.dop-away { fill: #FF8A7A; opacity: 0; transition: opacity .4s; }
.dop-gone .dop-away { opacity: 1; }

@media (max-height: 700px) {
  .dop-cv { --cap: 212px; }
  .dop-graph { max-height: 220px; }
  .dop-hero img { max-height: 150px; }
  .dop-hero.dop-small img { width: 56px; }
  .dop-track { height: 120px; }
}