[data-motion^="myt-"] {
  --myt-night: #08191d;
  --myt-blue: #2474dc;
  --myt-teal: #168c7b;
  --myt-copper: #db895b;
  --myt-zinc: #bbc8c7;
  --myt-white: #f4f6f0;
  --myt-steel: #586b6e;
  isolation: isolate;
}

.myt-decor {
  position: absolute;
  z-index: 1;
  width: min(280px, calc(100% - 24px));
  height: 150px;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  pointer-events: none;
  box-sizing: border-box;
  color: var(--myt-white);
  background: rgba(8,25,29,.96);
  border: 1px solid rgba(219,137,91,.4);
  box-shadow: 0 14px 34px rgba(2,10,12,.24);
}

.myt-decor,
.myt-decor * {
  box-sizing: border-box;
  pointer-events: none;
}

[data-motion^="myt-"] > :not(.myt-decor) {
  position: relative;
  z-index: 2;
}

.myt-siphon-baffle { right: 4vw; bottom: 22px; width: 264px; height: 140px; }
.myt-taper-plug-bench { left: 4vw; bottom: 22px; width: 270px; height: 144px; }
.myt-reuleaux-courtyard { right: 4vw; top: 26px; width: 258px; height: 138px; }
.myt-ferrofield-array { left: 4vw; bottom: 22px; width: 266px; height: 140px; }
.myt-ceramic-fuse-check { right: 4vw; bottom: 22px; width: 260px; height: 140px; }
.myt-vacuum-cup-seat { left: 4vw; top: 26px; width: 270px; height: 140px; }
.myt-eddy-brake { right: 4vw; bottom: 22px; width: 270px; height: 140px; }
.myt-capacitor-total { left: 4vw; bottom: 22px; width: 264px; height: 140px; }
.myt-hookloop-handoff { right: 4vw; top: 26px; width: 260px; height: 140px; }
.myt-acoustic-labyrinth { left: 4vw; bottom: 22px; width: 270px; height: 144px; }

.js [data-motion="myt-siphon-baffle"] .myt-decor .decor-child,
.js [data-motion="myt-taper-plug-bench"] .myt-decor .decor-child,
.js [data-motion="myt-reuleaux-courtyard"] .myt-decor .decor-child,
.js [data-motion="myt-ferrofield-array"] .myt-decor .decor-child,
.js [data-motion="myt-ceramic-fuse-check"] .myt-decor .decor-child,
.js [data-motion="myt-vacuum-cup-seat"] .myt-decor .decor-child,
.js [data-motion="myt-eddy-brake"] .myt-decor .decor-child,
.js [data-motion="myt-capacitor-total"] .myt-decor .decor-child,
.js [data-motion="myt-hookloop-handoff"] .myt-decor .decor-child,
.js [data-motion="myt-acoustic-labyrinth"] .myt-decor .decor-child,
.js [data-motion^="myt-"] .myt-decor * {
  animation-play-state: paused;
}

.js [data-motion="myt-siphon-baffle"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-taper-plug-bench"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-reuleaux-courtyard"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-ferrofield-array"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-ceramic-fuse-check"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-vacuum-cup-seat"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-eddy-brake"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-capacitor-total"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-hookloop-handoff"].is-motion-active .myt-decor .decor-child,
.js [data-motion="myt-acoustic-labyrinth"].is-motion-active .myt-decor .decor-child,
.js [data-motion^="myt-"].is-motion-active .myt-decor * {
  animation-play-state: running;
}

/* Scene 1: one sealed slug crosses a baffled inverted siphon. */
.myt-siphon-baffle {
  --myt-slug-x: 137px;
  --myt-slug-y: 42px;
  background:
    linear-gradient(145deg, rgba(36,116,220,.18), transparent 57%),
    var(--myt-night);
}
.myt-siphon-baffle .myt-siphon-channel {
  position: absolute;
  z-index: 4;
  top: 24%;
  left: 10%;
  width: 80%;
  height: 55%;
  background:
    linear-gradient(var(--myt-steel),var(--myt-steel)) 0 0 / 100% 17% no-repeat,
    linear-gradient(var(--myt-steel),var(--myt-steel)) 0 0 / 9% 100% no-repeat,
    linear-gradient(var(--myt-steel),var(--myt-steel)) 100% 0 / 9% 100% no-repeat,
    linear-gradient(var(--myt-steel),var(--myt-steel)) 0 100% / 100% 17% no-repeat;
  border: 2px solid var(--myt-white);
  clip-path: inset(0);
  animation: myt-siphon-channel-prime .78s steps(8,end) .08s both paused;
}
.myt-siphon-baffle .myt-siphon-slug {
  position: absolute;
  z-index: 8;
  top: 31%;
  left: 14%;
  width: 13%;
  height: 14%;
  background: var(--myt-copper);
  border: 2px solid #ffd0b5;
  border-radius: 48% 21% 43% 25%;
  translate: var(--myt-slug-x) var(--myt-slug-y);
  animation: myt-siphon-slug-transfer 1.42s cubic-bezier(.2,.58,.25,1.02) .24s both paused;
}
.myt-siphon-baffle .myt-siphon-chamber {
  position: absolute;
  z-index: 6;
  top: 18%;
  width: 20%;
  height: 69%;
  background: rgba(36,116,220,.42);
  border: 3px solid var(--myt-white);
}
.myt-siphon-baffle .chamber-a { left: 7%; border-radius: 29% 12% 22% 38%; animation: myt-siphon-chamber-a-set .7s cubic-bezier(.2,.67,.28,1.12) .16s both paused; }
.myt-siphon-baffle .chamber-b { right: 7%; border-radius: 12% 33% 41% 19%; animation: myt-siphon-chamber-b-set .82s cubic-bezier(.2,.67,.28,1.12) .28s both paused; }
.myt-siphon-baffle .myt-siphon-baffle-part {
  position: absolute;
  z-index: 10;
  width: 6%;
  height: 31%;
  background: var(--myt-zinc);
  border: 1px solid var(--myt-white);
  transform-origin: center bottom;
}
.myt-siphon-baffle .baffle-a { top: 30%; left: 36%; animation: myt-siphon-baffle-a-narrow .54s cubic-bezier(.2,.67,.28,1.14) .42s both paused; }
.myt-siphon-baffle .baffle-b { top: 43%; left: 50%; animation: myt-siphon-baffle-b-narrow .62s cubic-bezier(.2,.67,.28,1.14) .52s both paused; }
.myt-siphon-baffle .baffle-c { top: 29%; right: 30%; animation: myt-siphon-baffle-c-narrow .7s cubic-bezier(.2,.67,.28,1.14) .62s both paused; }
.myt-siphon-baffle .myt-siphon-valve {
  position: absolute;
  z-index: 12;
  top: 11%;
  left: 45%;
  width: 11%;
  aspect-ratio: 1;
  background: var(--myt-teal);
  border: 2px solid #8fe5d8;
  clip-path: polygon(0 18%,50% 0,100% 18%,82% 50%,100% 82%,50% 100%,0 82%,18% 50%);
  rotate: 38deg;
  animation: myt-siphon-valve-open .74s cubic-bezier(.2,.64,.27,1.12) .76s both paused;
}
.myt-siphon-baffle .myt-siphon-witness {
  position: absolute;
  z-index: 11;
  right: 9%;
  bottom: 9%;
  width: 18%;
  height: 13%;
  background: var(--myt-copper);
  border: 2px solid #ffd0b5;
  transform-origin: left center;
  animation: myt-siphon-witness-fill .66s cubic-bezier(.2,.67,.28,1.12) 1.22s both paused;
}

