/*
 * Motion for the animated scenes.
 *
 * Loaded only when a band is set to run a scene. Everything freezes to a single
 * readable frame under prefers-reduced-motion — the scenes are decoration, so
 * nothing is lost when they stop.
 */

.sc-scene{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- shared ---------- */
@keyframes sc-s-blink{0%,92%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}96%{transform:scaleY(1)}}
.sc-s-eye{transform-box:fill-box;transform-origin:center;animation:sc-s-blink 6s infinite}

/* ---------- Fearless: rooftops ----------
   One 5s cycle. The city scrolls exactly one tile width so it loops with no
   seam, and the leap is timed to the gap passing under the cat. */
@keyframes sc-scroll{from{transform:translateX(0)}to{transform:translateX(-400px)}}
@keyframes sc-leap{
  0%,18%{transform:translateY(0) rotate(0deg)}
  28%{transform:translateY(-74px) rotate(-7deg)}
  38%{transform:translateY(-96px) rotate(0deg)}
  48%{transform:translateY(-74px) rotate(7deg)}
  58%,100%{transform:translateY(0) rotate(0deg)}
}
@keyframes sc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
@keyframes sc-legA{0%,100%{transform:rotate(26deg)}50%{transform:rotate(-26deg)}}
@keyframes sc-legB{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(26deg)}}
@keyframes sc-twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes sc-halo{0%,100%{opacity:.88}50%{opacity:1}}
@keyframes sc-beacon{0%,100%{opacity:.25}50%{opacity:1}}

.sc-city{animation:sc-scroll 5s linear infinite}
.sc-far{animation:sc-scroll 11s linear infinite}
.sc-leap{animation:sc-leap 5s cubic-bezier(.33,0,.4,1) infinite;transform-origin:50% 100%}
.sc-bob{animation:sc-bob .34s ease-in-out infinite}
.sc-legA{animation:sc-legA .34s ease-in-out infinite;transform-origin:top center}
.sc-legB{animation:sc-legB .34s ease-in-out infinite;transform-origin:top center}
.sc-star{animation:sc-twinkle 4s ease-in-out infinite}
.sc-signal{animation:sc-halo 6s ease-in-out infinite}
.sc-beacon{animation:sc-beacon 1.8s ease-in-out infinite}

/* ---------- Curious: three doors ----------
   9s cycle. Two doors give nothing; the third pays out. */
@keyframes sc-door1{0%,6%{transform:scaleX(1)}12%,20%{transform:scaleX(.12)}26%,100%{transform:scaleX(1)}}
@keyframes sc-door2{0%,28%{transform:scaleX(1)}34%,42%{transform:scaleX(.12)}48%,100%{transform:scaleX(1)}}
@keyframes sc-door3{0%,52%{transform:scaleX(1)}58%,90%{transform:scaleX(.12)}97%,100%{transform:scaleX(1)}}
@keyframes sc-beam{0%,56%{opacity:0}64%,88%{opacity:.17}95%,100%{opacity:0}}
/* Travel is in the scaled group's own units: the cat is drawn at 1.4x, so
   these numbers are roughly three quarters of the distance you see. */
@keyframes sc-watch{
  0%,4%{transform:translateX(-24px) rotate(0deg)}
  14%,24%{transform:translateX(-52px) rotate(-5deg)}
  34%,44%{transform:translateX(24px) rotate(2deg)}
  56%,88%{transform:translateX(86px) rotate(6deg)}
  96%,100%{transform:translateX(-24px) rotate(0deg)}
}
.sc-door-leaf{transition:none}
.sc-door-1 .sc-door-leaf{animation:sc-door1 9s ease-in-out infinite}
.sc-door-2 .sc-door-leaf{animation:sc-door2 9s ease-in-out infinite}
.sc-door-3 .sc-door-leaf{animation:sc-door3 9s ease-in-out infinite}
.sc-beam{opacity:0;animation:sc-beam 9s ease-in-out infinite}
.sc-watcher{animation:sc-watch 9s ease-in-out infinite}

/* ---------- Creative: the mark assembles ----------
   6s cycle. Four pieces drop into the silhouette; when it is full, it wakes. */
@keyframes sc-drop{0%{transform:translateY(-150px)}100%{transform:translateY(0)}}
@keyframes sc-wake{0%,52%{opacity:0}60%,92%{opacity:1}100%{opacity:0}}
@keyframes sc-outline{0%{opacity:.5}60%,100%{opacity:.08}}
@keyframes sc-chip{
  0%{transform:translateY(-30px) rotate(0deg);opacity:0}
  20%{opacity:.9}
  100%{transform:translateY(34px) rotate(180deg);opacity:0}
}
.sc-piece{animation:sc-drop 6s cubic-bezier(.3,1.5,.5,1) infinite}
.sc-piece-2{animation-delay:.16s}
.sc-piece-3{animation-delay:.32s}
.sc-piece-4{animation-delay:.48s}
.sc-wake{opacity:0;animation:sc-wake 6s ease-out infinite}
.sc-outline{animation:sc-outline 6s ease-out infinite}
.sc-chip{opacity:0;animation:sc-chip 6s ease-in-out infinite}
.sc-chip-2{animation-delay:1.4s}
.sc-chip-3{animation-delay:2.9s}

@media(prefers-reduced-motion:reduce){
  .sc-scene *{animation:none!important}
  .sc-wake{opacity:1}
  .sc-outline{opacity:.08}
  .sc-beam{opacity:.17}
  .sc-door-3 .sc-door-leaf{transform:scaleX(.12)}
}