:root {
  --bg: #050b12;
  --deep: #0b1825;
  --sand: #e6d8bd;
  --sand-soft: rgba(230, 216, 189, 0.72);
  --line: rgba(230, 216, 189, 0.12);
  --amber: #e2b16a;
  --teal: #6d9ba1;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050b12;
  color: var(--sand);
  font-family: Georgia, "Times New Roman", serif;
}

body::before {
  content: none;
}

body::after {
  content: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.experience {
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 300ms ease,
    visibility 0s linear 300ms;
}

.experience[data-stage="0"] .panel-prologue,
.experience[data-stage="1"] .panel-chapter,
.experience[data-stage="2"] .panel-chapter-02,
.experience[data-stage="3"] .panel-chapter-03 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 300ms ease,
    visibility 0s linear 0s;
}

body.transition-gate-forward .panel {
  transition: none !important;
}

body.transition-gate-backward .panel {
  transition: none !important;
}

.scene-shell {
  position: absolute;
  inset: 0;
  isolation: isolate;
  will-change: transform, filter, opacity;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.panel-arrival {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
}

.panel-arrival-chapter {
  background:
    radial-gradient(circle at 10% 50%, rgba(255, 249, 235, 0.34), transparent 15%),
    radial-gradient(circle at 16% 50%, rgba(247, 228, 189, 0.28), transparent 20%),
    linear-gradient(90deg, rgba(226, 177, 106, 0.5), rgba(106, 152, 162, 0.24) 14%, rgba(0, 0, 0, 0) 34%);
}

.panel-arrival-chapter-two {
  background:
    radial-gradient(circle at 12% 54%, rgba(194, 234, 242, 0.28), transparent 14%),
    radial-gradient(circle at 18% 56%, rgba(247, 228, 189, 0.22), transparent 18%),
    linear-gradient(90deg, rgba(109, 155, 161, 0.44), rgba(226, 177, 106, 0.16) 18%, rgba(0, 0, 0, 0) 42%);
}

.panel-arrival-chapter-three {
  background:
    radial-gradient(circle at 10% 50%, rgba(247, 235, 214, 0.24), transparent 16%),
    radial-gradient(circle at 18% 50%, rgba(201, 221, 226, 0.18), transparent 20%),
    linear-gradient(90deg, rgba(233, 217, 185, 0.24), rgba(121, 147, 154, 0.14) 18%, rgba(0, 0, 0, 0) 42%);
}

.panel-arrival-prologue {
  background:
    radial-gradient(circle at 90% 50%, rgba(255, 249, 235, 0.32), transparent 15%),
    radial-gradient(circle at 84% 50%, rgba(247, 228, 189, 0.24), transparent 20%),
    linear-gradient(270deg, rgba(226, 177, 106, 0.46), rgba(106, 152, 162, 0.2) 14%, rgba(0, 0, 0, 0) 34%);
}

body.is-transitioning.transition-forward .panel-arrival-chapter {
  animation: chapter-edge-reveal-left 760ms cubic-bezier(0.18, 0.8, 0.14, 1) forwards;
}

body.is-transitioning.transition-forward .panel-arrival-chapter-two {
  animation: chapter-edge-reveal-left 760ms cubic-bezier(0.18, 0.8, 0.14, 1) forwards;
}

body.is-transitioning.transition-forward .panel-arrival-chapter-three {
  animation: chapter-edge-reveal-left 760ms cubic-bezier(0.18, 0.8, 0.14, 1) forwards;
}

body.is-transitioning.transition-backward .panel-arrival-prologue {
  animation: chapter-edge-reveal-right 760ms cubic-bezier(0.18, 0.8, 0.14, 1) forwards;
}

body.is-transitioning.transition-backward .panel-arrival-chapter-two {
  animation: chapter-edge-reveal-right 760ms cubic-bezier(0.18, 0.8, 0.14, 1) forwards;
}

.chapter-transition {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity 220ms ease;
  will-change: opacity;
  transform: translateZ(0);
  perspective: 1800px;
}

.chapter-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 24% 50%, rgba(247, 228, 189, 0.24), transparent 18%),
    linear-gradient(90deg, rgba(255, 241, 208, 0.12), rgba(255, 241, 208, 0));
}

.chapter-transition::after {
  content: "";
  position: absolute;
  inset: -18%;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 28% 50%, rgba(255, 247, 226, 0.86), transparent 24%),
    radial-gradient(circle at 38% 50%, rgba(247, 228, 189, 0.68), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255, 247, 228, 0.28), transparent 58%),
    radial-gradient(circle at 54% 48%, rgba(255, 255, 250, 0.12), transparent 72%),
    linear-gradient(90deg, rgba(255, 245, 220, 0.14), rgba(255, 245, 220, 0));
  transform: translateZ(0) scale(1.08);
  filter: blur(5px);
}

.chapter-transition i,
.chapter-transition b,
.chapter-transition .portal-door {
  position: absolute;
  display: block;
  opacity: 0;
}

.chapter-transition i,
.chapter-transition b {
  inset: -22%;
}

.chapter-transition .portal-door {
  top: 39.5%;
  width: min(5.4vw, 78px);
  height: min(21.2vw, 304px);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 22, 30, 0.98), rgba(5, 10, 16, 1)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0) 42%);
  box-shadow:
    inset 0 0 0 1px rgba(241, 232, 205, 0.03),
    inset 0 0 14px rgba(0, 0, 0, 0.16);
  z-index: 3;
}

