/* 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-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; } }

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