/* Scene 2 — The rhythm. Night blueprint: the car in x-ray, the phone's raw
   50 Hz trace, the ISO 2631-1 lens, and the slow sway that survives it and
   reaches the child's inner ear. Car pitch, springs, the child's head and the
   ear glow share the clean wave's period (keyframes from site/scenes-src/s2/gen.py).
   Base styles are the poster frame; scroll choreography sits at the bottom. */
.scene--2 {
  --pin: 330vh;
}

/* Transparent stage: .s2-bg carries the ink so the scan can wipe scene 1's
   car into the blueprint instead of fading over an opaque sheet. */
.scene--2 > .stage {
  --scene-bg: transparent;
}

.s2-bg {
  position: absolute;
  inset: 0;
  background: var(--ink-sunken);
}

.s2-scan {
  display: none;
}

.s2-copy {
  max-width: 31rem;
}

/* Its own layer: Chrome dropped near layers on some frames while the scroll
   timeline repainted the art with the page. */
.s2-art {
  will-change: transform;
}

/* ---------- Linework hierarchy ---------- */
.s2-art path,
.s2-art circle,
.s2-art ellipse,
.s2-art rect {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s2-hv {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 2.4;
}

.s2-md,
.s2-mdf rect {
  fill: none;
  stroke: #4fb3c0;
  stroke-width: 1.25;
}

.s2-hl {
  fill: none;
  stroke: var(--teal);
  stroke-width: 0.8;
}

.s2-hd {
  fill: none;
  stroke: var(--teal);
  stroke-width: 0.7;
  stroke-dasharray: 7 5;
  opacity: 0.7;
}

.s2-tick {
  stroke: var(--teal);
  stroke-width: 0.7;
}

.s2-gridmin {
  stroke: var(--teal);
  stroke-width: 1;
  opacity: 0.07;
}

.s2-gridmaj {
  stroke: var(--teal);
  stroke-width: 1;
  opacity: 0.17;
}

/* ---------- Car ---------- */
.s2-bodyglow {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 12;
  opacity: 0.07;
}

.s2-bodyfill {
  fill: var(--teal-ink);
  opacity: 0.38;
}

.s2-glass {
  fill: var(--teal-hi);
  opacity: 0.07;
}

.s2-rail {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2;
  opacity: 0.7;
}

.s2-cap {
  fill: var(--paper);
  opacity: 0.8;
}

.s2-lamp {
  fill: rgb(242 210 155 / 0.18);
  stroke: #f2d29b;
  stroke-width: 1.4;
}

.s2-cut {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
  opacity: 0.85;
}

.s2-tail {
  fill: rgb(197 86 42 / 0.25);
  stroke: var(--high);
  stroke-width: 1.4;
}

.s2-ground {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 1.2;
  opacity: 0.6;
}

.s2-roadd {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2;
  opacity: 0.22;
}

/* x-ray passengers: soft fill + rim, traced from scene 1's cast */
.s2-skin {
  fill: rgb(244 239 230 / 0.2);
  stroke: rgb(244 239 230 / 0.85);
  stroke-width: 1.3;
}

.s2-neck,
.s2-skinl {
  fill: rgb(244 239 230 / 0.16);
}

.s2-sickf {
  fill: rgb(184 196 168 / 0.38);
  stroke: #b8c4a8;
  stroke-width: 1.3;
}

.s2-face {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.6;
  opacity: 0.85;
}

.s2-eye {
  fill: var(--paper);
}

.s2-hairf {
  fill: rgb(20 32 46 / 0.85);
  stroke: rgb(244 239 230 / 0.6);
  stroke-width: 1;
}

.s2-jumper {
  fill: rgb(199 205 212 / 0.22);
  stroke: rgb(199 205 212 / 0.75);
  stroke-width: 1.2;
}

.s2-trousers {
  fill: rgb(142 151 162 / 0.18);
  stroke: rgb(142 151 162 / 0.65);
  stroke-width: 1.1;
}

.s2-hoodie,
.s2-hood {
  fill: rgb(224 181 89 / 0.3);
  stroke: #e0b559;
  stroke-width: 1.4;
}

.s2-hood {
  fill: rgb(224 181 89 / 0.42);
}

.s2-armrim,
.s2-armcore,
.s2-armfill {
  fill: none;
}

.s2-armrim {
  stroke: #e0b559;
}

.s2-armcore {
  stroke: #0d1a22;
}

.s2-armfill {
  stroke: rgb(224 181 89 / 0.3);
}

.s2-driver .s2-armrim {
  stroke: rgb(199 205 212 / 0.75);
}

.s2-driver .s2-armfill {
  stroke: rgb(199 205 212 / 0.22);
}

.s2-whale {
  fill: rgb(143 169 174 / 0.42);
  stroke: #b4c9cc;
  stroke-width: 1.3;
}

.s2-whalel {
  fill: none;
  stroke: #b4c9cc;
  stroke-width: 1;
}

.s2-whaleeye {
  fill: var(--ink-deep);
}

.s2-earl {
  fill: none;
  stroke: var(--teal-hi-2);
  stroke-width: 1.3;
}

.s2-earp {
  transform-box: fill-box;
  transform-origin: center;
}

.s2-phone {
  fill: var(--ink-deep);
  stroke: var(--teal-hi-2);
  stroke-width: 1.3;
}

.s2-phone-glow {
  fill: var(--teal-hi);
  opacity: 0.6;
}

.s2-phone-ring {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 2.6;
}

.s2-phone-bead {
  fill: var(--paper);
}

.s2-ring {
  fill: none;
  stroke: var(--teal-hi-2);
  stroke-width: 1.3;
  transform-box: fill-box;
  transform-origin: center;
}

.s2-ring1 {
  transform: scale(0.34);
  opacity: 0.85;
}

.s2-ring2 {
  transform: scale(0.62);
  opacity: 0.5;
}

.s2-ring3 {
  transform: scale(0.92);
  opacity: 0.22;
}

.s2-ax {
  fill: none;
  stroke: var(--teal-hi-2);
  stroke-width: 1.7;
  stroke-dasharray: 1 1;
}

/* ---------- Type in the drawing (>= 12 px at 1440 and on phone) ---------- */
.s2-art text {
  font-family: var(--mono);
}

.s2-axl text {
  font-size: 22px;
  font-weight: 700;
  fill: var(--teal-hi-2);
}

.s2-axl rect {
  fill: #0b252e;
}

.s2-ann {
  font-size: 13px;
  letter-spacing: 0.04em;
  fill: var(--fg-2);
}

.s2-samp-l,
.s2-lens-l {
  font-size: 14px;
  letter-spacing: 0.04em;
  fill: var(--paper);
}

.s2-band-l,
.s2-sick-l {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  fill: var(--teal-hi-2);
}

.s2-bumps-l {
  font-size: 13px;
  letter-spacing: 0.03em;
  fill: var(--fg-2);
}

/* ---------- Signal ---------- */
.s2-lead {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 1.6;
  stroke-dasharray: 1 1;
}

.s2-raw,
.s2-rawcont {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 1.3;
  stroke-dasharray: 1 1;
  opacity: 0.92;
}

.s2-rawcont {
  opacity: 0.1;
}

.s2-only-p {
  display: none;
}

.s2-ray {
  fill: none;
  stroke-width: 1;
}

.s2-lensbase {
  fill: var(--ink-sunken);
}

.s2-lensline {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 1.8;
  stroke-dasharray: 1 1;
}

.s2-clean {
  fill: none;
  stroke: var(--teal-hi-2);
  stroke-width: 3;
  stroke-dasharray: 1 1;
}

.s2-cleanglow {
  fill: none;
  stroke: var(--teal-hi);
  stroke-width: 9;
  opacity: 0.55;
}

/* The wave's rhythm carried back to the child's ear. */
.s2-retl {
  fill: none;
  stroke: var(--teal-hi-2);
  stroke-width: 1.4;
  stroke-dasharray: 0.006 0.012;
  opacity: 0.7;
}

.s2-retd {
  fill: var(--teal-hi-2);
}

.s2-wf {
  fill: none;
  stroke: var(--teal-hi-2);
  stroke-width: 2;
  stroke-dasharray: 1 1;
}

.s2-wfarea {
  fill: var(--teal-hi);
  opacity: 0.16;
}

.s2-leadl {
  fill: none;
  stroke: var(--teal-hi-2);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.7;
}

.s2-leadd {
  fill: var(--teal-hi-2);
}

/* 4:3-ish landscape crops the viewBox to x 200–1400. */
@media (min-aspect-ratio: 801/1000) and (max-aspect-ratio: 3/2) {
  .s2-sickp {
    transform: translate(40px, 58px);
  }

  .s2-sick-l.s2-only-d {
    display: none;
  }

  .s2-sick-l.s2-only-p {
    display: inline;
  }

  .s2-bumpsp {
    transform: translate(70px, 112px);
  }
}

/* ---------- Phone portrait: car up top, the readout strip beneath ---------- */
@media (max-aspect-ratio: 4/5) {
  /* Same fade as scene 1, so the registered wheels fade identically. */
  .s2-art {
    mask-image: linear-gradient(#000 94%, transparent);
  }

  .s2-carpos {
    transform: translate(526px, 450px) scale(0.9);
  }

  .s2-only-d,
  .s2-humpw,
  .s2-leader,
  .s2-bumps {
    display: none;
  }

  .s2-only-p {
    display: inline;
  }

  .s2-lens {
    transform: translate(790px, 690px) scale(0.9);
  }

  .s2-post {
    transform: translate(790px, 690px);
  }

  .s2-samples {
    transform: translate(600px, 690px);
  }

  .s2-sickp {
    transform: translate(34px, 60px);
  }

  /* 34px letters, grown from their anchors with their plates */
  .s2-axk {
    transform-box: view-box;
    transform-origin: 0 0;
    transform: scale(1.5455);
  }

  .s2-retl {
    stroke-width: 2.2;
    opacity: 0.85;
  }

  .s2-ann,
  .s2-bumps-l {
    font-size: 20px;
  }

  .s2-samp-l,
  .s2-sick-l {
    font-size: 21px;
  }

  .s2-lens-l {
    font-size: 23px;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) and (min-height: 30rem) {
  @supports (animation-timeline: view()) {
    .s2-bg,
    .s2-art,
    .s2-scan,
    .s2-copy,
    .s2-copyin,
    .s2-world,
    .s2-sig,
    .s2-cam,
    .s2-sway,
    .s2-head,
    .s2-earp,
    .s2-spring,
    .s2-spin,
    .s2-road,
    .s2-gridl,
    .s2-rings,
    .s2-ax,
    .s2-axl,
    .s2-lead,
    .s2-raw,
    .s2-samplesin,
    .s2-lensin,
    .s2-lensline,
    .s2-rawcont,
    .s2-rays,
    .s2-bumps,
    .s2-clean,
    .s2-cleanglow,
    .s2-drift,
    .s2-period,
    .s2-sick,
    .s2-return,
    .s2-retl,
    .s2-hump,
    .s2-leader,
    .s2-wf,
    .s2-beat1,
    .s2-beat2 {
      animation-timeline: --s2;
      animation-fill-mode: both;
    }

    /* The x-ray pass: a scan line wipes scene 1's car into the blueprint. */
    .s2-bg,
    .s2-art {
      animation-name: s2-wipe;
      animation-range: entry 45% contain 4%;
    }

    .s2-scan {
      display: block;
      position: absolute;
      inset: 0;
      pointer-events: none;
      animation-name: s2-scan;
      animation-range: entry 45% contain 4%;
    }

    .s2-scanl {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 100%;
      width: 2px;
      background: var(--teal-hi-2);
      box-shadow:
        0 0 12px 2px rgb(111 207 217 / 0.7),
        -60px 0 80px 10px rgb(111 207 217 / 0.12);
    }

    /* Copy lands during the hand-in, leaves 66–74 so scene 3's copy lands
       on an empty slot. */
    .s2-copy {
      animation-name: s2-fade-in;
      animation-range: entry 50% entry 90%;
    }

    .s2-copyin {
      animation-name: s2-fade-out;
      animation-range: contain 66% contain 74%;
    }

    /* Beats share one cell, top-aligned; the shell's .lede + .lede margin
       would drop beat 2 by 12 px. */
    .s2-copy .s2-beat2 {
      margin-top: 0;
    }

    .s2-copy .beats > * {
      align-self: start;
    }

    /* Overlapped crossfade: the lede is never empty. */
    .s2-beat1 {
      animation-name: s2-fade-out;
      animation-range: contain 46% contain 50%;
    }

    /* stylelint-disable-next-line no-descending-specificity -- the scoped margin reset wins by specificity; the beats keep their film order */
    .s2-beat2 {
      animation-name: s2-fade-in;
      animation-range: contain 45% contain 49%;
    }

    /* Hand-out: the signal fades, then the car collapses onto scene 3's
       car marker (most of the shrink early, before scene 3 is opaque). */
    .s2-world {
      transform-box: view-box;
      transform-origin: 605px 318px;
      animation-name: s2-world;
      animation-range: contain 62% contain 88%;
    }

    .s2-sig {
      animation-name: s2-fade-out;
      animation-range: contain 66% contain 76%;
    }

    .s2-cam {
      transform-box: view-box;
      transform-origin: 0 0;
      animation-name: s2-cam;
      animation-range: contain 0% contain 16%;
    }

    /* One rhythm: these share the clean wave's period (keyframes below). */
    .s2-sway {
      transform-origin: 330px -120px;
      animation-name: s2-sway;
      animation-range: contain 0% contain 100%;
    }

    .s2-head {
      transform-origin: 170px -150.4px; /* gen:head-pivot */
      animation-name: s2-head;
      animation-range: contain 0% contain 100%;
    }

    .s2-earp {
      animation-name: s2-ear;
      animation-range: contain 0% contain 100%;
    }

    .s2-spring {
      transform-box: fill-box;
      transform-origin: 50% 100%;
      animation-range: contain 0% contain 100%;
    }

    .s2-spring-f {
      animation-name: s2-spring-f;
    }

    .s2-spring-r {
      animation-name: s2-spring-r;
    }

    .s2-spin {
      transform-box: fill-box;
      transform-origin: center;
      animation-name: s2-spin;
      animation-range: contain 0% contain 100%;
    }

    .s2-road {
      animation-name: s2-road;
      animation-range: contain 0% contain 100%;
    }

    .s2-gridl {
      animation-name: s2-grid;
      animation-range: contain 0% contain 100%;
    }

    .s2-rings {
      animation-name: s2-fade-in;
      animation-range: contain 3% contain 8%;
    }

    .s2-ring {
      animation: s2-pulse 4.2s var(--ease) infinite;
    }

    .s2-ring2 {
      animation-delay: -1.4s;
    }

    .s2-ring3 {
      animation-delay: -2.8s;
    }

    .s2-ax {
      animation-name: s2-draw;
    }

    .s2-ax-z {
      animation-range: contain 5% contain 10%;
    }

    .s2-ax-x {
      animation-range: contain 7% contain 12%;
    }

    .s2-ax-y {
      animation-range: contain 9% contain 14%;
    }

    .s2-axl {
      animation-name: s2-fade-in;
      animation-range: contain 10% contain 15%;
    }

    .s2-lead {
      animation-name: s2-draw;
      animation-range: contain 12% contain 15%;
    }

    .s2-raw {
      animation-name: s2-draw;
      animation-range: contain 15% contain 30%;
    }

    .s2-samplesin {
      animation-name: s2-rise;
      animation-range: contain 24% contain 30%;
    }

    .s2-rawcont {
      animation-name: s2-draw, s2-ghost;
      animation-range:
        contain 30% contain 37%,
        contain 44% contain 50%;
    }

    .s2-lensin {
      transform-box: fill-box;
      transform-origin: center;
      animation-name: s2-lens;
      animation-range: contain 36% contain 42%;
    }

    .s2-lensline {
      animation-name: s2-draw;
      animation-range: contain 36% contain 41%;
    }

    .s2-rays,
    .s2-bumps {
      animation-name: s2-fade-in;
      animation-range: contain 44% contain 50%;
    }

    .s2-clean {
      animation-name: s2-draw-clean;
      animation-range: contain 42% contain 52%;
    }

    .s2-cleanglow {
      animation-name: s2-draw-clean, s2-glow;
      animation-range:
        contain 42% contain 52%,
        contain 46% contain 54%;
    }

    /* Five wave periods over contain 42–100: the master clock. */
    .s2-drift {
      animation-name: s2-drift;
      animation-range: contain 42% contain 100%;
    }

    .s2-period,
    .s2-sick {
      animation-name: s2-fade-in;
      animation-range: contain 48% contain 54%;
    }

    .s2-return {
      animation-name: s2-fade-in;
      animation-range: contain 50% contain 56%;
    }

    .s2-retl {
      animation-name: s2-flow;
      animation-range: contain 50% contain 100%;
    }

    .s2-hump {
      animation-name: s2-rise;
      animation-range: contain 48% contain 55%;
    }

    .s2-leader {
      animation-name: s2-fade-in;
      animation-range: contain 47% contain 52%;
    }

    .s2-wf {
      animation-name: s2-draw;
      animation-range: contain 50% contain 56%;
    }

    @media (min-aspect-ratio: 801/1000) and (max-aspect-ratio: 3/2) {
      .s2-cam {
        animation-name: s2-cam-t;
      }

      .s2-world {
        transform-origin: 484px 273px;
      }
    }

    @media (max-aspect-ratio: 4/5) {
      .s2-cam {
        animation-name: s2-cam-p;
      }

      .s2-world {
        transform-origin: 765px 262px;
      }
    }
  }
}

@keyframes s2-wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

@keyframes s2-scan {
  from {
    transform: translateX(-100%);
  }

  92% {
    opacity: 1;
  }

  to {
    transform: none;
    opacity: 0;
  }
}

@keyframes s2-world {
  from {
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
    transform: none;
  }

  to {
    transform: scale(0.1);
  }
}

@keyframes s2-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes s2-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes s2-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes s2-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* The clean path starts out of sight behind the lens (five periods of drift
   headroom); the start offset is the visible share, so it draws from the lens out. */
@keyframes s2-draw-clean {
  from {
    stroke-dashoffset: 0.3596; /* gen:clean-offset */
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes s2-ghost {
  from {
    opacity: 0.92;
  }

  to {
    opacity: 0.1;
  }
}

@keyframes s2-glow {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.55;
  }
}

/* Under two dash periods over the range: faster, the dots strobe at a wheel notch. */
@keyframes s2-flow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -0.03;
  }
}

@keyframes s2-lens {
  from {
    opacity: 0;
    transform: scale(0.82);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Start frames register the x-ray car over scene 1's held car
   (site/scenes-src/README.md): cam x carpos = scene 1's car transform per layout. */
@keyframes s2-cam {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(222.32px, 251.24px) scale(1.48691);
  }

  to {
    transform: none;
  }
}

@keyframes s2-cam-t {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(440.2px, 379.37px) scale(1.10157);
  }

  to {
    transform: none;
  }
}

@keyframes s2-cam-p {
  from {
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-236.58px, 280px) scale(1.24444);
  }

  to {
    transform: none;
  }
}

/* The car rolls without slipping: 135deg of the wheel is 104 px of ground. Slow enough that
   neither the spokes nor the hatch strobe (under 0.4 of a period per wheel notch). */
@keyframes s2-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(135deg);
  }
}

