/* Opening scene v1: the existing journey and character controller stay intact. */
.journey-welcome {
  --opening-book: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --opening-title: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}

.journey-welcome .welcome-scene .welcome-copy {
  text-align: center;
  z-index: 2;
  padding: clamp(16px, 3.4vh, 36px) clamp(28px, 3.5vw, 56px) !important;
}

.journey-welcome .welcome-copy .journey-kicker {
  font-family: var(--opening-title);
  font-size: clamp(11px, 1.65vh, 15px);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
  color: #523811;
  text-align: center;
}

.journey-welcome .welcome-copy h1 {
  font-family: var(--opening-title);
  font-size: clamp(29px, 7.3vh, 62px);
  font-weight: 500;
  line-height: 1.07;
  letter-spacing: -.035em;
  margin: clamp(6px, 1.5vh, 16px) 0 clamp(10px, 2vh, 20px);
  text-align: center;
  color: #332010;
  text-shadow: 0 1px #f6dc9a66;
}

.journey-welcome .welcome-copy h1 > span {
  font-family: var(--opening-book);
  font-size: .49em;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .02em;
  margin-bottom: clamp(3px, .8vh, 9px);
}

.journey-welcome .welcome-copy h1 > em {
  font-family: var(--opening-book);
  font-size: 1.27em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  color: #604015;
}

.journey-welcome .welcome-copy > p {
  font-family: var(--opening-book);
  font-size: clamp(16px, 3vh, 24px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  margin: clamp(8px, 1.5vh, 16px) auto;
  max-width: 32em;
  color: #372410;
}

.journey-welcome .welcome-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: clamp(12px, 2.1vh, 22px);
  text-align: center;
}

.journey-welcome .welcome-copy .welcome-actions > button {
  border: 22px solid transparent !important;
  border-image: url('./assets/interface/opening-frame-v1.svg') 48 fill / 22px / 2px stretch !important;
  border-radius: 0 !important;
  background: #193a2d !important;
  color: #f8e6b5 !important;
  font-family: var(--opening-title) !important;
  font-size: clamp(12px, 1.9vh, 17px) !important;
  font-weight: 600 !important;
  line-height: 1.4;
  letter-spacing: .035em;
  padding: 3px 9px !important;
  min-height: 64px !important;
  max-width: 100%;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 7px 12px #3a210733;
  text-shadow: 0 1px 2px #081a12;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.journey-welcome .welcome-actions > .opening-cta {
  width: 100%;
}

.journey-welcome .welcome-copy .welcome-actions > button:hover {
  background: #193a2d !important;
  filter: brightness(1.13);
  transform: translateY(-1px);
  box-shadow: 0 9px 16px #3a210744;
}

.journey-welcome .welcome-copy .welcome-actions > button:active {
  transform: translateY(1px);
  filter: brightness(.97);
}

.journey-welcome .welcome-copy .welcome-actions > button:focus-visible {
  outline: 3px solid #253e2c;
  outline-offset: 4px;
}

.journey-welcome .welcome-copy .welcome-actions > .journey-quiet {
  font-size: clamp(11px, 1.7vh, 15px) !important;
}

.journey-welcome .welcome-actions > small {
  font-family: var(--opening-book);
  font-size: clamp(12px, 1.8vh, 15px);
  line-height: 1.3;
  text-align: center;
}

/* Canvas stagePlacement anchors the soles at 97% of its height.
   The canvas is 84% of this column, so the cliff's standing surface and
   contact shadow meet it at 81.48%. The cliff continues below the viewport. */
.journey-welcome .welcome-guide.pujangga-stage {
  container-type: size;
  isolation: isolate;
  overflow: visible;
}

.journey-welcome .pujangga-frame {
  height: 84%;
  align-self: flex-start;
  z-index: 2;
}

.journey-welcome .pujangga-stage::before {
  content: '';
  position: absolute;
  left: -18%;
  top: calc(81.48% - 36.507cqw);
  width: 148%;
  aspect-ratio: 3 / 2;
  background: url('./assets/interface/opening-cliff-v1.webp') center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 0;
}

.journey-welcome .pujangga-stage::after {
  content: '';
  position: absolute;
  left: 36%;
  top: calc(81.48% - 1.2cqh);
  width: 28%;
  height: 3cqh;
  border-radius: 50%;
  background: radial-gradient(ellipse, #18140ede 0%, #18140e80 40%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 1;
}

.journey-welcome .pujangga-frame > .character-canvas {
  filter: drop-shadow(2px 4px 4px #12231b30);
}

.journey-welcome .welcome-footer {
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 5px #031812;
}

@media (max-height: 539px) {
  .journey-welcome .welcome-scene .welcome-copy {
    padding: 14px 28px !important;
  }
  .journey-welcome .welcome-copy h1 {
    margin: 5px 0 8px;
  }
  .journey-welcome .welcome-copy > p {
    font-size: 16px;
    margin: 7px auto;
  }
  .journey-welcome .welcome-actions {
    margin-top: 10px;
    gap: 7px;
  }
  .journey-welcome .welcome-copy .welcome-actions > button {
    border-width: 18px !important;
    border-image-width: 18px !important;
    min-height: 58px !important;
    padding: 1px 7px !important;
    font-size: 12px !important;
  }
}

@media (max-height: 389px) and (orientation: landscape) {
  .journey-welcome .welcome-scene .welcome-copy {
    padding: 12px 26px !important;
  }
  .journey-welcome .welcome-copy h1 {
    font-size: 27px;
    margin-block: 4px 7px;
  }
  .journey-welcome .welcome-copy > p {
    font-size: 15px;
    margin-block: 6px;
  }
  .journey-welcome .welcome-actions {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-welcome .welcome-copy .welcome-actions > button {
    transition: none;
    transform: none;
  }
}