/* Opening page between the private entrance and the first chapter. */

.scene--prologue {
  color: #4d3234;
  background: #d8b18e;
}

.prologue__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 248, 211, 0.94) 0 8%, rgba(255, 226, 180, 0.4) 31%, transparent 58%),
    linear-gradient(139deg, #e1bea0 0%, #f1d5b3 42%, #dca382 74%, #b5776e 100%);
}

.prologue__atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    radial-gradient(circle, rgba(89, 54, 48, 0.24) 0 1px, transparent 1.4px),
    repeating-linear-gradient(117deg, transparent 0 51px, rgba(255, 248, 229, 0.18) 52px, transparent 53px 103px);
  background-size: 22px 22px, auto;
  mask-image: linear-gradient(90deg, #000, transparent 86%);
}

.prologue__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 76% 22%, rgba(255, 248, 220, 0.27), transparent 23rem),
    linear-gradient(90deg, rgba(255, 247, 229, 0.36), transparent 52%);
}

.scene--prologue .scene__top {
  padding: 7px 10px;
  background: rgba(255, 248, 232, 0.28);
  backdrop-filter: blur(7px);
}

.scene--prologue .scene__top b {
  color: #914b55;
}

.prologue__layout {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: min(920px, calc(100vw - 42px));
  height: 100%;
  padding: 76px 0 66px;
  margin: 0 auto;
  text-align: center;
}

.prologue__card {
  position: relative;
  width: min(760px, 84vw);
  padding: clamp(46px, 5.8vw, 76px);
  background:
    linear-gradient(90deg, transparent 0 22px, rgba(144, 91, 72, 0.06) 23px, transparent 24px),
    linear-gradient(124deg, rgba(255, 255, 255, 0.58), transparent 41%),
    rgba(255, 250, 237, 0.95);
  border: 1px solid rgba(106, 62, 54, 0.2);
  box-shadow:
    0 38px 86px rgba(92, 51, 45, 0.23),
    10px 11px 0 rgba(255, 246, 224, 0.24);
  transform: rotate(-0.35deg);
}

.prologue__card::before {
  content: "";
  position: absolute;
  inset: 16px;
  pointer-events: none;
  border: 1px solid rgba(106, 62, 54, 0.1);
}

.prologue__ornament {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: -96px auto 22px;
  color: #fff7e9;
  background: #a4505e;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(255, 249, 236, 0.92),
    0 0 0 6px rgba(106, 62, 54, 0.15);
  font-size: 25px;
  transform: rotate(-5deg);
}

.prologue__kicker {
  margin: 0 0 20px;
  color: #9c6258;
  font-family: var(--story-hand);
  font-size: clamp(14px, 1.5vw, 17px);
  letter-spacing: 0.2em;
}

.prologue__card h2 {
  margin: 0;
  color: #4b3032;
  font-family: var(--story-display);
  font-size: clamp(42px, 5.9vw, 72px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.02em;
}

.prologue__card h2 span {
  display: block;
}

.prologue__card h2 span:last-child {
  color: #974a58;
}

.next-button--prologue {
  margin-top: clamp(30px, 4.6vh, 46px);
  color: #fff9ee;
  background: #984b59;
  border-color: #b1616e;
}

.next-button--prologue:hover {
  color: #fff9ee;
  background: #713744;
  border-color: #713744;
}

.scene--prologue.is-active .prologue__card {
  animation: prologue-card-in 1100ms cubic-bezier(0.16, 0.74, 0.22, 1) both;
}

.scene--prologue.is-active .prologue__ornament {
  animation: prologue-seal-in 760ms cubic-bezier(0.16, 0.74, 0.22, 1) 620ms both;
}

.scene--prologue .stage__footer {
  color: rgba(83, 49, 46, 0.62);
}

.scene--prologue .scene-number b,
.scene--prologue .stage__hint {
  color: #8b4d51;
}

.scene--prologue .scene-number i {
  background: rgba(83, 49, 46, 0.22);
}

@keyframes prologue-card-in {
  from {
    opacity: 0;
    translate: 0 28px;
    scale: 0.965;
    filter: blur(7px);
  }

  58% {
    opacity: 1;
    filter: blur(1px);
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}

@keyframes prologue-seal-in {
  from {
    opacity: 0;
    translate: 0 -12px;
    scale: 0.72;
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (max-width: 680px) {
  .prologue__layout {
    width: calc(100vw - 32px);
    padding: 63px 0 52px;
  }

  .prologue__card {
    width: calc(100vw - 44px);
    padding: 47px 23px 38px;
  }

  .prologue__ornament {
    margin-top: -84px;
  }

  .prologue__card h2 {
    font-size: clamp(35px, 10.4vw, 48px);
    line-height: 1.38;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene--prologue.is-active .prologue__card,
  .scene--prologue.is-active .prologue__ornament {
    animation: none;
  }
}