/* generated by scripts/gen-hero-scene.mjs — do not edit by hand */
.hero-scene { display: block; width: 100%; height: auto; }
.hero-scene * { animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: linear; }
.hero-scene .hs-bubble, .hero-scene .hs-banner, .hero-scene .hs-spark { opacity: 0; }
.hero-scene .hs-fade { opacity: 0; pointer-events: none; }
@keyframes hs-box {
  0.00% { transform: translate(0,0) }
  42.14% { transform: translate(33.8px, 19.5px) }
  100.00% { transform: translate(33.8px, 19.5px) }
}
@keyframes hs-stripes {
  0.00% { transform: translate(0,0) }
  42.14% { transform: translate(63.0px, 36.4px) }
  100.00% { transform: translate(63.0px, 36.4px) }
}
@keyframes hs-u2 {
  0.00% { transform: translate(0,0); opacity: 1 }
  6.43% { transform: translate(0,0); opacity: 1 }
  17.14% { transform: translate(-65.3px, -37.7px); opacity: 1 }
  25.71% { transform: translate(-112.6px, -57.2px); opacity: 1 }
  30.00% { transform: translate(-112.6px, -57.2px); opacity: 0 }
  100.00% { transform: translate(-112.6px, -57.2px); opacity: 0 }
}
@keyframes hs-u4 {
  0.00% { transform: translate(0,0) }
  27.86% { transform: translate(0,0) }
  38.57% { transform: translate(22.5px, 48.1px) }
  49.29% { transform: translate(22.5px, 48.1px) }
  61.43% { transform: translate(-27.0px, -10.4px) }
  100.00% { transform: translate(-27.0px, -10.4px) }
}
@keyframes hs-walk {
  0.00% { transform: translateY(0) }
  1.79% { transform: translateY(-2px) }
  3.57% { transform: translateY(0) }
  100.00% { transform: translateY(0) }
}
@keyframes hs-th-u4a {
  0.00% { opacity: 0 }
  10.00% { opacity: 0 }
  12.50% { opacity: 1 }
  30.36% { opacity: 1 }
  32.86% { opacity: 0 }
  100.00% { opacity: 0 }
}
@keyframes hs-th-u4b {
  0.00% { opacity: 0 }
  52.14% { opacity: 0 }
  54.64% { opacity: 1 }
  70.36% { opacity: 1 }
  72.86% { opacity: 0 }
  100.00% { opacity: 0 }
}
@keyframes hs-th-u6 {
  0.00% { opacity: 0 }
  67.14% { opacity: 0 }
  69.64% { opacity: 1 }
  91.79% { opacity: 1 }
  94.29% { opacity: 0 }
  100.00% { opacity: 0 }
}
@keyframes hs-spark {
  0.00% { opacity: 0; transform: scale(0.4) }
  40.00% { opacity: 0; transform: scale(0.4) }
  41.43% { opacity: 1; transform: scale(1.1) }
  43.57% { opacity: 0.6; transform: scale(0.8) }
  45.00% { opacity: 1; transform: scale(1) }
  48.57% { opacity: 0; transform: scale(0.6) }
  100.00% { opacity: 0; transform: scale(0.6) }
}
@keyframes hs-screen {
  0.00% { fill: #9FD3E8 }
  38.57% { fill: #9FD3E8 }
  40.00% { fill: #FF6A1A }
  41.43% { fill: #FFE0C8 }
  42.86% { fill: #FF6A1A }
  100.00% { fill: #FF6A1A }
}
@keyframes hs-alarm {
  0.00% { opacity: 0 }
  41.43% { opacity: 0 }
  44.29% { opacity: 1 }
  50.00% { opacity: 0.5 }
  55.71% { opacity: 1 }
  61.43% { opacity: 0.5 }
  67.14% { opacity: 1 }
  72.86% { opacity: 0.5 }
  78.57% { opacity: 1 }
  84.29% { opacity: 0.5 }
  90.00% { opacity: 1 }
  100.00% { opacity: 1 }
}
@keyframes hs-banner {
  0.00% { opacity: 0 }
  42.14% { opacity: 0 }
  44.29% { opacity: 1 }
  100.00% { opacity: 1 }
}
@keyframes hs-sus {
  0.00% { transform: scaleY(1) }
  63.57% { transform: scaleY(1) }
  65.71% { transform: scaleY(0.35) }
  100.00% { transform: scaleY(0.35) }
}
@keyframes hs-fade {
  0.00% { opacity: 1 }
  3.57% { opacity: 0 }
  95.71% { opacity: 0 }
  100.00% { opacity: 1 }
}
@keyframes hs-rec {
  0.00% { opacity: 1 }
  5.00% { opacity: 0.2 }
  10.00% { opacity: 1 }
  15.00% { opacity: 0.2 }
  20.00% { opacity: 1 }
  25.00% { opacity: 0.2 }
  30.00% { opacity: 1 }
  35.00% { opacity: 0.2 }
  40.00% { opacity: 1 }
  45.00% { opacity: 0.2 }
  50.00% { opacity: 1 }
  55.00% { opacity: 0.2 }
  60.00% { opacity: 1 }
  65.00% { opacity: 0.2 }
  70.00% { opacity: 1 }
  75.00% { opacity: 0.2 }
  80.00% { opacity: 1 }
  85.00% { opacity: 0.2 }
  90.00% { opacity: 1 }
  95.00% { opacity: 0.2 }
  100.00% { opacity: 1 }
}

.hero-scene .hs-box { animation-name: hs-box; }
.hero-scene .hs-belt-stripes { animation-name: hs-stripes; }
.hero-scene .hs-u2 { animation-name: hs-u2; }
.hero-scene .hs-u4 { animation-name: hs-u4; }
.hero-scene .hs-th-u4a { animation-name: hs-th-u4a; }
.hero-scene .hs-th-u4b { animation-name: hs-th-u4b; }
.hero-scene .hs-th-u6 { animation-name: hs-th-u6; }
.hero-scene .hs-spark { animation-name: hs-spark; transform-box: fill-box; transform-origin: center; }
.hero-scene .hs-screen { animation-name: hs-screen; }
.hero-scene .hs-alarm-glow, .hero-scene .hs-beacon-halo { opacity: 0; animation-name: hs-alarm; }
.hero-scene .hs-banner { animation-name: hs-banner; }
.hero-scene .hs-eyes-u6 { animation-name: hs-sus; transform-box: fill-box; transform-origin: center; }
.hero-scene .hs-fade { animation-name: hs-fade; }
.hero-scene .hs-rec { animation-name: hs-rec; }
/* little bob while walking */
.hero-scene .hs-bob-u2, .hero-scene .hs-bob-u4 { animation: hs-bob 1.4s ease-in-out infinite; }
@keyframes hs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* Pause button (assets/main.js toggles .is-paused / .is-playing on the svg). */
.hero-scene.is-paused * { animation-play-state: paused !important; }

/* Reduced motion: start frozen on the moment after the sabotage until the viewer presses play. */
@media (prefers-reduced-motion: reduce) {
  .hero-scene:not(.is-playing) * { animation-play-state: paused !important; animation-delay: -11s !important; }
}