@font-face {
  font-family: "Dead Secretary Cyr";
  src: url("fonts/deadsecretarycyr.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #050b0e;
  --cream: #f1ecde;
  --wine: #b10f34;
  --world-x: 0px;
  --world-y: 0px;
  --camera-rx: 0deg;
  --camera-ry: 0deg;
  --bg-x: 0px;
  --bg-y: 0px;
  --mid-x: 0px;
  --mid-y: 0px;
  --subject-x: 0px;
  --subject-y: 0px;
  --near-x: 0px;
  --near-y: 0px;
  --copy-exit-x: 0px;
  --copy-exit-y: 0px;
  --copy-opacity: 1;
  --hint-opacity: 1;
  --mid-exit-x: 0px;
  --mid-exit-y: 0px;
  --mid-opacity: 1;
  --subject-exit-x: 0px;
  --subject-exit-y: 0px;
  --subject-opacity: 1;
  --lamp-opacity: 1;
  --left-exit-x: 0px;
  --left-exit-y: 0px;
  --top-exit-x: 0px;
  --top-exit-y: 0px;
  --bottom-exit-x: 0px;
  --bottom-exit-y: 0px;
  --near-opacity: 1;
  --fog-density: 0;
  --fog-scale: 0.82;
  --fog-drift: 7%;
  --transition-fog-y: 0px;
  --shade-opacity: 1;
  --scene-two-opacity: 0;
  --scene-two-y: 34px;
  --scene-three-boundary-fog-opacity: 1;
  --scene-three-boundary-fog-y: 0px;
  --film-x: -193vw;
  --map-x: 10vw;
  --map-y: 8vh;
  --map-scale: 1.5;
  --map-opacity: 1;
  --film-opacity: 1;
  --landscape-opacity: 0;
  --landscape-x: 0px;
  --landscape-scale: 1.1;
  --film-note-opacity: 0;
  --scene-four-opacity: 0;
  --scene-five-opacity: 0;
  --scene-five-x: 0px;
  --scene-five-scale: 1;
  --scene-five-left-x: -19vw;
  --olya-cliff-opacity: 0;
  --keeper-side-opacity: 0;
  --dragon-opacity: 0;
  --keeper-front-opacity: 0;
  --scene-five-environment-opacity: 1;
  --olya-close-opacity: 0;
  --olya-close-scale: 0.84;
  --olya-close-x: 0px;
  --olya-close-y: 0px;
  --scene-six-shade-opacity: 0;
  --scene-six-head-opacity: 0;
  --scene-six-head-scale: 0.96;
  --scene-six-mri-opacity: 0;
  --scene-six-mri-x: -24px;
  --scene-six-brain-opacity: 0;
  --scene-six-routes-opacity: 0;
  --scene-six-routes-scale: 0.965;
  --brain-note-1-opacity: 0;
  --brain-note-2-opacity: 0;
  --brain-note-3-opacity: 0;
  --brain-note-4-opacity: 0;
  --reserve-note-opacity: 0;
  --keeper-note-opacity: 0;
  --creature-note-opacity: 0;
  --scene-end-fog-opacity: 0;
  --scene-seven-boundary-fog-opacity: 1;
  --scene-seven-boundary-fog-y: 0px;
  --cabin-table-y: 50vh;
  --cabin-table-scale: 1.16;
  --cabin-olya-x: -43vw;
  --cabin-olya-opacity: 0;
  --cabin-glow-opacity: 0;
  --cabin-note-1-opacity: 0;
  --cabin-note-2-opacity: 0;
  --cabin-note-3-opacity: 0;
  --cabin-door-scale: 1;
  --cabin-door-skew: 0deg;
  --cabin-door-fog-x: 68vw;
  --cabin-door-fog-opacity: 0;
  --cabin-exit-x: 0px;
  --cabin-content-opacity: 1;
  --cabin-background-opacity: 1;
  --cabin-door-opacity: 0.98;
  --scene-eight-stage-x: 50vw;
  --scene-eight-stage-opacity: 0;
  --scene-eight-bg-x: 0px;
  --scene-eight-portrait-opacity: 0;
  --scene-eight-portrait-x: 0px;
  --scene-eight-portrait-y: 0px;
  --scene-eight-portrait-scale: 1;
  --scene-eight-neutral-opacity: 1;
  --scene-eight-smile-opacity: 0;
  --scene-eight-lantern-opacity: 1;
  --scene-eight-lantern-light-opacity: 0.88;
  --scene-eight-walk-opacity: 0;
  --scene-eight-walk-x: 0px;
  --scene-eight-walk-y: 0px;
  --scene-eight-walk-scale: 1;
  --scene-eight-wall-light-opacity: 0;
  --scene-eight-wall-flicker-opacity: 0;
  --scene-eight-end-shade-opacity: 0;
  --scene-eight-note-opacity: 0;
  --scene-eight-cta-opacity: 0;
  --thought-1-opacity: 0;
  --thought-2-opacity: 0;
  --thought-3-opacity: 0;
  --thought-4-opacity: 0;
  --thought-5-opacity: 0;
  --trace-1-opacity: 0;
  --trace-2-opacity: 0;
  --trace-3-opacity: 0;
  --trace-4-opacity: 0;
  --trace-5-opacity: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  color: var(--cream);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
}

.site-story {
  position: relative;
  width: 100%;
  overflow: clip;
  background: #071117;
}

.story-scroll {
  position: relative;
  width: 100%;
  height: 230vh;
  height: 230svh;
  background: #071117;
}

.hero-scene {
  position: sticky;
  top: 0;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #071117;
  cursor: crosshair;
}

.camera-world {
  position: absolute;
  z-index: 0;
  inset: -3.5%;
  overflow: hidden;
  transform: perspective(1000px) translate3d(var(--world-x), var(--world-y), 0)
    rotateX(var(--camera-rx)) rotateY(var(--camera-ry)) scale(1.1);
  transform-origin: 50% 52%;
  will-change: transform;
}

.scene-layer {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.layer-background {
  z-index: 0;
  inset: -2%;
  width: 104%;
  height: 104%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(var(--bg-x), var(--bg-y), -70px) scale(1.045);
  filter: saturate(0.78) brightness(0.82) contrast(1.04);
}

.mountain-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 9, 12, 0.7) 0%, rgba(3, 9, 12, 0.27) 44%, rgba(3, 9, 12, 0.05) 75%),
    linear-gradient(0deg, rgba(3, 8, 10, 0.42), transparent 48%);
  opacity: var(--shade-opacity);
}

.layer-midground {
  z-index: 3;
  left: -3.5%;
  bottom: -4%;
  width: 106.5%;
  transform: translate3d(
    calc(var(--mid-x) + var(--mid-exit-x)),
    calc(var(--mid-y) + var(--mid-exit-y)),
    -5px
  ) scale(1.035);
  transform-origin: 50% 100%;
  opacity: var(--mid-opacity);
  filter: saturate(0.9) brightness(0.88);
}

.layer-subject {
  z-index: 6;
  right: 21%;
  bottom: -67%;
  width: auto;
  height: 155%;
  transform: translate3d(
    calc(var(--subject-x) + var(--subject-exit-x)),
    calc(var(--subject-y) + var(--subject-exit-y)),
    45px
  ) scale(1.015);
  transform-origin: 50% 100%;
  opacity: var(--subject-opacity);
  /*filter: brightness(0.92) saturate(0.92) drop-shadow(-18px 24px 32px rgba(0, 0, 0, 0.38));*/
  filter: drop-shadow(-18px 24px 32px rgba(0, 0, 0, 0.38));
}

.layer-left,
.layer-top,
.layer-bottom {
  z-index: 9;
  opacity: var(--near-opacity);
  filter: brightness(0.82) saturate(0.88);
}

.layer-left {
  left: -2.5%;
  bottom: -3%;
  width: 104%;
  transform: translate3d(
    calc(var(--near-x) + var(--left-exit-x)),
    calc(var(--near-y) + var(--left-exit-y)),
    95px
  ) scale(1.035);
}

.layer-top {
  top: -5%;
  left: -2%;
  width: 104%;
  transform: translate3d(
    calc(var(--near-x) + var(--top-exit-x)),
    calc(var(--near-y) + var(--top-exit-y)),
    95px
  ) scale(1.035);
  transform-origin: 74% 0;
}

.layer-bottom {
  left: -2%;
  bottom: -5.5%;
  width: 104%;
  transform: translate3d(
    calc(var(--near-x) + var(--bottom-exit-x)),
    calc(var(--near-y) + var(--bottom-exit-y)),
    95px
  ) scale(1.035);
}

.fog {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(32px);
  opacity: 0.5;
  will-change: transform, opacity;
}

.fog-far {
  z-index: 2;
  left: 11%;
  top: 41%;
  width: 58%;
  height: 17%;
  background: linear-gradient(90deg, transparent, rgba(174, 190, 194, 0.38), transparent);
  animation: fog-far 20s ease-in-out infinite alternate;
}

.fog-near {
  z-index: 5;
  left: 28%;
  bottom: 14%;
  width: 48%;
  height: 15%;
  background: linear-gradient(90deg, transparent, rgba(187, 197, 194, 0.38), transparent);
  filter: blur(38px);
  animation: fog-near 14s ease-in-out infinite alternate;
}

