/* Issue #22: ソウダ君の常時アニメーションとリアクション */
.soudaFreeSpace-decorationLayer {
  pointer-events: none;
}

.soudaCharacter {
  z-index: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--soudaFreeSpace-rotation, 0deg));
  transform-origin: 50% 92%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  will-change: left, top;
  -webkit-tap-highlight-color: transparent;
}

.soudaCharacter.is-dragging {
  cursor: grabbing;
}

.soudaCharacter.is-ticket-running {
  pointer-events: none;
}

.soudaCharacter.is-ticket-running .soudaCharacter-float {
  animation: soudaCharacter-ticketRun .24s ease-in-out infinite;
}

.soudaCharacter.is-ticket-running-from-right .soudaFreeSpace-itemImage,
.soudaCharacter.is-ticket-running-from-right .soudaFreeSpace-itemFallback {
  transform: scaleX(-1);
}

.soudaTicketPickup {
  position: absolute;
  z-index: 4;
  display: grid;
  width: clamp(42px, 12%, 68px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 4px 16px rgb(78 50 20 / 24%);
  font-size: clamp(1.6rem, 7vw, 3rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.soudaTicketPickup::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 4px solid rgb(255 220 70 / 0%);
  border-radius: 50%;
}

.soudaTicketPickup.is-collected {
  color: transparent;
  font-size: 0;
  background: transparent;
  box-shadow: none;
  animation: soudaTicketPickup-disappear .3s ease-out both;
}

.soudaTicketPickup.is-collected::after {
  animation: soudaTicketPickup-flash .3s ease-out both;
}

.soudaCharacter:focus-visible {
  outline: 4px solid #ff3fa4;
  outline-offset: 5px;
  border-radius: 20%;
}

.soudaCharacter-float {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 92%;
  animation: soudaCharacter-idleFloat 2.8s ease-in-out infinite;
}

.soudaCharacter .soudaFreeSpace-itemImage,
.soudaCharacter .soudaFreeSpace-itemFallback {
  position: relative;
  z-index: 1;
}

.soudaCharacter-shadow {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 2%;
  width: 46%;
  height: 8%;
  border-radius: 50%;
  background: rgb(76 39 30 / 18%);
  filter: blur(8px);
  transform: translateX(-50%);
  animation: soudaCharacter-shadowIdle 2.8s ease-in-out infinite;
  pointer-events: none;
}

.soudaFreeSpace-stage--placing .soudaCharacter {
  cursor: crosshair;
  pointer-events: none;
}

.soudaCharacter-float.is-tap {
  animation: soudaCharacter-tapShake 0.48s ease both;
}

.soudaCharacter-float.is-joy {
  animation: soudaCharacter-happyBounce 1.35s cubic-bezier(.2, .9, .25, 1) both;
}

.soudaCharacter-float.is-think {
  animation: soudaCharacter-thinkNod 1.9s ease-in-out both;
}

.soudaCharacter-float.is-look-left {
  animation: soudaCharacter-lookLeft 0.85s ease-in-out both;
}

.soudaCharacter-float.is-look-right {
  animation: soudaCharacter-lookRight 0.85s ease-in-out both;
}

.soudaCharacter-float.is-idle-hop {
  animation: soudaCharacter-idleHop 0.65s ease-in-out both;
}

.soudaCharacter-float.is-idle-look {
  animation: soudaCharacter-idleLook 0.9s ease-in-out both;
}

.soudaCharacter-visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes soudaCharacter-idleFloat {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes soudaCharacter-ticketRun {
  0%, 100% { transform: translateY(2px) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes soudaTicketPickup-disappear {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -70%) scale(.5); }
}

@keyframes soudaTicketPickup-flash {
  from { opacity: 1; border-color: rgb(255 220 70 / 90%); transform: scale(.4); }
  to { opacity: 0; border-color: rgb(255 220 70 / 0%); transform: scale(1.8); }
}

@keyframes soudaCharacter-shadowIdle {
  0%, 100% {
    opacity: .2;
    transform: translateX(-50%) scaleX(1);
  }
  50% {
    opacity: .12;
    transform: translateX(-50%) scaleX(.88);
  }
}

@keyframes soudaCharacter-tapShake {
  0%, 100% { transform: translateX(0) rotate(0) scale(1); }
  20% { transform: translateX(-7px) rotate(-4deg) scale(1.02); }
  40% { transform: translateX(7px) rotate(4deg) scale(.99); }
  60% { transform: translateX(-4px) rotate(-2deg) scale(1.01); }
  80% { transform: translateX(3px) rotate(2deg) scale(1); }
}

@keyframes soudaCharacter-happyBounce {
  0% { transform: translateY(0) scale(1) rotate(0); }
  18% { transform: translateY(-48px) scale(1.08, .93) rotate(-4deg); }
  36% { transform: translateY(0) scale(.94, 1.08) rotate(4deg); }
  54% { transform: translateY(-34px) scale(1.08, .94) rotate(4deg); }
  72% { transform: translateY(0) scale(.96, 1.05) rotate(-3deg); }
  88% { transform: translateY(-10px) scale(1.02); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes soudaCharacter-thinkNod {
  0% { transform: rotate(0) translateY(0); }
  22%, 55% { transform: rotate(-3deg) translateY(-3px); }
  72% { transform: rotate(3deg) translateY(3px); }
  86% { transform: rotate(-1deg) translateY(0); }
  100% { transform: rotate(0) translateY(0); }
}

@keyframes soudaCharacter-lookLeft {
  0%, 100% { transform: translateX(0) rotate(0); }
  35%, 70% { transform: translateX(-8px) rotate(-6deg); }
}

@keyframes soudaCharacter-lookRight {
  0%, 100% { transform: translateX(0) rotate(0); }
  35%, 70% { transform: translateX(8px) rotate(6deg); }
}

@keyframes soudaCharacter-idleHop {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-8px) scale(1.02, .98); }
  70% { transform: translateY(0) scale(.98, 1.02); }
}

@keyframes soudaCharacter-idleLook {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-3deg); }
  70% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .soudaCharacter-float,
  .soudaCharacter-shadow,
  .soudaCharacter-float.is-tap,
  .soudaCharacter-float.is-joy,
  .soudaCharacter-float.is-think,
  .soudaCharacter-float.is-look-left,
  .soudaCharacter-float.is-look-right,
  .soudaCharacter-float.is-idle-hop,
  .soudaCharacter-float.is-idle-look {
    animation: none !important;
  }

  .soudaCharacter.is-ticket-running .soudaCharacter-float,
  .soudaTicketPickup,
  .soudaTicketPickup::after {
    animation: none !important;
  }

  .soudaTicketPickup.is-collected {
    opacity: 1;
  }

  .soudaTicketPickup.is-collected::after {
    opacity: .75;
    border-color: rgb(255 220 70 / 90%);
    transform: scale(1);
  }
}