/* Общие модификаторы движения: подключаются классами, без привязки к экрану или id. */
.motion-icon {
  display: inline-block;
  transform-origin: 50% 65%;
}
.motion-sway {
  animation: motion-sway var(--motion-cycle, 4.8s) ease-in-out infinite;
}
.motion-sway[data-motion-enabled="false"] { animation: none; }
.motion-toggle[aria-pressed="true"] .motion-icon {
  animation: motion-pop-on var(--motion-toggle-on-duration, 320ms) ease-out;
}
.motion-toggle[aria-pressed="false"] .motion-icon {
  animation: motion-pop-off var(--motion-toggle-off-duration, 260ms) ease-out;
}
.motion-enter { animation: motion-enter var(--motion-enter-duration, 180ms) ease-out; }
/* Экран только меняет прозрачность: камеры и fixed-просмотр картинок не меняют координаты. */
.motion-screen {
  animation: motion-screen-fade var(--motion-screen-duration, 380ms) ease-out
    var(--motion-screen-offset, 0ms) both;
}
.motion-screen .motion-detail, .motion-screen .choice-picture > img {
  animation: motion-detail-enter 380ms cubic-bezier(.16,1,.3,1)
    calc(var(--motion-screen-offset, 0ms) + var(--motion-order, 0) * 60ms) both;
}
.motion-screen[data-motion-transition="story"] { --motion-detail-distance: 14px; }
.motion-screen[data-motion-transition="results"] { --motion-detail-distance: 20px; }
.motion-screen[data-motion-transition="confirmed"] .answers-confirmed-icon {
  animation: motion-pop-on 440ms cubic-bezier(.16,1,.3,1) var(--motion-screen-offset, 0ms) both;
}
/* Общие сценарные модификаторы: внешний вид и события остаются в необязательном модуле. */
.motion-scene-fade {
  animation: motion-scene-fade var(--motion-scene-duration, 2600ms) ease both;
}
.motion-showcase {
  animation: motion-showcase 700ms cubic-bezier(.16,1,.3,1) both;
}
.motion-confetti-fall {
  animation: motion-confetti-fall var(--motion-confetti-duration, 2100ms) cubic-bezier(.15,.6,.55,1)
    var(--motion-confetti-delay, 0ms) both;
}
/* Повторное раскрытие details заново запускает появление содержимого. */
details:not([open]) > .motion-enter { animation: none; }
.motion-interactive {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.motion-interactive:where(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  background: var(--motion-hover-background, #ffe69a);
  transform: translateY(-2px);
  box-shadow: var(--motion-hover-shadow, 0 8px 0 #3b2168);
}
.motion-interactive:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(2px);
  box-shadow: var(--motion-pressed-shadow, 0 2px 0 #3b2168);
}
@keyframes motion-sway {
  0%, 75%, 100% { transform: translateY(0) rotate(0); }
  81% { transform: translateY(-2px) rotate(-10deg); }
  88% { transform: translateY(0) rotate(8deg); }
  94% { transform: translateY(-1px) rotate(-4deg); }
}
@keyframes motion-pop-on {
  0% { transform: scale(.8) rotate(-12deg); }
  55% { transform: scale(1.18) rotate(7deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes motion-pop-off {
  0% { transform: scale(1.1) rotate(8deg); }
  60% { transform: scale(.9) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes motion-enter {
  from { opacity: .5; transform: translateY(7px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes motion-screen-fade {
  from { opacity: .45; }
  to { opacity: 1; }
}
@keyframes motion-detail-enter {
  from { opacity: 0; transform: translateY(var(--motion-detail-distance, 10px)) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes motion-scene-fade {
  0% { opacity: 0; }
  16%, 70% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes motion-showcase {
  from { opacity: 0; transform: translateY(32px) scale(.78) rotate(-3deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes motion-confetti-fall {
  from { opacity: 1; transform: translate(0, -20px) rotate(0); }
  to { opacity: 0; transform: translate(var(--motion-confetti-drift, 0px), 102vh) rotate(650deg); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-sway, .motion-toggle .motion-icon, .motion-enter { animation: none !important; }
  .motion-interactive { transition: none !important; }
  .motion-interactive:where(:hover, :focus-visible, :active) { transform: none !important; }
  .motion-scene-fade, .motion-showcase, .motion-confetti-fall { animation: none !important; }
  .motion-screen, .motion-screen .motion-detail, .motion-screen .choice-picture > img,
  .motion-screen .answers-confirmed-icon {
    animation: none !important;
  }
}