@media (prefers-reduced-motion: no-preference) {
  .patty-logo {
    transform-origin: 50% 88%;
  }
  .patty-logo.is-entering {
    animation: patty-logo-bounce 1.45s both;
  }
  @keyframes patty-logo-bounce {
    0% { transform: translateX(calc(-100% - 18px)); }
    26% { transform: translate(-67%, -20%) rotate(-5deg) scale(.9, 1.15); }
    46% { transform: translateX(-39%) scale(1.12, .86); }
    63% { transform: translate(-17%, -13%) rotate(3deg) scale(.89, 1.15); }
    76% { transform: translate(-2%, -5%); }
    79%, 82% { transform: scale(1.32, .62); }
    88% { transform: scale(.87, 1.18); }
    94% { transform: scale(1.06, .93); }
    100% { transform: none; }
  }
}

.patty-actor { display: block; pointer-events: none; transform-origin: 50% 88%; }
.patty-wagon {
  position: absolute;
  width: 83%;
  left: 73%;
  top: 42%;
  height: auto;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .patty-actor.is-fetching { animation: patty-fetch 5.6s both; }
  .is-fetching .patty-wagon { animation: patty-cargo 5.6s both; }
}
@keyframes patty-fetch {
  0%, 100% { transform: none; }
  /* Two hops out, then two back with the prop. Repeat to return it. */
  3%, 65% { transform: scale(1.12, .82); }
  7%, 69% { transform: translate(-19%, -24%) scale(.92, 1.1); }
  11%, 73% { transform: translateX(-46%) scale(1.2, .75); }
  15%, 76% { transform: translate(-88%, -18%) scale(.93, 1.08); }
  20%, 23%, 80%, 83% { transform: translateX(calc(-170% - 20px)); }
  28%, 87% { transform: translate(-90%, -20%) scale(.92, 1.1); }
  32%, 91% { transform: translateX(-43%) scale(1.2, .75); }
  37%, 94% { transform: translate(-17%, -25%) scale(.92, 1.1); }
  42%, 97% { transform: scale(1.24, .70); }
  46%, 99% { transform: scale(.96, 1.05); }
  53% { transform: rotate(3deg); }
  61% { transform: none; }
}
@keyframes patty-cargo {
  0%, 20%, 83%, 100% { visibility: hidden; }
  23%, 80% { visibility: visible; }
  34%, 71% { transform: rotate(-6deg); }
  42%, 65% { transform: rotate(2deg); }
}