.chapter-transition .portal-door-left {
  left: 65.5%;
  transform: translate(calc(-100% - 1px), -50%) scale(0.78) rotateY(0deg) translateZ(0);
  transform-origin: right center;
  border-radius: 999px 18px 12px 18px / 999px 18px 12px 18px;
}

.chapter-transition .portal-door-right {
  left: 65.5%;
  transform: translate(1px, -50%) scale(0.78) rotateY(0deg) translateZ(0);
  transform-origin: left center;
  border-radius: 18px 999px 18px 12px / 18px 999px 18px 12px;
}

.transition-ripple-field {
  position: absolute;
  inset: -10%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.transition-ripple {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: var(--outer-width, 1.6px) solid rgba(184, 232, 240, 0.16);
  opacity: 0;
  transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, 0px))) scale(0.08);
  box-shadow: 0 0 32px rgba(184, 232, 240, 0.08);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.transition-ripple::before,
.transition-ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
}

.transition-ripple::before {
  inset: -18%;
  background: radial-gradient(circle, rgba(184, 232, 240, var(--glow-opacity, 0.08)), rgba(184, 232, 240, 0) 64%);
}

.transition-ripple::after {
  border: var(--inner-width, 1px) solid rgba(246, 224, 180, 0.08);
  transform: scale(var(--inner-scale, 0.58));
}

.chapter-transition i {
  background:
    radial-gradient(
      circle at center,
      rgba(255, 252, 245, 0.96),
      rgba(255, 244, 220, 0.88) 20%,
      rgba(247, 228, 189, 0.66) 42%,
      rgba(255, 244, 214, 0.28) 66%,
      rgba(255, 244, 214, 0) 100%
    );
  mix-blend-mode: screen;
  transform: scale(1.42) translateZ(0);
  filter: blur(12px);
}

.chapter-transition b {
  background:
    radial-gradient(
      circle at center,
      rgba(255, 241, 214, 0.34),
      rgba(247, 228, 189, 0.2) 34%,
      rgba(247, 228, 189, 0.06) 58%,
      rgba(247, 228, 189, 0) 100%
    );
  mix-blend-mode: screen;
  transform: scale(1.5) translateZ(0);
  filter: blur(18px);
}

body.transition-backward .chapter-transition::before {
  background:
    radial-gradient(circle at 78% 50%, rgba(247, 228, 189, 0.24), transparent 18%),
    linear-gradient(270deg, rgba(255, 241, 208, 0.12), rgba(255, 241, 208, 0));
}

body.transition-backward .chapter-transition::after {
  background:
    radial-gradient(circle at 72% 50%, rgba(255, 247, 226, 0.86), transparent 24%),
    radial-gradient(circle at 62% 50%, rgba(247, 228, 189, 0.68), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255, 247, 228, 0.28), transparent 58%),
    radial-gradient(circle at 46% 48%, rgba(255, 255, 250, 0.12), transparent 72%),
    linear-gradient(270deg, rgba(255, 245, 220, 0.14), rgba(255, 245, 220, 0));
}

.chapter-transition span {
  position: absolute;
  left: -24vw;
  top: 50%;
  transform-origin: left center;
  transform: translateY(-50%) scaleX(0);
  background: linear-gradient(90deg, rgba(247, 228, 189, 0.98), rgba(226, 177, 106, 0.94), rgba(0, 0, 0, 0));
  box-shadow:
    0 0 18px rgba(226, 177, 106, 0.42),
    0 0 56px rgba(106, 152, 162, 0.2),
    0 0 110px rgba(247, 228, 189, 0.18);
}

body.transition-backward .chapter-transition span {
  left: auto;
  right: -24vw;
  transform-origin: right center;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(226, 177, 106, 0.94), rgba(247, 228, 189, 0.98));
}

.chapter-transition span:nth-child(1) {
  width: 62vw;
  height: 6px;
  margin-top: -3.5rem;
}

.chapter-transition span:nth-child(2) {
  width: 88vw;
  height: 16px;
}

.chapter-transition span:nth-child(3) {
  width: 54vw;
  height: 5px;
  margin-top: 3.8rem;
}

body.is-transitioning .chapter-transition {
  opacity: 1;
}

body.is-transitioning .chapter-transition::before {
  animation: transition-wash 700ms cubic-bezier(0.18, 0.8, 0.14, 1) forwards;
}

body.is-transitioning .chapter-transition::after {
  animation: transition-bloom 640ms cubic-bezier(0.16, 0.84, 0.14, 1) forwards;
}

body.is-transitioning .chapter-transition i {
  animation: transition-full-flash 920ms cubic-bezier(0.16, 0.84, 0.14, 1) forwards;
}

body.is-transitioning .chapter-transition b {
  animation: transition-whiteout 700ms cubic-bezier(0.18, 0.8, 0.14, 1) forwards;
}

body.is-transitioning .chapter-transition span:nth-child(1) {
  animation: transition-slice-a 720ms cubic-bezier(0.2, 0.75, 0.14, 1) forwards;
}

body.is-transitioning .chapter-transition span:nth-child(2) {
  animation: transition-slice-b 760ms cubic-bezier(0.16, 0.82, 0.12, 1) forwards;
}

body.is-transitioning .chapter-transition span:nth-child(3) {
  animation: transition-slice-c 740ms cubic-bezier(0.18, 0.8, 0.14, 1) forwards;
}