@keyframes myt-siphon-channel-prime {
  0% { clip-path: inset(0 94% 82% 0); filter: brightness(.45); opacity: .14; }
  48% { clip-path: inset(0 0 82% 0); filter: brightness(.84); opacity: .72; }
  100% { clip-path: inset(0); filter: none; opacity: 1; }
}
@keyframes myt-siphon-slug-transfer {
  0% { translate: 0 0; scale: .72 1.18; opacity: .14; }
  24% { translate: calc(var(--myt-slug-x) * .35) 0; scale: 1.08 .92; opacity: 1; }
  49% { translate: calc(var(--myt-slug-x) * .52) calc(var(--myt-slug-y) * .9); scale: .9 1.12; }
  74% { translate: calc(var(--myt-slug-x) * .82) var(--myt-slug-y); scale: 1.12 .88; }
  100% { translate: var(--myt-slug-x) var(--myt-slug-y); scale: 1; opacity: 1; }
}
@keyframes myt-siphon-chamber-a-set {
  0% { scale: .72 1.16; border-radius: 12% 45% 14% 62%; opacity: .12; }
  71% { scale: 1.08 .93; border-radius: 34% 9% 25% 34%; opacity: 1; }
  100% { scale: 1; border-radius: 29% 12% 22% 38%; opacity: 1; }
}
@keyframes myt-siphon-chamber-b-set {
  0% { scale: 1.17 .64; border-radius: 48% 9% 61% 12%; filter: brightness(.48); }
  68% { scale: .91 1.12; border-radius: 9% 38% 36% 23%; filter: brightness(1.18); }
  100% { scale: 1; border-radius: 12% 33% 41% 19%; filter: none; }
}
@keyframes myt-siphon-baffle-a-narrow {
  0% { scale: 1.28 .46; translate: -3px 0; opacity: .12; }
  72% { scale: .88 1.12; translate: 1px 0; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-siphon-baffle-b-narrow {
  0% { scale: .42 1.3; translate: 0 5px; filter: saturate(.32); }
  69% { scale: 1.14 .87; translate: 0 -1px; filter: saturate(1.2); }
  100% { scale: 1; translate: none; filter: none; }
}
@keyframes myt-siphon-baffle-c-narrow {
  0% { scale: 1.22 .31; translate: 4px -3px; opacity: .1; filter: contrast(.44); }
  75% { scale: .9 1.15; translate: -1px 1px; opacity: 1; filter: contrast(1.18); }
  100% { scale: 1; translate: none; opacity: 1; filter: none; }
}
@keyframes myt-siphon-valve-open {
  0% { rotate: -26deg; scale: .52 .86; opacity: .12; }
  72% { rotate: 44deg; scale: 1.12 .92; opacity: 1; }
  100% { rotate: 38deg; scale: 1; opacity: 1; }
}
@keyframes myt-siphon-witness-fill {
  0% { scale: .08 1.26; opacity: .1; filter: brightness(.45); }
  70% { scale: 1.08 .9; opacity: 1; filter: brightness(1.18); }
  100% { scale: 1; opacity: 1; filter: none; }
}

/* Scene 2: three large tapered plugs seat into unlike fixed bores. */
.myt-taper-plug-bench {
  --myt-plug-a-start: -17px;
  --myt-plug-b-start: -13px;
  --myt-plug-c-start: -20px;
  background:
    linear-gradient(135deg, rgba(22,140,123,.17), transparent 58%),
    var(--myt-night);
}
.myt-taper-plug-bench .myt-taper-frame {
  position: absolute;
  z-index: 3;
  inset: 8%;
  border: 2px solid var(--myt-zinc);
  clip-path: inset(0);
  animation: myt-taper-frame-draw .86s steps(8,end) .08s both paused;
}
.myt-taper-plug-bench .myt-taper-socket {
  position: absolute;
  z-index: 5;
  bottom: 21%;
  width: 25%;
  height: 34%;
  background: var(--myt-steel);
  border: 2px solid var(--myt-white);
}
.myt-taper-plug-bench .socket-a { left: 7%; clip-path: polygon(0 0,100% 0,82% 100%,18% 100%); animation: myt-taper-socket-a-set .58s cubic-bezier(.2,.67,.28,1.14) .18s both paused; }
.myt-taper-plug-bench .socket-b { left: 37.5%; clip-path: polygon(8% 0,92% 0,100% 100%,0 100%); animation: myt-taper-socket-b-set .66s cubic-bezier(.2,.67,.28,1.14) .26s both paused; }
.myt-taper-plug-bench .socket-c { right: 7%; clip-path: polygon(0 0,100% 14%,88% 100%,12% 84%); animation: myt-taper-socket-c-set .74s cubic-bezier(.2,.67,.28,1.14) .34s both paused; }
.myt-taper-plug-bench .myt-taper-plug {
  position: absolute;
  z-index: 9;
  top: 14%;
  width: 17%;
  height: 51%;
  background: linear-gradient(90deg, var(--myt-copper), #f1ae79, var(--myt-copper));
  border: 2px solid #ffd0b5;
  transform-origin: center bottom;
}
.myt-taper-plug-bench .plug-a { left: 11%; clip-path: polygon(22% 0,78% 0,100% 100%,0 100%); animation: myt-taper-plug-a-seat .8s cubic-bezier(.2,.67,.28,1.12) .38s both paused; }
.myt-taper-plug-bench .plug-b { left: 41.5%; clip-path: polygon(10% 0,90% 0,77% 100%,23% 100%); animation: myt-taper-plug-b-seat .92s cubic-bezier(.2,.67,.28,1.12) .5s both paused; }
.myt-taper-plug-bench .plug-c { right: 11%; clip-path: polygon(30% 0,100% 10%,78% 100%,0 90%); animation: myt-taper-plug-c-seat 1.04s cubic-bezier(.2,.67,.28,1.12) .62s both paused; }
.myt-taper-plug-bench .myt-taper-collar {
  position: absolute;
  z-index: 11;
  top: 48%;
  width: 23%;
  height: 12%;
  background: var(--myt-blue);
  border: 2px solid #a9c6ff;
}
.myt-taper-plug-bench .collar-a { left: 8%; animation: myt-taper-collar-a-close .52s cubic-bezier(.2,.67,.28,1.16) .72s both paused; }
.myt-taper-plug-bench .collar-b { left: 38.5%; animation: myt-taper-collar-b-close .6s cubic-bezier(.2,.67,.28,1.16) .82s both paused; }
.myt-taper-plug-bench .collar-c { right: 8%; animation: myt-taper-collar-c-close .68s cubic-bezier(.2,.67,.28,1.16) .92s both paused; }
.myt-taper-plug-bench .myt-taper-datum {
  position: absolute;
  z-index: 12;
  bottom: 8%;
  width: 10%;
  aspect-ratio: 1.4;
  background: var(--myt-teal);
  border: 2px solid #8fe5d8;
  animation: myt-taper-datums-confirm .48s cubic-bezier(.2,.67,.28,1.16) both paused;
}
.myt-taper-plug-bench .datum-a { left: 14%; animation-delay: .9s; }
.myt-taper-plug-bench .datum-b { left: 45%; animation-delay: 1s; }
.myt-taper-plug-bench .datum-c { right: 14%; animation-delay: 1.1s; }

@keyframes myt-taper-frame-draw {
  0% { clip-path: polygon(0 0,0 0,0 0,0 0); opacity: .12; }
  51% { clip-path: polygon(0 0,100% 0,100% 0,0 0); opacity: .72; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}
@keyframes myt-taper-socket-a-set {
  0% { scale: 1.18 .52; translate: 0 6px; opacity: .12; }
  71% { scale: .91 1.12; translate: 0 -1px; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-taper-socket-b-set {
  0% { scale: .48 1.2; translate: -4px 0; filter: brightness(.46); }
  68% { scale: 1.13 .9; translate: 1px 0; filter: brightness(1.2); }
  100% { scale: 1; translate: none; filter: none; }
}
@keyframes myt-taper-socket-c-set {
  0% { scale: .72 .38; translate: 4px 5px; opacity: .14; filter: saturate(.34); }
  74% { scale: 1.1 1.13; translate: -1px -1px; opacity: 1; filter: saturate(1.2); }
  100% { scale: 1; translate: none; opacity: 1; filter: none; }
}
@keyframes myt-taper-plug-a-seat {
  0% { translate: 0 var(--myt-plug-a-start); scale: .68 1.1; opacity: .1; }
  72% { translate: 0 3px; scale: 1.09 .94; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes myt-taper-plug-b-seat {
  0% { translate: 3px var(--myt-plug-b-start); scale: 1.18 .62; filter: contrast(.44); }
  69% { translate: -1px 3px; scale: .91 1.12; filter: contrast(1.18); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes myt-taper-plug-c-seat {
  0% { translate: -4px var(--myt-plug-c-start); scale: .42 .86; opacity: .12; filter: brightness(.5); }
  75% { translate: 1px 4px; scale: 1.14 1.04; opacity: 1; filter: brightness(1.2); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-taper-collar-a-close {
  0% { scale: 1.12 .38; translate: -1px 0; opacity: .1; }
  70% { scale: .86 1.15; translate: 1px 0; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-taper-collar-b-close {
  0% { scale: .16 1.28; translate: 0 4px; filter: saturate(.32); }
  73% { scale: 1.16 .88; translate: 0 -1px; filter: saturate(1.22); }
  100% { scale: 1; translate: none; filter: none; }
}
@keyframes myt-taper-collar-c-close {
  0% { scale: 1.12 .42; translate: 1px -3px; opacity: .13; filter: brightness(.52); }
  68% { scale: .9 1.14; translate: -1px 1px; opacity: 1; filter: brightness(1.18); }
  100% { scale: 1; translate: none; opacity: 1; filter: none; }
}
@keyframes myt-taper-datums-confirm {
  0% { scale: .28 1.14; opacity: .1; }
  72% { scale: 1.14 .86; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}

/* Scene 3: one bounded Reuleaux body resolves three local clearances. */
.myt-reuleaux-courtyard {
  background:
    linear-gradient(145deg, rgba(36,116,220,.17), transparent 58%),
    var(--myt-night);
}
.myt-reuleaux-courtyard .myt-reuleaux-frame {
  position: absolute;
  z-index: 3;
  inset: 8%;
  border: 2px solid var(--myt-zinc);
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  animation: myt-reuleaux-frame-resolve .82s steps(8,end) .08s both paused;
}
.myt-reuleaux-courtyard .myt-reuleaux-rotor {
  position: absolute;
  z-index: 7;
  top: 24%;
  left: 32%;
  width: 36%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--myt-blue), #66a2ef);
  border: 3px solid var(--myt-white);
  border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%;
  clip-path: polygon(50% 0,94% 24%,100% 70%,57% 100%,13% 85%,0 39%);
  rotate: 24deg;
  translate: 8px 5px;
  animation: myt-reuleaux-rotor-roll .98s cubic-bezier(.2,.6,.26,1.04) .18s both paused;
}
.myt-reuleaux-courtyard .myt-reuleaux-shoe {
  position: absolute;
  z-index: 9;
  width: 18%;
  height: 16%;
  background: var(--myt-copper);
  border: 2px solid #ffd0b5;
}
.myt-reuleaux-courtyard .shoe-a { top: 12%; left: 10%; transform: skewX(-13deg); animation: myt-reuleaux-shoe-a-seat .58s cubic-bezier(.2,.67,.28,1.14) .52s both paused; }
.myt-reuleaux-courtyard .shoe-b { top: 18%; right: 9%; transform: skewY(11deg); animation: myt-reuleaux-shoe-b-seat .66s cubic-bezier(.2,.67,.28,1.14) .62s both paused; }
.myt-reuleaux-courtyard .shoe-c { bottom: 11%; left: 18%; transform: skewX(17deg); animation: myt-reuleaux-shoe-c-seat .74s cubic-bezier(.2,.67,.28,1.14) .72s both paused; }
.myt-reuleaux-courtyard .myt-reuleaux-witness {
  position: absolute;
  z-index: 11;
  width: 11%;
  aspect-ratio: 1.45;
  background: var(--myt-teal);
  border: 1px solid #8fe5d8;
}
.myt-reuleaux-courtyard .witness-a { top: 10%; left: 29%; animation: myt-reuleaux-witness-a-show .5s steps(4,end) .8s both paused; }
.myt-reuleaux-courtyard .witness-b { top: 39%; right: 8%; animation: myt-reuleaux-witness-b-show .58s steps(5,end) .9s both paused; }
.myt-reuleaux-courtyard .witness-c { right: 29%; bottom: 9%; animation: myt-reuleaux-witness-c-show .66s steps(6,end) 1s both paused; }
.myt-reuleaux-courtyard .myt-reuleaux-clearance-window {
  position: absolute;
  z-index: 5;
  right: 11%;
  bottom: 11%;
  width: 24%;
  height: 28%;
  background: rgba(22,140,123,.3);
  border: 3px solid var(--myt-white);
  clip-path: inset(0);
  animation: myt-reuleaux-clearance-open .78s steps(7,end) .88s both paused;
}

@keyframes myt-reuleaux-frame-resolve {
  0% { clip-path: polygon(0 0,12% 0,12% 0,0 0); opacity: .12; }
  55% { clip-path: polygon(0 0,100% 0,100% 9%,0 9%); opacity: .74; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}
@keyframes myt-reuleaux-rotor-roll {
  0% { translate: -7px -4px; rotate: -8deg; scale: .82 .94; opacity: .14; }
  37% { translate: 3px -2px; rotate: 17deg; scale: 1.06 .9; opacity: 1; }
  72% { translate: 10px 6px; rotate: 29deg; scale: .94 1.08; }
  100% { translate: 8px 5px; rotate: 24deg; scale: 1; opacity: 1; }
}
@keyframes myt-reuleaux-shoe-a-seat {
  0% { translate: -5px -3px; transform: skewX(-28deg); scale: .48 1.18; opacity: .1; }
  71% { translate: 1px 1px; transform: skewX(-9deg); scale: 1.13 .89; opacity: 1; }
  100% { translate: none; transform: skewX(-13deg); scale: 1; opacity: 1; }
}
@keyframes myt-reuleaux-shoe-b-seat {
  0% { translate: 5px -4px; transform: skewY(27deg); scale: 1.2 .42; filter: brightness(.46); }
  68% { translate: -1px 1px; transform: skewY(8deg); scale: .91 1.14; filter: brightness(1.18); }
  100% { translate: none; transform: skewY(11deg); scale: 1; filter: none; }
}
@keyframes myt-reuleaux-shoe-c-seat {
  0% { translate: -4px 5px; transform: skewX(35deg); scale: .7 .34; opacity: .13; filter: saturate(.36); }
  74% { translate: 1px -1px; transform: skewX(13deg); scale: 1.1 1.12; opacity: 1; filter: saturate(1.2); }
  100% { translate: none; transform: skewX(17deg); scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-reuleaux-witness-a-show {
  0% { clip-path: inset(14% 100% 23% 0); background-position: -9px -2px; opacity: .08; }
  43% { clip-path: inset(14% 38% 23% 0); background-position: 3px 1px; opacity: .72; }
  100% { clip-path: inset(0); background-position: 0 0; opacity: 1; }
}
@keyframes myt-reuleaux-witness-b-show {
  0% { clip-path: inset(48% 45%); filter: contrast(.42); }
  100% { clip-path: inset(0); filter: none; }
}
@keyframes myt-reuleaux-witness-c-show {
  0% { clip-path: inset(0 0 0 100%); opacity: .11; filter: saturate(.38); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}
@keyframes myt-reuleaux-clearance-open {
  0% { clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); opacity: .1; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}

/* Scene 4: eight filings settle locally around one fixed magnet. */
.myt-ferrofield-array {
  background:
    linear-gradient(135deg, rgba(22,140,123,.17), transparent 58%),
    var(--myt-night);
}
.myt-ferrofield-array .myt-ferro-magnet {
  position: absolute;
  z-index: 5;
  top: 27%;
  left: 40%;
  width: 20%;
  height: 47%;
  background: linear-gradient(90deg, var(--myt-blue) 0 50%, var(--myt-copper) 50%);
  border: 3px solid var(--myt-white);
  clip-path: polygon(0 0,42% 0,42% 58%,58% 58%,58% 0,100% 0,100% 100%,0 100%);
}
.myt-ferrofield-array .myt-ferro-pole-plate {
  position: absolute;
  z-index: 7;
  inset: 20% 32%;
  border: 2px solid var(--myt-zinc);
  clip-path: polygon(0 7%,100% 0,94% 100%,6% 92%);
  animation: myt-ferro-poles-charge .78s cubic-bezier(.2,.64,.27,1.1) .12s both paused;
}
.myt-ferrofield-array .myt-ferro-filing {
  position: absolute;
  z-index: 9;
  width: 14%;
  height: 8%;
  background: var(--myt-zinc);
  border: 1px solid var(--myt-white);
  border-radius: 38% 12% 42% 16%;
}
.myt-ferrofield-array .filing-a { top: 17%; left: 28%; rotate: 26deg; animation: myt-ferro-filing-a-align .62s cubic-bezier(.2,.67,.28,1.13) .24s both paused; }
.myt-ferrofield-array .filing-b { top: 15%; right: 28%; rotate: -22deg; animation: myt-ferro-filing-b-align .68s cubic-bezier(.2,.67,.28,1.13) .32s both paused; }
.myt-ferrofield-array .filing-c { top: 38%; left: 20%; rotate: 12deg; animation: myt-ferro-filing-c-align .74s cubic-bezier(.2,.67,.28,1.13) .4s both paused; }
.myt-ferrofield-array .filing-d { top: 38%; right: 20%; rotate: -16deg; animation: myt-ferro-filing-d-align .8s cubic-bezier(.2,.67,.28,1.13) .48s both paused; }
.myt-ferrofield-array .filing-e { bottom: 34%; left: 21%; rotate: -19deg; animation: myt-ferro-filing-e-rake .7s cubic-bezier(.2,.64,.27,1.1) .56s both paused; }
.myt-ferrofield-array .filing-f { right: 21%; bottom: 34%; rotate: 23deg; animation: myt-ferro-filing-f-rake .76s cubic-bezier(.2,.64,.27,1.1) .64s both paused; }
.myt-ferrofield-array .filing-g { bottom: 15%; left: 29%; rotate: -31deg; animation: myt-ferro-filing-g-rake .82s cubic-bezier(.2,.64,.27,1.1) .72s both paused; }
.myt-ferrofield-array .filing-h { right: 29%; bottom: 15%; rotate: 28deg; animation: myt-ferro-filing-h-rake .88s cubic-bezier(.2,.64,.27,1.1) .8s both paused; }
.myt-ferrofield-array .myt-ferro-sample {
  position: absolute;
  z-index: 11;
  width: 16%;
  height: 18%;
  background: repeating-linear-gradient(135deg, var(--myt-teal) 0 4px, #8fe5d8 4px 7px);
  border: 2px solid var(--myt-white);
}
.myt-ferrofield-array .sample-a { top: 9%; left: 8%; animation: myt-ferro-sample-a-resolve .64s steps(6,end) .9s both paused; }
.myt-ferrofield-array .sample-b { right: 8%; bottom: 9%; animation: myt-ferro-sample-b-resolve .72s steps(7,end) 1s both paused; }

@keyframes myt-ferro-poles-charge {
  0% { scale: .62 1.16; clip-path: polygon(0 42%,100% 42%,100% 58%,0 58%); filter: brightness(.42); opacity: .12; }
  70% { scale: 1.08 .93; clip-path: polygon(0 7%,100% 0,94% 100%,6% 92%); filter: brightness(1.18); opacity: 1; }
  100% { scale: 1; clip-path: polygon(0 7%,100% 0,94% 100%,6% 92%); filter: none; opacity: 1; }
}
@keyframes myt-ferro-filing-a-align {
  0% { translate: -5px -4px; rotate: -7deg; scale: .52 1.16; opacity: .1; }
  72% { translate: 1px 1px; rotate: 30deg; scale: 1.12 .89; opacity: 1; }
  100% { translate: none; rotate: 26deg; scale: 1; opacity: 1; }
}
@keyframes myt-ferro-filing-b-align {
  0% { translate: 4px -5px; rotate: 9deg; scale: 1.18 .42; filter: brightness(.46); }
  68% { translate: -1px 1px; rotate: -26deg; scale: .91 1.14; filter: brightness(1.2); }
  100% { translate: none; rotate: -22deg; scale: 1; filter: none; }
}
@keyframes myt-ferro-filing-c-align {
  0% { translate: -7px 2px; rotate: -18deg; scale: .38 .82; opacity: .13; filter: saturate(.34); }
  74% { translate: 2px -1px; rotate: 16deg; scale: 1.13 1.06; opacity: 1; filter: saturate(1.22); }
  100% { translate: none; rotate: 12deg; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-ferro-filing-d-align {
  0% { translate: 8px 1px; rotate: 20deg; scale: .72 .3; opacity: .11; filter: contrast(.44); }
  71% { translate: -2px -1px; rotate: -20deg; scale: .94 1.17; opacity: 1; filter: contrast(1.18); }
  100% { translate: none; rotate: -16deg; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-ferro-filing-e-rake {
  0% { translate: -6px 5px; rotate: 15deg; scale: 1.16 .4; filter: brightness(.5); }
  75% { translate: 2px -1px; rotate: -23deg; scale: .9 1.14; filter: brightness(1.2); }
  100% { translate: none; rotate: -19deg; scale: 1; filter: none; }
}
@keyframes myt-ferro-filing-f-rake {
  0% { translate: 7px 4px; rotate: -12deg; scale: .43 1.2; opacity: .12; }
  69% { translate: -2px -1px; rotate: 27deg; scale: 1.15 .87; opacity: 1; }
  100% { translate: none; rotate: 23deg; scale: 1; opacity: 1; }
}
@keyframes myt-ferro-filing-g-rake {
  0% { translate: -4px 6px; rotate: 3deg; scale: .66 .28; opacity: .14; filter: saturate(.38); }
  73% { translate: 1px -2px; rotate: -35deg; scale: 1.1 1.12; opacity: 1; filter: saturate(1.2); }
  100% { translate: none; rotate: -31deg; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-ferro-filing-h-rake {
  0% { translate: 5px 7px; rotate: -4deg; scale: 1.2 .33; filter: contrast(.48); opacity: .1; }
  70% { translate: -1px -2px; rotate: 32deg; scale: .9 1.15; filter: contrast(1.18); opacity: 1; }
  100% { translate: none; rotate: 28deg; scale: 1; filter: none; opacity: 1; }
}
@keyframes myt-ferro-sample-a-resolve {
  0% { clip-path: inset(0 100% 0 0); background-position: -16px 0; opacity: .1; }
  100% { clip-path: inset(0); background-position: 0 0; opacity: 1; }
}
@keyframes myt-ferro-sample-b-resolve {
  0% { clip-path: inset(100% 0 0); background-position: 13px -8px; filter: saturate(.38); }
  100% { clip-path: inset(0); background-position: 0 0; filter: none; }
}

/* Scene 5: fixed ceramic fuses expose four unlike bridge decisions. */
.myt-ceramic-fuse-check {
  background:
    linear-gradient(145deg, rgba(219,137,91,.16), transparent 59%),
    var(--myt-night);
}
.myt-ceramic-fuse-check .myt-fuse-board {
  position: absolute;
  z-index: 3;
  inset: 7%;
  border: 2px solid var(--myt-zinc);
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(187,200,199,.08) 18px 20px);
  clip-path: inset(0);
  animation: myt-fuse-board-register .7s steps(7,end) .06s both paused;
}
.myt-ceramic-fuse-check .myt-fuse-body {
  position: absolute;
  z-index: 5;
  top: 27%;
  width: 18%;
  height: 48%;
  background: #d7d9cf;
  border: 2px solid var(--myt-white);
  clip-path: polygon(11% 0,89% 0,100% 18%,100% 82%,89% 100%,11% 100%,0 82%,0 18%);
}
.myt-ceramic-fuse-check .fuse-a { left: 8%; }
.myt-ceramic-fuse-check .fuse-b { left: 30%; }
.myt-ceramic-fuse-check .fuse-c { right: 30%; }
.myt-ceramic-fuse-check .fuse-d { right: 8%; }
.myt-ceramic-fuse-check .myt-fuse-bridge {
  position: absolute;
  z-index: 9;
  top: 39%;
  width: 12%;
  height: 23%;
  border: 2px solid var(--myt-copper);
  background: rgba(219,137,91,.28);
  transform-origin: center;
}
.myt-ceramic-fuse-check .bridge-a { left: 11%; clip-path: polygon(0 14%,40% 14%,40% 86%,100% 86%,100% 100%,26% 100%,26% 28%,0 28%); animation: myt-fuse-bridge-a-resolve .58s steps(5,end) .24s both paused; }
.myt-ceramic-fuse-check .bridge-b { left: 33%; clip-path: polygon(0 0,100% 0,100% 33%,63% 33%,63% 100%,39% 100%,39% 33%,0 33%); animation: myt-fuse-bridge-b-resolve .66s cubic-bezier(.2,.66,.28,1.12) .34s both paused; }
.myt-ceramic-fuse-check .bridge-c { right: 33%; clip-path: polygon(0 0,28% 0,28% 62%,74% 62%,74% 0,100% 0,100% 100%,0 100%); animation: myt-fuse-bridge-c-resolve .74s steps(6,end) .44s both paused; }
.myt-ceramic-fuse-check .bridge-d { right: 11%; clip-path: polygon(0 18%,68% 18%,68% 0,100% 0,100% 82%,32% 82%,32% 100%,0 100%); animation: myt-fuse-bridge-d-resolve .82s cubic-bezier(.2,.64,.27,1.1) .54s both paused; }
.myt-ceramic-fuse-check .myt-fuse-window {
  position: absolute;
  z-index: 11;
  bottom: 9%;
  width: 12%;
  height: 10%;
  background: var(--myt-teal);
  border: 1px solid #8fe5d8;
}
.myt-ceramic-fuse-check .window-a { left: 11%; animation: myt-fuse-window-a-confirm .46s steps(4,end) .72s both paused; }
.myt-ceramic-fuse-check .window-b { left: 33%; animation: myt-fuse-window-b-confirm .52s steps(5,end) .8s both paused; }
.myt-ceramic-fuse-check .window-c { right: 33%; animation: myt-fuse-window-c-confirm .58s steps(6,end) .88s both paused; }
.myt-ceramic-fuse-check .window-d { right: 11%; animation: myt-fuse-window-d-confirm .64s steps(7,end) .96s both paused; }
.myt-ceramic-fuse-check .myt-fuse-result-bar {
  position: absolute;
  z-index: 12;
  top: 10%;
  left: 18%;
  width: 64%;
  height: 9%;
  background: linear-gradient(90deg, var(--myt-blue), var(--myt-teal));
  border: 1px solid var(--myt-white);
  transform-origin: left center;
  animation: myt-fuse-result-lock .7s cubic-bezier(.2,.67,.28,1.14) 1.08s both paused;
}

@keyframes myt-fuse-board-register {
  0% { clip-path: inset(0 88% 78% 0); filter: contrast(.5); }
  52% { clip-path: inset(0 0 78% 0); filter: contrast(.82); }
  100% { clip-path: inset(0); filter: none; }
}
@keyframes myt-fuse-bridge-a-resolve {
  0% { clip-path: polygon(0 50%,40% 50%,40% 50%,100% 50%,100% 50%,26% 50%,26% 50%,0 50%); scale: .54 1.16; }
  100% { clip-path: polygon(0 14%,40% 14%,40% 86%,100% 86%,100% 100%,26% 100%,26% 28%,0 28%); scale: 1; }
}
@keyframes myt-fuse-bridge-b-resolve {
  0% { clip-path: polygon(50% 0,50% 0,50% 33%,50% 33%,50% 100%,50% 100%,50% 33%,50% 33%); scale: 1.18 .42; filter: brightness(.48); }
  72% { clip-path: polygon(0 0,100% 0,100% 33%,63% 33%,63% 100%,39% 100%,39% 33%,0 33%); scale: .92 1.1; filter: brightness(1.18); }
  100% { clip-path: polygon(0 0,100% 0,100% 33%,63% 33%,63% 100%,39% 100%,39% 33%,0 33%); scale: 1; filter: none; }
}
@keyframes myt-fuse-bridge-c-resolve {
  0% { clip-path: inset(46% 0); scale: .38 .8; filter: saturate(.36); }
  100% { clip-path: polygon(0 0,28% 0,28% 62%,74% 62%,74% 0,100% 0,100% 100%,0 100%); scale: 1; filter: none; }
}
@keyframes myt-fuse-bridge-d-resolve {
  0% { clip-path: polygon(0 50%,68% 50%,68% 50%,100% 50%,100% 50%,32% 50%,32% 50%,0 50%); scale: 1.22 .28; }
  68% { clip-path: polygon(0 18%,68% 18%,68% 0,100% 0,100% 82%,32% 82%,32% 100%,0 100%); scale: .9 1.13; }
  100% { clip-path: polygon(0 18%,68% 18%,68% 0,100% 0,100% 82%,32% 82%,32% 100%,0 100%); scale: 1; }
}
@keyframes myt-fuse-window-a-confirm {
  0% { clip-path: inset(0 100% 0 0); background-position: -13px 0; }
  100% { clip-path: inset(0); background-position: 0 0; }
}
@keyframes myt-fuse-window-b-confirm {
  0% { clip-path: inset(100% 0 0); scale: .72 1.25; }
  100% { clip-path: inset(0); scale: 1; }
}
@keyframes myt-fuse-window-c-confirm {
  0% { clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); filter: brightness(.42); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); filter: none; }
}
@keyframes myt-fuse-window-d-confirm {
  0% { clip-path: inset(0 0 0 100%); scale: 1.2 .58; }
  100% { clip-path: inset(0); scale: 1; }
}
@keyframes myt-fuse-result-lock {
  0% { scale: .04 1.3; clip-path: inset(0 94% 0 0); filter: brightness(.46); }
  72% { scale: 1.04 .88; clip-path: inset(0); filter: brightness(1.16); }
  100% { scale: 1; clip-path: inset(0); filter: none; }
}

/* Scene 6: four local vacuum cups compress into fixed rings. */
.myt-vacuum-cup-seat {
  background:
    linear-gradient(140deg, rgba(36,116,220,.16), transparent 58%),
    var(--myt-night);
}
.myt-vacuum-cup-seat .myt-vacuum-carrier {
  position: absolute;
  z-index: 4;
  top: 9%;
  left: 8%;
  width: 84%;
  height: 19%;
  background: var(--myt-steel);
  border: 2px solid var(--myt-white);
  clip-path: polygon(0 0,100% 0,94% 100%,6% 100%);
  animation: myt-vacuum-carrier-level .68s steps(6,end) .08s both paused;
}
.myt-vacuum-cup-seat .myt-vacuum-ring {
  position: absolute;
  z-index: 5;
  bottom: 14%;
  width: 16%;
  height: 14%;
  border: 3px solid var(--myt-zinc);
  border-radius: 50%;
  animation: myt-vacuum-rings-seat .58s cubic-bezier(.2,.67,.28,1.14) both paused;
}
.myt-vacuum-cup-seat .ring-a { left: 7%; animation-delay: .28s; }
.myt-vacuum-cup-seat .ring-b { left: 30%; animation-delay: .36s; }
.myt-vacuum-cup-seat .ring-c { right: 30%; animation-delay: .44s; }
.myt-vacuum-cup-seat .ring-d { right: 7%; animation-delay: .52s; }
.myt-vacuum-cup-seat .myt-vacuum-cup {
  position: absolute;
  z-index: 8;
  top: 29%;
  width: 17%;
  height: 45%;
  background: linear-gradient(90deg, var(--myt-blue), #6ba4ed);
  border: 2px solid var(--myt-white);
  border-radius: 16% 16% 45% 45%;
  transform-origin: center bottom;
}
.myt-vacuum-cup-seat .cup-a { left: 6.5%; translate: 0 6px; scale: 1 .79; animation: myt-vacuum-cup-a-compress .72s cubic-bezier(.2,.64,.27,1.08) .34s both paused; }
.myt-vacuum-cup-seat .cup-b { left: 29.5%; translate: 0 8px; scale: 1 .73; animation: myt-vacuum-cup-b-compress .8s cubic-bezier(.2,.64,.27,1.08) .44s both paused; }
.myt-vacuum-cup-seat .cup-c { right: 29.5%; translate: 0 5px; scale: 1 .82; animation: myt-vacuum-cup-c-compress .88s cubic-bezier(.2,.64,.27,1.08) .54s both paused; }
.myt-vacuum-cup-seat .cup-d { right: 6.5%; translate: 0 9px; scale: 1 .7; animation: myt-vacuum-cup-d-compress .96s cubic-bezier(.2,.64,.27,1.08) .64s both paused; }
.myt-vacuum-cup-seat .myt-vacuum-status-bridge {
  position: absolute;
  z-index: 11;
  left: 18%;
  bottom: 7%;
  width: 64%;
  height: 7%;
  background: var(--myt-teal);
  border: 1px solid #8fe5d8;
  transform-origin: center;
  animation: myt-vacuum-status-connect .64s steps(6,end) .9s both paused;
}
.myt-vacuum-cup-seat .myt-vacuum-seal-window {
  position: absolute;
  z-index: 12;
  top: 11%;
  left: 42%;
  width: 16%;
  height: 12%;
  background: var(--myt-copper);
  border: 1px solid #ffd0b5;
  clip-path: inset(0);
  animation: myt-vacuum-seal-confirm .72s cubic-bezier(.2,.67,.28,1.14) 1.02s both paused;
}

@keyframes myt-vacuum-carrier-level {
  0% { clip-path: polygon(0 48%,100% 48%,100% 52%,0 52%); filter: brightness(.44); }
  100% { clip-path: polygon(0 0,100% 0,94% 100%,6% 100%); filter: none; }
}
@keyframes myt-vacuum-rings-seat {
  0% { scale: .42 1.28; translate: 0 4px; opacity: .12; }
  72% { scale: 1.12 .86; translate: 0 -1px; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-vacuum-cup-a-compress {
  0% { translate: 0 -5px; scale: .82 1.08; opacity: .12; }
  68% { translate: 0 8px; scale: 1.08 .73; opacity: 1; }
  100% { translate: 0 6px; scale: 1 .79; opacity: 1; }
}
@keyframes myt-vacuum-cup-b-compress {
  0% { translate: 0 -3px; scale: 1.16 .92; filter: brightness(.46); }
  72% { translate: 0 10px; scale: .91 .68; filter: brightness(1.18); }
  100% { translate: 0 8px; scale: 1 .73; filter: none; }
}
@keyframes myt-vacuum-cup-c-compress {
  0% { translate: 0 -6px; scale: .68 1.12; opacity: .14; filter: saturate(.38); }
  74% { translate: 0 7px; scale: 1.1 .77; opacity: 1; filter: saturate(1.2); }
  100% { translate: 0 5px; scale: 1 .82; opacity: 1; filter: none; }
}
@keyframes myt-vacuum-cup-d-compress {
  0% { translate: 0 -2px; scale: 1.2 .84; opacity: .1; }
  69% { translate: 0 11px; scale: .9 .65; opacity: 1; }
  100% { translate: 0 9px; scale: 1 .7; opacity: 1; }
}
@keyframes myt-vacuum-status-connect {
  0% { clip-path: inset(0 46%); scale: .24 1.25; opacity: .1; }
  100% { clip-path: inset(0); scale: 1; opacity: 1; }
}
@keyframes myt-vacuum-seal-confirm {
  0% { clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); scale: .62 1.22; filter: contrast(.42); }
  72% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1.1 .88; filter: contrast(1.18); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1; filter: none; }
}

/* Scene 7: a sled loses its wake while crossing five eddy bars. */
.myt-eddy-brake {
  --myt-sled-x: 122px;
  background:
    linear-gradient(135deg, rgba(22,140,123,.16), transparent 59%),
    var(--myt-night);
}
.myt-eddy-brake .myt-eddy-plate {
  position: absolute;
  z-index: 3;
  top: 31%;
  left: 7%;
  width: 86%;
  height: 43%;
  background: rgba(88,107,110,.52);
  border: 2px solid var(--myt-white);
  clip-path: inset(0);
  animation: myt-eddy-plate-charge .72s steps(7,end) .08s both paused;
}
.myt-eddy-brake .myt-eddy-crossbar {
  position: absolute;
  z-index: 6;
  top: 34%;
  width: 4%;
  height: 37%;
  background: var(--myt-copper);
  border: 1px solid #ffd0b5;
  transform-origin: center;
  animation: myt-eddy-bars-polarize .5s cubic-bezier(.2,.67,.28,1.14) both paused;
}
.myt-eddy-brake .bar-a { left: 29%; animation-delay: .28s; }
.myt-eddy-brake .bar-b { left: 40%; animation-delay: .36s; }
.myt-eddy-brake .bar-c { left: 51%; animation-delay: .44s; }
.myt-eddy-brake .bar-d { left: 62%; animation-delay: .52s; }
.myt-eddy-brake .bar-e { left: 73%; animation-delay: .6s; }
.myt-eddy-brake .myt-eddy-sled {
  position: absolute;
  z-index: 10;
  top: 41%;
  left: 12%;
  width: 18%;
  height: 24%;
  background: var(--myt-blue);
  border: 2px solid #a9c6ff;
  clip-path: polygon(0 18%,72% 18%,100% 50%,72% 82%,0 82%);
  translate: var(--myt-sled-x) 0;
  animation: myt-eddy-sled-decelerate 1.32s cubic-bezier(.12,.52,.2,1) .3s both paused;
}
.myt-eddy-brake .myt-eddy-rear-latch {
  position: absolute;
  z-index: 8;
  top: 38%;
  left: 8%;
  width: 7%;
  height: 29%;
  background: var(--myt-zinc);
  border: 2px solid var(--myt-white);
}
.myt-eddy-brake .myt-eddy-endpoint-bumper {
  position: absolute;
  z-index: 11;
  top: 36%;
  right: 7%;
  width: 8%;
  height: 33%;
  background: var(--myt-teal);
  border: 2px solid #8fe5d8;
  transform-origin: right center;
  animation: myt-eddy-bumper-catch .6s cubic-bezier(.2,.67,.28,1.18) 1.25s both paused;
}
.myt-eddy-brake .myt-eddy-heat-wake {
  position: absolute;
  z-index: 8;
  top: 47%;
  right: 17%;
  width: 31%;
  height: 12%;
  background: repeating-linear-gradient(90deg, var(--myt-copper) 0 4px, transparent 4px 9px);
  clip-path: polygon(72% 42%,100% 22%,88% 76%,69% 59%);
  transform-origin: right center;
  scale: .14 .34;
  opacity: .2;
  animation: myt-eddy-wake-dissipate .94s cubic-bezier(.2,.64,.27,1.08) .82s both paused;
}

@keyframes myt-eddy-plate-charge {
  0% { clip-path: inset(46% 0); filter: saturate(.32); opacity: .14; }
  100% { clip-path: inset(0); filter: none; opacity: 1; }
}
@keyframes myt-eddy-bars-polarize {
  0% { scale: 1 .18; translate: 0 5px; opacity: .12; }
  72% { scale: .88 1.12; translate: 0 -1px; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-eddy-sled-decelerate {
  0% { translate: 0 0; scale: 1.18 .83; filter: brightness(1.24); }
  26% { translate: calc(var(--myt-sled-x) * .48) 0; scale: 1.1 .9; }
  57% { translate: calc(var(--myt-sled-x) * .78) 0; scale: 1.05 .95; filter: brightness(1.08); }
  82% { translate: calc(var(--myt-sled-x) * .94) 0; scale: 1.02 .98; }
  100% { translate: var(--myt-sled-x) 0; scale: 1; filter: none; }
}
@keyframes myt-eddy-bumper-catch {
  0% { scale: .42 1.2; translate: 4px 0; opacity: .12; }
  67% { scale: 1.18 .9; translate: -2px 0; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-eddy-wake-dissipate {
  0% { scale: 1.18 1; clip-path: polygon(0 10%,100% 0,100% 100%,0 90%); filter: brightness(1.32); opacity: 1; }
  58% { scale: .64 .72; clip-path: polygon(29% 28%,100% 8%,78% 91%,25% 70%); opacity: .72; }
  100% { scale: .14 .34; clip-path: polygon(72% 42%,100% 22%,88% 76%,69% 59%); filter: none; opacity: .2; }
}

/* Scene 8: four unequal capacitor bays close before a result cell resolves. */
.myt-capacitor-total {
  background:
    linear-gradient(140deg, rgba(36,116,220,.18), transparent 60%),
    var(--myt-night);
}
.myt-capacitor-total .myt-capacitor-frame {
  position: absolute;
  z-index: 3;
  inset: 7%;
  border: 2px solid var(--myt-zinc);
  clip-path: inset(0);
  animation: myt-capacitor-frame-energize .74s steps(7,end) .08s both paused;
}
.myt-capacitor-total .myt-capacitor-plate {
  position: absolute;
  z-index: 7;
  top: 22%;
  width: 4%;
  height: 48%;
  background: var(--myt-copper);
  border: 1px solid #ffd0b5;
  transform-origin: center;
}
.myt-capacitor-total .plate-a { left: 11%; animation: myt-capacitor-pair-a-close .62s cubic-bezier(.2,.67,.28,1.13) .24s both paused; }
.myt-capacitor-total .plate-b { left: 19%; animation: myt-capacitor-plate-b-close .66s cubic-bezier(.2,.67,.28,1.13) .28s both paused; }
.myt-capacitor-total .plate-c { left: 34%; animation: myt-capacitor-pair-b-close .7s cubic-bezier(.2,.67,.28,1.13) .36s both paused; }
.myt-capacitor-total .plate-d { left: 43%; animation: myt-capacitor-plate-d-close .74s cubic-bezier(.2,.67,.28,1.13) .4s both paused; }
.myt-capacitor-total .plate-e { right: 42%; animation: myt-capacitor-pair-c-close .78s cubic-bezier(.2,.67,.28,1.13) .48s both paused; }
.myt-capacitor-total .plate-f { right: 33%; animation: myt-capacitor-plate-f-close .82s cubic-bezier(.2,.67,.28,1.13) .52s both paused; }
.myt-capacitor-total .plate-g { right: 18%; animation: myt-capacitor-pair-d-close .86s cubic-bezier(.2,.67,.28,1.13) .6s both paused; }
.myt-capacitor-total .plate-h { right: 10%; animation: myt-capacitor-plate-h-close .9s cubic-bezier(.2,.67,.28,1.13) .64s both paused; }
.myt-capacitor-total .myt-capacitor-band {
  position: absolute;
  z-index: 9;
  top: 16%;
  width: 16%;
  height: 61%;
  border: 2px solid var(--myt-blue);
  transform-origin: center bottom;
}
.myt-capacitor-total .band-a { left: 9%; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); animation: myt-capacitor-band-a-bind .58s steps(5,end) .62s both paused; }
.myt-capacitor-total .band-b { left: 32.5%; clip-path: polygon(8% 0,100% 8%,92% 100%,0 92%); animation: myt-capacitor-band-b-bind .66s cubic-bezier(.2,.64,.27,1.1) .72s both paused; }
.myt-capacitor-total .band-c { right: 32%; clip-path: polygon(0 9%,92% 0,100% 91%,8% 100%); animation: myt-capacitor-band-c-bind .74s steps(6,end) .82s both paused; }
.myt-capacitor-total .band-d { right: 8%; clip-path: polygon(0 0,100% 11%,91% 100%,9% 89%); animation: myt-capacitor-band-d-bind .82s cubic-bezier(.2,.64,.27,1.1) .92s both paused; }
.myt-capacitor-total .myt-capacitor-result-cell {
  position: absolute;
  z-index: 12;
  left: 28%;
  bottom: 7%;
  width: 44%;
  height: 9%;
  background: linear-gradient(90deg, var(--myt-teal), #8fe5d8, var(--myt-blue));
  border: 1px solid var(--myt-white);
  transform-origin: center;
  animation: myt-capacitor-result-total .7s cubic-bezier(.2,.67,.28,1.14) 1.06s both paused;
}

@keyframes myt-capacitor-frame-energize {
  0% { clip-path: inset(48% 0); opacity: .12; filter: brightness(.44); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}
@keyframes myt-capacitor-pair-a-close {
  0% { translate: -4px 0; scale: .46 1.16; opacity: .12; }
  72% { translate: 1px 0; scale: 1.12 .9; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes myt-capacitor-plate-b-close {
  0% { translate: 3px -2px; scale: 1.12 .52; opacity: .16; filter: contrast(.58); }
  64% { translate: -1px 1px; scale: .94 1.09; opacity: 1; filter: contrast(1.12); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-capacitor-pair-b-close {
  0% { translate: 3px -3px; scale: 1.2 .38; filter: brightness(.46); }
  69% { translate: -1px 1px; scale: .9 1.14; filter: brightness(1.18); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes myt-capacitor-plate-d-close {
  0% { translate: -2px 3px; scale: .58 .7; opacity: .13; filter: saturate(.48); }
  71% { translate: 1px -1px; scale: 1.09 1.06; opacity: 1; filter: saturate(1.14); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-capacitor-pair-c-close {
  0% { translate: -3px 4px; scale: .34 .78; opacity: .14; filter: saturate(.36); }
  74% { translate: 1px -1px; scale: 1.13 1.08; opacity: 1; filter: saturate(1.2); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-capacitor-plate-f-close {
  0% { translate: 2px 2px; scale: 1.14 .56; opacity: .15; filter: brightness(.54); }
  67% { translate: -1px -1px; scale: .92 1.1; opacity: 1; filter: brightness(1.14); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-capacitor-pair-d-close {
  0% { translate: 4px 2px; scale: 1.18 .46; opacity: .1; filter: contrast(.48); }
  68% { translate: -1px -1px; scale: .92 1.12; opacity: 1; filter: contrast(1.18); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-capacitor-plate-h-close {
  0% { translate: -3px -1px; scale: .64 1.12; opacity: .17; filter: contrast(.62); }
  73% { translate: 1px 1px; scale: 1.08 .93; opacity: 1; filter: contrast(1.13); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-capacitor-band-a-bind {
  0% { clip-path: inset(0 100% 82% 0); scale: .72 1.08; }
  100% { clip-path: inset(0); scale: 1; }
}
@keyframes myt-capacitor-band-b-bind {
  0% { clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); scale: 1.18 .52; filter: brightness(.5); }
  100% { clip-path: polygon(8% 0,100% 8%,92% 100%,0 92%); scale: 1; filter: none; }
}
@keyframes myt-capacitor-band-c-bind {
  0% { clip-path: inset(78% 100% 0 0); scale: .58 .84; opacity: .11; }
  100% { clip-path: polygon(0 9%,92% 0,100% 91%,8% 100%); scale: 1; opacity: 1; }
}
@keyframes myt-capacitor-band-d-bind {
  0% { clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%); scale: .42 1.2; filter: saturate(.34); }
  72% { clip-path: polygon(0 0,100% 11%,91% 100%,9% 89%); scale: 1.1 .9; filter: saturate(1.2); }
  100% { clip-path: polygon(0 0,100% 11%,91% 100%,9% 89%); scale: 1; filter: none; }
}
@keyframes myt-capacitor-result-total {
  0% { clip-path: inset(0 48%); scale: .18 1.3; opacity: .1; }
  70% { clip-path: inset(0); scale: 1.08 .88; opacity: 1; }
  100% { clip-path: inset(0); scale: 1; opacity: 1; }
}

/* Scene 9: opposing hook and loop strips close around a destination tab. */
.myt-hookloop-handoff {
  background:
    linear-gradient(145deg, rgba(219,137,91,.16), transparent 58%),
    var(--myt-night);
}
.myt-hookloop-handoff .myt-hookloop-strip {
  position: absolute;
  z-index: 4;
  left: 8%;
  width: 84%;
  height: 17%;
  border: 2px solid var(--myt-white);
}
.myt-hookloop-handoff .strip-a { top: 29%; background: var(--myt-blue); animation: myt-hookloop-upper-strip-close .84s cubic-bezier(.2,.64,.27,1.08) .1s both paused; }
.myt-hookloop-handoff .strip-b { top: 55%; background: var(--myt-teal); animation: myt-hookloop-lower-strip-close .92s cubic-bezier(.2,.64,.27,1.08) .16s both paused; }
.myt-hookloop-handoff .myt-hookloop-tooth {
  position: absolute;
  z-index: 8;
  width: 7%;
  height: 22%;
  background: var(--myt-copper);
  border: 1px solid #ffd0b5;
  transform-origin: center;
}
.myt-hookloop-handoff .hook-a { top: 38%; left: 16%; clip-path: polygon(0 0,100% 0,100% 50%,64% 100%,35% 100%,56% 47%,0 47%); animation: myt-hookloop-hook-a-curl .58s cubic-bezier(.2,.67,.28,1.14) .38s both paused; }
.myt-hookloop-handoff .hook-b { top: 38%; left: 34%; clip-path: polygon(0 0,100% 0,78% 66%,100% 100%,48% 84%,57% 42%,0 42%); animation: myt-hookloop-hook-b-curl .64s cubic-bezier(.2,.67,.28,1.14) .46s both paused; }
.myt-hookloop-handoff .hook-c { top: 38%; right: 34%; clip-path: polygon(0 0,100% 0,100% 45%,43% 45%,51% 86%,0 100%,22% 64%); animation: myt-hookloop-hook-c-curl .7s cubic-bezier(.2,.67,.28,1.14) .54s both paused; }
.myt-hookloop-handoff .hook-d { top: 38%; right: 16%; clip-path: polygon(0 0,100% 0,100% 48%,45% 48%,66% 100%,35% 100%,0 52%); animation: myt-hookloop-hook-d-curl .76s cubic-bezier(.2,.67,.28,1.14) .62s both paused; }
.myt-hookloop-handoff .loop-a { top: 43%; left: 20%; background: var(--myt-zinc); clip-path: polygon(0 100%,0 43%,32% 0,67% 0,100% 43%,100% 100%,70% 100%,70% 52%,58% 32%,41% 32%,29% 52%,29% 100%); animation: myt-hookloop-loop-a-rise .56s cubic-bezier(.2,.67,.28,1.14) .48s both paused; }
.myt-hookloop-handoff .loop-b { top: 43%; left: 40%; background: var(--myt-zinc); clip-path: polygon(0 100%,0 38%,43% 0,74% 12%,100% 51%,100% 100%,67% 100%,67% 56%,54% 35%,38% 36%,29% 57%,29% 100%); animation: myt-hookloop-loop-b-rise .62s cubic-bezier(.2,.67,.28,1.14) .56s both paused; }
.myt-hookloop-handoff .loop-c { top: 43%; right: 39%; background: var(--myt-zinc); clip-path: polygon(0 100%,0 50%,30% 10%,62% 0,100% 42%,100% 100%,71% 100%,71% 54%,57% 32%,42% 36%,29% 59%,29% 100%); animation: myt-hookloop-loop-c-rise .68s cubic-bezier(.2,.67,.28,1.14) .64s both paused; }
.myt-hookloop-handoff .loop-d { top: 43%; right: 19%; background: var(--myt-zinc); clip-path: polygon(0 100%,0 46%,35% 0,69% 5%,100% 48%,100% 100%,71% 100%,71% 55%,57% 31%,40% 32%,29% 54%,29% 100%); animation: myt-hookloop-loop-d-rise .74s cubic-bezier(.2,.67,.28,1.14) .72s both paused; }
.myt-hookloop-handoff .myt-hookloop-handle {
  position: absolute;
  z-index: 10;
  top: 11%;
  width: 17%;
  height: 12%;
  background: var(--myt-steel);
  border: 2px solid var(--myt-white);
  animation: myt-hookloop-handles-set .54s cubic-bezier(.2,.67,.28,1.14) both paused;
}
.myt-hookloop-handoff .handle-a { left: 9%; animation-delay: .82s; }
.myt-hookloop-handoff .handle-b { right: 9%; animation-delay: .9s; }
.myt-hookloop-handoff .myt-hookloop-witness {
  position: absolute;
  z-index: 11;
  left: 35%;
  bottom: 9%;
  width: 30%;
  height: 9%;
  background: var(--myt-teal);
  border: 1px solid #8fe5d8;
  animation: myt-hookloop-witness-lock .62s steps(6,end) .96s both paused;
}
.myt-hookloop-handoff .myt-hookloop-destination-tab {
  position: absolute;
  z-index: 12;
  right: 8%;
  bottom: 8%;
  width: 17%;
  height: 16%;
  background: var(--myt-copper);
  border: 2px solid #ffd0b5;
  clip-path: polygon(0 0,100% 0,100% 100%,22% 100%,0 50%);
  animation: myt-hookloop-destination-arrive .72s cubic-bezier(.2,.64,.27,1.12) 1.08s both paused;
}

@keyframes myt-hookloop-upper-strip-close {
  0% { translate: 0 -12px; scale: 1 .58; opacity: .12; }
  72% { translate: 0 2px; scale: .96 1.12; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes myt-hookloop-lower-strip-close {
  0% { translate: 0 13px; scale: .76 1.12; filter: brightness(.44); }
  68% { translate: 0 -2px; scale: 1.08 .9; filter: brightness(1.18); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes myt-hookloop-hook-a-curl {
  0% { clip-path: inset(0 0 82%); rotate: -17deg; scale: .48 1.12; }
  100% { clip-path: polygon(0 0,100% 0,100% 50%,64% 100%,35% 100%,56% 47%,0 47%); rotate: none; scale: 1; }
}
@keyframes myt-hookloop-hook-b-curl {
  0% { clip-path: inset(0 76% 0 0); translate: -3px 0; rotate: 12deg; opacity: .12; }
  100% { clip-path: polygon(0 0,100% 0,78% 66%,100% 100%,48% 84%,57% 42%,0 42%); translate: none; rotate: none; opacity: 1; }
}
@keyframes myt-hookloop-hook-c-curl {
  0% { clip-path: inset(0 0 0 78%); translate: 3px 0; rotate: -14deg; filter: saturate(.36); }
  100% { clip-path: polygon(0 0,100% 0,100% 45%,43% 45%,51% 86%,0 100%,22% 64%); translate: none; rotate: none; filter: none; }
}
@keyframes myt-hookloop-hook-d-curl {
  0% { clip-path: inset(78% 0 0); scale: 1.2 .34; rotate: 19deg; opacity: .1; }
  100% { clip-path: polygon(0 0,100% 0,100% 48%,45% 48%,66% 100%,35% 100%,0 52%); scale: 1; rotate: none; opacity: 1; }
}
@keyframes myt-hookloop-loop-a-rise {
  0% { translate: 0 8px; scale: .7 .28; opacity: .12; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes myt-hookloop-loop-b-rise {
  0% { translate: -3px 7px; scale: 1.18 .38; filter: brightness(.46); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes myt-hookloop-loop-c-rise {
  0% { translate: 3px 9px; scale: .42 .66; opacity: .14; filter: contrast(.42); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-hookloop-loop-d-rise {
  0% { translate: 0 6px; scale: 1.14 .32; opacity: .1; filter: saturate(.38); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-hookloop-handles-set {
  0% { scale: .28 1.22; translate: 0 -3px; opacity: .1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-hookloop-witness-lock {
  0% { clip-path: inset(0 50%); background-position: -14px 0; opacity: .12; }
  100% { clip-path: inset(0); background-position: 0 0; opacity: 1; }
}
@keyframes myt-hookloop-destination-arrive {
  0% { translate: 6px 5px; clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%,100% 50%); scale: .38 .82; }
  72% { translate: -1px -1px; clip-path: polygon(0 0,100% 0,100% 100%,22% 100%,0 50%); scale: 1.1 1.05; }
  100% { translate: none; clip-path: polygon(0 0,100% 0,100% 100%,22% 100%,0 50%); scale: 1; }
}

/* Scene 10: a diaphragm sends one pressure band through six baffles. */
.myt-acoustic-labyrinth {
  background:
    linear-gradient(135deg, rgba(22,140,123,.17), transparent 60%),
    var(--myt-night);
}
.myt-acoustic-labyrinth .myt-acoustic-shell {
  position: absolute;
  z-index: 3;
  inset: 7%;
  border: 2px solid var(--myt-zinc);
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  animation: myt-acoustic-shell-seal .72s steps(7,end) .08s both paused;
}
.myt-acoustic-labyrinth .myt-acoustic-baffle {
  position: absolute;
  z-index: 7;
  width: 4%;
  background: var(--myt-zinc);
  border: 1px solid var(--myt-white);
  transform-origin: center;
}
.myt-acoustic-labyrinth .baffle-a { left: 28%; top: 18%; height: 42%; animation: myt-acoustic-baffle-a-seat .5s cubic-bezier(.2,.67,.28,1.14) .3s both paused; }
.myt-acoustic-labyrinth .baffle-b { left: 39%; bottom: 17%; height: 45%; animation: myt-acoustic-baffle-b-seat .56s cubic-bezier(.2,.67,.28,1.14) .38s both paused; }
.myt-acoustic-labyrinth .baffle-c { left: 50%; top: 15%; height: 47%; animation: myt-acoustic-baffle-c-seat .62s cubic-bezier(.2,.67,.28,1.14) .46s both paused; }
.myt-acoustic-labyrinth .baffle-d { right: 35%; bottom: 14%; height: 43%; animation: myt-acoustic-baffle-d-seat .68s cubic-bezier(.2,.67,.28,1.14) .54s both paused; }
.myt-acoustic-labyrinth .baffle-e { right: 24%; top: 20%; height: 42%; animation: myt-acoustic-baffle-e-seat .74s cubic-bezier(.2,.67,.28,1.14) .62s both paused; }
.myt-acoustic-labyrinth .baffle-f { right: 14%; bottom: 19%; height: 46%; animation: myt-acoustic-baffle-f-seat .8s cubic-bezier(.2,.67,.28,1.14) .7s both paused; }
.myt-acoustic-labyrinth .myt-acoustic-diaphragm {
  position: absolute;
  z-index: 9;
  left: 9%;
  top: 27%;
  width: 13%;
  height: 46%;
  background: var(--myt-blue);
  border: 2px solid #a9c6ff;
  border-radius: 50%;
  transform-origin: left center;
  animation: myt-acoustic-diaphragm-pulse .84s cubic-bezier(.2,.61,.26,1.1) .2s both paused;
}
.myt-acoustic-labyrinth .myt-acoustic-pressure-band {
  position: absolute;
  z-index: 8;
  top: 42%;
  left: 20%;
  width: 63%;
  height: 17%;
  background: repeating-linear-gradient(90deg, rgba(219,137,91,.88) 0 5px, transparent 5px 11px);
  clip-path: polygon(0 32%,12% 10%,24% 46%,36% 20%,48% 72%,60% 35%,72% 88%,84% 26%,100% 52%,100% 68%,84% 43%,72% 100%,60% 52%,48% 88%,36% 37%,24% 64%,12% 27%,0 52%);
  transform-origin: left center;
  animation: myt-acoustic-pressure-propagate 1.18s steps(10,end) .36s both paused;
}
.myt-acoustic-labyrinth .myt-acoustic-exit-mouth {
  position: absolute;
  z-index: 10;
  right: 7%;
  top: 32%;
  width: 8%;
  height: 37%;
  background: var(--myt-teal);
  border: 2px solid #8fe5d8;
  clip-path: polygon(0 16%,100% 0,100% 100%,0 84%);
  animation: myt-acoustic-mouth-release .62s cubic-bezier(.2,.67,.28,1.14) 1.2s both paused;
}
.myt-acoustic-labyrinth .myt-acoustic-damper {
  position: absolute;
  z-index: 11;
  right: 10%;
  width: 17%;
  height: 11%;
  background: var(--myt-copper);
  border: 1px solid #ffd0b5;
}
.myt-acoustic-labyrinth .damper-a { top: 12%; animation: myt-acoustic-damper-a-calm .58s cubic-bezier(.2,.67,.28,1.14) .82s both paused; }
.myt-acoustic-labyrinth .damper-b { bottom: 11%; animation: myt-acoustic-damper-b-calm .66s cubic-bezier(.2,.67,.28,1.14) .92s both paused; }

@keyframes myt-acoustic-shell-seal {
  0% { clip-path: polygon(0 0,14% 0,14% 0,0 0); opacity: .12; }
  52% { clip-path: polygon(0 0,100% 0,100% 11%,0 11%); opacity: .72; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}
@keyframes myt-acoustic-baffle-a-seat {
  0% { translate: 0 -5px; scale: .44 .72; opacity: .1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes myt-acoustic-baffle-b-seat {
  0% { translate: 0 5px; scale: 1.18 .38; filter: brightness(.46); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes myt-acoustic-baffle-c-seat {
  0% { translate: -3px -4px; scale: .62 1.16; opacity: .14; filter: saturate(.36); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-acoustic-baffle-d-seat {
  0% { translate: 3px 5px; scale: 1.2 .46; opacity: .11; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes myt-acoustic-baffle-e-seat {
  0% { translate: -2px -4px; scale: .38 .88; filter: contrast(.44); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes myt-acoustic-baffle-f-seat {
  0% { translate: 2px 4px; scale: 1.14 .32; opacity: .12; filter: brightness(.5); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes myt-acoustic-diaphragm-pulse {
  0% { scale: .42 1.14; translate: -2px 0; opacity: .13; }
  43% { scale: 1.2 .87; translate: 2px 0; opacity: 1; }
  76% { scale: .91 1.08; translate: -1px 0; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-acoustic-pressure-propagate {
  0% { clip-path: inset(0 100% 0 0); background-position: -22px 0; filter: brightness(.48); opacity: .12; }
  52% { clip-path: inset(0 43% 0 0); background-position: 13px 0; filter: brightness(1.22); opacity: .9; }
  100% { clip-path: polygon(0 32%,12% 10%,24% 46%,36% 20%,48% 72%,60% 35%,72% 88%,84% 26%,100% 52%,100% 68%,84% 43%,72% 100%,60% 52%,48% 88%,36% 37%,24% 64%,12% 27%,0 52%); background-position: 0 0; filter: none; opacity: 1; }
}
@keyframes myt-acoustic-mouth-release {
  0% { scale: .24 1.24; translate: 4px 0; opacity: .1; }
  72% { scale: 1.14 .88; translate: -1px 0; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes myt-acoustic-damper-a-calm {
  0% { translate: 4px -3px; scale: 1.22 .38; rotate: 12deg; opacity: .12; }
  100% { translate: none; scale: 1; rotate: none; opacity: 1; }
}
@keyframes myt-acoustic-damper-b-calm {
  0% { translate: -3px 4px; scale: .46 1.18; rotate: -15deg; filter: saturate(.38); }
  100% { translate: none; scale: 1; rotate: none; filter: none; }
}

/* A no-script document presents the resolved static diagrams. */
html:not(.js) [data-motion^="myt-"] .myt-decor .decor-child {
  animation-delay: -100s !important;
  animation-play-state: paused;
}

@media (max-width: 1080px) {
  .myt-page [data-motion^="myt-"] > .myt-decor {
    width: 238px;
    height: 128px;
    bottom: 20px;
  }
  .myt-page .myt-siphon-baffle { --myt-slug-x: 121px; --myt-slug-y: 38px; right: 24px; }
  .myt-page .myt-taper-plug-bench { --myt-plug-a-start: -14px; --myt-plug-b-start: -11px; --myt-plug-c-start: -16px; left: 24px; }
  .myt-page .myt-reuleaux-courtyard { right: 24px; }
  .myt-page .myt-ferrofield-array { left: 24px; }
  .myt-page .myt-ceramic-fuse-check { right: 24px; }
  .myt-page .myt-vacuum-cup-seat { left: 24px; }
  .myt-page .myt-eddy-brake { --myt-sled-x: 106px; right: 24px; }
  .myt-page .myt-capacitor-total { left: 24px; }
  .myt-page .myt-hookloop-handoff { right: 24px; }
  .myt-page .myt-acoustic-labyrinth { left: 24px; }
}

@media (max-width: 840px) {
  .myt-page [data-motion^="myt-"] > .myt-decor {
    width: 218px;
    height: 118px;
    bottom: 18px;
  }
  .myt-page .myt-siphon-baffle { --myt-slug-x: 108px; --myt-slug-y: 35px; right: 20px; }
  .myt-page .myt-taper-plug-bench { --myt-plug-a-start: -12px; --myt-plug-b-start: -10px; --myt-plug-c-start: -14px; left: 20px; }
  .myt-page .myt-reuleaux-courtyard { right: 20px; }
  .myt-page .myt-ferrofield-array { left: 20px; }
  .myt-page .myt-ceramic-fuse-check { right: 20px; }
  .myt-page .myt-vacuum-cup-seat { left: 20px; }
  .myt-page .myt-eddy-brake { --myt-sled-x: 95px; right: 20px; }
  .myt-page .myt-capacitor-total { left: 20px; }
  .myt-page .myt-hookloop-handoff { right: 20px; }
  .myt-page .myt-acoustic-labyrinth { left: 20px; }
}

@media (max-width: 560px) {
  .myt-page [data-motion^="myt-"] > .myt-decor {
    right: auto;
    bottom: 16px;
    left: calc(50% - 96px);
    width: 192px;
    height: 106px;
    box-shadow: 0 7px 16px rgba(2,10,12,.18);
  }
  .myt-page .myt-siphon-baffle { --myt-slug-x: 92px; --myt-slug-y: 31px; }
  .myt-page .myt-taper-plug-bench { --myt-plug-a-start: -9px; --myt-plug-b-start: -8px; --myt-plug-c-start: -11px; }
  .myt-page .myt-eddy-brake { --myt-sled-x: 82px; }
}

@media (max-width: 380px) {
  .myt-page [data-motion^="myt-"] > .myt-decor {
    right: auto;
    bottom: 12px;
    left: calc(50% - 82px);
    width: 164px;
    height: 92px;
    border-width: 1px;
    box-shadow: 0 3px 7px rgba(2,10,12,.16);
  }
  .myt-page .myt-siphon-baffle { --myt-slug-x: 77px; --myt-slug-y: 27px; }
  .myt-page .myt-taper-plug-bench {
    --myt-plug-a-start: -6px;
    --myt-plug-b-start: -6px;
    --myt-plug-c-start: -7px;
  }
  .myt-page .myt-eddy-brake { --myt-sled-x: 70px; }
  .myt-page .myt-decor .decor-child { border-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .myt-page [data-motion^="myt-"] .myt-decor,
  .myt-page [data-motion^="myt-"] .myt-decor *,
  .myt-page [data-motion^="myt-"] .myt-decor::before,
  .myt-page [data-motion^="myt-"] .myt-decor::after,
  .myt-page [data-motion^="myt-"] .myt-decor *::before,
  .myt-page [data-motion^="myt-"] .myt-decor *::after {
    animation: none !important;
    transition: none !important;
  }
  .myt-page [data-motion^="myt-"] .myt-decor::before,
  .myt-page [data-motion^="myt-"] .myt-decor::after,
  .myt-page [data-motion^="myt-"] .myt-decor *::before,
  .myt-page [data-motion^="myt-"] .myt-decor *::after {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .myt-page [data-motion^="myt-"] .myt-decor .decor-child {
    opacity: 1;
    filter: none;
  }
  .myt-page .myt-siphon-slug { translate: var(--myt-slug-x) var(--myt-slug-y); scale: 1; }
  .myt-page .myt-siphon-valve { rotate: 38deg; scale: 1; }
  .myt-page .myt-reuleaux-rotor { translate: 8px 5px; rotate: 24deg; scale: 1; }
  .myt-page .myt-reuleaux-courtyard .shoe-a { transform: skewX(-13deg); }
  .myt-page .myt-reuleaux-courtyard .shoe-b { transform: skewY(11deg); }
  .myt-page .myt-reuleaux-courtyard .shoe-c { transform: skewX(17deg); }
  .myt-page .myt-ferrofield-array .filing-a { rotate: 26deg; }
  .myt-page .myt-ferrofield-array .filing-b { rotate: -22deg; }
  .myt-page .myt-ferrofield-array .filing-c { rotate: 12deg; }
  .myt-page .myt-ferrofield-array .filing-d { rotate: -16deg; }
  .myt-page .myt-ferrofield-array .filing-e { rotate: -19deg; }
  .myt-page .myt-ferrofield-array .filing-f { rotate: 23deg; }
  .myt-page .myt-ferrofield-array .filing-g { rotate: -31deg; }
  .myt-page .myt-ferrofield-array .filing-h { rotate: 28deg; }
  .myt-page .myt-vacuum-cup-seat .cup-a { translate: 0 6px; scale: 1 .79; }
  .myt-page .myt-vacuum-cup-seat .cup-b { translate: 0 8px; scale: 1 .73; }
  .myt-page .myt-vacuum-cup-seat .cup-c { translate: 0 5px; scale: 1 .82; }
  .myt-page .myt-vacuum-cup-seat .cup-d { translate: 0 9px; scale: 1 .7; }
  .myt-page .myt-eddy-sled { translate: var(--myt-sled-x) 0; scale: 1; }
  .myt-page .myt-eddy-heat-wake { scale: .14 .34; opacity: .2; clip-path: polygon(72% 42%,100% 22%,88% 76%,69% 59%); }
  .myt-page .myt-taper-plug,
  .myt-page .myt-taper-collar,
  .myt-page .myt-taper-datum,
  .myt-page .myt-fuse-bridge,
  .myt-page .myt-fuse-window,
  .myt-page .myt-fuse-result-bar,
  .myt-page .myt-vacuum-ring,
  .myt-page .myt-vacuum-status-bridge,
  .myt-page .myt-vacuum-seal-window,
  .myt-page .myt-eddy-crossbar,
  .myt-page .myt-eddy-endpoint-bumper,
  .myt-page .myt-capacitor-plate,
  .myt-page .myt-capacitor-band,
  .myt-page .myt-capacitor-result-cell,
  .myt-page .myt-hookloop-strip,
  .myt-page .myt-hookloop-tooth,
  .myt-page .myt-hookloop-handle,
  .myt-page .myt-hookloop-witness,
  .myt-page .myt-hookloop-destination-tab,
  .myt-page .myt-acoustic-baffle,
  .myt-page .myt-acoustic-diaphragm,
  .myt-page .myt-acoustic-exit-mouth,
  .myt-page .myt-acoustic-damper {
    translate: none;
    rotate: none;
    scale: 1;
  }
  .myt-page .myt-acoustic-pressure-band {
    clip-path: polygon(0 32%,12% 10%,24% 46%,36% 20%,48% 72%,60% 35%,72% 88%,84% 26%,100% 52%,100% 68%,84% 43%,72% 100%,60% 52%,48% 88%,36% 37%,24% 64%,12% 27%,0 52%);
    background-position: 0 0;
  }
}