/* Doppler Effect of Light lesson. All rules scoped under .dol-* */
.dol-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dol-note { font-size: 12px; color: var(--faint); text-align: center; }
.dol-hero img { display: block; width: 280px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }
.dol-t { font: 600 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.dol-t.dol-l { text-anchor: start; }
.dol-t.dol-r { text-anchor: end; }

/* color: a wave from a lamp to an eye */
.dol-wave { display: block; width: 100%; height: auto; max-height: 30vh; }
.dol-wv { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.dol-lamp, .dol-eye { transition: fill .2s; }
.dol-eye { stroke: rgba(234, 227, 215, .5); stroke-width: 2; }

/* a moving star */
.dol-cv { --cap: 9999px; display: block; width: min(100%, calc(var(--cap) * var(--ar, 2))); height: auto; margin: 0 auto; }
.dol-row { display: flex; gap: 20px; justify-content: center; }
.dol-sw { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--dim); }
.dol-sw i { width: 26px; height: 26px; border-radius: 50%; background: var(--raised); border: 1.5px solid rgba(234, 227, 215, .25); transition: background .4s; }

/* traffic light */
.dol-light { display: block; width: 100%; height: auto; max-height: 30vh; }
.dol-box { fill: var(--surface); stroke: rgba(234, 227, 215, .2); stroke-width: 1.5; }
.dol-off { fill: var(--raised); }
.dol-sp { fill: var(--gold); font-size: 16px; }

/* the barcode */
.dol-code { display: block; width: 100%; height: auto; max-height: 32vh; }
.dol-gal rect, .dol-lab rect { fill: #0B0F1C; }
.dol-ghost rect { fill: rgba(234, 227, 215, .35); }
.dol-match .dol-ghost rect { fill: var(--gold); }
.dol-match .dol-lab rect, .dol-match .dol-gal rect { fill: #000; }

/* Hubble's chart */
.dol-plot { display: block; width: 100%; height: auto; max-height: 36vh; }
.dol-pbg { fill: var(--surface); }
.dol-ax { stroke: rgba(234, 227, 215, .4); stroke-width: 1.5; }
.dol-dot { fill: var(--violet-bright); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .25s, transform .25s; }
.dol-dot.on { opacity: 1; transform: none; }
.dol-dot.dol-a { fill: #6FA8FF; }
.dol-fit { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.dol-done .dol-fit { transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1); stroke-dashoffset: 0; }
.dol-andro { font-size: 12px; fill: #6FA8FF; opacity: 0; transition: opacity .4s .3s; }
.dol-done .dol-andro { opacity: 1; }

@media (max-height: 700px) {
  .dol-cv { --cap: 180px; }
  .dol-hero img { max-height: 150px; }
  .dol-plot { max-height: 200px; }
}