/* ==========================================================================
   动效：入场编排 · 待机呼吸 · 奖励反馈
   - 入场动画统一用 backwards 填充，结束后不覆盖悬停等交互状态；
   - 结算、章节与结尾的开场动画可点击任意处跳过（.skip-intro）；
   - 系统开启“减少动态效果”时，动画与过渡都变为瞬时。
   - 游戏中的信号本身不加任何动画，目标与干扰保持同等显著。
   ========================================================================== */

/* 页面切换 --------------------------------------------------------------- */
.screen:not([hidden]) {
  animation: fade-in 0.4s var(--ease-out) backwards;
}

/* 首页 */
.home-screen .hero-copy h1 {
  animation: rise-in 0.7s 0.05s var(--ease-out) backwards;
}
.home-screen .hero-actions {
  animation: rise-in 0.7s 0.16s var(--ease-out) backwards;
}
.home-screen .scene-porthole {
  animation: porthole-in 0.9s 0.1s var(--ease-out) backwards;
}
.home-screen .scene-caption {
  animation: slide-in 0.7s 0.45s var(--ease-out) backwards;
}
.home-screen .companion {
  animation: hop-in 0.8s 0.55s var(--ease-spring) backwards;
}
.journey-heading,
.chapter-tabs,
.solar-overview,
.home-bottom {
  animation: rise-in 0.6s 0.28s var(--ease-out) backwards;
}
.mission-card {
  animation: rise-in 0.5s var(--ease-out) backwards;
  animation-delay: calc(0.3s + var(--i, 0) * 0.06s);
}
.mission-card.current {
  animation:
    rise-in 0.5s var(--ease-out) backwards,
    current-glow 2.8s 1.2s ease-in-out infinite;
  animation-delay: calc(0.3s + var(--i, 0) * 0.06s), 1.2s;
}
.hero-planet > svg,
.hero-planet > .earth-moon-art,
#briefing-tower > svg,
#briefing-tower > .earth-moon-art {
  animation: float 9s ease-in-out infinite;
}
.hero-copy::before,
.scene-sky i {
  animation: twinkle 3.4s ease-in-out infinite;
}
.scene-sky i:nth-child(2) {
  animation-delay: -1.2s;
  animation-duration: 4.2s;
}
.scene-sky i:nth-child(3) {
  animation-delay: -2.3s;
}
.scene-sky i:nth-child(4) {
  animation-delay: -0.7s;
  animation-duration: 2.8s;
}
.companion .bunny-art {
  animation: bunny-idle 5.6s ease-in-out infinite;
}
#home-companion.greeting .bunny-art {
  animation: bunny-greeting 0.85s ease-in-out;
}
#home-companion.greeting::after {
  animation: bunny-sparkles 0.85s ease-out;
}

/* 图鉴 */
.atlas-screen .screen-title,
.atlas-solar,
.atlas-filters {
  animation: rise-in 0.6s var(--ease-out) backwards;
}
.atlas-solar {
  animation-delay: 0.08s;
}
.atlas-filters {
  animation-delay: 0.14s;
}
.atlas-cards > * {
  animation: rise-in 0.55s var(--ease-out) backwards;
  animation-delay: calc(0.2s + var(--i, 0) * 0.05s);
}

/* 关前规则 */
.briefing-screen .back-button,
.briefing-layout {
  animation: rise-in 0.6s var(--ease-out) backwards;
}
.briefing-porthole {
  animation: porthole-in 0.8s 0.1s var(--ease-out) backwards;
}
.briefing-content > * {
  animation: rise-in 0.55s var(--ease-out) backwards;
}
.briefing-content > :nth-child(2) { animation-delay: 0.08s; }
.briefing-content > :nth-child(3) { animation-delay: 0.14s; }
.briefing-content > :nth-child(4) { animation-delay: 0.2s; }
.briefing-content > :nth-child(n + 5) { animation-delay: 0.26s; }
.example.confirmed::before {
  animation: stamp-in 0.42s var(--ease-spring) backwards;
}
.example.wrong {
  animation: shake 0.32s;
}
.practice-hint.wrong {
  animation: shake 0.32s;
}

