/* ============================================================
   數學星球大冒險 — animations.css
   宇宙氛圍、進場、回饋、慶祝與無障礙動態偏好
   ============================================================ */

/* ------------------------------------------------------------
   1. 宇宙環境動畫
   ------------------------------------------------------------ */
@keyframes twinkle {
  0% {
    opacity: 0.52;
  }
  48% {
    opacity: 0.92;
  }
  100% {
    opacity: 0.7;
  }
}

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2.2vmax, -1.6vmax, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-1.4vmax, 2.4vmax, 0) scale(0.98);
  }
}

@keyframes shooting-star {
  0%,
  68%,
  100% {
    opacity: 0;
    transform: translate3d(-8vw, -6vh, 0) rotate(-24deg) scaleX(0.5);
  }
  73% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-24deg) scaleX(1);
  }
  82% {
    opacity: 0;
    transform: translate3d(38vw, 19vh, 0) rotate(-24deg) scaleX(1.25);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-0.4deg);
  }
  50% {
    transform: translate3d(0, -7px, 0) rotate(0.6deg);
  }
}

@keyframes ring-sway {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-17deg) scaleX(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-11deg) scaleX(1.025);
  }
}

@keyframes trail-flicker {
  0% {
    opacity: 0.62;
    transform: translateY(-50%) scaleX(0.92);
  }
  100% {
    opacity: 0.94;
    transform: translateY(-50%) scaleX(1.06);
  }
}

@keyframes planet-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------
   2. 畫面與元件進場
   ------------------------------------------------------------ */
@keyframes screen-in {
  from {
    opacity: 0;
    transform: translate3d(0, 9px, 0) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.78) translateY(12px);
  }
  62% {
    opacity: 1;
    transform: scale(1.045) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sheet-up {
  from {
    opacity: 0;
    transform: translateY(38px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scratchpad-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scratchpad-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes feedback-in {
  from {
    opacity: 0;
    transform: translate(-50%, 22px) scale(0.96);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -3px) scale(1.012);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes mascot-blink {
  0%,
  91%,
  97%,
  100% {
    transform: scaleY(1);
  }
  93% {
    transform: scaleY(0.12);
  }
}

/* ------------------------------------------------------------
   3. 答題回饋與星星
   ------------------------------------------------------------ */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  16% {
    transform: translateX(-6px) rotate(-0.5deg);
  }
  33% {
    transform: translateX(5px) rotate(0.5deg);
  }
  50% {
    transform: translateX(-4px);
  }
  68% {
    transform: translateX(4px);
  }
  84% {
    transform: translateX(-2px);
  }
}

@keyframes correct-burst {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.35);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  }
  62% {
    opacity: 1;
    transform: translateY(-50%) scale(1.18);
    box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
  }
}

@keyframes star-pop {
  0% {
    opacity: 0;
    transform: scale(0.18) rotate(-42deg);
  }
  64% {
    opacity: 1;
    transform: scale(1.22) rotate(7deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes star-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(255, 209, 102, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 13px rgba(255, 209, 102, 0.95));
  }
}

@keyframes coin-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.68);
  }
  54% {
    opacity: 1;
    transform: translateY(-8px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reward-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes caret-blink {
  0%,
  46% {
    opacity: 1;
  }
  47%,
  100% {
    opacity: 0;
  }
}

/* ------------------------------------------------------------
   4. 星圖關卡狀態
   ------------------------------------------------------------ */
@keyframes level-pulse {
  0%,
  100% {
    box-shadow:
      0 5px 0 rgba(0, 0, 0, 0.28),
      0 0 0 3px var(--galaxy-soft),
      0 0 20px var(--galaxy-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 5px 0 rgba(0, 0, 0, 0.28),
      0 0 0 5px var(--galaxy-soft),
      0 0 34px var(--galaxy-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.24);
  }
}

@keyframes level-unlock {
  0% {
    opacity: 0.3;
    filter: brightness(1.45) saturate(0.4);
    transform: scale(0.9);
  }
  55% {
    opacity: 1;
    filter: brightness(1.14) saturate(1.15);
    transform: scale(1.055);
  }
  100% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
}

@keyframes highlight-pulse {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 209, 102, 0)) brightness(1);
  }
  100% {
    filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.95)) brightness(1.07);
  }
}

@keyframes visual-highlight {
  0% {
    transform: scale(1);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow:
      inset 0 0 0 1px rgba(213, 187, 140, 0.42),
      inset 0 0 46px rgba(196, 148, 64, 0.11),
      0 0 0 2px rgba(255, 209, 102, 0.16),
      0 0 18px rgba(255, 209, 102, 0.1);
  }
  100% {
    transform: scale(1.006);
    border-color: rgba(255, 209, 102, 0.9);
    box-shadow:
      inset 0 0 0 1px rgba(213, 187, 140, 0.42),
      inset 0 0 46px rgba(196, 148, 64, 0.11),
      0 0 0 5px rgba(255, 209, 102, 0.2),
      0 0 36px rgba(255, 209, 102, 0.34);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow:
      0 6px 0 var(--accent-shadow),
      0 14px 26px var(--glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.62),
      inset 0 -3px 0 rgba(0, 0, 0, 0.08);
  }
  50% {
    box-shadow:
      0 6px 0 var(--accent-shadow),
      0 0 0 6px rgba(255, 255, 255, 0.055),
      0 18px 38px var(--glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -3px 0 rgba(0, 0, 0, 0.08);
  }
}

@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -4vh, 0) rotate(0deg) scale(0.7);
  }
  8% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    transform: translate3d(calc(var(--x, 0px) * 0.55), 52vh, 0) rotate(calc(var(--r, 540deg) * 0.55)) scale(1);
  }
  100% {
    opacity: 0.9;
    transform: translate3d(var(--x, 0px), 108vh, 0) rotate(var(--r, 540deg)) scale(1);
  }
}