body.transition-gate-forward .chapter-transition span {
  animation: none !important;
  opacity: 0 !important;
}

body.transition-gate-backward .chapter-transition span {
  animation: none !important;
  opacity: 0 !important;
}

body.transition-gate-forward .chapter-transition::before {
  background: none;
}

body.transition-gate-backward .chapter-transition::before {
  background: none;
}

body.transition-gate-forward .chapter-transition::after {
  background: none;
}

body.transition-gate-backward .chapter-transition::after {
  background: none;
}

body.transition-gate-forward .chapter-transition i {
  background: none;
  filter: none;
}

body.transition-gate-backward .chapter-transition i {
  background: none;
  filter: none;
}

body.transition-gate-forward .chapter-transition b {
  background:
    radial-gradient(circle at 65.5% 39.5%, rgba(0, 0, 0, 0) 4%, rgba(2, 6, 12, 0.08) 10%, rgba(2, 6, 12, 0.86) 25%, rgba(2, 6, 12, 0.98) 42%, rgba(2, 6, 12, 1) 70%);
  filter: blur(2px);
  transform-origin: 65.5% 39.5%;
}

body.transition-gate-backward .chapter-transition b {
  background:
    radial-gradient(circle at 65.5% 39.5%, rgba(0, 0, 0, 0) 4%, rgba(2, 6, 12, 0.08) 10%, rgba(2, 6, 12, 0.86) 25%, rgba(2, 6, 12, 0.98) 42%, rgba(2, 6, 12, 1) 70%);
  filter: blur(2px);
  transform-origin: 65.5% 39.5%;
}

body.is-transitioning.transition-gate-forward .chapter-transition::before {
  animation: none;
}

body.is-transitioning.transition-gate-backward .chapter-transition::before {
  animation: none;
}

body.is-transitioning.transition-gate-forward .chapter-transition::after {
  animation: none;
}

body.is-transitioning.transition-gate-backward .chapter-transition::after {
  animation: none;
}

body.is-transitioning.transition-gate-forward .chapter-transition i {
  animation: none;
}

body.is-transitioning.transition-gate-backward .chapter-transition i {
  animation: none;
}