@keyframes s2-road {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-104px);
  }
}

@keyframes s2-grid {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-72px, -24px);
  }
}

@keyframes s2-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(1100px); /* gen:drift */
  }
}

@keyframes s2-pulse {
  from {
    transform: scale(0.18);
    opacity: 0.95;
  }

  to {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* gen:begin sync (written by site/scenes-src/s2/gen.py from the clean wave's phase at the lens exit) */
@keyframes s2-sway {
  0.00% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.58px) rotate(-0.97deg);
  }

  4.88% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  10.68% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.8px) rotate(-1.1deg);
  }

  16.48% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  22.28% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.8px) rotate(-1.1deg);
  }

  28.08% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  33.88% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.8px) rotate(-1.1deg);
  }

  39.68% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  45.48% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.8px) rotate(-1.1deg);
  }

  51.28% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  57.08% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.8px) rotate(-1.1deg);
  }

  62.88% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  68.68% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.8px) rotate(-1.1deg);
  }

  74.48% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  80.28% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.8px) rotate(-1.1deg);
  }

  86.08% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  91.88% {
    animation-timing-function: ease-in-out;
    transform: translateY(-1.8px) rotate(-1.1deg);
  }

  97.68% {
    animation-timing-function: ease-in-out;
    transform: translateY(1.8px) rotate(1.1deg);
  }

  100.00% {
    animation-timing-function: ease-in-out;
    transform: translateY(0.56px) rotate(0.34deg);
  }
}