.layer-hero-fog {
  z-index: 5;
  left: -9%;
  top: 38%;
  width: 118%;
  opacity: calc(0.52 * var(--mid-opacity));
  filter: saturate(0.48) brightness(0.82) blur(1.5px);
  mix-blend-mode: screen;
  animation: hero-fog-drift 17s ease-in-out infinite alternate;
}

.lamp-glow {
  position: absolute;
  z-index: 4;
  left: 55.4%;
  top: 57.5%;
  width: 16vw;
  height: 16vw;
  min-width: 160px;
  min-height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 179, 93, 0.32) 0%, rgba(230, 128, 52, 0.13) 21%, transparent 66%);
  mix-blend-mode: screen;
  opacity: var(--lamp-opacity);
  animation: lamp-breathe 4.8s ease-in-out infinite;
}

.transition-fog {
  position: absolute;
  z-index: 11;
  inset: -8%;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--fog-density);
  transform: translate3d(0, var(--transition-fog-y), 0) scale(var(--fog-scale));
  transform-origin: 50% 52%;
  will-change: transform, opacity;
}

.fog-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 47% 46%, rgba(183, 195, 200, 0.6), rgba(149, 166, 176, 0.37) 54%, rgba(77, 96, 108, 0.34) 100%),
    linear-gradient(180deg, rgba(33, 47, 59, 0.3), rgba(175, 187, 190, 0.52));
  mix-blend-mode: screen;
}

