/* ==========================================================================
   屏1 · 封面
   ========================================================================== */

.cover {
  /* 竖屏：一切尺寸以舞台宽度为基准 */
  --w-figure: 62cqw;
  --w-title-main: 84cqw;
  --w-title-sub: 44cqw;
  --gap-figure-title: 26cqw;
  --gap-title-inner: 2.6cqw;
  --float-amp: -2.4cqw;
  --float-amp-figure: -2.8cqw;
  --enter-figure: 14cqw;
  --enter-main: -16cqw;
  --enter-sub: 10cqw;
  --pad-top: 15cqh;

  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + var(--pad-top)) calc(env(safe-area-inset-right, 0px) + 5cqw)
    env(safe-area-inset-bottom, 0px) calc(env(safe-area-inset-left, 0px) + 5cqw);
}

/* 横屏：改以舞台高度为基准，保证整组内容不被裁切 */
@container (orientation: landscape) {
  .cover {
    --w-figure: 26cqh;
    --w-title-main: 34cqh;
    --w-title-sub: 18cqh;
    --gap-figure-title: 11cqh;
    --gap-title-inner: 1.2cqh;
    --float-amp: -1cqh;
    --float-amp-figure: -1.2cqh;
    --enter-figure: 6cqh;
    --enter-main: -7cqh;
    --enter-sub: 4cqh;
    --pad-top: 6cqh;
  }
}

.cover__slot {
  opacity: 0;
  display: flex;
  justify-content: center;
}

.cover__slot--figure {
  width: var(--w-figure);
  margin-bottom: var(--gap-figure-title);
  --enter-shift: var(--enter-figure);
  --enter-scale: 0.86;
  --enter-delay: 0.1s;
}

.cover__slot--main {
  width: var(--w-title-main);
  margin-bottom: var(--gap-title-inner);
  --enter-shift: var(--enter-main);
  --enter-scale: 0.74;
  --enter-delay: 0.46s;
}

.cover__slot--sub {
  width: var(--w-title-sub);
  --enter-shift: var(--enter-sub);
  --enter-scale: 0.8;
  --enter-delay: 0.72s;
}

.is-ready .cover__slot {
  animation: enter-pop var(--dur-enter) var(--ease-pop) var(--enter-delay) both;
}

.is-ready .cover__slot > img {
  animation-name: float-loop;
  animation-duration: var(--loop-float);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.is-ready .cover__slot--figure > img {
  animation-name: float-figure;
  animation-delay: -0.5s;
}

.is-ready .cover__slot--main > img {
  animation-delay: -1.7s;
}

.is-ready .cover__slot--sub > img {
  animation-delay: -2.9s;
}

/* 按压反馈用独立的 scale 属性 —— transform 已被浮动动画占用，
   普通 transform 声明会被动画覆盖，而 scale 是独立通道不受影响。 */
.cover__slot--figure {
  transition: scale 0.18s ease-out;
}

.cover__slot--figure:active {
  scale: 0.94;
}

.cover__slot--figure:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
  border-radius: 24px;
}

.cover__slot > img {
  width: 100%;
}


/* -------- 轻触提示 -------- */

.cover__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 5cqh);
  text-align: center;
  font-family: var(--font-cartoon);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: hint-breathe 2.6s ease-in-out infinite;
}

.is-ready .cover__hint {
  opacity: 1;
}

@keyframes hint-breathe {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 0.95;
  }
}


/* -------- 退场：文字先淡出，人物放大冲出 -------- */

.stage.is-leaving .cover__slot--figure {
  animation: figure-dash 0.6s cubic-bezier(0.5, 0, 0.9, 0.6) both;
}

.stage.is-leaving .cover__slot--main,
.stage.is-leaving .cover__slot--sub {
  animation: title-leave 0.34s ease-in both;
}

.stage.is-leaving .cover__hint {
  opacity: 0;
  animation: none;
}

@keyframes figure-dash {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(3.4) translateY(-4cqh);
  }
}

@keyframes title-leave {
  to {
    opacity: 0;
    transform: translateY(-5cqw) scale(0.88);
  }
}


/* -------- 关键帧：入场与浮动 -------- */

@keyframes enter-pop {
  from {
    opacity: 0;
    transform: translateY(var(--enter-shift)) scale(var(--enter-scale));
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes float-loop {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(var(--float-amp));
  }
}

@keyframes float-figure {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(var(--float-amp-figure)) rotate(-1deg);
  }
}


/* -------- 降低动态 -------- */

@media (prefers-reduced-motion: reduce) {
  .is-ready .cover__slot,
  .is-ready .cover__slot > img,
  .cover__hint {
    animation: none;
  }

  .cover__slot {
    opacity: 1;
  }

  .cover__hint {
    opacity: 0.8;
  }
}