body.is-transitioning.transition-gate-forward .chapter-transition b {
  animation: gate-door-dark-zoom 1760ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

body.is-transitioning.transition-gate-backward .chapter-transition b {
  animation: gate-door-dark-return 1500ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

body.is-transitioning.transition-gate-forward .chapter-transition .portal-door-left {
  animation: gate-door-left-open 1180ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

body.is-transitioning.transition-gate-forward .chapter-transition .portal-door-right {
  animation: gate-door-right-open 1180ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

body.transition-water-forward .chapter-transition::before,
body.transition-water-forward .chapter-transition::after,
body.transition-water-forward .chapter-transition i,
body.transition-water-forward .chapter-transition b,
body.transition-water-forward .chapter-transition > span {
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body.transition-water-forward .transition-ripple-field {
  opacity: 1;
}

body.transition-water-backward .chapter-transition::before,
body.transition-water-backward .chapter-transition::after,
body.transition-water-backward .chapter-transition i,
body.transition-water-backward .chapter-transition b,
body.transition-water-backward .chapter-transition > span,
body.transition-water-backward .chapter-transition .portal-door {
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

body.transition-water-backward .transition-ripple-field {
  opacity: 1;
}

body.is-transitioning.transition-water-forward .transition-ripple-field .transition-ripple {
  animation: transition-water-ripple-outer var(--duration) linear both;
  animation-delay: var(--delay);
}

body.is-transitioning.transition-water-forward .transition-ripple-field .transition-ripple::before {
  animation: transition-water-ripple-glow var(--duration) linear both;
  animation-delay: var(--delay);
}

body.is-transitioning.transition-water-forward .transition-ripple-field .transition-ripple::after {
  animation: transition-water-ripple-inner var(--duration) linear both;
  animation-delay: var(--delay);
}

body.is-transitioning.transition-water-backward .transition-ripple-field .transition-ripple {
  animation: transition-water-ripple-outer var(--duration) linear both;
  animation-delay: var(--delay);
}

body.is-transitioning.transition-water-backward .transition-ripple-field .transition-ripple::before {
  animation: transition-water-ripple-glow var(--duration) linear both;
  animation-delay: var(--delay);
}

body.is-transitioning.transition-water-backward .transition-ripple-field .transition-ripple::after {
  animation: transition-water-ripple-inner var(--duration) linear both;
  animation-delay: var(--delay);
}

body.is-transitioning.transition-water-forward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-shell {
  animation: chapter-water-ripple-depart 1320ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

body.is-transitioning.transition-water-forward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-overlay,
body.is-transitioning.transition-water-forward .experience[data-stage="2"] .panel-chapter-02 .panel-nav {
  animation: chapter-water-ui-depart 760ms ease forwards;
}

body.is-transitioning.transition-water-forward .experience[data-stage="3"] .panel-chapter-03 .chapter-three-shell {
  animation: chapter-water-ripple-arrive 900ms cubic-bezier(0.18, 0.82, 0.14, 1) forwards;
}

body.transition-hall-forward .chapter-transition::before,
body.transition-hall-forward .chapter-transition::after,
body.transition-hall-forward .chapter-transition i,
body.transition-hall-forward .chapter-transition b,
body.transition-hall-forward .chapter-transition > span,
body.transition-hall-forward .chapter-transition .portal-door,
body.transition-hall-forward .chapter-transition .transition-ripple-field,
body.transition-hall-backward .chapter-transition::before,
body.transition-hall-backward .chapter-transition::after,
body.transition-hall-backward .chapter-transition i,
body.transition-hall-backward .chapter-transition b,
body.transition-hall-backward .chapter-transition > span,
body.transition-hall-backward .chapter-transition .portal-door,
body.transition-hall-backward .chapter-transition .transition-ripple-field {
  animation: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

body.transition-hall-forward .chapter-transition::before,
body.transition-hall-forward .chapter-transition::after,
body.transition-hall-backward .chapter-transition::before,
body.transition-hall-backward .chapter-transition::after {
  content: none !important;
}

body.transition-hall-forward .panel-arrival,
body.transition-hall-backward .panel-arrival,
body.is-transitioning.transition-hall-forward .panel-arrival,
body.is-transitioning.transition-hall-backward .panel-arrival {
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  visibility: hidden !important;
  display: none !important;
}

body.is-transitioning.transition-hall-forward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-shell {
  animation: chapter-hall-forward-depart 340ms ease forwards;
}

body.is-transitioning.transition-hall-forward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-overlay,
body.is-transitioning.transition-hall-forward .experience[data-stage="2"] .panel-chapter-02 .panel-nav {
  animation: chapter-hall-forward-ui-depart 260ms ease forwards;
}

body.is-transitioning.transition-hall-backward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-shell {
  animation: chapter-hall-backward-arrive 620ms cubic-bezier(0.2, 0.8, 0.18, 1) forwards;
}

body.is-transitioning.transition-water-backward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-shell {
  animation: chapter-water-ripple-arrive 980ms cubic-bezier(0.18, 0.82, 0.14, 1) forwards;
}

.panel-nav {
  position: absolute;
  z-index: 11;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.92rem 1rem;
  color: var(--sand);
  border: 1px solid rgba(230, 216, 189, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.01)),
    rgba(9, 16, 26, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(226, 177, 106, 0.04),
    0 18px 36px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.panel-next {
  right: 3rem;
}

.chapter-next {
  right: 3rem;
}

.panel-next::after {
  content: "\2192";
  font-size: 1rem;
}

.panel-prev {
  left: 3rem;
}

.panel-prev::after {
  content: "\2190";
  font-size: 1rem;
}

.panel-nav:hover {
  transform: translateY(calc(-50% - 2px));
  border-color: rgba(226, 177, 106, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(226, 177, 106, 0.08),
    0 24px 42px rgba(0, 0, 0, 0.26);
}

.prologue-overlay,
.chapter-overlay {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  padding: 5vh clamp(1.25rem, 3vw, 3rem);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2rem;
}

.prologue-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 34%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 22px,
      rgba(255, 255, 255, 0.02) 23px
    );
  mix-blend-mode: soft-light;
}

.chapter-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.016), transparent 32%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 34px,
      rgba(255, 255, 255, 0.012) 35px
    );
  mix-blend-mode: soft-light;
}

.chapter-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 34%, rgba(2, 6, 12, 0.28) 100%),
    linear-gradient(
      180deg,
      rgba(2, 6, 12, 0.2),
      transparent 24%,
      transparent 76%,
      rgba(2, 6, 12, 0.3)
    );
}

.chapter-two-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 24%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 46px,
      rgba(255, 255, 255, 0.012) 47px
    );
  mix-blend-mode: soft-light;
}

.chapter-two-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 72%, transparent 22%, rgba(2, 7, 14, 0.22) 72%, rgba(2, 7, 14, 0.34) 100%),
    linear-gradient(
      180deg,
      rgba(2, 7, 14, 0.08),
      transparent 22%,
      transparent 74%,
      rgba(2, 7, 14, 0.24)
    );
}

.chapter-three-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 22%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 56px,
      rgba(255, 255, 255, 0.012) 57px
    );
  mix-blend-mode: soft-light;
}

.chapter-three-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 56%, transparent 18%, rgba(2, 7, 14, 0.18) 68%, rgba(2, 7, 14, 0.34) 100%),
    linear-gradient(
      180deg,
      rgba(2, 7, 14, 0.22),
      transparent 18%,
      transparent 72%,
      rgba(2, 7, 14, 0.28)
    );
}

.chapter-shell {
  transform-origin: 65.5% 39.5%;
}

.chapter-two-shell {
  transform-origin: 50% 52%;
}

.chapter-three-shell {
  transform-origin: 50% 54%;
}

body.transition-gate-forward .panel-arrival-chapter,
body.transition-gate-forward .panel-arrival-chapter-two {
  animation: none !important;
  opacity: 0 !important;
}

body.is-transitioning.transition-gate-forward .experience[data-stage="1"] .panel-chapter .chapter-shell {
  animation: chapter-door-zoom 760ms cubic-bezier(0.18, 0.78, 0.14, 1) forwards;
}

body.is-transitioning.transition-gate-forward .experience[data-stage="1"] .panel-chapter .chapter-overlay,
body.is-transitioning.transition-gate-forward .experience[data-stage="1"] .panel-chapter .panel-nav {
  animation: chapter-door-ui-fade 360ms ease forwards;
}