.fog-asset {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.fog-cloud {
  left: -14%;
  top: 5%;
  width: 128%;
  opacity: 0.74;
  filter: saturate(0.22) hue-rotate(145deg) brightness(0.8) contrast(0.74) blur(3px);
  animation: transition-cloud-drift 18s ease-in-out infinite alternate;
}

.fog-band {
  left: -10%;
  width: 120%;
  filter: saturate(0.62) brightness(1.12) blur(2px);
}

.fog-band-one {
  top: 16%;
  opacity: 0.78;
  animation: transition-band-one 17s ease-in-out infinite alternate;
}

.fog-band-two {
  top: 43%;
  opacity: 0.9;
  animation: transition-band-two 13s ease-in-out infinite alternate;
}

.fog-band-three {
  bottom: 4%;
  opacity: 0.86;
  animation: transition-band-three 21s ease-in-out infinite alternate;
}

.scene-two-copy {
  position: absolute;
  z-index: 17;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: var(--scene-two-opacity);
  transform: translate3d(0, var(--scene-two-y), 0);
  will-change: transform, opacity;
}

.scene-two-copy h2 {
  display: flex;
  align-items: baseline;
  gap: clamp(0.8rem, 1.7vw, 2rem);
  margin: 0;
  color: #f2f1eb;
  font-family: "Dead Secretary Cyr", Georgia, serif;
  font-size: clamp(3rem, 5.2vw, 6.3rem);
  font-weight: 500;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 8px 28px rgba(17, 27, 32, 0.48);
}

.scene-two-dots {
  font-family: Georgia, serif;
  font-size: 0.55em;
  letter-spacing: 0.44em;
}

.hero-copy {
  position: absolute;
  z-index: 12;
  left: clamp(28px, 6.7vw, 132px);
  top: 19.5%;
  width: min(48vw, 820px);
  opacity: var(--copy-opacity);
  transform: translate3d(var(--copy-exit-x), var(--copy-exit-y), 0);
  will-change: transform, opacity;
}

.eyebrow {
  margin: 0 0 1.2rem 0;
  color: rgba(234, 232, 222, 0.62);
  font-size: clamp(0.62rem, 0.72vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

h1 {
  margin: 0;
  color: #f0ede4;
  font-family: "Dead Secretary Cyr", Georgia, serif;
  font-size: clamp(2.5rem, 4vw, 5rem);
  font-weight: 500;
  line-height: 1.19;
  /*letter-spacing: -0.045em;
  text-transform: uppercase;*/
  text-wrap: balance;
  transform: scaleX(0.92);
  transform-origin: left center;
  /*text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.7),
    0 5px 20px rgba(0, 0, 0, 0.92),
    1px 0 0 rgba(245, 241, 229, 0.24);*/
}

h1 span {
  display: block;
  white-space: nowrap;
}

h1 .accent {
  color: var(--wine);
  text-shadow:
    0 2px 0 rgba(24, 0, 6, 0.8),
    0 5px 20px rgba(0, 0, 0, 0.92),
    1px 0 0 rgba(224, 75, 101, 0.2);
}

.enter-button {
  display: inline-flex;
  align-items: center;
  gap: 1.45rem;
  margin-top: clamp(1.7rem, 3.1vh, 2.6rem);
  padding: 0.82rem 0.95rem 0.82rem 1.2rem;
  border: 1px solid rgba(238, 232, 219, 0.4);
  background: rgba(5, 11, 14, 0.45);
  color: #f4efe4;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(9px);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.button-arrow {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  background: var(--wine);
  font-size: 1rem;
  transition: transform 220ms ease;
}

.enter-button:hover,
.enter-button:focus-visible {
  border-color: rgba(238, 232, 219, 0.75);
  background: rgba(5, 11, 14, 0.72);
  outline: none;
  transform: translateY(-2px);
}

.enter-button:hover .button-arrow,
.enter-button:focus-visible .button-arrow {
  transform: translate(2px, -2px);
}

.movement-hint {
  position: absolute;
  z-index: 12;
  right: 2.1rem;
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  color: rgba(235, 234, 226, 0.46);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px #000;
  opacity: var(--hint-opacity);
}

.movement-dot {
  width: 0.42rem;
  height: 0.42rem;
  border: 1px solid rgba(235, 234, 226, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(235, 234, 226, 0.07);
}

.scroll-hint {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: 1.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: rgba(235, 234, 226, 0.56);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: var(--hint-opacity);
  transform: translateX(-50%);
  text-shadow: 0 2px 10px #000;
}

.scroll-line {
  width: 1px;
  height: 1.5rem;
  background: linear-gradient(rgba(235, 234, 226, 0.75), transparent);
  animation: scroll-pulse 1.9s ease-in-out infinite;
}

.grain,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.grain {
  z-index: 20;
  opacity: 0.055;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, #fff 0 0.35px, transparent 0.45px 2.2px),
    repeating-radial-gradient(circle at 81% 65%, #000 0 0.55px, transparent 0.65px 2.7px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: overlay;
}

.vignette {
  z-index: 19;
  background:
    radial-gradient(ellipse at 52% 47%, transparent 45%, rgba(2, 7, 9, 0.36) 78%, rgba(1, 5, 7, 0.78) 115%),
    linear-gradient(90deg, rgba(1, 6, 8, 0.24), transparent 26%, transparent 77%, rgba(1, 5, 7, 0.18));
}

.film-scroll {
  position: relative;
  width: 100%;
  height: 1150vh;
  height: 1150svh;
  background: #0b1113;
}

.scene-boundary-fog {
  position: absolute;
  z-index: 50;
  left: 0;
  top: 0;
  width: 100vw;
  height: 20vh;
  height: 20svh;
  overflow: visible;
  pointer-events: none;
  will-change: transform, opacity;
}

.scene-three-boundary-fog {
  opacity: var(--scene-three-boundary-fog-opacity);
  transform: translate3d(0, calc(-50% + var(--scene-three-boundary-fog-y)), 0);
}

.scene-seven-boundary-fog {
  opacity: var(--scene-seven-boundary-fog-opacity);
  transform: translate3d(0, calc(-50% + var(--scene-seven-boundary-fog-y)), 0);
}

.boundary-fog-asset {
  position: absolute;
  left: -10%;
  display: block;
  width: 120%;
  max-width: none;
  pointer-events: none;
  user-select: none;
  filter: saturate(0.42) brightness(0.86) contrast(0.88) blur(2px);
}

.boundary-fog-cloud {
  left: -14%;
  top: 2%;
  width: 128%;
  opacity: 0.68;
  filter: saturate(0.22) hue-rotate(145deg) brightness(0.82) contrast(0.76) blur(4px);
  animation: transition-cloud-drift 18s ease-in-out infinite alternate;
}

.boundary-fog-one {
  top: 17%;
  opacity: 0.78;
  animation: boundary-band-left 13s ease-in-out infinite alternate;
}

.boundary-fog-two {
  top: 42%;
  opacity: 0.9;
  animation: boundary-band-right 10s ease-in-out infinite alternate;
}

.boundary-fog-three {
  top: 65%;
  opacity: 0.82;
  animation: boundary-band-left 18s ease-in-out infinite alternate-reverse;
}

.film-scene {
  position: sticky;
  top: 0;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #0b1113;
}

.reserve-landscape {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: var(--landscape-opacity);
  filter: saturate(0.78) brightness(0.84) contrast(1.04);
  transform: translate3d(var(--landscape-x), 0, 0) scale(var(--landscape-scale));
  transform-origin: 0 50%;
  will-change: opacity, transform;
}

.topographic-map {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: var(--map-opacity);
  transform: translate3d(var(--map-x), var(--map-y), 0) scale(var(--map-scale));
  transform-origin: 0 50%;
  filter: sepia(0.12) saturate(0.74) brightness(0.91) contrast(1.08);
  will-change: transform, opacity;
}

.map-wash {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(65, 52, 37, 0.16), rgba(112, 95, 68, 0.03) 45%, rgba(48, 39, 30, 0.2)),
    radial-gradient(ellipse at 50% 48%, transparent 35%, rgba(55, 43, 31, 0.2) 100%);
  opacity: calc(var(--map-opacity) * 0.72);
  mix-blend-mode: multiply;
}

.film-track {
  position: absolute;
  z-index: 6;
  left: 10%;
  top: 52%;
  width: min(377.8vh, 4082px);
  width: min(377.8svh, 4082px);
  height: min(67.6vh, 730px);
  height: min(67.6svh, 730px);
  aspect-ratio: 2047 / 366;
  opacity: var(--film-opacity);
  transform: translate3d(var(--film-x), -50%, 0);
  filter: drop-shadow(0 1.3rem 2rem rgba(34, 24, 16, 0.38));
  will-change: transform, opacity;
}

.film-frames,
.episode-overlays {
  position: absolute;
  inset: 0;
}

.film-slot,
.episode-stage {
  position: absolute;
  top: 12.45%;
  width: 18.02%;
  height: 74.75%;
}

.film-slot {
  z-index: 1;
  overflow: hidden;
  background: #111615;
}

.film-slot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.83) brightness(0.9) contrast(1.05);
}

.film-slot:nth-child(1),
.episode-stage:nth-child(1) { left: 2.2%; }

.film-slot:nth-child(2),
.episode-stage:nth-child(2) { left: 21.64%; }

.film-slot:nth-child(3),
.episode-stage:nth-child(3) { left: 41.08%; }

.film-slot:nth-child(4),
.episode-stage:nth-child(4) { left: 60.43%; }

.film-slot:nth-child(5),
.episode-stage:nth-child(5) { left: 79.92%; }

.film-strip-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
  user-select: none;
  filter: sepia(0.08) saturate(0.78) brightness(0.9);
}

.episode-overlays {
  z-index: 5;
  overflow: visible;
  pointer-events: none;
}

.episode-stage {
  overflow: visible;
}

.thought-cloud,
.trace-layer {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  will-change: opacity, transform;
}

.thought-cloud {
  z-index: 6;
  left: -25%;
  top: -40%;
  width: 155%;
  height: 155%;
  opacity: 0;
  object-fit: fill;
  transform: translate3d(0, 10px, 0) scale(0.97);
  filter: sepia(0.06) saturate(0.65) brightness(0.92) drop-shadow(0 10px 16px rgba(27, 25, 21, 0.22));
}

.trace-layer {
  z-index: 7;
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
  opacity: 0;
  object-fit: fill;
  transform: translate3d(0, 8px, 0) scale(0.98);
  filter: sepia(0.12) saturate(0.5) brightness(0.82) contrast(1.1) drop-shadow(0 8px 10px rgba(12, 16, 16, 0.28));
}

.thought-copy {
  position: absolute;
  z-index: 8;
  margin: 0;
  color: #263638;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.72rem, 1vw, 1.28rem);
  font-style: italic;
  line-height: 1.22;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  transform: rotate(-1.2deg);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
  will-change: opacity;
}

.thought-piece {
  display: block;
}

.episode-1 .thought-cloud,
.episode-1 .thought-copy { opacity: var(--thought-1-opacity); }
.episode-2 .thought-cloud,
.episode-2 .thought-copy { opacity: var(--thought-2-opacity); }
.episode-3 .thought-cloud,
.episode-3 .thought-copy { opacity: var(--thought-3-opacity); }
.episode-4 .thought-cloud,
.episode-4 .thought-copy { opacity: var(--thought-4-opacity); }
.episode-5 .thought-cloud,
.episode-5 .thought-copy { opacity: var(--thought-5-opacity); }

.episode-1 .trace-layer { opacity: var(--trace-1-opacity); }
.episode-2 .trace-layer { opacity: var(--trace-2-opacity); }
.episode-3 .trace-layer { opacity: var(--trace-3-opacity); }
.episode-4 .trace-layer { opacity: var(--trace-4-opacity); }
.episode-5 .trace-layer { opacity: var(--trace-5-opacity); }

.episode-1 .thought-copy {
  left: -4%;
  top: -18%;
  width: 71%;
}
.episode-1 .trace-layer {
	left: 41%;
    top: 62%;
    width: 60%;
    height: 80%;
}

.episode-2 .thought-copy {
  left: 71%;
  top: -20%;
  width: 62%;
}
.episode-2 .trace-layer {
	left: -14%;
    top: 36%;
    width: 100%;
    height: 112%;
}

.episode-3 .thought-copy {
  left: 70%;
  top: -19%;
  width: 62%;
}
.episode-3 .trace-layer {
	top: -102%;
    left: -76%;
    width: 180%;
    height: 180%;
}
.episode-4 .thought-copy {
  left: -9%;
  top: 49%;
  width: 78%;
}
.episode-4 .trace-layer {
	width: 70%;
    height: 70%;
    top: 27%;
    left: 25%;
}

.episode-5 .thought-copy {
  inset: 0;
  width: 100%;
}

.episode-5 .thought-piece {
  position: absolute;
  width: 58%;
}

.episode-5 .thought-piece-1 {
  left: -14%;
  top: -24%;
}

.episode-5 .thought-piece-2 {
  left: 25%;
  top: -25%;
}

.episode-5 .thought-piece-3 {
  left: -12%;
  top: 12%;
}
.episode-5 .trace-layer {
	left: -54%;
    width: 180%;
    height: 180%;
    top: -25%;
}





.scene-four-copy {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: var(--scene-four-opacity);
  pointer-events: none;
  will-change: opacity;
}

.scene-four-fogs {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(96vw, 1740px);
  height: min(72vh, 760px);
  transform: translate(-50%, -50%);
}

.scene-four-cloud,
.scene-four-band {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  filter: saturate(0.42) brightness(0.82) contrast(0.86) blur(1.5px);
}

.scene-four-cloud {
  z-index: 0;
  left: -7%;
  top: -5%;
  width: 114%;
  opacity: 0.68;
  animation: scene-four-cloud-drift 18s ease-in-out infinite alternate;
}

.scene-four-band {
  left: -5%;
  width: 110%;
}

.scene-four-band-one {
  z-index: 1;
  top: 12%;
  opacity: 0.7;
  animation: scene-four-band-left 15s ease-in-out infinite alternate;
}

.scene-four-band-two {
  z-index: 2;
  top: 39%;
  opacity: 0.82;
  animation: scene-four-band-right 12s ease-in-out infinite alternate;
}

.scene-four-band-three {
  z-index: 3;
  bottom: 7%;
  opacity: 0.76;
  animation: scene-four-band-left 20s ease-in-out infinite alternate-reverse;
}

.scene-four-text {
  position: relative;
  z-index: 4;
  width: min(80vw, 980px);
  padding: 2rem;
  color: #f3f0e6;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(9, 14, 16, 0.48),
    0 10px 30px rgba(5, 10, 12, 0.82);
}

.scene-four-kicker {
  margin: 0 0 0.9rem;
  color: rgba(240, 238, 228, 0.7);
  font-size: clamp(0.65rem, 0.8vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.scene-four-text h2 {
  margin: 0;
  font-family: "Dead Secretary Cyr", Georgia, serif;
  font-size: clamp(2.45rem, 4.4vw, 5.2rem);
  line-height: 1.03;
  text-wrap: balance;
  font-weight: 500;
}

.scene-four-text > p:last-child {
  max-width: 760px;
  margin: 1.2rem auto 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 1.35vw, 1.5rem);
  line-height: 1.45;
  text-wrap: balance;
}

.field-note {
  box-sizing: border-box;
  width: clamp(270px, 25vw, 390px);
  min-height: clamp(390px, 55vh, 590px);
  padding: clamp(2rem, 3.5vw, 3.6rem) clamp(1.65rem, 2.7vw, 2.8rem);
  overflow: hidden;
  color: #30271d;
  background:
    radial-gradient(circle at 18% 13%, rgba(255, 255, 255, 0.42), transparent 23%),
    radial-gradient(circle at 78% 84%, rgba(104, 75, 39, 0.11), transparent 30%),
    repeating-linear-gradient(7deg, rgba(94, 69, 42, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e8d7b8 0%, #dbc49e 52%, #cdb087 100%);
  clip-path: polygon(
    2.5% 0.8%, 18% 1.8%, 34% 0.5%, 52% 1.4%, 68% 0.4%, 83% 1.5%, 98% 0.7%,
    99.1% 14%, 98.3% 31%, 99.2% 48%, 98.2% 66%, 99% 83%, 97.5% 99%,
    81% 98.2%, 65% 99.3%, 48% 98.4%, 31% 99.1%, 15% 98.1%, 1.2% 99%,
    0.7% 82%, 1.5% 65%, 0.5% 49%, 1.4% 31%, 0.6% 14%
  );
  box-shadow:
    0 24px 55px rgba(10, 8, 5, 0.44),
    inset 0 0 34px rgba(103, 73, 36, 0.15),
    inset 0 0 0 1px rgba(96, 67, 35, 0.13);
  text-align: left;
  text-shadow: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.field-note::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background:
    radial-gradient(circle at 22% 28%, rgba(90, 63, 34, 0.16) 0 0.7px, transparent 0.9px),
    radial-gradient(circle at 72% 61%, rgba(255, 249, 229, 0.28) 0 0.6px, transparent 0.85px);
  background-size: 7px 8px, 9px 11px;
  mix-blend-mode: multiply;
}

.field-note-kicker,
.scene-four-text.field-note .scene-four-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 1.35rem;
  color: rgba(74, 51, 29, 0.66);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.68rem, 0.76vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.field-note h2,
.scene-four-text.field-note h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #2e251b;
  font-family: "Dead Secretary Cyr", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 1.03;
  text-wrap: balance;
  font-weight: 500;
}

.field-note > p:last-child,
.field-note-body,
.scene-four-text.field-note > p:last-child {
  position: relative;
  z-index: 1;
  margin: 1.35rem 0 0;
  color: rgba(50, 39, 27, 0.86);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.15vw, 1.22rem);
  line-height: 1.52;
  text-wrap: pretty;
}

.field-note-body p {
  margin: 0;
}

.field-note-body p + p {
  margin-top: 0.85rem;
}

.film-field-note {
  position: absolute;
  z-index: 5;
  right: clamp(1.5rem, 7vw, 8rem);
  top: 50%;
  opacity: var(--film-note-opacity);
  transform: translate3d(0, -50%, 0);
}

.scene-five-world {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  opacity: var(--scene-five-opacity);
  pointer-events: none;
  will-change: opacity;
}

.scene-five-notes {
  position: absolute;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}

.scene-five-note {
  position: absolute;
  right: clamp(1.5rem, 6vw, 7rem);
  top: 50%;
  width: clamp(275px, 25vw, 395px);
  min-height: auto;
  opacity: 0;
  transform: translate3d(0, -50%, 0);
  will-change: opacity;
}

.scene-five-note-reserve { opacity: var(--reserve-note-opacity); }
.scene-five-note-keeper { opacity: var(--keeper-note-opacity); }
.scene-five-note-creature { opacity: var(--creature-note-opacity); }

.scene-five-note h2,
.cabin-field-note h2,
.scene-eight-field-note h2 {
  font-size: clamp(1.75rem, 2.25vw, 2.75rem);
  line-height: 1.06;
  font-weight: 500;
}

.scene-five-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78svh);
  aspect-ratio: 16 / 9;
  transform: translate3d(calc(-50% + var(--scene-five-x)), -50%, 0)
    scale(var(--scene-five-scale));
  transform-origin: 50% 52%;
  will-change: transform;
}

