.pet-finale {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 340px;
  margin: 8px auto 16px;
  overflow: hidden;
  border: 1px solid #e8dcc3;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 42%, #fffdf0 0, #f7efd8 50%, #e7eadc 100%);
}

.pet-finale[data-scene="bunny"] {
  background: radial-gradient(ellipse at 53% 38%, #fbf1dd 0, #eeecdf 45%, #dce6df 100%);
}

.pet-finale-picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pet-finale .pet-finale-original-dog {
  width: 258px;
  height: 280px;
  overflow: visible;
}

.pet-finale-flight {
  transform-origin: 360px 331px;
  animation: pet-finale-fly 5.8s cubic-bezier(.2, .65, .2, 1) both;
}

.pet-finale-flight .pet-finale-ribbons {
  transform-origin: 360px 180px;
  animation: pet-finale-silk 5.8s ease-in-out both;
}

.pet-finale-moon {
  animation: pet-finale-moonrise 4s ease-out both;
}

.pet-finale-stars {
  animation: pet-finale-stars 5.8s ease-in-out both;
}

.pet-finale-dog-before {
  opacity: 0;
  transform-origin: 360px 340px;
  animation: pet-finale-change-before 5.8s ease-in-out both;
}

.pet-finale-lion-after {
  opacity: 1;
  transform-origin: 360px 340px;
  animation: pet-finale-change-after 5.8s ease-out both;
}

.pet-finale-transformation {
  opacity: 0;
  transform-origin: 360px 216px;
  animation: pet-finale-magic 5.8s ease-in-out both;
}

.pet-finale-magic-ring {
  transform-origin: 360px 216px;
  animation: pet-finale-ring 5.8s ease-in-out both;
}

.pet-finale-portrait {
  overflow: visible;
}

@keyframes pet-finale-fly {
  0% { opacity: 0; transform: translate(-38px, 61px) scale(.84) rotate(-5deg); }
  14% { opacity: 1; }
  50% { transform: translate(6px, 13px) scale(.98) rotate(2deg); }
  78% { transform: translate(-3px, -12px) scale(1) rotate(-1deg); }
  100% { opacity: 1; transform: translate(0, -16px) scale(1) rotate(0); }
}

@keyframes pet-finale-silk {
  0% { transform: skewY(-5deg); }
  32% { transform: skewY(4deg); }
  65% { transform: skewY(-3deg); }
  100% { transform: skewY(0); }
}

@keyframes pet-finale-moonrise {
  from { opacity: .35; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pet-finale-stars {
  0% { opacity: .2; }
  28% { opacity: .8; }
  47% { opacity: .3; }
  72%, 100% { opacity: 1; }
}

@keyframes pet-finale-change-before {
  0%, 28% { opacity: 1; transform: scale(1); }
  38% { opacity: 1; transform: scale(1.06); }
  48%, 100% { opacity: 0; transform: scale(.86); }
}

@keyframes pet-finale-change-after {
  0%, 40% { opacity: 0; transform: translateY(10px) scale(.75); }
  58% { opacity: 1; transform: translateY(-5px) scale(1.04); }
  75%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pet-finale-magic {
  0%, 23% { opacity: 0; transform: scale(.35) rotate(-16deg); }
  40% { opacity: 1; transform: scale(1) rotate(0); }
  56% { opacity: .9; transform: scale(1.1) rotate(15deg); }
  76%, 100% { opacity: 0; transform: scale(1.35) rotate(25deg); }
}

@keyframes pet-finale-ring {
  from { transform: rotate(0); }
  to { transform: rotate(120deg); }
}

@media (max-width: 520px) {
  .pet-finale { height: 300px; margin-top: 6px; border-radius: 18px; }
  .pet-finale-picture { width: 150%; max-width: none; margin-left: -25%; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-finale *,
  .pet-finale *::before,
  .pet-finale *::after { animation: none !important; transition: none !important; }
  .pet-finale-flight { opacity: 1; transform: translate(0, -16px); }
  .pet-finale-dog-before,
  .pet-finale-transformation { opacity: 0; }
  .pet-finale-lion-after,
  .pet-finale-moon,
  .pet-finale-stars { opacity: 1; transform: none; }
}