body.is-transitioning.transition-gate-backward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-shell {
  animation: chapter-two-door-depart 420ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

body.is-transitioning.transition-gate-backward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-overlay,
body.is-transitioning.transition-gate-backward .experience[data-stage="2"] .panel-chapter-02 .panel-nav {
  animation: chapter-two-ui-depart 340ms ease forwards;
}

body.is-transitioning.transition-gate-backward .experience[data-stage="1"] .panel-chapter .chapter-shell {
  animation: chapter-door-zoom-out 880ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

body.is-transitioning.transition-gate-backward .experience[data-stage="1"] .panel-chapter .chapter-overlay,
body.is-transitioning.transition-gate-backward .experience[data-stage="1"] .panel-chapter .panel-nav {
  animation: chapter-door-ui-return 820ms ease forwards;
}

body.is-transitioning.transition-gate-forward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-shell {
  animation: chapter-two-door-arrive 520ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

body.is-transitioning.transition-gate-forward .experience[data-stage="2"] .panel-chapter-02 .chapter-two-overlay,
body.is-transitioning.transition-gate-forward .experience[data-stage="2"] .panel-chapter-02 .panel-nav {
  animation: chapter-two-ui-arrive 620ms cubic-bezier(0.2, 0.78, 0.14, 1) forwards;
}

.prologue-hero {
  align-self: center;
  max-width: min(40rem, 92vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.prologue-title {
  margin: 0;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.92;
  font-weight: 500;
  white-space: nowrap;
}

.prologue-description {
  margin: 2.2rem 0 0;
  max-width: 35rem;
  color: rgba(243, 232, 210, 0.72);
  line-height: 1.8;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  word-break: keep-all;
  overflow-wrap: normal;
}

.prologue-ticker,
.chapter-ticker {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  font-family: "Courier New", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.prologue-ticker {
  color: rgba(243, 232, 210, 0.45);
}

.prologue-ticker p,
.chapter-ticker p {
  margin: 0;
}

.prologue-ticker p::after,
.chapter-ticker p::after {
  content: " /";
  margin-left: 1.25rem;
  color: rgba(240, 195, 107, 0.32);
}

.prologue-ticker p:last-child::after,
.chapter-ticker p:last-child::after {
  content: "";
  margin: 0;
}

.chapter-overlay {
  padding: 6vh clamp(1.4rem, 3.8vw, 4rem) 4vh;
  gap: 2.2rem;
}

.chapter-two-overlay {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  padding: 6vh 100px 4vh clamp(1.4rem, 4vw, 4.4rem);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2.2rem;
}

.chapter-three-overlay {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  padding: 6vh clamp(1.4rem, 3.8vw, 4rem) 4vh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2.2rem;
}

.chapter-hero {
  align-self: end;
  max-width: min(33rem, 68vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 1rem 0 0;
}

.chapter-two-hero {
  align-self: end;
  justify-self: end;
  width: max-content;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

.chapter-three-hero {
  align-self: end;
  max-width: min(33rem, 68vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 1rem 0 0;
}

.chapter-eyebrow {
  margin: 0 0 0.9rem;
  color: rgba(230, 215, 185, 0.42);
  font-family: "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.chapter-title {
  margin: 0;
  font-size: clamp(3.6rem, 8.4vw, 7rem);
  line-height: 0.92;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.04em;
  text-shadow: 0 20px 48px rgba(0, 0, 0, 0.38);
}

.chapter-description {
  margin: 2.4rem 0 0;
  max-width: 25rem;
  color: rgba(230, 215, 185, 0.68);
  line-height: 1.95;
  font-size: clamp(0.96rem, 1vw, 1.02rem);
  word-break: keep-all;
  overflow-wrap: normal;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}

.chapter-two-title {
  margin: 0;
  display: block;
  width: max-content;
  font-size: clamp(3.8rem, 8.8vw, 7.4rem);
  line-height: 0.92;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.04em;
  color: rgba(233, 241, 235, 0.96);
  text-shadow:
    0 0 22px rgba(140, 213, 226, 0.1),
    0 20px 48px rgba(0, 0, 0, 0.34);
}

.chapter-two-description {
  margin: 2.4rem 0 0;
  max-width: 26rem;
  color: rgba(222, 232, 228, 0.7);
  line-height: 1.92;
  font-size: clamp(0.98rem, 1.02vw, 1.06rem);
  word-break: keep-all;
  overflow-wrap: normal;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.chapter-three-title {
  margin: 0;
  display: block;
  width: max-content;
  font-size: clamp(3.8rem, 8.6vw, 7.2rem);
  line-height: 0.92;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.04em;
  color: rgba(239, 232, 214, 0.96);
  text-shadow:
    0 0 18px rgba(232, 219, 188, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.34);
}

.chapter-three-description {
  margin: 2.4rem 0 0;
  max-width: 29rem;
  color: rgba(227, 223, 212, 0.72);
  line-height: 1.92;
  font-size: clamp(0.98rem, 1.02vw, 1.06rem);
  word-break: keep-all;
  overflow-wrap: normal;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

.chapter-ticker {
  color: rgba(230, 215, 185, 0.28);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  padding-bottom: 0.45rem;
}

.chapter-two-ticker {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(206, 224, 229, 0.28);
  font-family: "Courier New", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 0.45rem;
}

.chapter-two-ticker p {
  margin: 0;
}

.chapter-two-ticker p::after {
  content: " /";
  margin-left: 1.25rem;
  color: rgba(135, 204, 215, 0.28);
}

.chapter-two-ticker p:last-child::after {
  content: "";
  margin: 0;
}

.chapter-three-ticker {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(224, 220, 209, 0.28);
  font-family: "Courier New", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 0.45rem;
}

.chapter-three-ticker p {
  margin: 0;
}

.chapter-three-ticker p::after {
  content: " /";
  margin-left: 1.25rem;
  color: rgba(198, 192, 176, 0.26);
}

.chapter-three-ticker p:last-child::after {
  content: "";
  margin: 0;
}

@keyframes transition-slice-a {
  0% {
    transform: translateY(-50%) scaleX(0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scaleX(2.8);
    opacity: 0;
  }
}

@keyframes transition-slice-b {
  0% {
    transform: translateY(-50%) scaleX(0);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scaleX(3.1);
    opacity: 0;
  }
}

@keyframes transition-slice-c {
  0% {
    transform: translateY(-50%) scaleX(0);
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) scaleX(2.6);
    opacity: 0;
  }
}

@keyframes transition-wash {
  0% {
    opacity: 0;
  }
  16% {
    opacity: 0.44;
  }
  28% {
    opacity: 0.86;
  }
  52% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
  }
}

@keyframes transition-bloom {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.54;
  }
  34% {
    opacity: 0.94;
  }
  52% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

@keyframes transition-full-flash {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 0.72;
  }
  22% {
    opacity: 1;
  }
  42% {
    opacity: 0.26;
  }
  100% {
    opacity: 0;
  }
}

@keyframes transition-whiteout {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.08;
  }
  34% {
    opacity: 0.18;
  }
  54% {
    opacity: 0.06;
  }
  100% {
    opacity: 0;
  }
}

@keyframes chapter-edge-reveal-left {
  0% {
    opacity: 0;
    transform: translateX(-8%);
  }
  22% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateX(8%);
  }
}

@keyframes chapter-edge-reveal-right {
  0% {
    opacity: 0;
    transform: translateX(8%);
  }
  22% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateX(-8%);
  }
}

@keyframes gate-portal-vignette {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.32;
  }
  44% {
    opacity: 0.88;
  }
  72% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}

@keyframes gate-portal-core {
  0% {
    opacity: 0;
    transform: translateZ(0) scale(0.88);
  }
  20% {
    opacity: 0.42;
  }
  42% {
    opacity: 0.86;
    transform: translateZ(0) scale(1);
  }
  70% {
    opacity: 0.54;
    transform: translateZ(0) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translateZ(0) scale(1.16);
  }
}

@keyframes gate-portal-glow {
  0% {
    opacity: 0;
    transform: scale(1.2) translateZ(0);
  }
  18% {
    opacity: 0.26;
  }
  40% {
    opacity: 0.9;
    transform: scale(1.34) translateZ(0);
  }
  68% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: scale(1.46) translateZ(0);
  }
}

@keyframes gate-portal-darkness {
  0% {
    opacity: 0;
    transform: scale(1.04) translateZ(0);
  }
  22% {
    opacity: 0.18;
  }
  46% {
    opacity: 0.76;
  }
  74% {
    opacity: 0.82;
    transform: scale(1.12) translateZ(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.2) translateZ(0);
  }
}

@keyframes gate-portal-shell-pass {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.74) translateZ(0);
    box-shadow:
      0 0 0 200vmax rgba(2, 6, 12, 0.06),
      0 0 24px rgba(226, 177, 106, 0.08),
      0 0 54px rgba(109, 155, 161, 0.04);
  }
  18% {
    opacity: 0.38;
  }
  42% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.2) translateZ(0);
    box-shadow:
      0 0 0 200vmax rgba(2, 6, 12, 0.24),
      0 0 38px rgba(226, 177, 106, 0.18),
      0 0 96px rgba(109, 155, 161, 0.08);
  }
  74% {
    opacity: 0.84;
    transform: translate(-50%, -50%) scale(3.2) translateZ(0);
    box-shadow:
      0 0 0 200vmax rgba(2, 6, 12, 0.74),
      0 0 24px rgba(226, 177, 106, 0.08),
      0 0 56px rgba(109, 155, 161, 0.04);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(6.8) translateZ(0);
    box-shadow:
      0 0 0 200vmax rgba(2, 6, 12, 0),
      0 0 0 rgba(0, 0, 0, 0),
      0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes gate-portal-core-pass {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.68) translateZ(0);
    filter: blur(0);
  }
  14% {
    opacity: 0.08;
  }
  28% {
    opacity: 0.18;
  }
  52% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1.08) translateZ(0);
    filter: blur(1px);
  }
  76% {
    opacity: 0.98;
    transform: translate(-50%, -50%) scale(4.3) translateZ(0);
    filter: blur(4px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(8.4) translateZ(0);
    filter: blur(8px);
  }
}