.scene-five-live-fog {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: calc(var(--scene-five-environment-opacity) * 0.94);
  pointer-events: none;
  will-change: opacity;
}

.scene-five-fog {
  position: absolute;
  left: -18%;
  display: block;
  width: 136%;
  max-width: none;
  transform-origin: 50% 58%;
  filter: saturate(0.34) brightness(0.78) contrast(0.84) blur(2.8px);
  user-select: none;
}

.scene-five-fog-one {
  top: 27%;
  opacity: 0.68;
  animation: reserve-fog-left 13s ease-in-out infinite alternate;
}

.scene-five-fog-two {
  top: 43%;
  opacity: 0.82;
  animation: reserve-fog-right 17s ease-in-out infinite alternate-reverse;
}

.scene-five-fog-three {
  top: 58%;
  opacity: 0.62;
  animation: reserve-fog-left 21s ease-in-out infinite alternate-reverse;
}

.scene-five-fog-four {
  left: -10%;
  top: 13%;
  width: 120%;
  opacity: 0.48;
  filter: saturate(0.26) brightness(0.72) contrast(0.78) blur(5px);
  animation: reserve-fog-right 24s ease-in-out infinite alternate;
}

.scene-five-left-group {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: translate3d(var(--scene-five-left-x), 0, 0);
  will-change: transform;
}

.scene-five-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.scene-five-tree {
  z-index: 1;
  opacity: var(--scene-five-environment-opacity);
  filter: saturate(0.76) brightness(0.78) contrast(1.04);
  will-change: opacity;
}

.scene-five-cliff {
  z-index: 2;
  opacity: var(--scene-five-environment-opacity);
  filter: saturate(0.72) brightness(0.82) contrast(1.05);
  will-change: opacity;
}

.scene-five-olya-back {
  z-index: 6;
  left: 15%;
    top: -9%;
  opacity: var(--olya-cliff-opacity);
  filter: brightness(0.86) saturate(0.86) drop-shadow(-12px 18px 24px rgba(0, 0, 0, 0.34));
  transition: filter 220ms linear;
  will-change: opacity;
}

.scene-five-keeper-side {
  z-index: 4;
  left: 15%;
    height: 69%;
    top: 7%;
	width: auto;
  opacity: var(--keeper-side-opacity);
  filter: brightness(0.82) saturate(0.82) drop-shadow(-12px 16px 24px rgba(0, 0, 0, 0.36));
  will-change: opacity;
}

.scene-five-dragon-wrap {
  position: absolute;
  z-index: 3;
  inset: 0;
  opacity: var(--dragon-opacity);
  filter: drop-shadow(0 0 18px rgba(194, 211, 216, 0.18));
  will-change: opacity;
}

.scene-five-dragon {
  animation: dragon-shimmer 4.6s ease-in-out infinite;
  will-change: opacity, filter;
}

.scene-five-keeper-front {
  position: absolute;
  z-index: 9;
  left: 13.5%;
  bottom: -2%;
  display: block;
  width: auto;
  height: 82%;
  max-width: none;
  opacity: var(--keeper-front-opacity);
  filter: brightness(0.88) saturate(0.86) drop-shadow(-16px 20px 30px rgba(0, 0, 0, 0.4));
  transform-origin: 50% 100%;
  will-change: opacity;
}

.scene-five-olya-close {
  position: absolute;
  z-index: 10;
  left: 15%;
  bottom: -77%;
  display: block;
  width: auto;
  height: 175%;
  max-width: none;
  opacity: var(--olya-close-opacity);
  filter: brightness(0.9) saturate(0.88) drop-shadow(-22px 28px 38px rgba(0, 0, 0, 0.45));
  transform: translate3d(var(--olya-close-x), var(--olya-close-y), 0)
    scale(var(--olya-close-scale));
  transform-origin: 42% 35%;
  will-change: opacity, transform;
}

.scene-six-shade {
  position: absolute;
  z-index: 7;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(2, 7, 10, 0.96) 0%,
    rgba(2, 7, 10, 0.78) 35%,
    rgba(2, 7, 10, 0.42) 68%,
    rgba(2, 7, 10, 0.2) 100%
  );
  opacity: var(--scene-six-shade-opacity);
  pointer-events: none;
  will-change: opacity;
}

.scene-six-mri-strip {
  position: absolute;
  z-index: 11;
  left: 0;
  top: 50%;
  display: block;
  width: auto;
  height: 100%;
  max-width: 17%;
  opacity: var(--scene-six-mri-opacity);
  transform: translate3d(var(--scene-six-mri-x), -50%, 0);
  filter: brightness(0.78) saturate(0.56) contrast(1.08);
  will-change: opacity, transform;
}

.scene-six-head-profile {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  opacity: var(--scene-six-head-opacity);
  filter: brightness(0.9) saturate(0.86) drop-shadow(0 16px 34px rgba(0, 0, 0, 0.34));
  transform: scale(var(--scene-six-head-scale));
  transform-origin: 28% 48%;
  will-change: opacity, transform;
}

.scene-six-anatomical-brain {
  position: absolute;
  z-index: 13;
  left: 12.5%;
  top: 8.5%;
  display: block;
  width: 34%;
  height: auto;
  max-width: none;
  opacity: var(--scene-six-brain-opacity);
  filter: sepia(0.22) hue-rotate(342deg) saturate(0.72) brightness(1.2)
    drop-shadow(0 0 22px rgba(217, 206, 177, 0.24));
  mix-blend-mode: screen;
  will-change: opacity;
}

.scene-six-brain-routes {
  position: absolute;
  z-index: 14;
  left: 12.4%;
    top: 8.5%;
    display: block;
    width: 97%;
  height: auto;
  max-width: none;
  opacity: var(--scene-six-routes-opacity);
  filter: brightness(1.02) saturate(0.82) drop-shadow(0 0 20px rgba(238, 213, 156, 0.2));
  transform-origin: 23% 35%;
  animation: routes-breathe 5.8s ease-in-out infinite;
  will-change: opacity, filter;
}

.brain-notes {
  position: absolute;
  z-index: 17;
  inset: 0;
  pointer-events: none;
}

.brain-note {
  position: absolute;
  box-sizing: border-box;
  width: clamp(230px, 20vw, 315px);
  min-height: clamp(280px, 38vh, 410px);
  padding: clamp(1.6rem, 2.5vw, 2.5rem) clamp(1.4rem, 2vw, 2.1rem);
  color: #30271d;
  background:
    radial-gradient(circle at 18% 13%, rgba(255, 255, 255, 0.4), transparent 24%),
    repeating-linear-gradient(8deg, rgba(94, 69, 42, 0.028) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #eadbbb, #d6bc92 62%, #c7a980);
  clip-path: polygon(2% 1%, 21% 2%, 39% 0.6%, 58% 1.5%, 78% 0.6%, 98% 1.2%, 99% 20%, 98% 42%, 99% 64%, 98% 83%, 97% 99%, 77% 98%, 58% 99%, 38% 98%, 18% 99%, 1% 98%, 2% 79%, 1% 58%, 2% 37%, 1% 18%);
  box-shadow: 0 20px 46px rgba(4, 7, 8, 0.46), inset 0 0 28px rgba(95, 67, 34, 0.14);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.brain-note::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background: radial-gradient(circle at 24% 37%, rgba(77, 52, 28, 0.18) 0 0.7px, transparent 0.9px);
  background-size: 8px 9px;
  mix-blend-mode: multiply;
}

.brain-note > p {
  position: relative;
  z-index: 1;
}

.brain-note > p:last-child {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.15vw, 1.22rem);
  line-height: 1.5;
}

