/* sky journey layers (fixed, behind content) */
.sky {
  position: fixed; inset: 0; z-index: -3;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bot) 100%);
}
.sun {
  position: fixed; left: var(--sun-x); top: var(--sun-y);
  width: var(--sun-r); height: var(--sun-r);
  transform: translate(-50%, -50%); z-index: -2; border-radius: 50%;
  background: radial-gradient(circle, var(--sun-c) 0%, transparent 65%);
  opacity: var(--sun-o); filter: blur(6px);
}
.moon {
  position: fixed; right: 16%; top: 13%; width: 58px; height: 58px;
  border-radius: 50%; z-index: -2;
  background: radial-gradient(circle at 38% 35%, #fdfdff 0%, #cfd8ec 58%, #aeb9d6 100%);
  box-shadow: 0 0 60px 18px rgba(190, 205, 255, 0.35);
  opacity: var(--moon-o);
}
#backdrop {
  position: fixed; inset: 0; z-index: -1;
  width: var(--visual-vw, 100vw); height: var(--visual-vh, 100dvh);
}

/* scene scaffold */
.scene {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: clamp(96px, 15vh, 170px) 24px;
}
.scene-inner { width: min(720px, 100%); text-align: center; }
.scene-split {
  width: min(1040px, 100%);
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 7vw, 92px); align-items: center; text-align: left;
}

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 750; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--glass); border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
}
.kicker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-soft); box-shadow: 0 0 10px var(--brand-soft);
}

.scene-title {
  font-size: clamp(32px, 5.4vw, 54px); line-height: 1.12;
  font-weight: 800; letter-spacing: 0; text-wrap: balance;
  text-shadow: 0 2px 36px rgba(2, 6, 16, 0.35);
  margin-bottom: 18px;
}
.scene-sub {
  font-size: clamp(16px, 2.1vw, 20px); line-height: 1.62;
  color: var(--ink-2); max-width: 48ch; margin: 0 auto 34px;
  text-wrap: pretty; text-shadow: 0 1px 22px rgba(2, 6, 16, 0.3);
}
.scene-split .scene-sub { margin-left: 0; margin-bottom: 0; }
.sentence-break { white-space: normal; }

.scroll-hint {
  position: absolute; bottom: calc(26px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: 0; color: var(--ink-3); white-space: nowrap;
}
.scroll-hint-arrow {
  width: 1.5px; height: 34px;
  background: linear-gradient(180deg, transparent, var(--ink-2));
  animation: hintdrop 2.2s ease-in-out infinite;
}
@keyframes hintdrop {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(8px); opacity: 1; }
}

@media (max-width: 760px) {
  .scene-split { grid-template-columns: 1fr; text-align: center; }
  .scene-split .scene-sub { margin: 0 auto; }
}
@media (min-width: 1200px) {
  .sentence-break { white-space: pre-line; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-arrow { animation: none; }
}