@keyframes gate-portal-aura-pass {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.68) translateZ(0);
  }
  20% {
    opacity: 0.16;
  }
  40% {
    opacity: 0.48;
    transform: translate(-50%, -50%) scale(1.08) translateZ(0);
  }
  70% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(3.8) translateZ(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(7.6) translateZ(0);
  }
}

@keyframes gate-door-dark-zoom {
  0% {
    opacity: 0;
    transform: scale(0.42) translateZ(0);
  }
  12% {
    opacity: 0.06;
  }
  28% {
    opacity: 0.34;
    transform: scale(0.98) translateZ(0);
  }
  44% {
    opacity: 1;
    transform: scale(2.56) translateZ(0);
  }
  72% {
    opacity: 1;
    transform: scale(2.64) translateZ(0);
  }
  100% {
    opacity: 0;
    transform: scale(2.72) translateZ(0);
  }
}

@keyframes gate-door-dark-return {
  0% {
    opacity: 0;
    transform: scale(2.72) translateZ(0);
  }
  12% {
    opacity: 1;
    transform: scale(2.72) translateZ(0);
  }
  34% {
    opacity: 1;
    transform: scale(2.72) translateZ(0);
  }
  68% {
    opacity: 0.92;
    transform: scale(1.38) translateZ(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.42) translateZ(0);
  }
}

