#cape-scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

#cape-scene.playing {
  visibility: visible;
}

.cape {
  position: absolute;
  top: -10%;
  left: 100%;
  width: 170%; 
  height: 120%;
  object-fit: fill;
  filter: drop-shadow(-20px 0 30px rgba(0, 0, 0, 0.6));
}

#cape-scene.playing .cape {
  animation: cape-sweep 2.4s cubic-bezier(0.6, 0, 0.35, 1) forwards;
}

@keyframes cape-sweep {
  0%   { left: 100%;  transform: skewX(-22deg) scaleY(0.9); }
  45%  { left: -35%;  transform: skewX(0deg) scaleY(1); }
  55%  { left: -42%;  transform: skewX(3deg) scaleY(1); }
  100% { left: -190%; transform: skewX(18deg) scaleY(0.92); }
}