/* Tear Reveal (see assets/tear-reveal.js). The section is tall so the page has room to scroll through the tear; the stage inside it stays pinned. */
.tr{position:relative;width:100%;overflow:clip;min-height:320px;}
.tr-stage{position:sticky;top:0;width:100%;overflow:hidden;}
.tr-stage svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;}
.tr-hint{position:absolute;left:0;right:0;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;
  font-family:var(--mono,'Space Mono'),monospace;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.35em;color:var(--tr-hint,#030303);opacity:.7;}
.tr-hint span{display:block;width:1px;height:24px;background:var(--tr-hint,#030303);animation:tr-pulse 1.6s ease-in-out infinite;}
@keyframes tr-pulse{50%{opacity:.25;}}
@media (prefers-reduced-motion:reduce){ .tr-hint span{animation:none;} .tr-stage{position:relative;} }

/* blinking indicator lights on the picture: one quick flash on every beat, like a metronome click */
.tr-led{animation:tr-metro var(--tr-beat,.652s) linear infinite;}
@keyframes tr-metro{0%,16%{opacity:1;}30%,100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){ .tr-led{animation:none;opacity:.55;} }