/* ------------------------------------------------------------
   5. 動態類別
   ------------------------------------------------------------ */
.screen.is-active {
  animation: screen-in 0.34s cubic-bezier(0.2, 0.72, 0.3, 1) both;
}

.animate-pop {
  animation: pop-in 0.42s cubic-bezier(0.2, 0.84, 0.34, 1.2) both;
}

.animate-slide-up {
  animation: slide-up 0.38s cubic-bezier(0.2, 0.72, 0.3, 1) both;
}

.animate-shake {
  animation: shake 0.46s ease-in-out both;
}

.coin-pop {
  animation: coin-pop 0.72s cubic-bezier(0.2, 0.84, 0.34, 1.2) both;
}

.is-highlighted {
  outline: 3px solid rgba(255, 209, 102, 0.7);
  outline-offset: 4px;
  animation: highlight-pulse 0.9s ease-in-out infinite alternate;
}

.is-highlighted:where(svg, path, circle, rect, line, polygon) {
  outline: none;
}

.play-visual.is-highlighted {
  z-index: 2;
  outline: none;
  border-color: rgba(255, 209, 102, 0.9);
  animation: visual-highlight 0.9s ease-in-out infinite alternate;
  transform-origin: center;
}

.star--on,
.star.is-on,
.star--filled {
  transform-origin: center;
  animation: star-pop 0.45s cubic-bezier(0.2, 0.84, 0.34, 1.2) both;
}

.result__stars > * {
  transform-origin: center;
  animation: star-pop 0.52s cubic-bezier(0.2, 0.84, 0.34, 1.2) both;
}

.result__stars > :nth-child(1) {
  animation-delay: 0.06s;
}

.result__stars > :nth-child(2) {
  animation-delay: 0.17s;
}

.result__stars > :nth-child(3) {
  animation-delay: 0.28s;
}

.result__stars > :nth-child(4) {
  animation-delay: 0.39s;
}

.result__stars > :nth-child(5) {
  animation-delay: 0.5s;
}

.result__stars .star--on,
.result__stars .is-on {
  animation:
    star-pop 0.52s cubic-bezier(0.2, 0.84, 0.34, 1.2) both,
    star-glow 2.8s ease-in-out 0.8s infinite;
}

.result__rewards > *,
.reward,
.reward-chip {
  animation: reward-rise 0.46s cubic-bezier(0.2, 0.78, 0.32, 1.1) both;
}

.result__rewards > :nth-child(2) {
  animation-delay: 0.1s;
}

.result__rewards > :nth-child(3) {
  animation-delay: 0.2s;
}

.result__rewards > :nth-child(4) {
  animation-delay: 0.3s;
}

.level-card--current {
  animation: level-pulse 2.5s ease-in-out infinite;
}

.level-card--unlock,
.level-card.is-unlocking,
.level-card.is-unlocked {
  animation: level-unlock 0.72s cubic-bezier(0.2, 0.82, 0.3, 1.1) both;
}

.level-card--locked:hover {
  animation: none;
}

.confetti__piece {
  will-change: transform, opacity;
}

.toast.is-visible {
  animation: toast-in 0.34s cubic-bezier(0.2, 0.82, 0.3, 1.15) both;
}

.feedback.is-visible {
  animation: feedback-in 0.36s cubic-bezier(0.2, 0.82, 0.3, 1.12) both;
}

.steps-panel.is-open {
  animation: sheet-up 0.38s cubic-bezier(0.16, 0.82, 0.28, 1.04) both;
}

.scratchpad-overlay:not([hidden]) {
  animation: scratchpad-fade 0.22s ease-out both;
}

.planet--spin {
  animation: planet-spin 42s linear infinite;
}

.planet__ring {
  transform-origin: center;
}

.btn--glow {
  animation: pulse-glow 2.8s ease-in-out infinite;
}

/* 飛船／奇奇的點擊回饋，JS 可加在容器上 */
.is-bouncing {
  animation: bob 0.7s ease-in-out;
}

/* 提示中的元素被高亮時，也給顏色以外的粗框提示 */
.is-highlighted::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* 動態偏好：減少動態時保留狀態，不讓任何內容被藏在動畫初始影格 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .starfield,
  .starfield::before,
  .starfield::after,
  .nebula,
  .cosmos::after,
  .planet,
  .planet__ring,
  .ship__emoji,
  .ship__trail,
  .mascot,
  .mascot__eye,
  .mascot__eyes,
  .level-card--current,
  .btn--glow,
  .animate-shake,
  .is-highlighted {
    animation: none !important;
  }

  .screen.is-active,
  .animate-pop,
  .animate-slide-up,
  .coin-pop,
  .feedback.is-visible,
  .toast.is-visible,
  .steps-panel.is-open,
  .result__stars > *,
  .result__stars .star--on,
  .result__rewards > *,
  .reward,
  .reward-chip {
    opacity: 1 !important;
    transform: none !important;
  }

  .feedback.is-visible,
  .toast.is-visible {
    transform: translate(-50%, 0) !important;
  }

  .is-highlighted {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }

  .confetti-layer {
    display: none !important;
  }

  .choice-btn.is-wrong {
    animation: none !important;
  }
}