.brain-note-one {
  right: clamp(1.5rem, 6vw, 7rem);
  top: 10%;
  opacity: var(--brain-note-1-opacity);
  transform: none;
}

.brain-note-two {
  right: clamp(2rem, 9vw, 11rem);
  bottom: 8%;
  opacity: var(--brain-note-2-opacity);
  transform: rotate(1.2deg);
}

.brain-note-three {
  left: 54%;
  top: 8%;
  opacity: var(--brain-note-3-opacity);
  transform: rotate(-1deg);
}

.brain-note-four {
  right: clamp(1.5rem, 6vw, 7rem);
  bottom: 9%;
  opacity: var(--brain-note-4-opacity);
  transform: rotate(0.7deg);
}

.scene-end-fog {
  position: absolute;
  z-index: 18;
  inset: 0;
  overflow: hidden;
  opacity: var(--scene-end-fog-opacity);
  pointer-events: none;
  will-change: opacity;
}

.scene-end-band {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  filter: saturate(0.42) brightness(0.82) contrast(0.9) blur(1px);
}

.scene-end-band {
  left: -5%;
  width: 110%;
}

.scene-end-band-one {
  bottom: -10%;
  opacity: 0.7;
  animation: boundary-band-left 13s ease-in-out infinite alternate;
}

.scene-end-band-two {
  bottom: -1%;
  opacity: 0.86;
  animation: boundary-band-right 10s ease-in-out infinite alternate;
}

.scene-end-band-three {
  bottom: 8%;
  opacity: 0.76;
  animation: boundary-band-left 18s ease-in-out infinite alternate-reverse;
}

.film-grain,
.film-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.film-grain {
  z-index: 20;
  opacity: 0.07;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, #fff 0 0.35px, transparent 0.45px 2.2px),
    repeating-radial-gradient(circle at 81% 65%, #000 0 0.55px, transparent 0.65px 2.7px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: overlay;
}

.film-vignette {
  z-index: 19;
  background:
    radial-gradient(ellipse at 50% 49%, transparent 43%, rgba(55, 40, 25, 0.18) 76%, rgba(37, 28, 21, 0.54) 116%),
    linear-gradient(90deg, rgba(42, 31, 22, 0.2), transparent 22%, transparent 78%, rgba(42, 31, 22, 0.2));
}

.cabin-scroll {
  position: relative;
  width: 100%;
  height: 940vh;
  height: 940svh;
  background: #090b0b;
}

.cabin-scene {
  position: sticky;
  top: 0;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #090b0b;
}

.cabin-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: var(--cabin-background-opacity);
  filter: saturate(0.78) brightness(0.76) contrast(1.05);
  transform: translate3d(var(--cabin-exit-x), 0, 0) scale(1.02);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  user-select: none;
}

.cabin-door {
  position: absolute;
  z-index: 2;
  right: 0.4%;
  top: 0.4%;
  display: block;
  width: 17vw;
  height: 75svh;
  max-width: none;
  object-fit: fill;
  opacity: var(--cabin-door-opacity);
  filter: brightness(0.7) saturate(0.72) contrast(1.08) drop-shadow(-10px 8px 18px rgba(0, 0, 0, 0.42));
  transform: translate3d(var(--cabin-exit-x), 0, 0) perspective(1200px)
    scaleX(var(--cabin-door-scale)) skewY(var(--cabin-door-skew));
  transform-origin: 100% 50%;
  will-change: transform;
  user-select: none;
}

.cabin-table-group {
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: var(--cabin-content-opacity);
  transform: translate3d(var(--cabin-exit-x), var(--cabin-table-y), 0) scale(var(--cabin-table-scale));
  transform-origin: 70% 100%;
  will-change: opacity, transform;
  pointer-events: none;
}

.cabin-keeper {
  position: absolute;
  z-index: 3;
  left: 54.5%;
  top: 2.5%;
  display: block;
  width: 34.6%;
  height: auto;
  max-width: none;
  filter: brightness(0.82) saturate(0.82) drop-shadow(-14px 18px 26px rgba(0, 0, 0, 0.38));
  user-select: none;
}

.cabin-table {
  position: absolute;
  z-index: 2;
  left: 28%;
  bottom: 0;
  display: block;
  width: 68%;
  height: auto;
  max-width: none;
  filter: brightness(0.88) saturate(0.8) drop-shadow(0 18px 32px rgba(0, 0, 0, 0.42));
  user-select: none;
}

.cabin-olya {
  position: absolute;
  z-index: 7;
  left: 0;
  bottom: -0.5%;
  display: block;
  width: auto;
  height: 92.5%;
  max-width: none;
  opacity: var(--cabin-olya-opacity);
  filter: brightness(0.83) saturate(0.82) drop-shadow(15px 18px 28px rgba(0, 0, 0, 0.4));
  transform: translate3d(var(--cabin-olya-x), 0, 0);
  will-change: transform, opacity;
  user-select: none;
}

.cabin-warm-glow {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: var(--cabin-glow-opacity);
  object-fit: fill;
  mix-blend-mode: screen;
  filter: saturate(0.82) brightness(0.92);
  transform: translate3d(var(--cabin-exit-x), 0, 0);
  animation: cabin-lamp-flicker 4.8s ease-in-out infinite;
  will-change: opacity, filter, transform;
  pointer-events: none;
  user-select: none;
}

.cabin-notes {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}

.cabin-field-note {
  position: absolute;
  left: 50%;
  top: 49%;
  min-height: auto;
  transform: translate3d(-50%, -50%, 0);
  will-change: opacity;
}

.cabin-field-note-one {
  left: 40%;
  top: 37%;
  opacity: var(--cabin-note-1-opacity);
}

.cabin-field-note-two {
  left: 27%;
  top: 48%;
  opacity: var(--cabin-note-2-opacity);
}

.cabin-field-note-three { opacity: var(--cabin-note-3-opacity); }

.cabin-door-fog {
  position: absolute;
  z-index: 10;
  inset: 0;
  opacity: var(--cabin-door-fog-opacity);
  transform: translate3d(var(--cabin-door-fog-x), 0, 0);
  will-change: transform, opacity;
  pointer-events: none;
}

.cabin-door-fog-layer {
  position: absolute;
  right: -3%;
  top: 0;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  transform-origin: 80% 58%;
  filter: saturate(0.58) brightness(0.88) blur(1px);
  user-select: none;
}

.cabin-door-fog-one {
  opacity: 0.7;
  animation: cabin-fog-breathe-one 6.8s ease-in-out infinite;
}

.cabin-door-fog-two {
  right: -11%;
  opacity: 0.48;
  filter: saturate(0.48) brightness(0.8) blur(4px);
  animation: cabin-fog-breathe-two 9.6s ease-in-out infinite;
}

.cabin-door-fog-three {
  right: 4%;
  opacity: 0.34;
  filter: saturate(0.46) brightness(0.94) blur(7px);
  animation: cabin-fog-breathe-three 12.4s ease-in-out infinite;
}

.cabin-entry-fog {
  position: absolute;
  z-index: 16;
  inset: 0;
  overflow: hidden;
  opacity: var(--cabin-entry-fog-opacity);
  transform: translate3d(0, var(--cabin-entry-fog-y), 0);
  pointer-events: none;
  will-change: opacity;
}

.cabin-entry-band {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  filter: saturate(0.42) brightness(0.82) contrast(0.9) blur(1px);
}

.cabin-entry-band {
  left: -5%;
  width: 110%;
}

.cabin-entry-band-one {
  top: -10%;
  opacity: 0.7;
  animation: boundary-band-left 13s ease-in-out infinite alternate-reverse;
}

.cabin-entry-band-two {
  top: -1%;
  opacity: 0.86;
  animation: boundary-band-right 10s ease-in-out infinite alternate-reverse;
}

.cabin-entry-band-three {
  top: 8%;
  opacity: 0.76;
  animation: boundary-band-left 18s ease-in-out infinite alternate;
}

.cabin-grain,
.cabin-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cabin-grain {
  z-index: 20;
  opacity: 0.065;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, #fff 0 0.35px, transparent 0.45px 2.2px),
    repeating-radial-gradient(circle at 81% 65%, #000 0 0.55px, transparent 0.65px 2.7px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: overlay;
}

.cabin-vignette {
  z-index: 19;
  background:
    radial-gradient(ellipse at 52% 46%, transparent 40%, rgba(4, 6, 6, 0.3) 76%, rgba(1, 3, 3, 0.68) 116%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 28%, transparent 78%, rgba(0, 0, 0, 0.18));
}

.scene-eight {
  position: absolute;
  z-index: 30;
  inset: 0;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #06090a;
  opacity: var(--scene-eight-stage-opacity);
  transform: translate3d(var(--scene-eight-stage-x), 0, 0);
  will-change: opacity, transform;
}

.scene-eight-background {
  position: absolute;
  z-index: 0;
  left: -1.5%;
  top: -1.5%;
  display: block;
  width: 105%;
  height: 103%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.76) brightness(0.8) contrast(1.06);
  transform: translate3d(var(--scene-eight-bg-x), 0, 0);
  will-change: transform;
  user-select: none;
}

