.page-shell-detail {
  background:
    radial-gradient(circle at 50% 24%, #dd2a20 0%, #b9140f 55%, #7f0704 100%);
}

.detail-stage {
  background: #af120d;
}

/* Coordinates are the exact pixel bounds from 3（750小格式）.psd. */
.detail-background {
  z-index: 0;
  inset: 0;
  width: 750px;
  height: 1335px;
}

.detail-letter-paper {
  z-index: 1;
  top: 198px;
  left: 41px;
  width: 668px;
  height: 886px;
}

.detail-quote {
  z-index: 2;
  top: 273px;
  left: 146px;
  width: 468px;
  height: 114px;
}

.detail-letter-text {
  z-index: 2;
  top: 426px;
  left: 128px;
  width: 498px;
  height: 500px;
}

.detail-title {
  z-index: 3;
  top: 91px;
  left: 234px;
  width: 284px;
  height: 46px;
}

.detail-click-flip {
  z-index: 4;
  top: 987px;
  left: 406px;
  width: 140px;
  height: 24px;
}

.detail-back {
  z-index: 4;
  top: 1150px;
  left: 81px;
  width: 279px;
  height: 80px;
}

.detail-listen-echo {
  z-index: 4;
  top: 1149px;
  left: 387px;
  width: 282px;
  height: 84px;
}

/* Initial state matches 红色家书H5创意设计方案.png, then reveals the letter content. */
.detail-letter-paper,
.detail-quote,
.detail-letter-text,
.detail-title,
.detail-click-flip,
.detail-back,
.detail-listen-echo {
  opacity: 0;
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}

.detail-letter-paper {
  animation-name: detail-paper-in;
  animation-duration: 0.52s;
  animation-delay: 0.58s;
}

.detail-title {
  animation-name: detail-reveal-in;
  animation-duration: 0.5s;
  animation-delay: 0.82s;
}

.detail-quote {
  animation-name: detail-reveal-in;
  animation-duration: 0.5s;
  animation-delay: 1.04s;
}

.detail-letter-text {
  animation-name: detail-reveal-in;
  animation-duration: 0.56s;
  animation-delay: 1.26s;
}

.detail-click-flip {
  animation-name: detail-reveal-in;
  animation-duration: 0.5s;
  animation-delay: 1.52s;
}

.detail-back,
.detail-listen-echo {
  animation-name: detail-reveal-in;
  animation-duration: 0.5s;
  animation-delay: 1.74s;
}

@keyframes detail-paper-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes detail-reveal-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .detail-letter-paper,
  .detail-quote,
  .detail-letter-text,
  .detail-title,
  .detail-click-flip,
  .detail-back,
  .detail-listen-echo {
    animation: none;
    opacity: 1;
    transform: none;
  }
}