.patty-chip { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .patty-repair .patty-chip {
    display: block;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(132px, 20vw, 245px);
    aspect-ratio: 190 / 115;
    background: url("/assets/art/patty-cracked-glass.svg") top left / contain no-repeat;
    filter: drop-shadow(0 1px 0 #fff6);
    animation: patty-chip 5.6s both;
  }
  .patty-repair .is-fetching .patty-wagon { left: -18%; top: 2%; animation: patty-hammer 5.6s both; transform-origin: 10% 55%; }
}
@keyframes patty-hammer {
  0%, 20%, 83%, 100% { visibility: hidden; }
  23%, 80% { visibility: visible; }
  38%, 54% { transform: rotate(-27deg); }
  42%, 58% { transform: rotate(14deg); }
  50%, 65% { transform: none; }
}
@keyframes patty-chip {
  0%, 41.9%, 76%, 100% { opacity: 0; clip-path: circle(0 at 21% 18%); }
  42% { opacity: 1; clip-path: circle(8% at 21% 18%); }
  45%, 59% { opacity: 1; clip-path: circle(120% at 21% 18%); }
  72% { opacity: .9; clip-path: circle(9% at 21% 18%); }
}

@media (prefers-reduced-motion: no-preference) {
  .patty-actor[data-routine="pirouette"] {
    animation: patty-pirouette 4.2s both;
  }
  .patty-actor[data-routine="pirouette"] .patty-wagon {
    width: 83%;
    left: 11%;
    top: 48%;
    animation: patty-tutu 4.2s both;
  }
}
@keyframes patty-pirouette {
  0%, 100% { transform: none; }
  12% { transform: scale(1.14, .78); }
  22% { transform: translateY(-7%) rotate(-7deg) rotateY(0deg) scale(.93, 1.09); }
  65% { transform: translateY(-7%) rotate(-7deg) rotateY(720deg) scale(.93, 1.09); animation-timing-function: ease-out; }
  73% { transform: rotateY(720deg) scale(1.16, .79); }
  86% { transform: rotateY(720deg) rotate(12deg) scaleY(.88); }
  100% { transform: rotateY(720deg); }
}
@keyframes patty-tutu {
  0%, 100% { opacity: 0; }
  12%, 90% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .patty-actor[data-routine="bewitched"] {
    animation: patty-spell 5s both;
  }
  .patty-actor[data-routine="bewitched"]::after {
    content: "";
    position: absolute;
    left: 48.5%;
    top: 58.7%;
    width: 6.5%;
    height: 3.2%;
    border-radius: 50%;
    background: #995831;
    animation: patty-nose 5s both;
  }
  .patty-actor[data-routine="bewitched"] .patty-wagon {
    left: 71%;
    top: 26%;
    width: 86%;
    transform-origin: 20% 72%;
    animation: patty-conjure 5s both;
  }
}
@keyframes patty-spell {
  0%, 26%, 100% { transform: none; }
  39%, 75% { transform: rotate(-5deg); }
}
@keyframes patty-nose {
  0%, 100% { opacity: 0; }
  5%, 90% { opacity: 1; }
  0%, 24%, 75%, 90% { transform: none; }
  8%, 16%, 79% { transform: translateX(-38%) rotate(-13deg); }
  12%, 20%, 85% { transform: translateX(38%) rotate(13deg); }
}
@keyframes patty-conjure {
  0%, 24%, 96%, 100% { opacity: 0; transform: scale(.12); }
  34% { opacity: 1; transform: translateY(-8%) scale(1.1); }
  49%, 75% { opacity: 1; transform: none; }
  85% { opacity: 1; transform: translateY(-9%) rotate(-6deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .patty-actor:is([data-routine="shuffleboard"], [data-routine="frisbee"]) {
    animation: patty-pitch 5s both;
  }
  .patty-actor:is([data-routine="shuffleboard"], [data-routine="frisbee"]) .patty-wagon {
    left: 72%; top: 68%; width: 33%;
    animation: patty-disc 5s both;
  }
  .patty-actor[data-routine="shuffleboard"] .patty-wagon { animation-name: patty-puck; }
  .patty-actor[data-routine="shuffleboard"]::before {
    content: ""; position: absolute; left: 54%; top: 75%; width: 34%; height: 4%;
    border: 1px solid #513c2b; border-radius: 3px; background: #e0ae77;
    transform-origin: left; animation: patty-cue 5s both;
  }
  .patty-actor[data-routine="shuffleboard"]::after {
    content: "10"; position: absolute; left: 119%; top: 73%; width: 28%;
    border: 2px solid #775a34; border-radius: 50%; color: #392a21; background: #ffe1a2;
    text-align: center; font: bold 11px/1.2 system-ui; animation: patty-score 5s both;
  }
  .patty-actor[data-routine="shuffleboard"] .patty-wagon { z-index: 1; }
}
@keyframes patty-pitch {
  0%, 100% { transform: none; }
  21% { transform: rotate(-9deg) scale(1.03,.94); }
  32% { transform: rotate(6deg); }
  46%, 85% { transform: none; }
}
@keyframes patty-disc {
  0%, 100% { opacity: 0; transform: scaleY(.5); }
  14%, 25%, 88% { opacity: 1; transform: scaleY(.5); }
  51% { opacity: 1; transform: translate(200%,-150%) rotate(-16deg) scaleY(.40) rotate(360deg); }
  67% { opacity: 1; transform: translate(175%,-110%) rotate(8deg) scaleY(.45) rotate(540deg); }
}
@keyframes patty-puck {
  0%, 100% { opacity: 0; transform: scaleY(.44); }
  16%, 26% { opacity: 1; transform: scaleY(.44); }
  57%, 76% { opacity: 1; transform: translateX(134%) scaleY(.44) rotate(230deg); }
  90% { opacity: 0; transform: translateX(134%) scaleY(.44) rotate(230deg); }
}
@keyframes patty-cue {
  0%, 86%, 100% { opacity: 0; transform: rotate(25deg); }
  18%, 24% { opacity: 1; transform: translateX(-18%) rotate(19deg); }
  32%, 65% { opacity: 1; transform: translateX(17%) rotate(8deg); }
}
@keyframes patty-score {
  0%, 100% { opacity: 0; }
  18%, 54% { opacity: .8; transform: none; }
  62% { opacity: 1; transform: scale(1.23); }
  76% { opacity: 1; transform: none; }
}