.scene-eight-doorway-fog {
  position: absolute;
  z-index: 1;
  left: 31.8%;
  top: 0;
  width: 59.2%;
  height: 94.5%;
  overflow: hidden;
  pointer-events: none;
}

.scene-eight-fog {
  position: absolute;
  right: -20%;
  top: -4%;
  display: block;
  width: auto;
  height: 112%;
  max-width: none;
  transform-origin: 75% 58%;
  filter: saturate(0.5) brightness(0.82) blur(2px);
  user-select: none;
}

.scene-eight-fog-one {
  opacity: 0.46;
  animation: scene-eight-fog-one 8.4s ease-in-out infinite;
}

.scene-eight-fog-two {
  right: -8%;
  opacity: 0.3;
  filter: saturate(0.42) brightness(0.9) blur(5px);
  animation: scene-eight-fog-two 11.6s ease-in-out infinite;
}

.scene-eight-fog-three {
  right: -33%;
  opacity: 0.22;
  filter: saturate(0.44) brightness(0.76) blur(8px);
  animation: scene-eight-fog-three 15.2s ease-in-out infinite;
}

.scene-eight-wall-light,
.scene-eight-wall-light-flicker-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene-eight-wall-light {
  z-index: 2;
  transform: translate3d(var(--scene-eight-bg-x), 0, 0);
  transform-origin: 7.2% 38.5%;
  will-change: opacity, filter, transform;
}

.scene-eight-wall-light-base {
  opacity: var(--scene-eight-wall-light-opacity);
  background: radial-gradient(
    ellipse 13.5% 34% at 7.2% 38.5%,
    rgba(255, 174, 73, 0.58) 0%,
    rgba(219, 121, 38, 0.25) 34%,
    rgba(151, 75, 23, 0.1) 56%,
    transparent 78%
  );
  mix-blend-mode: screen;
  filter: blur(2px) saturate(0.9);
}

.scene-eight-wall-light-flicker-wrap {
  z-index: 2;
  opacity: var(--scene-eight-wall-flicker-opacity);
  will-change: opacity;
}

.scene-eight-wall-light-flicker {
  background: radial-gradient(
    ellipse 12.75% 34.5% at 7.4% 38.7%,
    rgba(255, 208, 126, 0.74) 0%,
    rgba(255, 163, 70, 0.32) 34%,
    rgba(203, 103, 31, 0.1) 58%,
    transparent 76%
  );
  mix-blend-mode: screen;
  animation: scene-eight-wall-light-flicker 5.6s ease-in-out infinite;
}

.scene-eight-portrait-keeper {
  position: absolute;
  z-index: 4;
  left: 19.5%;
  bottom: -13%;
  width: 43vw;
  height: 116%;
  opacity: var(--scene-eight-portrait-opacity);
  transform: translate3d(var(--scene-eight-portrait-x), var(--scene-eight-portrait-y), 0)
    scale(var(--scene-eight-portrait-scale));
  transform-origin: 50% 100%;
  will-change: opacity, transform;
  pointer-events: none;
}

.scene-eight-keeper-near {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: auto;
  height: 111%;
  max-width: none;
  filter: brightness(0.84) saturate(0.82) drop-shadow(13px 18px 28px rgba(0, 0, 0, 0.4));
  user-select: none;
}

.scene-eight-lantern {
  position: absolute;
  z-index: 3;
  left: 61.5%;
  bottom: -7%;
  display: block;
  width: auto;
  height: 46%;
  max-width: none;
  opacity: var(--scene-eight-lantern-opacity);
  filter: drop-shadow(0 0 24px rgba(255, 163, 57, 0.52));
  transform-origin: 50% 2%;
  animation: scene-eight-lantern-swing 3.9s ease-in-out infinite;
  will-change: opacity, transform;
  user-select: none;
}

.scene-eight-olya {
  position: absolute;
  z-index: 3;
  right: 5.6%;
  bottom: 3.4%;
  width: 20vw;
  height: 93%;
  opacity: var(--scene-eight-portrait-opacity);
  pointer-events: none;
}

.scene-eight-olya-neutral,
.scene-eight-olya-smile {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  filter: brightness(0.78) saturate(0.76) drop-shadow(-12px 16px 26px rgba(0, 0, 0, 0.38));
  user-select: none;
}

.scene-eight-olya-neutral {
  opacity: var(--scene-eight-neutral-opacity);
}

.scene-eight-olya-smile {
  opacity: var(--scene-eight-smile-opacity);
}

.scene-eight-lantern-light {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  opacity: var(--scene-eight-lantern-light-opacity);
  mix-blend-mode: screen;
  filter: saturate(0.92) brightness(0.94);
  animation: scene-eight-lantern-flicker 4.7s ease-in-out infinite;
  will-change: opacity, filter;
  pointer-events: none;
  user-select: none;
}

.scene-eight-walkers {
  position: absolute;
  z-index: 3;
  left: 63.5%;
  top: 17%;
  width: 31vw;
  height: 52%;
  opacity: var(--scene-eight-walk-opacity);
  transform: translate3d(var(--scene-eight-walk-x), var(--scene-eight-walk-y), 0)
    scale(var(--scene-eight-walk-scale));
  transform-origin: 50% 100%;
  will-change: opacity, transform;
  pointer-events: none;
}

.scene-eight-keeper-walk,
.scene-eight-olya-walk,
.scene-eight-walk-lantern {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  user-select: none;
}

.scene-eight-keeper-walk {
  left: 0;
  bottom: 0;
  height: 100%;
  filter: brightness(0.64) saturate(0.66) drop-shadow(8px 12px 20px rgba(0, 0, 0, 0.34));
}

.scene-eight-olya-walk {
  left: 49%;
  bottom: 2%;
  height: 82%;
  filter: brightness(0.62) saturate(0.64) drop-shadow(-5px 10px 16px rgba(0, 0, 0, 0.3));
}

.scene-eight-walk-lantern {
  z-index: 2;
  left: 40%;
  bottom: -1%;
  height: 35%;
  filter: brightness(0.78) drop-shadow(0 0 18px rgba(255, 158, 49, 0.42));
  transform-origin: 50% 2%;
  animation: none;
}

.scene-eight-end-shade {
  position: absolute;
  z-index: 8;
  inset: 0;
  opacity: var(--scene-eight-end-shade-opacity);
  background:
    linear-gradient(90deg, rgba(2, 5, 7, 0.92) 0%, rgba(3, 7, 9, 0.76) 30%, rgba(3, 7, 9, 0.2) 66%, transparent 88%),
    linear-gradient(0deg, rgba(2, 5, 7, 0.72) 0%, transparent 57%);
  pointer-events: none;
  will-change: opacity;
}

.scene-eight-field-note {
  position: absolute;
  z-index: 12;
  left: clamp(2rem, 7.5vw, 9rem);
  top: 50%;
  width: clamp(290px, 27vw, 420px);
  min-height: auto;
  opacity: var(--scene-eight-note-opacity);
  transform: translate3d(0, -50%, 0);
  will-change: opacity;
}

.scene-eight-cta {
  position: absolute;
  z-index: 12;
  left: clamp(2rem, 7.5vw, 9rem);
  bottom: clamp(2.2rem, 9vh, 6.5rem);
  width: min(39rem, 53vw);
  opacity: var(--scene-eight-cta-opacity);
  will-change: opacity;
}

.scene-eight-cta-kicker {
  margin: 0 0 0.9rem;
  color: #c83a57;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.68rem, 0.72vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.scene-eight-cta h2 {
  max-width: 12em;
  margin: 0;
  color: #f1ede4;
  font-family: "Dead Secretary Cyr", Georgia, serif;
  font-size: clamp(2.15rem, 3.4vw, 4.2rem);
  font-weight: normal;
  line-height: 0.98;
  text-wrap: balance;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.58),
    0 12px 34px rgba(0, 0, 0, 0.72);
}

.scene-eight-cta-copy {
  max-width: 34rem;
  margin: clamp(1rem, 2vh, 1.45rem) 0 0;
  color: rgba(239, 235, 225, 0.78);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.92rem, 1.06vw, 1.14rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.82);
}

.scene-eight-cta-footnote {
  margin: 0.9rem 0 0;
  color: rgba(239, 235, 225, 0.56);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.88rem;
  font-style: italic;
}

.scene-eight-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 1.45rem;
  margin-top: clamp(1.25rem, 2.6vh, 2rem);
  padding: 0.78rem 0.9rem 0.78rem 1.15rem;
  border: 1px solid rgba(238, 232, 219, 0.52);
  background: rgba(5, 11, 14, 0.72);
  color: #f4efe4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.scene-eight-cta-button:hover,
