main.entra {
  animation: page-enter var(--motion-standard) var(--ease-emphasis) both;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.full-feedback[data-state="entering"] {
  animation: feedback-in 280ms var(--ease-emphasis) both;
}

.full-feedback[data-state="exiting"] {
  animation: feedback-out 180ms var(--ease-exit) both;
}

@keyframes feedback-in {
  from {
    opacity: 0;
    transform: scale(0.92);
    clip-path: circle(0% at 50% 50%);
  }

  to {
    opacity: 1;
    transform: scale(1);
    clip-path: circle(75% at 50% 50%);
  }
}

@keyframes feedback-out {
  to {
    opacity: 0;
    transform: scale(1.03);
  }
}

.illustration [data-motion] {
  transform-box: fill-box;
  transform-origin: center;
}

.illustration[data-action="replaymotion"] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.illustration.is-replaying {
  animation: illustration-replay-pulse 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.illustration.is-replaying [data-motion] {
  will-change: transform, opacity;
}

.illustration.is-active [data-motion="sun"] {
  animation: sun-rise 1800ms cubic-bezier(0.16, 1, 0.3, 1) 0ms both;
}

.illustration.is-active [data-motion="wave"] {
  animation: wave-shift 2400ms cubic-bezier(0.22, 0.75, 0.18, 1) 90ms both;
}

.illustration.is-active [data-motion="car"] {
  animation: car-drive 1900ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
}

.illustration.is-active [data-motion="boat"] {
  animation: boat-rock 2400ms cubic-bezier(0.33, 1, 0.68, 1) 130ms both;
}

.illustration.is-active [data-motion="umbrella"] {
  animation: umbrella-open 1700ms cubic-bezier(0.16, 1, 0.3, 1) 150ms both;
  transform-origin: center bottom;
}

.illustration.is-active [data-motion="glass"] {
  animation: glass-toast 1800ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

.illustration.is-active [data-motion="star"] {
  animation: star-pop 1500ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

.illustration.is-active [data-motion="camera"] {
  animation: camera-flash 1250ms cubic-bezier(0.22, 0.75, 0.18, 1) 180ms both;
}

.illustration.is-active [data-motion="flag"] {
  animation: flag-wave 2200ms cubic-bezier(0.22, 0.75, 0.18, 1) 140ms both;
  transform-origin: left center;
}

.illustration.is-active [data-motion="burst"] {
  animation: burst-pop 1650ms cubic-bezier(0.16, 1, 0.3, 1) 110ms both;
}

@keyframes illustration-replay-pulse {
  0%,
  100% {
    filter: none;
  }

  42% {
    filter: drop-shadow(0 7px 0 rgba(5, 4, 4, 0.12));
  }
}

@keyframes sun-rise {
  0% {
    opacity: 0.2;
    transform: translateY(16px) scale(0.78) rotate(-8deg);
  }

  58% {
    opacity: 1;
    transform: translateY(-3px) scale(1.06) rotate(2deg);
  }

  78% {
    transform: translateY(1px) scale(0.98) rotate(-1deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes wave-shift {
  0% {
    transform: translateX(-14px) scaleY(0.94);
  }

  34% {
    transform: translateX(7px) scaleY(1.04);
  }

  66% {
    transform: translateX(-4px) scaleY(0.98);
  }

  84% {
    transform: translateX(2px) scaleY(1.01);
  }

  100% {
    transform: translateX(0) scaleY(1);
  }
}

@keyframes car-drive {
  0% {
    opacity: 0.35;
    transform: translateX(-38px) translateY(3px) rotate(-3deg);
  }

  54% {
    opacity: 1;
    transform: translateX(7px) translateY(-2px) rotate(1.5deg);
  }

  72% {
    transform: translateX(-3px) translateY(1px) rotate(-1deg);
  }

  86% {
    transform: translateX(1px) translateY(-1px) rotate(0.4deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes boat-rock {
  0% {
    opacity: 0.55;
    transform: translateY(8px) rotate(-5deg);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px) rotate(3deg);
  }

  58% {
    transform: translateY(3px) rotate(-2deg);
  }

  80% {
    transform: translateY(-1px) rotate(1deg);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes umbrella-open {
  0% {
    opacity: 0.35;
    transform: translateY(11px) scaleX(0.12) scaleY(0.72);
  }

  58% {
    opacity: 1;
    transform: translateY(-2px) scaleX(1.08) scaleY(1.03);
  }

  78% {
    transform: translateY(1px) scaleX(0.97) scaleY(0.99);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes glass-toast {
  0% {
    opacity: 0.45;
    transform: rotate(-14deg) translate(-7px, 6px);
  }

  42% {
    opacity: 1;
    transform: rotate(10deg) translate(5px, -5px);
  }

  68% {
    transform: rotate(-5deg) translate(-2px, 2px);
  }

  84% {
    transform: rotate(2deg) translate(1px, -1px);
  }

  100% {
    transform: none;
  }
}

@keyframes star-pop {
  0% {
    opacity: 0;
    transform: scale(0.25) rotate(-24deg);
  }

  58% {
    opacity: 1;
    transform: scale(1.2) rotate(8deg);
  }

  78% {
    transform: scale(0.92) rotate(-3deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes camera-flash {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  30% {
    transform: scale(0.96);
  }

  43% {
    opacity: 0.08;
    transform: scale(1.14);
  }

  62% {
    opacity: 1;
    transform: scale(0.99);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes flag-wave {
  0% {
    opacity: 0.45;
    transform: skewY(-9deg) scaleX(0.78);
  }

  35% {
    opacity: 1;
    transform: skewY(6deg) scaleX(1.05);
  }

  65% {
    transform: skewY(-4deg) scaleX(0.98);
  }

  84% {
    transform: skewY(2deg) scaleX(1.01);
  }

  100% {
    transform: none;
  }
}

@keyframes burst-pop {
  0% {
    opacity: 0;
    transform: scale(0.22) rotate(-16deg);
  }

  55% {
    opacity: 1;
    transform: scale(1.12) rotate(5deg);
  }

  76% {
    transform: scale(0.95) rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.complaint-ranking .sr {
  transition: transform var(--motion-emphasis) var(--ease-emphasis);
}

.counter-bump {
  animation: counter-bump 220ms var(--ease-emphasis);
}

@keyframes counter-bump {
  50% {
    transform: translateY(-4px) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .full-feedback[data-state="entering"],
  .full-feedback[data-state="exiting"] {
    clip-path: none;
    transform: none;
  }
}