.shutter-title {
  position: relative;
  isolation: isolate;
  --slice-color: var(--gold);
}
.shutter-readable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.shutter-visual { display: inline; }
.shutter-word { display: inline-block; white-space: nowrap; }
.shutter-char { display: inline-block; position: relative; vertical-align: top; overflow: hidden; }
.shutter-glyph { display: inline-block; }
.shutter-slice {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  color: var(--slice-color);
}
.shutter-slice.top { clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); }
.shutter-slice.middle { clip-path: polygon(0 35%, 100% 35%, 100% 65%, 0 65%); color: currentColor; }
.shutter-slice.bottom { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); }
.shutter-playing .shutter-glyph { animation: shutter-focus .8s both; animation-delay: calc(var(--char-delay) + .3s); }
.shutter-playing .shutter-slice { animation: shutter-right .7s ease-in-out both; animation-delay: var(--char-delay); }
.shutter-playing .shutter-slice.middle { animation-name: shutter-left; animation-delay: calc(var(--char-delay) + .1s); }
.shutter-playing .shutter-slice.bottom { animation-delay: calc(var(--char-delay) + .2s); }
@keyframes shutter-focus { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes shutter-right { 0% { transform: translateX(-100%); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes shutter-left { 0% { transform: translateX(100%); opacity: 0; } 45% { opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .shutter-playing .shutter-glyph { animation: none !important; opacity: 1; filter: none; }
  .shutter-playing .shutter-slice { animation: none !important; opacity: 0; }
}