/* Sound (sound.js): the line that plays the photograph, the notes it strikes, and the Listen button's little bars */
.sweep{position:absolute;left:0;top:0;width:0;z-index:4;pointer-events:none;transition:opacity .6s}
.sweep i{position:absolute;inset:0 auto 0 -1.5px;width:3px;background:linear-gradient(#fff0,#fffe 12%,#fffe 88%,#fff0);box-shadow:0 0 12px 2px #ffffff80,0 0 60px 14px color-mix(in srgb,var(--tint,#9fd) 35%,transparent)}
.sweep::before{content:"";position:absolute;inset:0 0 0 -160px;width:160px;background:linear-gradient(90deg,#fff0,#ffffff1f);mix-blend-mode:screen;-webkit-mask:linear-gradient(#0000,#000 12%,#000 88%,#0000);mask:linear-gradient(#0000,#000 12%,#000 88%,#0000)}
.sweep.done{opacity:0}
.glint{position:absolute;z-index:5;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;background:radial-gradient(#fff 30%,var(--c,#fff) 60%);box-shadow:0 0 0 1px #0003,0 0 12px 4px var(--c,#fff),0 0 36px 10px color-mix(in srgb,var(--c,#fff) 50%,transparent);animation:glint 1.6s cubic-bezier(.2,.7,.3,1) forwards}
.glint::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--c,#fff);animation:ring 1.2s ease-out forwards}
@keyframes glint{0%{transform:scale(.2);opacity:0}6%{transform:scale(var(--s,1));opacity:1}100%{transform:scale(.3);opacity:0}}
@keyframes ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.playing-photo #markers,.playing-photo #guide{opacity:0!important;transition:opacity .4s}
/* Listen: three bars, still when off, moving when on */
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:11px;width:12px}
.bars b{flex:1;background:currentColor;height:45%;border-radius:1px;transition:height .3s}.bars b:nth-child(2){height:100%}.bars b:nth-child(3){height:70%}
[aria-pressed="true"] .bars b{animation:bar 1.1s ease-in-out infinite alternate}
[aria-pressed="true"] .bars b:nth-child(2){animation-duration:.8s;animation-delay:-.3s}
[aria-pressed="true"] .bars b:nth-child(3){animation-duration:1.3s;animation-delay:-.6s}
@keyframes bar{0%{height:25%}100%{height:100%}}
#play-photo[hidden]{display:none}
#play-photo .tri{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
#play-photo[aria-pressed="true"] .tri{width:8px;height:8px;border:0;background:currentColor}
@media (prefers-reduced-motion:reduce){[aria-pressed="true"] .bars b{animation:none;height:70%}.glint{animation-duration:.8s}}
@media(max-width:850px){.scene-actions{gap:0 18px}}