/* 游戏 */
.play-screen:not([hidden]) {
  animation-duration: 0.3s;
}
.play-screen .play-hud {
  animation: hud-in 0.55s var(--ease-out) backwards;
}
.play-screen .play-bottom {
  animation: rise-in 0.55s 0.1s var(--ease-out) backwards;
}
.battle-ship img {
  animation: hover-ship 8s ease-in-out infinite;
}
.battle-ship::before {
  animation: radar-breathe 5s ease-in-out infinite;
}
.paused .battle-ship img,
.paused .battle-ship::before,
.paused .timer-wrap strong {
  animation-play-state: paused;
}
.timer-wrap.urgent strong {
  animation: urgent-pulse 1s ease-in-out infinite;
}
.countdown > strong.tick {
  animation: count-pop 0.9s var(--ease-out);
}
.countdown.go > strong {
  animation: go-out 0.55s var(--ease-out) forwards;
}
.judgment.bump {
  animation: judgment-bump 0.3s var(--ease-spring);
}
.live-count strong.bump {
  animation: count-bump 0.36s var(--ease-spring);
}
.observation-image.pulse {
  animation: image-pulse 0.6s var(--ease-out);
}

/* 结算：星星依次盖章、成绩环、知识卡滑入 */
.result-screen .result-content {
  animation: rise-in 0.6s var(--ease-out) backwards;
}
.result-screen .overline,
.result-screen #result-title {
  animation: rise-in 0.55s 0.15s var(--ease-out) backwards;
}
.result-stars span {
  animation: star-slot 0.4s var(--ease-out) backwards;
  animation-delay: calc(0.25s + var(--i, 1) * 0.1s);
}
.result-stars span.earned {
  animation: star-pop 0.62s var(--ease-spring) backwards;
  animation-delay: calc(0.3s + var(--i, 1) * 0.24s);
}
.score-medallion {
  animation: porthole-in 0.7s 0.25s var(--ease-out) backwards;
}
.score-readout,
.result-details,
.result-progress {
  animation: rise-in 0.5s 0.5s var(--ease-out) backwards;
}
#result-card {
  animation: card-in 0.7s 0.55s var(--ease-out) backwards;
}
/* 首次收藏：卡片翻入，盖章，再扫一道光 */
#result-card.fresh {
  animation: card-flip 0.85s 0.55s var(--ease-out) backwards;
}
#result-card.fresh .new-card-stamp {
  animation: stamp-in 0.42s 1.45s var(--ease-spring) backwards;
}
#result-card.fresh .knowledge-card::after {
  animation: card-sheen 1s 1.55s var(--ease-in-out) both;
}
.result-buttons {
  animation: rise-in 0.5s 0.85s var(--ease-out) backwards;
}

/* 章节完成：徽章落下并扫过一道光 */
.chapter-rays {
  animation: rays-spin 60s linear infinite;
}
.chapter-screen .chapter-art {
  animation: porthole-in 0.8s var(--ease-out) backwards;
}
.chapter-medal {
  animation: badge-drop 0.9s 0.45s var(--ease-spring) backwards;
}
.chapter-medal .badge-shine,
.chapter-stamp.current .badge-shine {
  animation: shine-sweep 1.3s 1.2s var(--ease-in-out) both;
}
.chapter-stamp.current .badge-art {
  animation: badge-glow 2.4s 1.6s ease-in-out infinite;
}
.chapter-screen .overline,
#chapter-title,
#chapter-line,
.earned-badge,
.chapter-network,
.chapter-cinematic > .action-button,
.chapter-options {
  animation: rise-in 0.55s var(--ease-out) backwards;
}
#chapter-title { animation-delay: 0.25s; }
#chapter-line { animation-delay: 0.32s; }
.chapter-progress { animation: rise-in 0.55s 0.4s var(--ease-out) backwards; }
.earned-badge { animation-delay: 0.8s; }
.chapter-network { animation-delay: 0.95s; }
.chapter-cinematic > .action-button { animation-delay: 1.05s; }
.chapter-options { animation-delay: 1.1s; }

/* 结尾：太阳系缩小成银河系里的一个点 */
.ending-content > * {
  animation: rise-in 0.7s var(--ease-out) backwards;
}
.ending-content > :nth-child(2) { animation-delay: 0.1s; }
.ending-content > :nth-child(3) { animation-delay: 0.2s; }
.ending-content > :nth-child(n + 4) { animation-delay: 0.35s; }
.ending-cosmos.playing .cosmos-solar {
  animation: solar-recede 2.8s 3.4s var(--ease-in-out) forwards;
}
.ending-cosmos.playing .cosmos-galaxy {
  animation: galaxy-appear 2.8s 3.4s var(--ease-in-out) forwards;
}
.ending-badges .badge-art {
  animation: badge-drop 0.8s var(--ease-spring) backwards;
  animation-delay: calc(0.6s + var(--i, 0) * 0.12s);
}

/* 弹窗 */
dialog#modal[open] {
  animation: dialog-in 0.36s var(--ease-spring);
}
dialog[open]::backdrop {
  animation: fade-in 0.3s ease;
}
.loading .brand-mark {
  animation: float 3s ease-in-out infinite;
}
.loading i {
  animation: loading-sweep 1.1s linear infinite;
}