@keyframes s2-spring-f {
  0.00% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.053);
  }

  4.88% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  10.68% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.06);
  }

  16.48% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  22.28% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.06);
  }

  28.08% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  33.88% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.06);
  }

  39.68% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  45.48% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.06);
  }

  51.28% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  57.08% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.06);
  }

  62.88% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  68.68% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.06);
  }

  74.48% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  80.28% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.06);
  }

  86.08% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  91.88% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.06);
  }

  97.68% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.94);
  }

  100.00% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.981);
  }
}

@keyframes s2-spring-r {
  0.00% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.956);
  }

  4.88% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  10.68% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.95);
  }

  16.48% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  22.28% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.95);
  }

  28.08% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  33.88% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.95);
  }

  39.68% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  45.48% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.95);
  }

  51.28% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  57.08% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.95);
  }

  62.88% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  68.68% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.95);
  }

  74.48% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  80.28% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.95);
  }

  86.08% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  91.88% {
    animation-timing-function: ease-in-out;
    transform: scaleY(0.95);
  }

  97.68% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.05);
  }

  100.00% {
    animation-timing-function: ease-in-out;
    transform: scaleY(1.015);
  }
}

@keyframes s2-head {
  0.00% {
    animation-timing-function: ease-in-out;
    transform: translateX(5.71px) rotate(7.91deg);
  }

  4.88% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  10.68% {
    animation-timing-function: ease-in-out;
    transform: translateX(6.5px) rotate(9deg);
  }

  16.48% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  22.28% {
    animation-timing-function: ease-in-out;
    transform: translateX(6.5px) rotate(9deg);
  }

  28.08% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  33.88% {
    animation-timing-function: ease-in-out;
    transform: translateX(6.5px) rotate(9deg);
  }

  39.68% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  45.48% {
    animation-timing-function: ease-in-out;
    transform: translateX(6.5px) rotate(9deg);
  }

  51.28% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  57.08% {
    animation-timing-function: ease-in-out;
    transform: translateX(6.5px) rotate(9deg);
  }

  62.88% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  68.68% {
    animation-timing-function: ease-in-out;
    transform: translateX(6.5px) rotate(9deg);
  }

  74.48% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  80.28% {
    animation-timing-function: ease-in-out;
    transform: translateX(6.5px) rotate(9deg);
  }

  86.08% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  91.88% {
    animation-timing-function: ease-in-out;
    transform: translateX(6.5px) rotate(9deg);
  }

  97.68% {
    animation-timing-function: ease-in-out;
    transform: translateX(-6.5px) rotate(-9deg);
  }

  100.00% {
    animation-timing-function: ease-in-out;
    transform: translateX(-2.01px) rotate(-2.78deg);
  }
}

