/* =========================
   从托福封面返回目录时的进场动画
   蓝色圆幕收缩的同时，内容依次弹入
========================= */

body.arrive-from-cover .pixel-scene,
body.arrive-from-cover .pixel-mountain,
body.arrive-from-cover .pixel-tree {
  opacity: 0;

  animation: sceneEnter 0.45s ease forwards;
}

body.arrive-from-cover .game-nav {
  opacity: 0;
  transform: translateY(-14px);

  animation: navEnter 0.45s ease 0.05s forwards;
}

body.arrive-from-cover .sidebar-left {
  opacity: 0;
  transform: translateX(-18px);

  animation: sidebarEnter 0.45s ease 0.1s forwards;
}

body.arrive-from-cover .sidebar-right {
  opacity: 0;
  transform: translateX(18px);

  animation: sidebarEnter 0.45s ease 0.12s forwards;
}

body.arrive-from-cover .menu-item {
  opacity: 0;
  transform: translateY(18px);

  animation: menuItemEnter 0.45s ease forwards;
}

body.arrive-from-cover .menu-item:nth-child(1) {
  animation-delay: 0.14s;
}

body.arrive-from-cover .menu-item:nth-child(2) {
  animation-delay: 0.22s;
}

body.arrive-from-cover .recent-section {
  opacity: 0;
  transform: translateY(12px);

  animation: menuItemEnter 0.45s ease 0.26s forwards;
}


@keyframes sceneEnter {
  to {
    opacity: 1;
  }
}

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

@keyframes sidebarEnter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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


@media (prefers-reduced-motion: reduce) {
  body.arrive-from-cover .pixel-scene,
  body.arrive-from-cover .pixel-mountain,
  body.arrive-from-cover .pixel-tree,
  body.arrive-from-cover .game-nav,
  body.arrive-from-cover .sidebar-left,
  body.arrive-from-cover .sidebar-right,
  body.arrive-from-cover .menu-item,
  body.arrive-from-cover .recent-section {
    animation: none;

    opacity: 1;
    transform: none;
  }
}