.scene-eight-cta-button:focus-visible {
  border-color: rgba(238, 232, 219, 0.82);
  background: rgba(13, 20, 23, 0.9);
  outline: none;
  transform: translateY(-2px);
}

.scene-eight-cta-button:hover .button-arrow,
.scene-eight-cta-button:focus-visible .button-arrow {
  transform: translate(2px, -2px);
}

.scene-eight-grain,
.scene-eight-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  align-items: center;
  gap: 2rem;
  min-height: 104px;
  padding: 1.6rem clamp(1.4rem, 4.5vw, 5.5rem);
  border-top: 1px solid rgba(225, 216, 197, 0.14);
  background: #070b0d;
  color: rgba(236, 230, 216, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.site-footer-mark {
  margin: 0;
  color: rgba(241, 235, 221, 0.86);
  font-family: "Dead Secretary Cyr", Georgia, serif;
  font-size: 0.82rem;
}

.site-footer-links,
.site-footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem 1.15rem;
}

.site-footer a,
.site-footer button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer button:hover,
.site-footer button:focus-visible {
  color: #f2ead9;
  outline: none;
}

.site-footer a[aria-disabled="true"] {
  color: rgba(236, 230, 216, 0.34);
  cursor: default;
}

.disclaimer-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(2, 5, 6, 0.82);
  backdrop-filter: blur(14px);
}

.disclaimer-dialog {
  position: relative;
  width: min(92vw, 560px);
  padding: clamp(2.2rem, 4vw, 3.6rem);
  border: 1px solid rgba(220, 203, 169, 0.24);
  background:
    repeating-linear-gradient(8deg, rgba(88, 62, 35, 0.025) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #e5d3b2, #cdb088);
  color: #30271d;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.56);
}

.disclaimer-dialog h2 {
  margin: 0;
  font-family: "Dead Secretary Cyr", Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.02;
  font-weight: 500;
}

.disclaimer-dialog > p:last-child {
  margin: 1.3rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.56;
}

.disclaimer-close {
  position: absolute;
  right: 0.8rem;
  top: 0.65rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: rgba(48, 39, 29, 0.72);
  font-family: Georgia, serif;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.scene-eight-grain {
  z-index: 10;
  opacity: 0.055;
  background-image:
    repeating-radial-gradient(circle at 21% 39%, #fff 0 0.35px, transparent 0.45px 2.2px),
    repeating-radial-gradient(circle at 76% 61%, #000 0 0.55px, transparent 0.65px 2.7px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: overlay;
}

.scene-eight-vignette {
  z-index: 9;
  background:
    radial-gradient(ellipse at 66% 44%, transparent 42%, rgba(2, 5, 6, 0.18) 73%, rgba(1, 3, 4, 0.72) 120%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.36), transparent 31%, transparent 82%, rgba(0, 0, 0, 0.16));
}

@keyframes fog-far {
  from { transform: translate3d(-5%, -4%, 0) scale(1); opacity: 0.32; }
  to { transform: translate3d(8%, 5%, 0) scale(1.08); opacity: 0.52; }
}

@keyframes fog-near {
  from { transform: translate3d(8%, 3%, 0) scale(1.06); opacity: 0.25; }
  to { transform: translate3d(-9%, -3%, 0) scale(0.96); opacity: 0.46; }
}

@keyframes hero-fog-drift {
  from { transform: translate3d(-3%, -2%, 0) scaleX(1.04); }
  to { transform: translate3d(5%, 3%, 0) scaleX(1.09); }
}

@keyframes lamp-breathe {
  0%, 100% { transform: scale(0.94); filter: brightness(0.86); }
  48% { transform: scale(1.07); filter: brightness(1.12); }
  60% { transform: scale(1.02); filter: brightness(0.98); }
}

@keyframes transition-cloud-drift {
  from { transform: translate3d(calc(var(--fog-drift) - 4%), -2%, 0) scale(1.04); }
  to { transform: translate3d(calc(var(--fog-drift) + 5%), 3%, 0) scale(1.12); }
}

@keyframes transition-band-one {
  from { transform: translate3d(calc(var(--fog-drift) - 7%), 0, 0) scaleX(1.06); }
  to { transform: translate3d(calc(var(--fog-drift) + 5%), 5%, 0) scaleX(1.13); }
}

@keyframes transition-band-two {
  from { transform: translate3d(calc(var(--fog-drift) + 5%), 2%, 0) scaleX(1.1); }
  to { transform: translate3d(calc(var(--fog-drift) - 8%), -4%, 0) scaleX(1.04); }
}

@keyframes transition-band-three {
  from { transform: translate3d(calc(var(--fog-drift) - 3%), 5%, 0) scaleX(1.08); }
  to { transform: translate3d(calc(var(--fog-drift) + 7%), -2%, 0) scaleX(1.15); }
}

@keyframes scene-four-cloud-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  to { transform: translate3d(4%, 2%, 0) scale(1.08); }
}

@keyframes scene-four-band-left {
  from { transform: translate3d(-4%, 0, 0) scaleX(1.04); }
  to { transform: translate3d(3%, 3%, 0) scaleX(1.1); }
}

@keyframes scene-four-band-right {
  from { transform: translate3d(4%, 2%, 0) scaleX(1.08); }
  to { transform: translate3d(-4%, -2%, 0) scaleX(1.03); }
}

@keyframes reserve-fog-left {
  from { transform: translate3d(-5%, 1%, 0) scaleY(0.9); opacity: 0.38; }
  to { transform: translate3d(4%, -2%, 0) scaleY(1.08); opacity: 0.72; }
}

@keyframes reserve-fog-right {
  from { transform: translate3d(5%, -2%, 0) scaleY(1.05); opacity: 0.45; }
  to { transform: translate3d(-5%, 2%, 0) scaleY(0.88); opacity: 0.75; }
}

@keyframes dragon-shimmer {
  0%, 100% {
    opacity: 0.44;
    filter: brightness(0.78) saturate(0.54);
  }
  43% {
    opacity: 0.9;
    filter: brightness(1.18) saturate(0.72);
  }
  68% {
    opacity: 0.61;
    filter: brightness(0.92) saturate(0.62);
  }
}

@keyframes routes-breathe {
  0%, 100% {
    filter: brightness(0.92) saturate(0.76) drop-shadow(0 0 12px rgba(238, 213, 156, 0.12));
  }
  52% {
    filter: brightness(1.12) saturate(0.9) drop-shadow(0 0 28px rgba(238, 213, 156, 0.3));
  }
}

@keyframes boundary-cloud-gather {
  from { transform: translate3d(-3%, -2%, 0) scale(1.04); }
  to { transform: translate3d(3%, 2%, 0) scale(1.1); }
}

@keyframes boundary-band-left {
  from { transform: translate3d(-5%, 1%, 0) scaleX(1.04); }
  to { transform: translate3d(2%, -2%, 0) scaleX(1.12); }
}

@keyframes boundary-band-right {
  from { transform: translate3d(4%, -1%, 0) scaleX(1.1); }
  to { transform: translate3d(-4%, 2%, 0) scaleX(1.03); }
}

@keyframes cabin-lamp-flicker {
  0%, 100% { filter: saturate(0.78) brightness(0.86); }
  42% { filter: saturate(0.9) brightness(1.02); }
  57% { filter: saturate(0.82) brightness(0.94); }
}

@keyframes cabin-fog-breathe-one {
  0%, 100% { transform: translate3d(0, 1%, 0) scaleY(0.91); opacity: 0.54; }
  43% { transform: translate3d(-4.5%, -1%, 0) scaleY(1.05); opacity: 0.78; }
  71% { transform: translate3d(-2%, 0, 0) scaleY(0.97); opacity: 0.64; }
}

@keyframes cabin-fog-breathe-two {
  0%, 100% { transform: translate3d(2%, -1%, 0) scaleY(1.04); opacity: 0.38; }
  36% { transform: translate3d(-6%, 2%, 0) scaleY(0.88); opacity: 0.61; }
  68% { transform: translate3d(-3%, -1%, 0) scaleY(1.01); opacity: 0.46; }
}

@keyframes cabin-fog-breathe-three {
  0%, 100% { transform: translate3d(-1%, 1%, 0) scaleY(0.94); opacity: 0.28; }
  51% { transform: translate3d(-8%, -2%, 0) scaleY(1.08); opacity: 0.5; }
}

@keyframes scene-eight-fog-one {
  0%, 100% { transform: translate3d(2%, 1%, 0) scaleY(0.92); opacity: 0.34; }
  46% { transform: translate3d(-6%, -1%, 0) scaleY(1.06); opacity: 0.54; }
  72% { transform: translate3d(-2%, 0, 0) scaleY(0.98); opacity: 0.42; }
}

@keyframes scene-eight-fog-two {
  0%, 100% { transform: translate3d(4%, -1%, 0) scaleY(1.04); opacity: 0.24; }
  38% { transform: translate3d(-8%, 2%, 0) scaleY(0.88); opacity: 0.4; }
  69% { transform: translate3d(-3%, -1%, 0) scaleY(1.01); opacity: 0.31; }
}

@keyframes scene-eight-fog-three {
  0%, 100% { transform: translate3d(-1%, 1%, 0) scaleY(0.95); opacity: 0.18; }
  53% { transform: translate3d(-10%, -2%, 0) scaleY(1.09); opacity: 0.31; }
}

@keyframes scene-eight-lantern-swing {
  0%, 100% { transform: rotate(-3.4deg); }
  47% { transform: rotate(4.2deg); }
  69% { transform: rotate(1.1deg); }
}

@keyframes scene-eight-walk-lantern-swing {
  0%, 100% { transform: rotate(-4.8deg); }
  50% { transform: rotate(5.2deg); }
}

@keyframes scene-eight-lantern-flicker {
  0%, 100% { filter: saturate(0.88) brightness(0.88); }
  39% { filter: saturate(1.02) brightness(1.08); }
  55% { filter: saturate(0.92) brightness(0.96); }
  74% { filter: saturate(0.98) brightness(1.03); }
}

@keyframes scene-eight-wall-light-flicker {
  0%, 100% {
    opacity: 0.5;
    filter: blur(1px) brightness(0.92) saturate(0.9);
    transform: translate3d(var(--scene-eight-bg-x), 0, 0) scale(0.94);
  }
  27% {
    opacity: 0.82;
    filter: blur(2px) brightness(1.08) saturate(1.02);
    transform: translate3d(var(--scene-eight-bg-x), 0, 0) scale(1.06);
  }
  43% {
    opacity: 0.64;
    filter: blur(1.4px) brightness(0.98) saturate(0.94);
    transform: translate3d(var(--scene-eight-bg-x), 0, 0) scale(0.99);
  }
  71% {
    opacity: 0.92;
    filter: blur(2.2px) brightness(1.12) saturate(1.04);
    transform: translate3d(var(--scene-eight-bg-x), 0, 0) scale(1.08);
  }
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.7); opacity: 0.35; transform-origin: top; }
  50% { transform: scaleY(1.1); opacity: 0.95; transform-origin: top; }
}