@keyframes s2-ear {
  0.00% {
    animation-timing-function: ease-in-out;
    opacity: 0.23;
    transform: scale(0.912);
  }

  4.88% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  10.68% {
    animation-timing-function: ease-in-out;
    opacity: 0.2;
    transform: scale(0.9);
  }

  16.48% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  22.28% {
    animation-timing-function: ease-in-out;
    opacity: 0.2;
    transform: scale(0.9);
  }

  28.08% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  33.88% {
    animation-timing-function: ease-in-out;
    opacity: 0.2;
    transform: scale(0.9);
  }

  39.68% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  45.48% {
    animation-timing-function: ease-in-out;
    opacity: 0.2;
    transform: scale(0.9);
  }

  51.28% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  57.08% {
    animation-timing-function: ease-in-out;
    opacity: 0.2;
    transform: scale(0.9);
  }

  62.88% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  68.68% {
    animation-timing-function: ease-in-out;
    opacity: 0.2;
    transform: scale(0.9);
  }

  74.48% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  80.28% {
    animation-timing-function: ease-in-out;
    opacity: 0.2;
    transform: scale(0.9);
  }

  86.08% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  91.88% {
    animation-timing-function: ease-in-out;
    opacity: 0.2;
    transform: scale(0.9);
  }

  97.68% {
    animation-timing-function: ease-in-out;
    opacity: 0.7;
    transform: scale(1.1);
  }

  100.00% {
    animation-timing-function: ease-in-out;
    opacity: 0.53;
    transform: scale(1.031);
  }
}
/* gen:end sync */