/* 点击跳过开场动画 */
.skip-intro,
.skip-intro *,
.skip-intro *::before,
.skip-intro *::after {
  animation-delay: 0s !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* 关键帧 ----------------------------------------------------------------- */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateX(28px) rotate(1.5deg);
  }
}
@keyframes card-flip {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-70deg) translateX(36px) scale(0.92);
  }
  55% {
    opacity: 1;
  }
}
@keyframes card-sheen {
  from {
    transform: translateX(-130%);
  }
  to {
    transform: translateX(340%);
  }
}
@keyframes hud-in {
  from {
    opacity: 0;
    transform: translate(-50%, -18px);
  }
}
@keyframes porthole-in {
  from {
    opacity: 0;
    transform: scale(0.86);
  }
}
@keyframes hop-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}
@keyframes float {
  50% {
    transform: translateY(-9px);
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.7) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) rotate(20deg);
  }
}
@keyframes bunny-idle {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  30% {
    transform: translateY(-4px) rotate(-1.5deg);
  }
  60% {
    transform: translateY(0) scale(1.012, 0.99);
  }
  80% {
    transform: translateY(-2px) rotate(1deg);
  }
}
@keyframes bunny-greeting {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  18% {
    transform: translateY(2px) scale(1.05, 0.94);
  }
  42% {
    transform: translateY(-22px) rotate(-9deg);
  }
  65% {
    transform: translateY(-8px) rotate(8deg);
  }
  82% {
    transform: translateY(0) scale(1.04, 0.96);
  }
}
@keyframes bunny-sparkles {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.5) rotate(0deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-26px) scale(1.2) rotate(40deg);
  }
}
@keyframes bunny-greeting-gentle {
  50% {
    filter: brightness(1.25);
  }
}
@keyframes current-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(246, 217, 138, 0.22),
      0 18px 36px -14px rgba(246, 200, 90, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(246, 217, 138, 0.1),
      0 18px 44px -12px rgba(246, 200, 90, 0.75);
  }
}
@keyframes stamp-in {
  from {
    opacity: 0;
    transform: scale(1.6) rotate(-12deg);
  }
}
@keyframes shake {
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}
@keyframes hover-ship {
  50% {
    transform: translateY(-12px) rotate(-3deg);
  }
}
@keyframes radar-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}
@keyframes urgent-pulse {
  50% {
    transform: scale(1.14);
  }
}
@keyframes count-pop {
  from {
    opacity: 0;
    transform: scale(1.5);
  }
  30% {
    opacity: 1;
  }
}
@keyframes go-out {
  from {
    opacity: 1;
    transform: scale(0.9);
  }
  35% {
    opacity: 1;
    transform: scale(1.08);
  }
  to {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes judgment-bump {
  from {
    transform: translate(-50%, 0) scale(1.12);
  }
}
@keyframes count-bump {
  40% {
    transform: scale(1.35);
    color: #fff;
  }
}
@keyframes image-pulse {
  30% {
    box-shadow:
      inset 0 0 0 2px rgba(149, 230, 181, 0.8),
      0 0 22px rgba(149, 230, 181, 0.55);
  }
}
@keyframes star-slot {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}
@keyframes star-pop {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-40deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.22) rotate(8deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes rays-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes badge-drop {
  0% {
    opacity: 0;
    transform: translateY(-70px) scale(1.5) rotate(-24deg);
  }
  55% {
    opacity: 1;
    transform: translateY(6px) scale(0.94) rotate(6deg);
  }
  100% {
    transform: none;
  }
}
@keyframes shine-sweep {
  from {
    transform: translateX(-60px);
  }
  to {
    transform: translateX(150px);
  }
}
@keyframes badge-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(246, 217, 138, 0));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(246, 217, 138, 0.75));
  }
}
@keyframes solar-recede {
  75% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(19.14%) scale(0.035);
  }
}
@keyframes galaxy-appear {
  from {
    opacity: 0;
    transform: scale(3.4);
  }
  45% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes loading-sweep {
  from {
    background-position: -100% 0, 0 0;
  }
  to {
    background-position: 200% 0, 0 0;
  }
}

/* 减少动态效果 ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #home-companion.greeting .bunny-art {
    animation: bunny-greeting-gentle 0.6s ease !important;
  }
}
.reduced *,
.reduced *::before,
.reduced *::after {
  animation-delay: 0s !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
.reduced #home-companion.greeting .bunny-art {
  animation: bunny-greeting-gentle 0.6s ease !important;
}