@keyframes gate-door-left-open {
  0% {
    opacity: 0;
    transform: translate(calc(-100% - 1px), -50%) scale(0.78) rotateY(0deg) translateZ(0);
    filter: brightness(1) blur(0);
  }
  12% {
    opacity: 0.96;
  }
  28% {
    opacity: 1;
    transform: translate(calc(-100% - 1px), -50%) scale(0.82) rotateY(0deg) translateZ(0);
  }
  52% {
    opacity: 1;
    transform: translate(calc(-102% - 8px), -50%) scale(0.88) rotateY(54deg) translateZ(0);
    filter: brightness(0.72) blur(0.2px);
  }
  74% {
    opacity: 0.62;
    transform: translate(calc(-108% - 18px), -50%) scale(0.94) rotateY(88deg) translateZ(0);
    filter: brightness(0.42) blur(0.8px);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-110% - 24px), -50%) scale(1) rotateY(102deg) translateZ(0);
    filter: brightness(0.2) blur(1.4px);
  }
}

@keyframes gate-door-right-open {
  0% {
    opacity: 0;
    transform: translate(1px, -50%) scale(0.78) rotateY(0deg) translateZ(0);
    filter: brightness(1) blur(0);
  }
  12% {
    opacity: 0.96;
  }
  28% {
    opacity: 1;
    transform: translate(1px, -50%) scale(0.82) rotateY(0deg) translateZ(0);
  }
  52% {
    opacity: 1;
    transform: translate(8px, -50%) scale(0.88) rotateY(-54deg) translateZ(0);
    filter: brightness(0.72) blur(0.2px);
  }
  74% {
    opacity: 0.62;
    transform: translate(18px, -50%) scale(0.94) rotateY(-88deg) translateZ(0);
    filter: brightness(0.42) blur(0.8px);
  }
  100% {
    opacity: 0;
    transform: translate(24px, -50%) scale(1) rotateY(-102deg) translateZ(0);
    filter: brightness(0.2) blur(1.4px);
  }
}

@keyframes chapter-door-zoom {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) blur(0) saturate(1);
  }
  36% {
    transform: translate3d(-4.8%, 1.5%, 0) scale(1.88);
    filter: brightness(0.62) blur(1.8px) saturate(0.94);
  }
  74% {
    transform: translate3d(-8.4%, 2.6%, 0) scale(2.86);
    filter: brightness(0.28) blur(4.8px) saturate(0.82);
  }
  100% {
    transform: translate3d(-10.8%, 3.2%, 0) scale(3.58);
    filter: brightness(0.05) blur(10px) saturate(0.68);
  }
}

@keyframes chapter-door-ui-fade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes chapter-two-door-arrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.03);
    filter: brightness(0.18) blur(6px) saturate(0.8);
  }
  48% {
    opacity: 0.82;
    transform: translate3d(0, 0, 0) scale(1.012);
    filter: brightness(0.72) blur(2px) saturate(0.92);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) blur(0) saturate(1);
  }
}

@keyframes chapter-two-door-depart {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) blur(0) saturate(1);
  }
  56% {
    opacity: 0.42;
    transform: translate3d(0, 0, 0) scale(1.012);
    filter: brightness(0.44) blur(4px) saturate(0.84);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.032);
    filter: brightness(0.1) blur(12px) saturate(0.68);
  }
}

@keyframes chapter-two-ui-depart {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  58% {
    opacity: 0.32;
    transform: translateY(6px);
    filter: blur(3px);
  }
  100% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(6px);
  }
}

@keyframes chapter-door-zoom-out {
  0% {
    transform: translate3d(-10.8%, 3.2%, 0) scale(3.58);
    filter: brightness(0.05) blur(10px) saturate(0.68);
  }
  42% {
    transform: translate3d(-8.2%, 2.5%, 0) scale(2.74);
    filter: brightness(0.22) blur(5px) saturate(0.8);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) blur(0) saturate(1);
  }
}

@keyframes chapter-door-ui-return {
  0% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
  }
  48% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes chapter-two-ui-arrive {
  0% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
  }
  42% {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes water-ripple-sheet {
  0% {
    opacity: 0;
    transform: scaleY(0.86) translateY(5%);
    filter: blur(2px);
  }
  22% {
    opacity: 0.94;
  }
  64% {
    opacity: 0.88;
    transform: scaleY(1.04) translateY(0);
    filter: blur(0.4px);
  }
  100% {
    opacity: 0;
    transform: scaleY(1.18) translateY(-4%);
    filter: blur(8px);
  }
}

@keyframes water-ripple-ring-a {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
    filter: blur(0);
  }
  18% {
    opacity: 0.96;
  }
  66% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.34);
    filter: blur(6px);
  }
}

@keyframes water-ripple-ring-b {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.06);
    filter: blur(0);
  }
  20% {
    opacity: 0.94;
  }
  62% {
    opacity: 0.68;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.78);
    filter: blur(7px);
  }
}