@media (max-width: 900px) {
  .camera-world {
    inset: -6%;
    transform: scale(1.08);
  }

  .layer-background {
    width: 112%;
    height: 112%;
    inset: -6%;
    object-position: 62% 50%;
  }

  .layer-midground {
    width: 178%;
    left: -57%;
    bottom: -1%;
  }

  .layer-subject {
    right: -10%;
    bottom: -2%;
    height: 66%;
    filter: brightness(0.88) saturate(0.9) drop-shadow(-12px 18px 24px rgba(0, 0, 0, 0.42));
  }

  .layer-left,
  .layer-top,
  .layer-bottom {
    width: 165%;
  }

  .layer-left {
    left: -50%;
  }

  .layer-top {
    left: -45%;
  }

  .layer-bottom {
    left: -27%;
  }

  .lamp-glow {
    left: 44%;
    top: 60%;
    width: 42vw;
    height: 42vw;
  }

  .hero-copy {
    left: 7vw;
    top: 8.5%;
    width: 88vw;
  }

  .eyebrow {
    max-width: 70vw;
    margin-bottom: 0.85rem;
    font-size: 0.55rem;
    line-height: 1.5;
  }

  h1 {
    font-size: clamp(2.05rem, 9vw, 4rem);
    line-height: 1.13;
    letter-spacing: -0.052em;
    transform: none;
  }

  h1 span {
    white-space: normal;
  }

  .enter-button {
    margin-top: 1.25rem;
    padding: 0.68rem 0.72rem 0.68rem 0.95rem;
    font-size: 0.65rem;
  }

  .movement-hint {
    display: none;
  }

  .transition-fog {
    inset: -12%;
  }

  .fog-cloud {
    left: -42%;
    top: 10%;
    width: 188%;
  }

  .fog-band {
    left: -38%;
    width: 176%;
  }

  .scene-two-copy h2 {
    gap: 0.7rem;
    font-size: clamp(2.6rem, 11.8vw, 5rem);
  }

  .scene-two-dots {
    letter-spacing: 0.3em;
  }

  .film-track {
    top: 51%;
    width: 246vh;
    width: 246svh;
    height: 44vh;
    height: 44svh;
  }

  .thought-copy {
    font-size: clamp(0.62rem, 2.55vw, 0.82rem);
  }

  .scene-four-fogs {
    width: 150vw;
    height: 64vh;
    height: 64svh;
  }

  .scene-four-text {
    width: 92vw;
    padding: 1.25rem;
  }

  .scene-four-text h2 {
    font-size: clamp(2rem, 10vw, 3.7rem);
  }

  .scene-four-text > p:last-child {
    font-size: clamp(0.94rem, 4vw, 1.2rem);
  }

  .film-field-note,
  .cabin-field-note,
  .scene-four-text.field-note {
    width: min(84vw, 350px);
    min-height: min(64svh, 510px);
    padding: 2rem 1.6rem;
  }

  .cabin-field-note-one {
    left: 48%;
    top: 38%;
  }

  .cabin-field-note-two {
    left: 43%;
    top: 49%;
  }

  .film-field-note {
    left: 50%;
    right: auto;
    transform: translate3d(-50%, -50%, 0);
  }

  .brain-note {
    left: 50%;
    right: auto;
    top: 13%;
    bottom: auto;
    width: min(78vw, 320px);
    min-height: min(42svh, 380px);
  }

  .brain-note-one {
    transform: translateX(-50%);
  }

  .brain-note-two {
    transform: translateX(-50%) rotate(1.2deg);
  }

  .brain-note-three {
    transform: translateX(-50%) rotate(-1deg);
  }

  .brain-note-four {
    transform: translateX(-50%) rotate(0.7deg);
  }

  .scene-five-note {
    left: 50%;
    right: auto;
    top: 50%;
    width: min(84vw, 360px);
    transform: translate3d(-50%, -50%, 0);
  }

  .scene-five-stage {
    width: 177.78svh;
  }

  .scene-five-keeper-front {
    left: 20%;
    height: 68%;
  }

  .scene-five-olya-close {
    left: 30%;
    bottom: -55%;
    height: 150%;
  }

  .scene-six-mri-strip {
    height: 86%;
    max-width: 25%;
  }

  .scene-end-band,
  .cabin-entry-band {
    left: -24%;
    width: 148%;
  }

  .cabin-background {
    object-position: 68% center;
  }

  .cabin-door {
    right: -3%;
    width: 36vw;
    height: 70svh;
  }

  .cabin-keeper {
    left: 48%;
    top: 8%;
    width: 56%;
    height: auto;
  }

  .cabin-table {
    left: -1%;
    bottom: 0;
    width: 104%;
  }

  .cabin-olya {
    left: -16%;
    height: 70%;
  }

  .scene-eight-background {
    object-position: 66% center;
  }

  .scene-eight-doorway-fog {
    left: 17%;
    width: 83%;
  }

  .scene-eight-portrait-keeper {
    left: -9%;
    width: 92vw;
    height: 106%;
  }

  .scene-eight-olya {
    right: -17%;
    bottom: 4%;
    width: 51vw;
    height: 76%;
  }

  .scene-eight-walkers {
    left: 42%;
    top: 20%;
    width: 58vw;
    height: 46%;
  }

  .scene-eight-lantern-light {
    object-position: 42% center;
  }

  .scene-eight-end-shade {
    background:
      linear-gradient(0deg, rgba(2, 5, 7, 0.94) 0%, rgba(2, 5, 7, 0.74) 37%, transparent 76%),
      linear-gradient(90deg, rgba(2, 5, 7, 0.62), transparent 86%);
  }

  .scene-eight-cta {
    left: 7vw;
    right: 7vw;
    bottom: max(1.5rem, 6svh);
    width: auto;
  }

  .scene-eight-field-note {
    left: 50%;
    top: 48%;
    width: min(84vw, 360px);
    transform: translate3d(-50%, -50%, 0);
  }

  .scene-eight-cta h2 {
    max-width: 11em;
    font-size: clamp(1.8rem, 7.5vw, 3rem);
  }

  .scene-eight-cta-copy {
    max-width: 30rem;
    font-size: clamp(0.88rem, 3.7vw, 1.05rem);
  }

  .cabin-door-fog-layer {
    right: -42%;
    height: 108%;
  }

  .cabin-door-fog-two {
    right: -54%;
  }

  .cabin-door-fog-three {
    right: -34%;
  }

  .scroll-hint {
    bottom: 1rem;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding-block: 1.8rem;
  }

  .site-footer-links,
  .site-footer-social {
    justify-content: flex-start;
  }
}

@media (max-width: 430px) {
  .layer-subject {
    right: -18%;
    height: 60%;
  }

  .hero-copy {
    top: 7%;
  }

  h1 {
    font-size: clamp(1.85rem, 9.6vw, 2.55rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .camera-world,
  .scene-layer,
  .fog,
  .fog-asset,
  .layer-hero-fog,
  .scene-four-cloud,
  .scene-four-band,
  .scene-five-fog,
  .scene-five-dragon,
  .scene-six-brain-routes,
  .scene-end-band,
  .cabin-entry-band,
  .cabin-warm-glow,
  .cabin-door-fog-layer,
  .scene-eight-fog,
  .scene-eight-lantern,
  .scene-eight-walk-lantern,
  .scene-eight-lantern-light,
  .scene-eight-wall-light-flicker,
  .lamp-glow,
  .enter-button,
  .button-arrow,
  .scroll-line {
    animation: none !important;
    transition: none !important;
  }
}


[hidden] { display: none !important; }