/* ============================================================================
   Scene-specific staging. 1920×1080 design space.
   ========================================================================= */

/* ============================ 01 — THE COVER ============================== */
.s1 {
  background:
    radial-gradient(120% 120% at 18% -10%, #fffaf1 0%, #f6ecda 38%, #ecdcc0 66%, #ddc8a6 100%);
}
.s1-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 72% 42%, rgba(255, 246, 226, .85), rgba(255, 246, 226, 0) 60%),
    radial-gradient(50% 40% at 88% 78%, rgba(214, 186, 140, .55), transparent 70%);
}
.s1-ribs {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(120, 92, 52, .045) 0 1px,
    rgba(255, 255, 255, 0) 1px 148px
  );
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .8), rgba(0, 0, 0, .2) 55%, transparent 80%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, .8), rgba(0, 0, 0, .2) 55%, transparent 80%);
}
.s1-sun {
  width: 900px;
  height: 900px;
  left: 990px;
  top: 90px;
  background: radial-gradient(circle, rgba(255, 244, 218, .95) 0%, rgba(255, 232, 186, .5) 42%, rgba(255, 226, 176, 0) 70%);
  filter: blur(30px);
  mix-blend-mode: screen;
}
.s1-floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 32%;
  background: linear-gradient(to top, rgba(150, 118, 74, .28), rgba(180, 150, 105, .06) 55%, transparent);
}
.s1-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(98deg, rgba(251, 245, 234, .92) 20%, rgba(251, 245, 234, .55) 36%, rgba(251, 245, 234, 0) 55%);
}

.s1-copy {
  position: absolute;
  z-index: 4;
  left: 128px;
  top: 146px;
  width: 790px;
}
.s1-kicker { margin-bottom: 40px; }
.s1-title {
  font-size: 104px;
  line-height: .97;
  color: #1d2227;
}
.s1-em { font-style: italic; color: var(--gold-deep); font-weight: 500; }
.s1-rule {
  width: 92px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), rgba(200, 161, 85, .1));
  margin: 34px 0 26px;
  transform-origin: left center;
}
.s1-lede { width: 545px; font-size: 22px; color: #4c5259; }
.s1-badges { display: flex; gap: 12px; margin-top: 38px; }
.s1-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(34, 38, 43, .45);
}
.s1-meta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(34, 38, 43, .3); }

.s1-foot {
  position: absolute;
  left: 128px;
  bottom: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(34, 38, 43, .5);
}
.s1-foot b { color: var(--gold-deep); font-weight: 500; }
.s1-foot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(200, 161, 85, .16);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(200, 161, 85, .14); }
  50% { box-shadow: 0 0 0 8px rgba(200, 161, 85, .04); }
}

.s1-book {
  position: absolute;
  z-index: 2;
  left: 1280px;
  top: 360px;
  width: 320px;
  height: 450px;
  filter: drop-shadow(0 40px 70px rgba(60, 42, 20, .28));
}
.s1-worlds { position: absolute; inset: 0; z-index: 1; }
.s1-beams {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}
.s1-beams::before {
  content: '';
  position: absolute;
  left: 830px;
  top: 240px;
  width: 800px;
  height: 640px;
  background: radial-gradient(closest-side, rgba(255, 248, 226, .9), rgba(255, 240, 200, .3) 45%, rgba(255, 236, 190, 0) 72%);
  filter: blur(30px);
  mix-blend-mode: screen;
}
.s1-beams::after {
  content: '';
  position: absolute;
  left: 1250px;
  top: 300px;
  width: 150px;
  height: 620px;
  background: linear-gradient(to bottom, rgba(255, 250, 232, .5), rgba(255, 246, 220, 0));
  transform: rotate(14deg);
  filter: blur(26px);
  mix-blend-mode: screen;
}

/* world cards */
.s1-worlds { position: absolute; inset: 0; }
.wcard {
  position: absolute;
  width: 138px;
  margin: 0;
  transform: rotate(var(--r));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 26px 34px rgba(70, 48, 20, .26));
}
.wcard-img {
  position: relative;
  width: 138px;
  height: 184px;
  overflow: hidden;
  border: 1px solid rgba(200, 161, 85, .55);
  background: #201a14;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.wcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(1.02) sepia(.12);
  transition: filter 1s;
}
.wcard-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(247, 236, 218, .35), rgba(255, 244, 224, 0) 55%),
    radial-gradient(70% 60% at 40% 20%, rgba(255, 240, 210, .25), transparent 70%);
  mix-blend-mode: screen;
}
.wcard figcaption {
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(34, 38, 43, .58);
}

/* opened spread pages */
.pg-head {
  font-family: var(--sans);
  font-size: 7px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(90, 72, 46, .5);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(90, 72, 46, .14);
}
.pg-num {
  font-family: var(--serif);
  font-size: 22px;
  color: rgba(90, 72, 46, .55);
  letter-spacing: .1em;
  margin-top: 22px;
}
.pg-title {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.12;
  color: rgba(48, 38, 24, .84);
  margin-top: 12px;
}
.pg-rule { width: 34px; height: 1px; background: rgba(90, 72, 46, .4); margin-top: 14px; }
.pg-body {
  font-family: var(--serif);
  font-size: 9.5px;
  line-height: 1.75;
  color: rgba(60, 48, 30, .62);
  margin-top: 14px;
  width: 92%;
}
.pg-folio {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: var(--serif);
  font-size: 10px;
  color: rgba(90, 72, 46, .45);
}
.pg-lines { display: flex; flex-direction: column; gap: 10px; padding-top: 26px; }
.pg-lines i {
  display: block;
  height: 1px;
  background: rgba(90, 72, 46, .18);
}
.pg-lines i:nth-child(2n) { width: 88%; }
.pg-lines i:nth-child(3n) { width: 94%; }
.pg-lines i:last-child { width: 56%; }