/* The street and the revealed story have separate visual entry points. */
.dream-before main > section:not(#dream-loop),
.dream-before footer,
.dream-before #dream-webgl,
.dream-before #ambient-canvas,
.dream-before #idle-whisper,
.dream-after main > #dream-loop,
.dream-before > #awakening,
.dream-after > #awakening {
  display: none !important;
}

.dream-before .site-header,
.dream-before .site-header.is-scrolled {
  height: 74px;
  color: #fff8e8;
  background: linear-gradient(180deg, rgba(3, 20, 15, .77), rgba(3, 20, 15, 0));
  box-shadow: none;
  backdrop-filter: none;
}

.dream-before .dream-loop { min-height: 100svh; }
.dream-before .loop-stage { height: max(700px, 100svh); }
.dream-before .loop-hint { display: none; }
.dream-after .wish-section { overflow-x: clip; }

.dream-before::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background: #07130f;
  opacity: 0;
  transition: opacity .65s ease;
}

.dream-before.is-transitioning::after { opacity: 1; }

.after-prologue {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(88svh, 900px);
  overflow: hidden;
  background: #0d201c;
  color: #fff;
}

.after-prologue-image,
.after-prologue-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.after-prologue-image {
  background: url("../官图/IMG_0152.PNG") center 38% / cover no-repeat;
  transform: scale(1.04);
  animation: after-arrive 2.6s ease-out both;
}

.after-prologue-veil {
  background: linear-gradient(90deg, rgba(5, 20, 17, .9) 0%, rgba(7, 25, 20, .76) 39%, rgba(9, 30, 23, .24) 76%),
    linear-gradient(0deg, rgba(4, 19, 15, .7), transparent 34%);
}

.after-prologue-copy {
  position: relative;
  z-index: 1;
  width: min(680px, 54vw);
  margin: 110px 0 80px max(7vw, 28px);
  animation: after-copy 1.4s .25s ease-out both;
}

.after-eyebrow {
  margin: 0 0 28px;
  color: #d9e7b5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .17em;
}

.after-clues {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  color: #d3ebbb;
  font-size: 13px;
}

.after-clues span {
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(212, 235, 187, .65);
}

.after-clues i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e4cb7b;
}

.after-prologue h1 {
  margin: 0;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(44px, 5.2vw, 84px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  text-wrap: balance;
}

.after-prologue-copy > p:not(.after-eyebrow) {
  max-width: 460px;
  margin: 28px 0 34px;
  color: rgba(255, 255, 255, .84);
  font-size: 16px;
  line-height: 1.9;
}

.after-enter {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 42px;
  min-width: 198px;
  min-height: 50px;
  padding: 11px 18px;
  border: 1px solid #dcecc5;
  background: #e6f0d6;
  color: #163b2f;
  font-size: 13px;
  font-weight: 700;
  transition: background .25s ease, transform .25s ease;
}

.after-enter:hover {
  background: #fff8df;
  transform: translateY(-2px);
}

.after-enter span { font-size: 20px; }

.after-music-note {
  display: block;
  min-height: 20px;
  margin-top: 13px;
  color: #e4eecb;
  font-size: 12px;
}

.after-dawn {
  position: absolute;
  right: 5vw;
  bottom: 36px;
  color: rgba(255, 250, 222, .75);
  font-family: Georgia, serif;
  font-size: 15px;
}

@keyframes after-arrive {
  from { filter: brightness(.14); transform: scale(1.14); }
  to { filter: brightness(1); transform: scale(1.04); }
}

@keyframes after-copy {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .dream-before .site-header,
  .dream-before .site-header.is-scrolled { height: 62px; }
  .dream-before .loop-stage { height: max(680px, 100svh); }
  .dream-system .keepsake-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 300px;
    aspect-ratio: auto;
  }
  .after-prologue { align-items: end; min-height: 83svh; }
  .after-prologue-image { background-position: center; }
  .after-prologue-veil {
    background: linear-gradient(0deg, rgba(5, 19, 16, .97) 0%, rgba(5, 19, 16, .84) 34%, rgba(5, 19, 16, .1) 85%);
  }
  .after-prologue-copy { width: calc(100% - 44px); margin: 115px 22px 66px; }
  .after-eyebrow { margin-bottom: 16px; font-size: 10px; }
  .after-clues { margin-bottom: 14px; font-size: 11px; }
  .after-prologue h1 { font-size: clamp(42px, 10vw, 60px); }
  .after-prologue-copy > p:not(.after-eyebrow) { margin: 19px 0 23px; font-size: 13px; }
  .after-dawn { right: 20px; bottom: 19px; font-size: 12px; }
}

@media (max-width: 720px) and (max-height: 720px) {
  .dream-before .loop-stage { height: 100svh; }
}

@media (prefers-reduced-motion: reduce) {
  .dream-before::after { transition: none; }
  .after-prologue-image,
  .after-prologue-copy { animation: none; }
}