@keyframes water-ripple-ring-c {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
    filter: blur(0);
  }
  16% {
    opacity: 0.92;
  }
  64% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.18);
    filter: blur(6px);
  }
}

@keyframes pillar-field-rise {
  0% {
    opacity: 0;
    transform: scaleX(0.82) scaleY(0.72);
    filter: blur(18px);
  }
  42% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: scaleX(1.04) scaleY(1.02);
    filter: blur(6px);
  }
}

@keyframes water-core-bloom {
  0% {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(24px);
  }
  40% {
    opacity: 0.92;
    transform: scale(1.04);
    filter: blur(14px);
  }
  100% {
    opacity: 0;
    transform: scale(1.18);
    filter: blur(24px);
  }
}

@keyframes water-to-hall-wipe {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  28% {
    opacity: 0.26;
  }
  100% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes chapter-water-to-pillars-depart {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) blur(0) saturate(1);
  }
  44% {
    opacity: 0.82;
    transform: translate3d(0, 0, 0) scale(1.016);
    filter: brightness(0.74) blur(3px) saturate(1.12);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.045);
    filter: brightness(0.14) blur(14px) saturate(0.7);
  }
}

@keyframes chapter-water-ui-depart {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  72% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(7px);
  }
}

@keyframes chapter-water-to-pillars-arrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.04);
    filter: brightness(0.16) blur(14px) saturate(0.78);
  }
  52% {
    opacity: 0.62;
    transform: translate3d(0, 0, 0) scale(1.016);
    filter: brightness(0.48) blur(7px) saturate(0.92);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) blur(0) saturate(1);
  }
}

@keyframes transition-water-ripple-outer {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, 0px))) scale(0.08);
  }
  10% {
    opacity: 1;
  }
  68% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift-x, 0px)), calc(-50% + var(--drift-y, 0px))) scale(1.9);
  }
}

@keyframes transition-water-ripple-glow {
  0% {
    opacity: 0;
    transform: scale(0.18);
  }
  18% {
    opacity: 0.94;
  }
  100% {
    opacity: 0;
    transform: scale(1.48);
  }
}

@keyframes transition-water-ripple-inner {
  0% {
    opacity: 0;
    transform: scale(var(--inner-start, 0.24));
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(var(--inner-end, 1));
  }
}

@keyframes chapter-water-ripple-depart {
  0% {
    opacity: 1;
    filter: brightness(1) blur(0) saturate(1);
  }
  76% {
    opacity: 1;
    filter: brightness(1) blur(0) saturate(1.02);
  }
  100% {
    opacity: 0;
    filter: brightness(0.22) blur(10px) saturate(0.82);
  }
}

@keyframes chapter-water-ripple-arrive {
  0% {
    opacity: 0;
    filter: brightness(0.24) blur(12px) saturate(0.9);
    transform: scale(1.018);
  }
  50% {
    opacity: 0.62;
    filter: brightness(0.52) blur(6px) saturate(0.96);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0) saturate(1);
    transform: scale(1);
  }
}

@keyframes chapter-hall-forward-depart {
  0% {
    opacity: 1;
    filter: brightness(1) blur(0) saturate(1);
  }
  68% {
    opacity: 0.92;
    filter: brightness(0.86) blur(1px) saturate(0.96);
  }
  100% {
    opacity: 0;
    filter: brightness(0.34) blur(8px) saturate(0.86);
  }
}

@keyframes chapter-hall-forward-ui-depart {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
}

@keyframes chapter-hall-backward-arrive {
  0% {
    opacity: 0;
    transform: scale(1.014);
    filter: brightness(0.42) blur(12px) saturate(0.88);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) blur(0) saturate(1);
  }
}

.scene-canvas {
  animation: page-canvas-fade-in 900ms cubic-bezier(0.2, 0.8, 0.18, 1) both;
}

.chapter-overlay,
.chapter-two-overlay,
.chapter-three-overlay {
  animation: page-ui-fade-in 780ms cubic-bezier(0.2, 0.8, 0.18, 1) both;
  animation-delay: 90ms;
}

.panel-nav {
  animation: page-ui-fade-in 820ms cubic-bezier(0.2, 0.8, 0.18, 1) both;
  animation-delay: 180ms;
}

@keyframes page-canvas-fade-in {
  0% {
    opacity: 0;
    transform: scale(1.018);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes page-ui-fade-in {
  0% {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

body:not(.text-ready) .chapter-overlay,
body:not(.text-ready) .chapter-two-overlay,
body:not(.text-ready) .chapter-three-overlay,
body:not(.text-ready) .panel-nav {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(8px);
  pointer-events: none;
  animation: none !important;
}

body.text-ready .chapter-overlay,
body.text-ready .chapter-two-overlay,
body.text-ready .chapter-three-overlay {
  animation: page-ui-fade-in 780ms cubic-bezier(0.2, 0.8, 0.18, 1) both;
}

body.text-ready .panel-nav {
  pointer-events: auto;
  animation: page-ui-fade-in 820ms cubic-bezier(0.2, 0.8, 0.18, 1) both;
}

body.is-transitioning.text-ready .chapter-overlay,
body.is-transitioning.text-ready .chapter-two-overlay,
body.is-transitioning.text-ready .chapter-three-overlay,
body.is-transitioning.text-ready .panel-nav {
  animation: page-ui-fade-out 360ms ease forwards;
}

@keyframes page-ui-fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(6px);
  }
}