:root {
  color-scheme: light;
  font-family: "Nunito Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #7a3e55;
  background: #fff8fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: #fff8fb;
}

html.is-access-error,
html.is-access-error body {
  overflow: hidden;
  background: #180b17;
}

button,
input {
  font: inherit;
}

::selection {
  color: #7a3e55;
  background: #f3b3c7;
}

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(18px, env(safe-area-inset-top)) 18px
    max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(ellipse 66% 76% at 82% 42%, rgba(239, 184, 204, 0.43), transparent 72%),
    radial-gradient(ellipse 72% 48% at 54% 112%, rgba(248, 220, 231, 0.6), transparent 74%),
    linear-gradient(142deg, rgba(255, 248, 251, 0.82) 4%, rgba(253, 235, 242, 0.54) 48%, transparent 78%),
    linear-gradient(28deg, #fdebf2 0%, #fff8fb 38%, #fdf0f5 70%, #f8dce7 100%);
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(150deg, rgba(255, 235, 243, 0.44), rgba(142, 77, 107, 0.2) 46%),
    linear-gradient(24deg, #6b3851 0%, #8e4d6b 46%, #b26784 100%);
  opacity: 0;
  transition: opacity 2400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.is-entering::before,
.hero.is-night::before {
  opacity: 1;
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(253, 235, 242, 0.02) 54%,
    rgba(217, 141, 169, 0.08) 100%
  );
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms ease;
  animation: scene-reveal 1450ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.hero__error-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(229, 99, 146, 0.55), transparent 62%),
    rgba(174, 47, 94, 0.72);
}

.hero[data-error-pattern="1"] {
  --error-veil-peak: 0.08;
  --error-veil-soft: 0.035;
  --error-duration: 660ms;
  --error-animation: scene-reject-one;
}

.hero[data-error-pattern="2"] {
  --error-veil-peak: 0.11;
  --error-veil-soft: 0.05;
  --error-duration: 720ms;
  --error-animation: scene-reject-two;
}

.hero[data-error-pattern="3"] {
  --error-veil-peak: 0.14;
  --error-veil-soft: 0.065;
  --error-duration: 790ms;
  --error-animation: scene-reject-three;
}

.hero[data-error-pattern="4"] {
  --error-veil-peak: 0.16;
  --error-veil-soft: 0.075;
  --error-duration: 840ms;
  --error-animation: scene-reject-four;
}

.hero[data-error-pattern="5"],
.hero[data-error-pattern="6"] {
  --error-veil-peak: 0.19;
  --error-veil-soft: 0.09;
  --error-duration: 840ms;
}

.hero[data-error-pattern="5"] {
  --error-animation: scene-reject-five;
}

.hero[data-error-pattern="6"] {
  --error-animation: scene-reject-six;
}

.hero.is-access-error {
  z-index: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: var(--error-animation) var(--error-duration) cubic-bezier(0.36, 0.03, 0.2, 1)
    both;
}

.hero.is-access-error .hero__error-veil {
  animation: error-veil var(--error-duration) ease-out both;
}

.hero.is-night:not(.is-chapter)::after {
  background:
    radial-gradient(ellipse 42% 58% at 69% 48%, transparent 20%, rgba(74, 28, 55, 0.12) 82%),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(42, 14, 33, 0.2) 112%);
}

.hero[data-emotion-level="3"]::after,
.hero[data-emotion-level="4"]::after,
.hero[data-emotion-level="5"]::after {
  background:
    radial-gradient(ellipse 42% 58% at 69% 48%, rgba(179, 100, 132, 0.025), rgba(65, 24, 50, 0.17) 82%),
    radial-gradient(ellipse at 50% 50%, transparent 36%, rgba(35, 11, 28, 0.3) 112%);
}

.no-webgl .hero__canvas {
  opacity: 0;
}

.hero__panel {
  position: relative;
  z-index: 2;
  isolation: isolate;
  align-self: end;
  width: min(100%, 33rem);
  margin: 0 auto max(1.125rem, env(safe-area-inset-bottom));
  padding: 2rem 1.65rem 1.85rem;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 244, 249, 0.58), rgba(248, 218, 231, 0.44));
  border: 1px solid rgba(225, 153, 180, 0.58);
  border-top-color: rgba(255, 252, 253, 0.78);
  border-radius: 30px;
  box-shadow:
    0 2.2rem 5.5rem rgba(179, 96, 130, 0.2),
    0 0.8rem 2.2rem rgba(239, 160, 190, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1.8rem 3.4rem rgba(217, 141, 169, 0.1);
  backdrop-filter: blur(13px) saturate(122%);
  -webkit-backdrop-filter: blur(13px) saturate(122%);
  animation: panel-reveal 1080ms 80ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition:
    opacity 900ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms ease,
    border-color 650ms ease,
    box-shadow 650ms ease;
}

.hero__panel::before,
.hero__panel::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.hero__panel > * {
  position: relative;
  z-index: 1;
}

.hero__panel::before {
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 12% 4%, rgba(255, 255, 255, 0.58), transparent 42%),
    radial-gradient(ellipse at 92% 100%, rgba(239, 184, 204, 0.13), transparent 48%);
}

.hero__panel::after {
  inset: -45% -80%;
  opacity: 0;
  background: linear-gradient(
    112deg,
    transparent 41%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(239, 184, 204, 0.14) 54%,
    transparent 60%
  );
  transform: translateX(-28%);
  transition:
    opacity 420ms ease,
    transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.is-entering .hero__panel,
.hero.is-night .hero__panel,
.hero.is-exiting .hero__panel {
  pointer-events: none;
  opacity: 0;
  filter: blur(3px);
  transform: translateY(12px) scale(0.988);
}

.hero__header {
  display: grid;
  gap: 0;
}

.hero__eyebrow,
.hero__message,
.hero__button {
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
}

.hero__eyebrow {
  margin: 0 0 0.95rem;
  color: #a45c78;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
}

.hero__title {
  max-width: 100%;
  margin: 0;
  color: #8f3e5b;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 3.05rem;
  font-weight: 600;
  line-height: 0.97;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 0.35rem 1.15rem rgba(143, 62, 91, 0.12);
}

.hero__ornament {
  width: 6.4rem;
  height: auto;
  margin: 0.58rem auto 0;
  overflow: visible;
  fill: none;
  stroke: #cf7899;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-dasharray: 116;
  stroke-dashoffset: 116;
  opacity: 0.84;
  animation: ornament-draw 1200ms 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__message {
  max-width: 27rem;
  margin: 1.2rem auto 0;
  color: #7d5260;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.7;
}

.hero__button {
  min-height: 3.25rem;
  margin-top: 1.5rem;
  padding: 0.85rem 1.35rem;
  color: #ffffff;
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  touch-action: manipulation;
  background:
    linear-gradient(
        105deg,
        transparent 34%,
        rgba(255, 255, 255, 0.42) 49%,
        transparent 64%
      )
      145% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, #d886a6, #c96f92);
  border: 1px solid rgba(122, 62, 85, 0.16);
  border-radius: 6px;
  box-shadow:
    0 0.75rem 1.8rem rgba(216, 134, 166, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-position 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__button:hover {
  background-position: -125% 0, 0 0;
  transform: translateY(-2px);
  box-shadow:
    0 1rem 2.3rem rgba(216, 134, 166, 0.42),
    0 0 1.5rem rgba(243, 179, 199, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.hero__button:active {
  background-position: -125% 0, 0 0;
  transform: scale(0.98);
}

.hero__button:focus-visible {
  outline: 3px solid rgba(122, 62, 85, 0.34);
  outline-offset: 4px;
}

.hero__button:disabled {
  cursor: default;
}

.hero__button.is-activated {
  background-position: -125% 0, 0 0;
  box-shadow:
    0 0 2.4rem rgba(255, 255, 255, 0.52),
    0 0 2.8rem rgba(243, 179, 199, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
  .hero__panel:hover,
  .hero__panel:focus-within {
    border-color: rgba(217, 141, 169, 0.72);
    box-shadow:
      0 2.35rem 5.8rem rgba(179, 96, 130, 0.23),
      0 0.8rem 2.35rem rgba(239, 160, 190, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1.8rem 3.4rem rgba(217, 141, 169, 0.12);
  }

  .hero__panel:hover::after,
  .hero__panel:focus-within::after {
    opacity: 0.78;
    transform: translateX(28%);
  }
}

.access-dialog {
  --panel-alpha: 0.2;
  --panel-border-alpha: 0.55;
  --panel-shadow-alpha: 0.26;
  --panel-inner-alpha: 0.34;
  --panel-brightness: 1;
  width: min(calc(100% - 2rem), 25rem);
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin: auto;
  padding: 2.8rem 2rem 2rem;
  overflow: auto;
  color: #fffafc;
  text-align: center;
  background: rgba(255, 244, 249, var(--panel-alpha));
  border: 1px solid rgba(255, 224, 236, var(--panel-border-alpha));
  border-top-color: rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  box-shadow:
    0 1.8rem 5rem rgba(91, 43, 66, var(--panel-shadow-alpha)),
    inset 0 1px 0 rgba(255, 255, 255, var(--panel-inner-alpha));
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  filter: brightness(var(--panel-brightness));
  transition:
    background-color 780ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 780ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 780ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.access-dialog[data-emotion-level="1"] {
  --panel-alpha: 0.19;
  --panel-border-alpha: 0.5;
  --panel-shadow-alpha: 0.28;
  --panel-inner-alpha: 0.3;
  --panel-brightness: 0.98;
}

.access-dialog[data-emotion-level="2"] {
  --panel-alpha: 0.18;
  --panel-border-alpha: 0.45;
  --panel-shadow-alpha: 0.31;
  --panel-inner-alpha: 0.27;
  --panel-brightness: 0.96;
}

.access-dialog[data-emotion-level="3"] {
  --panel-alpha: 0.17;
  --panel-border-alpha: 0.4;
  --panel-shadow-alpha: 0.35;
  --panel-inner-alpha: 0.23;
  --panel-brightness: 0.94;
}

.access-dialog[data-emotion-level="4"] {
  --panel-alpha: 0.155;
  --panel-border-alpha: 0.36;
  --panel-shadow-alpha: 0.39;
  --panel-inner-alpha: 0.2;
  --panel-brightness: 0.92;
}

.access-dialog[data-emotion-level="5"] {
  --panel-alpha: 0.14;
  --panel-border-alpha: 0.32;
  --panel-shadow-alpha: 0.44;
  --panel-inner-alpha: 0.17;
  --panel-brightness: 0.9;
}

.access-dialog[open] {
  display: grid;
  gap: 1.6rem;
  animation: access-dialog-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.access-dialog::backdrop {
  background: rgba(96, 47, 71, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: access-backdrop-in 620ms ease both;
}

.access-dialog__close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: #fffafc;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  place-items: center;
  transition:
    background-color 180ms ease,
    transform 180ms ease;
}

.access-dialog__close:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.04);
}

.access-dialog__header {
  display: grid;
  gap: 0.75rem;
}

.access-dialog__eyebrow {
  margin: 0;
  color: #ffe3ed;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
}

.access-dialog__title {
  margin: 0;
  color: #fffafc;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-size: 2.05rem;
  font-weight: 600;
  line-height: 1.12;
}

.access-dialog__hint {
  max-width: 20rem;
  margin: 0 auto;
  color: #ffe3ed;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: balance;
}

.access-dialog__controls {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.access-dialog__input,
.access-dialog__button {
  width: 100%;
  min-height: 3.2rem;
  border-radius: 6px;
}

.access-dialog__input {
  padding: 0.75rem 0.9rem;
  color: #fffafc;
  caret-color: #fff0f5;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 224, 236, 0.58);
  outline: none;
  box-shadow: inset 0 0.4rem 1.2rem rgba(91, 43, 66, 0.1);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.access-dialog__input::placeholder {
  color: rgba(255, 240, 245, 0.68);
  opacity: 1;
}

.access-dialog__input:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 0 0 3px rgba(255, 224, 236, 0.18),
    inset 0 0.4rem 1.2rem rgba(91, 43, 66, 0.08);
}

.access-dialog__button {
  padding: 0.8rem 1.1rem;
  color: #7a3e55;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(135deg, #ffffff, #ffe3ed);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow: 0 0.85rem 2rem rgba(91, 43, 66, 0.2);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.access-dialog__button:hover {
  box-shadow:
    0 1rem 2.3rem rgba(91, 43, 66, 0.24),
    0 0 1.5rem rgba(255, 227, 237, 0.22);
  transform: translateY(-1px);
}

.access-dialog__input:disabled,
.access-dialog__button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.access-dialog__button:disabled:hover {
  box-shadow: 0 0.85rem 2rem rgba(91, 43, 66, 0.2);
  transform: none;
}

.access-dialog__feedback {
  min-height: 2.8rem;
  margin: -0.05rem 0 0;
  color: #fff0f5;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 0.25rem 0.9rem rgba(91, 43, 66, 0.34);
  opacity: 0;
  transform: translateY(-3px);
  transition:
    opacity 220ms ease,
    transform 260ms ease;
}

.access-dialog__feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.access-dialog.is-error {
  border-color: rgba(239, 118, 164, 0.96);
  box-shadow:
    0 1.8rem 5rem rgba(91, 43, 66, 0.26),
    0 0 2.8rem rgba(205, 73, 122, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 2.2rem rgba(214, 82, 130, 0.12);
}

.access-dialog.is-error .access-dialog__input {
  border-color: rgba(246, 143, 180, 0.92);
  box-shadow:
    0 0 0 3px rgba(226, 94, 143, 0.15),
    0 0 1.7rem rgba(214, 82, 130, 0.22),
    inset 0 0.4rem 1.2rem rgba(91, 43, 66, 0.12);
}

.access-dialog.is-healing[open] {
  animation: access-healing-out var(--healing-duration, 2500ms)
    cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.access-dialog__close:focus-visible,
.access-dialog__button:focus-visible,
.chapter__back:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.52);
  outline-offset: 3px;
}

.ritual-greeting {
  position: absolute;
  top: 66%;
  left: 50%;
  z-index: 4;
  display: grid;
  width: min(90%, 46rem);
  margin: 0;
  padding: 2.2rem 3rem 2.5rem;
  color: #fff9f3;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  background: radial-gradient(
    ellipse at 50% 54%,
    rgba(126, 54, 84, 0.42) 0%,
    rgba(78, 27, 57, 0.24) 44%,
    transparent 74%
  );
  border: 0;
  border-radius: 50%;
  box-shadow:
    0 1.8rem 5rem rgba(37, 10, 29, 0.2),
    0 0 5rem rgba(179, 86, 123, 0.12);
  text-shadow:
    0 0.22rem 0.9rem rgba(47, 12, 35, 0.86),
    0 0 2.2rem rgba(255, 224, 235, 0.42);
  pointer-events: none;
  opacity: 0;
  filter: blur(5px);
  transform: translate(-50%, 20px) scale(0.9);
  transition:
    opacity 800ms ease,
    filter 800ms ease,
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
  place-items: center;
}

.ritual-greeting__kicker,
.ritual-greeting__main {
  display: block;
}

.ritual-greeting__kicker {
  margin-bottom: 0.15rem;
  font-size: clamp(3.2rem, 4.2vw, 4rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(0.6rem) scale(0.96);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ritual-greeting__main {
  font-size: clamp(4.2rem, 5.5vw, 5.2rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(0.4rem) scale(0.97);
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ritual-greeting.is-visible .ritual-greeting__kicker {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 120ms;
}

.ritual-greeting.is-visible .ritual-greeting__main {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 280ms;
}

.ritual-greeting.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, 0) scale(1);
  animation: greeting-arrive 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ritual-greeting.is-visible .ritual-greeting__main {
  animation: greeting-breathe 4.2s 1300ms ease-in-out infinite;
}

.hero.is-greeting-exiting .ritual-greeting {
  background: radial-gradient(
    ellipse at 50% 54%,
    rgba(105, 45, 77, 0.34) 0%,
    rgba(63, 22, 48, 0.2) 50%,
    transparent 78%
  );
  filter: blur(7px);
}

.ritual-greeting[hidden],
.chapter[hidden] {
  display: none;
}

.chapter {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  min-height: 100%;
  padding:
    max(5.5rem, calc(env(safe-area-inset-top) + 4.75rem))
    max(1.125rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1.125rem, env(safe-area-inset-left));
  overflow: auto;
  isolation: isolate;
  color: #fff0f5;
  background:
    radial-gradient(ellipse 58% 56% at 76% 34%, rgba(172, 74, 112, 0.26), transparent 70%),
    radial-gradient(ellipse 72% 54% at 18% 100%, rgba(105, 45, 77, 0.3), transparent 72%),
    linear-gradient(145deg, rgba(24, 11, 23, 0.56), rgba(13, 8, 16, 0.68));
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 1200ms;
}

.chapter::before,
.chapter::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.chapter::before {
  background:
    radial-gradient(circle at 17% 24%, rgba(255, 236, 243, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 18%, rgba(239, 184, 204, 0.2) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 78%, rgba(255, 240, 245, 0.14) 0 1.5px, transparent 2.5px),
    radial-gradient(ellipse 48% 34% at 67% 42%, rgba(217, 110, 150, 0.15), transparent 72%),
    radial-gradient(ellipse at center, transparent 34%, rgba(4, 2, 6, 0.64) 118%);
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 1300ms ease,
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter::after {
  background: linear-gradient(
    104deg,
    transparent 20%,
    rgba(128, 55, 87, 0.08) 42%,
    rgba(13, 8, 16, 0.58) 58%,
    rgba(13, 8, 16, 0.12) 78%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-28%);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter.is-visible {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

.chapter.is-visible::before {
  opacity: 1;
  transform: scale(1);
}

.chapter.is-visible::after {
  opacity: 1;
  transform: translateX(18%);
}

.chapter__back {
  position: absolute;
  z-index: 1;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  display: inline-flex;
  min-height: 2.75rem;
  padding: 0.55rem 0.7rem;
  color: #fff0f5;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  touch-action: manipulation;
  background: rgba(24, 11, 23, 0.58);
  border: 1px solid rgba(239, 184, 204, 0.28);
  border-radius: 6px;
  box-shadow:
    0 0.9rem 2.2rem rgba(2, 1, 3, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  gap: 0.48rem;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;
}

.chapter__back:hover {
  color: #ffffff;
  background: rgba(75, 31, 58, 0.72);
  border-color: rgba(239, 184, 204, 0.52);
}

.chapter__back:focus-visible {
  outline-color: rgba(255, 224, 236, 0.58);
}

.chapter__content {
  position: relative;
  z-index: 1;
  width: min(100%, 40rem);
  padding: 2.6rem 2rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(239, 184, 204, 0.11), transparent 50%),
    linear-gradient(145deg, rgba(42, 19, 37, 0.78), rgba(13, 8, 16, 0.72));
  border: 1px solid rgba(239, 184, 204, 0.3);
  border-top-color: rgba(255, 227, 237, 0.42);
  border-radius: 30px;
  box-shadow:
    0 2.5rem 6.5rem rgba(2, 1, 3, 0.52),
    0 0 3rem rgba(155, 67, 102, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2rem 4rem rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
  transition:
    opacity 760ms ease,
    filter 850ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter.is-visible .chapter__content {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition-delay: 1350ms;
}

.chapter__eyebrow,
.chapter__title,
.chapter__message {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 620ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter.is-visible .chapter__eyebrow,
.chapter.is-visible .chapter__title,
.chapter.is-visible .chapter__message {
  opacity: 1;
  transform: translateY(0);
}

.chapter.is-visible .chapter__eyebrow {
  transition-delay: 1560ms;
}

.chapter.is-visible .chapter__title {
  transition-delay: 1680ms;
}

.chapter.is-visible .chapter__message {
  transition-delay: 1800ms;
}

.chapter__eyebrow {
  margin: 0 0 0.9rem;
  color: #e7a9c0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.chapter__title {
  margin: 0;
  color: #fff0f5;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.02;
  text-wrap: balance;
  text-shadow:
    0 0.3rem 1.1rem rgba(3, 1, 4, 0.68),
    0 0 2.2rem rgba(217, 141, 169, 0.11);
}

.chapter__message {
  max-width: 31rem;
  margin: 1.25rem auto 0;
  color: #dfc2cd;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.7;
  text-wrap: balance;
}

.chapter [hidden] {
  display: none !important;
}

.chapter__sky,
.chapter__backdrop,
.chapter__celestial-pause {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chapter__sky {
  z-index: 0;
  overflow: hidden;
}

.chapter__content,
.chapter__note,
.chapter__guiding-star,
.flight,
.chapter-reward,
.memories {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
}

.chapter__sky::before,
.chapter__sky::after {
  position: absolute;
  inset: -8%;
  content: "";
  pointer-events: none;
}

.chapter__sky::before {
  background:
    radial-gradient(ellipse 36% 30% at 55% 48%, rgba(218, 124, 159, 0.14), transparent 74%),
    radial-gradient(ellipse 48% 34% at 42% 95%, rgba(114, 43, 79, 0.28), transparent 76%);
  filter: blur(24px);
  animation: chapter-mist-breathe 9s ease-in-out infinite alternate;
}

.chapter__sky::after {
  background:
    radial-gradient(circle at 11% 19%, rgba(255, 238, 244, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 74%, rgba(233, 168, 192, 0.38) 0 1px, transparent 2px),
    radial-gradient(circle at 53% 16%, rgba(255, 247, 250, 0.42) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 78% 69%, rgba(235, 181, 201, 0.36) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 30%, rgba(255, 237, 244, 0.46) 0 1px, transparent 2px);
  background-size: 17rem 14rem, 21rem 18rem, 23rem 16rem, 19rem 21rem, 27rem 22rem;
  opacity: 0.42;
  animation: chapter-stars-drift 18s linear infinite alternate;
}

.chapter__backdrop {
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(13, 7, 17, 0.12), rgba(17, 8, 20, 0.74)),
    var(--chapter-scene-image),
    radial-gradient(ellipse at 50% 74%, rgba(174, 75, 113, 0.22), transparent 62%);
  background-position: center;
  background-size: cover;
  filter: saturate(82%) brightness(0.66);
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1600ms ease;
  animation: chapter-backdrop-drift 16s ease-in-out infinite alternate;
}

.chapter__backdrop[data-scene="panama-sunset"] {
  background-color: #422036;
  background-image:
    linear-gradient(180deg, rgba(41, 20, 43, 0.08), rgba(20, 9, 22, 0.76)),
    var(--chapter-scene-image),
    linear-gradient(160deg, #7f4761 0%, #9d5f79 30%, #5d2c4a 60%, #1b0c20 100%);
}

.chapter__backdrop[data-scene="panama-night"] {
  background-color: #180d20;
  background-image:
    linear-gradient(180deg, rgba(11, 8, 21, 0.16), rgba(13, 6, 18, 0.78)),
    var(--chapter-scene-image),
    radial-gradient(ellipse at 55% 72%, #84506a 0%, #36203e 38%, #120b1a 82%);
}

.chapter__backdrop[data-scene="miraflores"] {
  background-color: #4e293f;
  background-image:
    linear-gradient(180deg, rgba(30, 14, 34, 0.12), rgba(14, 7, 19, 0.78)),
    var(--chapter-scene-image),
    linear-gradient(145deg, #6f405a 0%, #a36a7d 30%, #553044 62%, #160b1a 100%);
}

.chapter__backdrop[data-scene="barranco"] {
  background-color: #1d0e1d;
  background-image:
    linear-gradient(180deg, rgba(17, 8, 21, 0.1), rgba(12, 5, 16, 0.8)),
    var(--chapter-scene-image),
    radial-gradient(ellipse at 70% 68%, #754058 0%, #3b1d35 38%, #100814 82%);
}

.chapter__celestial-pause {
  opacity: 0;
  background:
    radial-gradient(ellipse 38% 32% at 50% 48%, rgba(164, 102, 154, 0.18), transparent 70%),
    linear-gradient(rgba(11, 13, 39, 0.82), rgba(18, 10, 33, 0.88));
  transition: opacity 900ms ease;
}

.chapter:has(.flight.is-paused) .chapter__celestial-pause {
  opacity: 1;
}

.chapter__soul-light {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 0.58rem;
  height: 0.58rem;
  background: #fff7fa;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow:
    0 0 0.75rem rgba(255, 232, 241, 0.94),
    0 0 2.4rem rgba(229, 144, 180, 0.6);
  opacity: 0;
}

.chapter:has(.flight.is-paused) .chapter__soul-light {
  opacity: 1;
}

.chapter:has(.flight.is-paused) .chapter__soul-light--angel {
  animation: soul-light-angel 5.5s cubic-bezier(0.45, 0, 0.18, 1) both;
}

.chapter:has(.flight.is-paused) .chapter__soul-light--adriana {
  animation: soul-light-adriana 5.5s cubic-bezier(0.45, 0, 0.18, 1) both;
}

.chapter__intro.is-leaving {
  pointer-events: none;
  opacity: 0 !important;
  filter: blur(7px) !important;
  transform: translateY(-10px) scale(0.98) !important;
  transition-delay: 0ms !important;
}

.chapter__note {
  position: relative;
  z-index: 2;
  width: min(39rem, calc(100vw - 2.25rem));
  margin: 0;
  padding: 1rem 1.25rem;
  color: #ffeaf2;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-shadow:
    0 0.4rem 1.5rem rgba(10, 3, 11, 0.84),
    0 0 2.5rem rgba(232, 152, 183, 0.3);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(12px) scale(0.985);
  transition:
    opacity 900ms ease,
    filter 1000ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter__note::after {
  position: absolute;
  inset: 22% 10%;
  z-index: -1;
  content: "";
  background: radial-gradient(ellipse, rgba(152, 75, 112, 0.23), transparent 72%);
  filter: blur(18px);
}

.chapter__note::before {
  position: absolute;
  inset: -45% -8%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 62%, rgba(255, 239, 245, 0.92) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 28%, rgba(235, 171, 197, 0.82) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 48% 74%, rgba(255, 245, 248, 0.88) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 31%, rgba(230, 151, 184, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 57%, rgba(255, 232, 241, 0.88) 0 1.5px, transparent 2.5px);
  opacity: 0;
}

.chapter__note.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.chapter__note.is-dissolving {
  letter-spacing: 0.035em;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(-16px) scale(1.025);
}

.chapter__note.is-dissolving::before {
  animation: note-stars-release 1100ms ease-out both;
}

.chapter__guiding-star {
  position: relative;
  z-index: 2;
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  color: #fff5f8;
  font-size: 2.15rem;
  cursor: pointer;
  touch-action: manipulation;
  background: radial-gradient(circle, rgba(230, 147, 179, 0.32), rgba(91, 39, 71, 0.12) 46%, transparent 72%);
  border: 0;
  border-radius: 50%;
  outline-offset: 0.35rem;
  box-shadow: 0 0 2.6rem rgba(229, 143, 178, 0.16);
  opacity: 0;
  filter: blur(6px);
  transform: scale(0.65) rotate(-16deg);
  transition:
    opacity 700ms ease,
    filter 850ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms ease;
  place-items: center;
}

.chapter__guiding-star::before,
.chapter__guiding-star::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(244, 186, 208, 0.3);
  border-radius: 50%;
  transition: transform 500ms ease, opacity 500ms ease;
}

.chapter__guiding-star::before {
  inset: 0.35rem;
}

.chapter__guiding-star::after {
  inset: -0.4rem;
  opacity: 0.38;
}

.chapter__guiding-star.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: scale(1) rotate(0);
  animation: guiding-star-breathe 3.8s ease-in-out infinite;
}

.chapter__guiding-star:hover,
.chapter__guiding-star:focus-visible {
  color: #ffffff;
  transform: scale(1.09) rotate(7deg);
}

.chapter__guiding-star:hover::before,
.chapter__guiding-star:focus-visible::before {
  transform: scale(1.14) rotate(-18deg);
}

.chapter__guiding-star:hover::after,
.chapter__guiding-star:focus-visible::after {
  opacity: 0;
  transform: scale(1.35);
}

.flight {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(70rem, 91vw);
  color: #f8eaf0;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(14px) scale(0.992);
  transition:
    opacity 900ms ease,
    filter 1000ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  gap: 0.9rem;
}

.flight.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.flight__header,
.flight__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.flight__eyebrow,
.flight__title,
.flight__leg,
.flight__feedback {
  margin: 0;
}

.flight__eyebrow,
.memories__eyebrow {
  color: #dca1b8;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
}

.flight__title,
.memories__title {
  margin-top: 0.12rem;
  color: #fff0f5;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 0.35rem 1rem rgba(8, 3, 10, 0.7);
}

.flight__leg {
  min-width: 6.7rem;
  padding: 0.55rem 0.75rem;
  color: #efd5df;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  background: rgba(54, 23, 45, 0.58);
  border: 1px solid rgba(231, 160, 188, 0.24);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.flight__viewport {
  position: relative;
  width: 100%;
  height: min(61vh, 35.5rem);
  min-height: 22rem;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  background:
    radial-gradient(ellipse 56% 42% at 48% 42%, rgba(126, 63, 100, 0.18), transparent 72%),
    radial-gradient(circle at 78% 30%, rgba(214, 139, 170, 0.1), transparent 27%),
    linear-gradient(155deg, rgba(31, 16, 37, 0.62), rgba(10, 7, 20, 0.58));
  border: 1px solid rgba(237, 181, 203, 0.2);
  border-top-color: rgba(255, 231, 240, 0.32);
  border-radius: 22px;
  box-shadow:
    0 2rem 5rem rgba(3, 1, 7, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -3rem 6rem rgba(9, 3, 12, 0.18);
  outline: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.flight__viewport:focus-visible {
  border-color: rgba(255, 214, 230, 0.62);
  box-shadow:
    0 0 0 3px rgba(232, 151, 182, 0.18),
    0 2rem 5rem rgba(3, 1, 7, 0.38);
}

.flight__viewport::before,
.flight__viewport::after {
  position: absolute;
  inset: -12%;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.flight__viewport::before {
  background:
    radial-gradient(ellipse 21% 36% at 24% 45%, rgba(190, 121, 151, 0.13), transparent 72%),
    radial-gradient(ellipse 28% 24% at 68% 62%, rgba(116, 62, 105, 0.17), transparent 74%);
  filter: blur(18px);
  animation: flight-mist 11s ease-in-out infinite alternate;
}

.flight__viewport::after {
  background: radial-gradient(ellipse at center, transparent 46%, rgba(4, 2, 9, 0.58) 110%);
}

.flight__map {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flight__stars circle {
  fill: #fff4f8;
  opacity: 0.44;
  animation: map-star-flicker 3.6s ease-in-out infinite alternate;
}

.flight__stars circle:nth-child(3n) {
  animation-delay: -1.4s;
}

.flight__stars circle:nth-child(4n) {
  animation-delay: -2.6s;
}

.flight__branches path,
.flight__route-constellation,
.flight__route-hint,
.flight__trail {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flight__branches path {
  stroke: rgba(201, 133, 168, 0.34);
  stroke-width: 3;
  stroke-dasharray: 2 18;
}

.flight__branches path:nth-child(2n) {
  stroke: rgba(244, 207, 220, 0.24);
  stroke-dasharray: 1 15;
}

.flight__route-constellation {
  stroke: rgba(255, 233, 241, 0.29);
  stroke-width: 3;
  stroke-dasharray: 1 19;
}

.flight__route-hint {
  stroke: rgba(255, 223, 235, 0);
  stroke-width: 5;
  stroke-dasharray: 74 960;
  filter: url(#flight-soft-glow);
}

.flight[data-hint-level="1"] .flight__gate:not(.is-passed):first-child circle:first-child {
  animation: gate-hint 2.3s ease-out both;
}

.flight[data-hint-level="2"] .flight__route-hint {
  animation: route-hint-linger 4.6s ease-out both;
}

.flight[data-hint-level="3"] .flight__route-hint {
  animation: route-hint-current 3.2s ease-out both;
}

.flight__trail {
  stroke: #f2b7cd;
  stroke-width: 5;
  filter: url(#flight-soft-glow);
  opacity: 0.86;
  transition: opacity 450ms ease;
}

.flight.is-returning .flight__trail {
  opacity: 0.08;
}

.flight__gate circle:first-child {
  fill: rgba(83, 36, 66, 0.2);
  stroke: rgba(235, 173, 198, 0.42);
  stroke-width: 2;
  stroke-dasharray: 5 8;
}

.flight__gate circle:last-child {
  fill: #f6d6e2;
  opacity: 0.56;
  filter: url(#flight-soft-glow);
}

.flight__gate.is-passed circle:first-child {
  fill: rgba(230, 156, 184, 0.16);
  stroke: rgba(255, 229, 238, 0.9);
}

.flight__gate.is-passed circle:last-child {
  fill: #ffffff;
  opacity: 1;
}

.flight__plane {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.flight__plane > path {
  fill: #ffe7f0;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.4;
}

.flight__plane > circle {
  fill: #ffffff;
}

.flight.is-flying .flight__plane {
  animation: plane-light-breathe 1.9s ease-in-out infinite alternate;
}

.flight.is-returning .flight__plane {
  opacity: 0.55;
}

.flight.is-paused .flight__plane {
  animation: plane-pause 2.8s ease-in-out infinite;
}

.flight.is-arriving .flight__plane {
  animation: plane-arrive 2.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.flight__place {
  position: absolute;
  z-index: 3;
  color: rgba(255, 235, 242, 0.75);
  font-size: 0.75rem;
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 0.25rem 0.7rem rgba(3, 1, 6, 0.86);
}

.flight__place::before {
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.35rem;
  content: "";
  background: #f7d3e0;
  border-radius: 50%;
  box-shadow: 0 0 0.9rem rgba(244, 178, 203, 0.8);
}

.flight__place--origin {
  bottom: 14%;
  left: 6%;
}

.flight__place--destination {
  top: 16%;
  right: 4.5%;
}

.flight__start,
.memories__replay,
.chapter-reward__return {
  min-height: 2.8rem;
  padding: 0.65rem 1.05rem;
  color: #fff5f8;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(135deg, rgba(169, 80, 117, 0.78), rgba(111, 50, 82, 0.84));
  border: 1px solid rgba(255, 218, 231, 0.32);
  border-radius: 8px;
  box-shadow:
    0 0.8rem 2rem rgba(6, 2, 9, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition:
    transform 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease;
}

.flight__start:hover:not(:disabled),
.memories__replay:hover,
.chapter-reward__return:hover {
  border-color: rgba(255, 231, 240, 0.58);
  transform: translateY(-2px);
}

.flight__start:disabled {
  cursor: default;
  opacity: 0.58;
}

.flight__feedback {
  width: min(30rem, 62vw);
  min-height: 2.8rem;
  padding: 0.55rem 0;
  color: #edd0dc;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 320ms ease, transform 420ms ease;
}

.flight__feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chapter-reward,
.memories {
  position: relative;
  z-index: 2;
  width: min(68rem, 91vw);
  min-height: min(68vh, 37rem);
  opacity: 0;
  filter: blur(7px);
  transform: translateY(16px);
  transition:
    opacity 1000ms ease,
    filter 1100ms ease,
    transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter-reward.is-visible,
.memories.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.chapter-reward__memory {
  position: absolute;
  top: 50%;
  left: 7%;
  width: min(29rem, 48%);
  transform: translateY(-50%);
}

.chapter-reward__figure {
  margin: 0;
  padding: 1rem 1rem 1.35rem;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(238, 167, 195, 0.15), transparent 48%),
    linear-gradient(145deg, rgba(61, 27, 50, 0.68), rgba(21, 11, 27, 0.72));
  border: 1px solid rgba(237, 181, 203, 0.28);
  border-top-color: rgba(255, 230, 239, 0.42);
  border-radius: 24px;
  box-shadow:
    0 2.2rem 5rem rgba(3, 1, 5, 0.46),
    0 0 3.5rem rgba(182, 91, 127, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
}

.chapter-reward__portrait {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 17rem;
  max-height: 25rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(245, 194, 213, 0.19), transparent 34%),
    linear-gradient(155deg, rgba(130, 65, 95, 0.42), rgba(31, 16, 34, 0.88));
  border-radius: 16px;
  place-items: center;
}

.chapter-reward__portrait::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(21, 8, 18, 0.24));
  box-shadow: inset 0 0 2.5rem rgba(8, 3, 9, 0.22);
}

.chapter-reward__image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 25rem;
  object-fit: contain;
  object-position: center;
}

.chapter-reward__portrait[data-orientation="landscape"] .chapter-reward__image {
  aspect-ratio: 4 / 3;
}

.chapter-reward__portrait[data-orientation="portrait"] .chapter-reward__image {
  aspect-ratio: 3 / 4;
}

.chapter-reward__placeholder {
  color: rgba(255, 230, 239, 0.52);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 600;
  text-shadow: 0 0 2.5rem rgba(231, 151, 182, 0.24);
}

.chapter-reward__portrait[data-photo-state="ready"] .chapter-reward__placeholder {
  display: none;
}

.chapter-reward__figure figcaption {
  max-width: 25rem;
  margin: 1.1rem auto 0;
  color: #f7dde6;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.chapter-reward__light {
  position: absolute;
  right: -3.6rem;
  bottom: 15%;
  z-index: 4;
  display: grid;
  width: 4rem;
  height: 4rem;
  padding: 0;
  color: #ffffff;
  font-size: 1.7rem;
  cursor: grab;
  touch-action: none;
  background: radial-gradient(circle, #fff9fb 0 9%, #f3bfd2 18%, rgba(211, 120, 156, 0.3) 44%, transparent 72%);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 2.5rem rgba(239, 176, 201, 0.45);
  transform: translate3d(var(--light-x, 0), var(--light-y, 0), 0);
  transition:
    filter 260ms ease,
    opacity 700ms ease,
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
  place-items: center;
  animation: first-light-float 3.5s ease-in-out infinite;
}

.chapter-reward__light.is-dragging {
  cursor: grabbing;
  filter: brightness(1.15);
  transition: filter 180ms ease;
  animation: none;
}

.chapter-reward__light.is-absorbed {
  pointer-events: none;
  opacity: 0;
  filter: blur(4px) brightness(1.35);
  transform: translate3d(var(--light-x, 0), var(--light-y, 0), 0) scale(0.35);
}

.chapter-reward__heart-target {
  position: absolute;
  top: 50%;
  right: 8%;
  width: clamp(9rem, 17vw, 14rem);
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid rgba(240, 177, 201, 0);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-50%) scale(0.82);
  transition:
    opacity 700ms ease,
    border-color 700ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter-reward__heart-target.is-active {
  border-color: rgba(240, 177, 201, 0.18);
  opacity: 1;
  transform: translateY(-50%) scale(1);
  animation: heart-target-breathe 4s ease-in-out infinite;
}

.chapter-reward__return {
  display: block;
  margin: 1rem auto 0;
}

.memories {
  display: grid;
  width: min(48rem, 91vw);
  min-height: min(62vh, 34rem);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 24%, rgba(194, 108, 143, 0.18), transparent 52%),
    linear-gradient(145deg, rgba(54, 23, 45, 0.64), rgba(17, 9, 23, 0.68));
  border: 1px solid rgba(239, 183, 204, 0.24);
  border-top-color: rgba(255, 233, 241, 0.38);
  border-radius: 28px;
  box-shadow:
    0 2.5rem 6rem rgba(3, 1, 6, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  align-content: center;
  justify-items: center;
}

.memories__eyebrow {
  margin: 0 0 0.45rem;
}

.memories__title {
  margin: 0;
}

.memories__stars {
  position: relative;
  display: grid;
  width: min(100%, 32rem);
  min-height: 13rem;
  margin: 1.8rem auto 1.4rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  place-items: center;
}

.memories__stars::before,
.memories__stars::after {
  position: absolute;
  inset: 24% 12%;
  content: "";
  pointer-events: none;
  opacity: 0.3;
}

.memories__stars::before {
  background:
    linear-gradient(16deg, transparent 48.8%, rgba(224, 153, 182, 0.48) 49.5% 50.5%, transparent 51.2%),
    linear-gradient(-18deg, transparent 48.8%, rgba(224, 153, 182, 0.32) 49.5% 50.5%, transparent 51.2%);
}

.memories__stars::after {
  inset: 12% 23%;
  border: 1px solid rgba(229, 160, 187, 0.22);
  border-color: rgba(229, 160, 187, 0.22) transparent transparent;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.memories__star {
  position: relative;
  z-index: 1;
  display: grid;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  color: rgba(202, 157, 177, 0.28);
  font-size: 1.45rem;
  cursor: default;
  background: rgba(29, 13, 27, 0.34);
  border: 1px solid rgba(222, 168, 190, 0.14);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  place-items: center;
}

.memories__star:nth-child(2),
.memories__star:nth-child(5) {
  transform: translateY(1rem);
}

.memories__star.is-unlocked {
  color: #fff8fa;
  cursor: pointer;
  background: radial-gradient(circle, rgba(246, 202, 219, 0.3), rgba(109, 46, 79, 0.42));
  border-color: rgba(255, 224, 235, 0.52);
  box-shadow:
    0 0 1.2rem rgba(242, 181, 204, 0.56),
    0 0 3rem rgba(193, 102, 139, 0.22);
  animation: memory-star-breathe 3.4s ease-in-out infinite;
}

.memories__star.is-unlocked:hover,
.memories__star.is-unlocked:focus-visible {
  transform: scale(1.1) rotate(7deg);
}

@keyframes chapter-mist-breathe {
  from { opacity: 0.62; transform: translate3d(-1.5%, 0, 0) scale(1); }
  to { opacity: 0.9; transform: translate3d(2%, -1%, 0) scale(1.035); }
}

@keyframes chapter-stars-drift {
  from { transform: translate3d(-1%, 0, 0); }
  to { transform: translate3d(1%, -1.5%, 0); }
}

@keyframes chapter-backdrop-drift {
  from { transform: scale(1.035) translate3d(-0.5%, 0, 0); }
  to { transform: scale(1.075) translate3d(0.7%, -0.5%, 0); }
}

@keyframes soul-light-angel {
  0% { opacity: 0; transform: translate3d(-9rem, 2rem, 0) scale(0.7); }
  22% { opacity: 0.9; }
  72%, 100% { opacity: 1; transform: translate3d(-0.8rem, 0, 0) scale(1); }
}

@keyframes soul-light-adriana {
  0% { opacity: 0; transform: translate3d(9rem, -2rem, 0) scale(0.7); }
  22% { opacity: 0.9; }
  72%, 100% { opacity: 1; transform: translate3d(0.8rem, 0, 0) scale(1); }
}

@keyframes guiding-star-breathe {
  0%, 100% { box-shadow: 0 0 2rem rgba(229, 143, 178, 0.14); }
  50% { box-shadow: 0 0 3.2rem rgba(238, 171, 196, 0.34); }
}

@keyframes note-stars-release {
  0% { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.9); }
  28% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(0, -34px, 0) scale(1.12); }
}

@keyframes flight-mist {
  from { opacity: 0.7; transform: translate3d(-2%, 0, 0); }
  to { opacity: 1; transform: translate3d(3%, -1%, 0); }
}

@keyframes map-star-flicker {
  from { opacity: 0.24; }
  to { opacity: 0.72; }
}

@keyframes route-hint-linger {
  0%, 62% {
    stroke: rgba(255, 229, 239, 0.68);
    stroke-width: 5;
    stroke-dasharray: 190 900;
    stroke-dashoffset: 0;
  }
  100% {
    stroke: rgba(255, 233, 241, 0);
    stroke-width: 3;
    stroke-dasharray: 190 900;
    stroke-dashoffset: 0;
  }
}

@keyframes route-hint-current {
  0% { stroke: rgba(255, 223, 235, 0); stroke-dashoffset: 180; }
  18%, 68% { stroke: rgba(255, 223, 235, 0.72); }
  100% { stroke: rgba(255, 223, 235, 0); stroke-dashoffset: -140; }
}

@keyframes gate-hint {
  0%, 100% { opacity: 1; stroke-width: 2; }
  35% { opacity: 1; stroke-width: 6; }
  70% { opacity: 0.7; stroke-width: 3; }
}

@keyframes plane-light-breathe {
  from { opacity: 0.82; }
  to { opacity: 1; }
}

@keyframes plane-pause {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes plane-arrive {
  0% { opacity: 1; }
  72% { opacity: 1; filter: brightness(1.25); }
  100% { opacity: 0; filter: blur(5px) brightness(1.5); }
}

@keyframes first-light-float {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 0.7rem; }
}

@keyframes heart-target-breathe {
  0%, 100% { box-shadow: 0 0 1.2rem rgba(229, 143, 178, 0.04); }
  50% { box-shadow: 0 0 3rem rgba(229, 143, 178, 0.16); }
}

@keyframes memory-star-breathe {
  0%, 100% { filter: brightness(0.96); }
  50% { filter: brightness(1.18); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes scene-reveal {
  from {
    opacity: 0;
    filter: blur(7px) brightness(1.08);
    transform: scale(1.008);
  }

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

@keyframes panel-reveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ornament-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes access-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes access-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scene-reject-one {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  28% { transform: translate3d(-3px, 0, 0) scale(0.994); }
  55% { transform: translate3d(4px, 0, 0) scale(1.003); }
  76% { transform: translate3d(-2px, 0, 0) scale(1); }
}

@keyframes scene-reject-two {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  24% { transform: translate3d(-4px, 2px, 0) scale(0.993); }
  53% { transform: translate3d(6px, -3px, 0) scale(1.005); }
  76% { transform: translate3d(-2px, 1px, 0) scale(1); }
}

@keyframes scene-reject-three {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(0, 1px, 0) scale(0.989); }
  47% { transform: translate3d(-7px, 0, 0) scale(0.997); }
  69% { transform: translate3d(6px, -1px, 0) scale(1.004); }
}

@keyframes scene-reject-four {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  32% { transform: translate3d(-4px, 5px, 0) scale(0.989); }
  64% { transform: translate3d(3px, 3px, 0) scale(0.995); }
}

@keyframes scene-reject-five {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(0, 2px, 0) scale(0.982); }
  43% { transform: translate3d(-6px, 1px, 0) scale(0.991); }
  57% { transform: translate3d(6px, -1px, 0) scale(0.993); }
  72% { transform: translate3d(-3px, 0, 0) scale(0.998); }
}

@keyframes scene-reject-six {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  19% { transform: translate3d(0, 3px, 0) scale(0.984); }
  41% { transform: translate3d(6px, -1px, 0) scale(0.991); }
  56% { transform: translate3d(-6px, 1px, 0) scale(0.994); }
  73% { transform: translate3d(3px, 0, 0) scale(0.998); }
}

@keyframes error-veil {
  0%,
  100% {
    opacity: 0;
  }

  18% {
    opacity: 0.025;
  }

  48% {
    opacity: var(--error-veil-peak);
  }

  70% {
    opacity: var(--error-veil-soft);
  }
}

@keyframes error-veil-reduced {
  0%,
  100% {
    opacity: 0;
  }

  42% {
    opacity: var(--error-veil-peak);
  }
}

@keyframes greeting-arrive {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate(-50%, 28px) scale(0.92);
  }

  55% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -3px) scale(1.015);
  }

  75% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, 1px) scale(1.003);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes greeting-breathe {
  0%, 100% {
    opacity: 0.96;
    text-shadow:
      0 0.22rem 0.9rem rgba(47, 12, 35, 0.84),
      0 0 2.2rem rgba(255, 224, 235, 0.3);
    transform: scale(1);
  }

  50% {
    opacity: 1;
    text-shadow:
      0 0.22rem 0.9rem rgba(47, 12, 35, 0.78),
      0 0 3rem rgba(255, 224, 235, 0.42);
    transform: scale(1.006);
  }
}

@keyframes access-healing-out {
  0%,
  68% {
    opacity: 1;
    filter: brightness(1);
    border-color: rgba(255, 224, 236, 0.55);
    transform: translateY(0) scale(1);
  }

  42% {
    border-color: rgba(255, 244, 248, 0.92);
    box-shadow:
      0 1.8rem 5rem rgba(91, 43, 66, 0.2),
      0 0 3.6rem rgba(255, 217, 231, 0.34),
      inset 0 0 2rem rgba(255, 255, 255, 0.16);
  }

  100% {
    opacity: 0;
    filter: brightness(1.08) blur(3px);
    transform: translateY(-7px) scale(0.992);
  }
}

@keyframes access-healing-reduced {
  0%,
  55% {
    opacity: 1;
    filter: brightness(1);
  }

  100% {
    opacity: 0;
    filter: brightness(1.05);
  }
}

@media (min-width: 760px) {
  .hero {
    align-items: center;
    padding: 3rem 7vw;
  }

  .hero__panel {
    align-self: center;
    justify-self: start;
    top: clamp(2.75rem, 6vh, 3.5rem);
    left: clamp(1.25rem, 2vw, 1.8rem);
    width: min(26.25rem, 40vw);
    margin: 0;
    padding: 2.45rem 2.55rem 2.4rem;
    text-align: left;
  }

  .hero__header {
    gap: 0;
  }

  .hero__title {
    font-size: 3.5rem;
  }

  .hero__ornament {
    width: 7rem;
    margin-right: auto;
    margin-left: 0.15rem;
  }

  .hero__message {
    margin-right: 0;
    margin-left: 0;
    font-size: 1.1rem;
  }

  .hero__button {
    margin-top: 1.65rem;
  }

  .access-dialog {
    margin: auto auto auto clamp(3.5rem, 8vw, 8.5rem);
  }

  .ritual-greeting {
    top: 66%;
    left: 50%;
  }

  .chapter {
    padding: 6rem 7vw 3rem;
  }

  .chapter__back {
    top: max(1.5rem, env(safe-area-inset-top));
    left: max(2rem, env(safe-area-inset-left));
  }

  .chapter__content {
    padding: 3.25rem 3.1rem;
  }

  .chapter__title {
    font-size: 3.4rem;
  }

  .flight__header {
    padding: 0 0.4rem;
  }

  .flight__controls {
    min-height: 3rem;
    padding: 0 0.4rem;
  }

}

@media (max-width: 759px) {
  .access-dialog {
    margin: clamp(14rem, 39svh, 20rem) auto auto;
  }

  .ritual-greeting {
    top: 64%;
    width: calc(100% - 2rem);
    padding: 1.8rem 1rem 2.1rem;
  }

  .ritual-greeting__kicker {
    font-size: 2rem;
  }

  .ritual-greeting__main {
    font-size: 2.5rem;
  }

  .chapter {
    padding:
      max(4.8rem, calc(env(safe-area-inset-top) + 4.3rem))
      max(1.125rem, env(safe-area-inset-right))
      max(1.15rem, env(safe-area-inset-bottom))
      max(1.125rem, env(safe-area-inset-left));
  }

  .chapter__content {
    padding: 2.2rem 1.25rem;
  }

  .chapter__title {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .chapter__message {
    font-size: 1rem;
  }

  .chapter__note {
    width: 100%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .flight {
    width: 100%;
    gap: 0.7rem;
  }

  .flight__header {
    align-items: end;
  }

  .flight__title {
    font-size: 1.65rem;
  }

  .flight__leg {
    min-width: 5.8rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.72rem;
  }

  .flight__viewport {
    height: auto;
    min-height: 0;
    aspect-ratio: 5 / 3;
    border-radius: 16px;
  }

  .flight__place {
    font-size: 0.66rem;
  }

  .flight__controls {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 0.35rem;
  }

  .flight__start {
    width: 100%;
  }

  .flight__feedback {
    width: 100%;
    min-height: 2.65rem;
    padding: 0;
    font-size: 0.83rem;
    text-align: center;
  }

  .chapter-reward {
    width: 100%;
    min-height: calc(100svh - 6.2rem);
  }

  .chapter-reward__memory {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
  }

  .chapter-reward__figure {
    padding: 0.75rem 0.75rem 1rem;
    border-radius: 19px;
  }

  .chapter-reward__portrait {
    min-height: 13.5rem;
    max-height: 17.5rem;
    border-radius: 13px;
  }

  .chapter-reward__image {
    max-height: 17.5rem;
  }

  .chapter-reward__figure figcaption {
    margin-top: 0.8rem;
    font-size: 1.1rem;
    line-height: 1.4;
  }

  .chapter-reward__light {
    right: 0.35rem;
    bottom: calc(100% - 4.1rem);
    width: 3.6rem;
    height: 3.6rem;
  }

  .chapter-reward__heart-target {
    top: 15%;
    right: 50%;
    width: 9.5rem;
    transform: translate(50%, -50%) scale(0.82);
  }

  .chapter-reward__heart-target.is-active {
    transform: translate(50%, -50%) scale(1);
  }

  .chapter-reward__return {
    width: 100%;
  }

  .memories {
    width: 100%;
    min-height: min(68svh, 31rem);
    padding: 2rem 1rem;
    border-radius: 22px;
  }

  .memories__stars {
    min-height: 11.5rem;
    margin-top: 1.3rem;
  }

  .memories__star {
    width: 2.85rem;
    height: 2.85rem;
  }
}

/* Los aeropuertos se renderizan como escenas 3D; las fotos quedan reservadas al vuelo. */
.chapter--first:is(
    [data-journey-phase="takeoff"],
    [data-journey-phase="approach"],
    [data-journey-phase="landing"]
  ) .chapter__backdrop,
.chapter--first:is(
    [data-journey-phase="takeoff"],
    [data-journey-phase="approach"],
    [data-journey-phase="landing"]
  ) .chapter__scene-shade,
.chapter--first:is(
    [data-journey-phase="takeoff"],
    [data-journey-phase="approach"],
    [data-journey-phase="landing"]
  ) .chapter__mist,
.chapter--first:is(
    [data-journey-phase="takeoff"],
    [data-journey-phase="approach"],
    [data-journey-phase="landing"]
  ) .chapter__rain,
.chapter--first:is(
    [data-journey-phase="takeoff"],
    [data-journey-phase="approach"],
    [data-journey-phase="landing"]
  ) .chapter__distant-sparks,
.chapter--first:is(
    [data-journey-phase="takeoff"],
    [data-journey-phase="approach"],
    [data-journey-phase="landing"]
  ) .chapter__grain {
  opacity: 0 !important;
  animation: none !important;
}

.chapter--first .flight:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__viewport {
  background: #101a26;
  animation: none !important;
}

.chapter--first .flight:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__viewport::before,
.chapter--first .flight:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__viewport::after {
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.chapter--first .flight.has-plane-3d:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__map {
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
}

.chapter--first .flight:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__viewport > .hero__canvas {
  opacity: 1;
  animation: none !important;
  transform: none !important;
}

.chapter--first .flight:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__cinematic-line {
  top: clamp(7rem, 15vh, 9.5rem) !important;
  bottom: auto !important;
  width: min(36rem, 68vw);
}

@media (max-width: 759px) {
  .chapter--first .flight:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__cinematic-line {
    top: 8.4rem !important;
    width: calc(100% - 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter--first .flight:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__viewport,
  .chapter--first .flight:is(.is-cinematic-takeoff, .is-approaching, .is-landing) .flight__viewport > .hero__canvas {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .ritual-greeting {
    width: calc(100% - 2rem);
  }
}

@media (max-height: 650px) {
  .hero__panel {
    margin-bottom: 2.4rem;
    padding-top: 1.25rem;
    padding-bottom: 1.2rem;
  }

  .hero__header {
    gap: 0;
  }

  .hero__eyebrow {
    margin-bottom: 0.65rem;
  }

  .hero__title {
    font-size: 2.65rem;
  }

  .hero__message {
    margin-top: 0.75rem;
    line-height: 1.5;
  }

  .hero__button {
    min-height: 2.9rem;
    margin-top: 0.9rem;
  }

  .access-dialog {
    margin: auto;
    padding-top: 2.4rem;
    padding-bottom: 1.3rem;
  }

  .access-dialog[open] {
    gap: 1rem;
  }

  .access-dialog__title {
    font-size: 1.75rem;
  }

  .access-dialog__hint {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .access-dialog__feedback {
    min-height: 2.55rem;
  }

  .chapter {
    padding-top: 4.6rem;
  }

  .chapter__content {
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
  }

  .chapter__title {
    font-size: 2.25rem;
  }

  .flight__viewport {
    max-height: 23rem;
  }

  .chapter-reward__portrait {
    min-height: 11.5rem;
    max-height: 14rem;
  }

  .chapter-reward__image {
    max-height: 14rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .hero__button:hover,
  .hero__button:active {
    background-position: 145% 0, 0 0;
    transform: none;
  }

  .hero::before,
  .hero__panel,
  .access-dialog__close,
  .access-dialog__input,
  .access-dialog__button {
    transition-duration: 0.01ms !important;
  }

  .hero.is-entering .hero__panel,
  .hero.is-night .hero__panel,
  .hero.is-exiting .hero__panel {
    filter: none;
    transform: none;
  }

  .access-dialog[open],
  .access-dialog::backdrop {
    animation: none;
  }

  .access-dialog.is-healing[open] {
    animation: access-healing-reduced 760ms ease forwards !important;
  }

  .hero.is-access-error {
    transform: none;
    animation: none !important;
  }

  .hero.is-access-error .hero__error-veil {
    animation-name: error-veil-reduced !important;
    animation-duration: 560ms !important;
    animation-timing-function: ease !important;
  }

  .ritual-greeting,
  .ritual-greeting.is-visible,
  .chapter__content,
  .chapter.is-visible .chapter__content {
    filter: none;
    transform: none;
  }

  .ritual-greeting__kicker,
  .ritual-greeting__main {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ritual-greeting.is-visible {
    animation: none;
  }

  .ritual-greeting.is-visible .ritual-greeting__main {
    animation: none;
  }

  .chapter,
  .chapter::before,
  .chapter::after,
  .chapter__sky::before,
  .chapter__sky::after,
  .chapter__backdrop,
  .chapter__soul-light,
  .chapter__content,
  .chapter__eyebrow,
  .chapter__title,
  .chapter__message,
  .chapter__note,
  .chapter__guiding-star,
  .flight,
  .flight__viewport::before,
  .flight__stars circle,
  .flight__plane,
  .chapter-reward,
  .chapter-reward__light,
  .chapter-reward__heart-target,
  .memories,
  .memories__star {
    transition-delay: 0ms !important;
    transition-duration: 180ms !important;
    animation: none !important;
  }

  .hero__canvas,
  .hero__panel,
  .hero__ornament {
    animation: none;
  }

  .hero__panel::after {
    display: none;
  }

  .hero__ornament {
    stroke-dashoffset: 0;
  }
}

/* Fases de aeropuerto y transición reutilizable del Capítulo 1. */
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__route-mist,
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__route-constellation,
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__route-hint,
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__branches,
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__gates,
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__trail,
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__trail-halo,
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__trail-spark,
.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__place {
  opacity: 0;
  transition: opacity 900ms ease;
}

.chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 650ms ease, transform 850ms ease;
}

.chapter--first .flight:is(.is-approaching, .is-landing) .flight__header {
  opacity: 0.56;
  transition: opacity 900ms ease;
}

.chapter--first:has(.flight:is(.is-approaching, .is-landing, .is-arrival-transition)) .chapter__rain {
  opacity: 0 !important;
}

.chapter--first .flight.is-arrival-transition .flight__header,
.chapter--first .flight.is-arrival-transition .flight__cinematic-line {
  opacity: 0;
  transition: opacity 700ms ease;
}

.chapter-transition {
  --chapter-transition-cover: 0;
  --chapter-transition-particles: 0;
  --chapter-transition-shift: 12px;
  --chapter-transition-plum: 44, 20, 39;
  --chapter-transition-blush: 216, 134, 166;
  position: fixed;
  inset: 0;
  z-index: 48;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.chapter-transition[hidden] {
  display: none;
}

.chapter-transition__veil,
.chapter-transition__particles {
  position: absolute;
  inset: 0;
}

.chapter-transition__veil {
  background:
    radial-gradient(ellipse 56% 38% at 52% 72%, rgba(var(--chapter-transition-blush), 0.23), transparent 72%),
    linear-gradient(180deg, rgba(16, 9, 17, 0.12), rgba(var(--chapter-transition-plum), 0.94));
  opacity: var(--chapter-transition-cover);
  transform: translate3d(0, calc(var(--chapter-transition-shift) * 0.18), 0) scale(1.015);
  will-change: opacity, transform;
}

.chapter-transition[data-mood="warm-memory"] {
  --chapter-transition-plum: 67, 30, 51;
  --chapter-transition-blush: 239, 184, 204;
}

.chapter-transition__particles {
  opacity: var(--chapter-transition-particles);
  transform: translate3d(0, var(--chapter-transition-shift), 0);
  will-change: opacity, transform;
}

.chapter-transition__particles span {
  position: absolute;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 232, 222, 0.9);
  box-shadow: 0 0 1rem rgba(239, 184, 204, 0.58);
  opacity: 0.72;
}

.chapter-transition__particles span:nth-child(1) { top: 72%; left: 9%; }
.chapter-transition__particles span:nth-child(2) { top: 63%; left: 19%; width: 3px; }
.chapter-transition__particles span:nth-child(3) { top: 78%; left: 31%; width: 5px; }
.chapter-transition__particles span:nth-child(4) { top: 58%; left: 42%; width: 3px; }
.chapter-transition__particles span:nth-child(5) { top: 69%; left: 52%; }
.chapter-transition__particles span:nth-child(6) { top: 54%; left: 63%; width: 5px; }
.chapter-transition__particles span:nth-child(7) { top: 75%; left: 71%; width: 3px; }
.chapter-transition__particles span:nth-child(8) { top: 61%; left: 81%; }
.chapter-transition__particles span:nth-child(9) { top: 82%; left: 89%; width: 5px; }
.chapter-transition__particles span:nth-child(10) { top: 47%; left: 94%; width: 3px; }

@media (max-width: 759px) {
  .chapter--first .chapter-dev-nav {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    left: auto;
    width: min(13.25rem, calc(100% - 11rem));
  }

  .chapter--first .chapter-dev-nav__controls {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  }

  .chapter--first .chapter-dev-nav__step,
  .chapter--first .chapter-dev-nav__select {
    min-height: 2.75rem;
  }

  .chapter--first .chapter-dev-nav__step {
    width: 2.75rem;
  }

  .chapter-transition__particles span:nth-child(n + 7) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__controls,
  .chapter--first .flight:is(.is-approaching, .is-landing, .is-arrival-transition) .flight__header {
    transition-duration: 180ms;
  }

  .chapter-transition__particles {
    opacity: 0;
    transform: none;
  }

  .chapter-transition__veil {
    transform: none;
  }
}

/* Chapter 1 cinematic route: eight local scenes, six gates and one overflight. */
.chapter--first .chapter__rain,
.chapter--first .chapter__overflight-cloud,
.chapter--first .chapter__overflight-current,
.chapter--first .chapter__overflight-title {
  position: absolute;
  pointer-events: none;
}

.chapter--first .chapter__backdrop {
  transform:
    translate3d(
      var(--chapter-parallax-x, 0px),
      calc(var(--chapter-parallax-y, 0px) + var(--scene-depth, 0px)),
      0
    )
    scale(1.065);
  transition:
    opacity 1450ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1450ms ease;
}

.chapter--first .chapter__backdrop[data-scene="tocumen"] {
  background-position: center 46%;
  filter: brightness(0.72) saturate(0.78) sepia(0.08) contrast(1.06);
}

.chapter--first .chapter__backdrop[data-scene="panama-sunset"] {
  background-position: center 48%;
  filter: brightness(0.78) saturate(0.88) contrast(1.06);
}

.chapter--first .chapter__backdrop[data-scene="panama-canal"] {
  background-position: center 52%;
  filter: brightness(0.68) saturate(0.75) contrast(1.08);
}

.chapter--first .chapter__backdrop[data-scene="panama-night"] {
  background-position: center 56%;
  filter: brightness(0.66) saturate(0.74) contrast(1.08);
}

.chapter--first .chapter__backdrop[data-scene="costa-verde"] {
  background-position: center 54%;
  filter: brightness(0.63) saturate(0.58) sepia(0.08) contrast(1.08);
}

.chapter--first .chapter__backdrop[data-scene="miraflores"] {
  background-position: center 62%;
  filter: brightness(0.68) saturate(0.72) contrast(1.07);
}

.chapter--first .chapter__backdrop[data-scene="barranco-bajada"] {
  background-position: center 62%;
  filter: brightness(0.38) saturate(0.52) sepia(0.13) contrast(1.16);
}

.chapter--first .chapter__backdrop[data-scene="barranco"] {
  background-position: center 48%;
  filter: brightness(0.62) saturate(0.68) contrast(1.1);
}

.chapter--first .chapter__scene-shade {
  background:
    linear-gradient(90deg, rgba(7, 5, 10, 0.52) 0%, rgba(7, 5, 10, 0.11) 38%, rgba(7, 5, 10, 0.04) 66%, rgba(7, 5, 10, 0.25) 100%),
    linear-gradient(180deg, rgba(19, 9, 20, 0.2), rgba(7, 5, 10, 0.04) 46%, rgba(7, 5, 10, 0.5));
}

.chapter--first .chapter__mist--near {
  background:
    radial-gradient(ellipse 42% 12% at 16% 74%, rgba(249, 221, 231, 0.16), transparent 74%),
    radial-gradient(ellipse 48% 15% at 72% 48%, rgba(233, 137, 171, 0.13), transparent 76%),
    radial-gradient(ellipse 64% 20% at 52% 102%, rgba(41, 16, 32, 0.48), transparent 75%);
  mix-blend-mode: screen;
  opacity: 0.48;
}

.chapter--first .chapter__mist--far {
  background:
    radial-gradient(ellipse 48% 13% at 42% 31%, rgba(249, 221, 231, 0.08), transparent 78%),
    radial-gradient(ellipse 58% 16% at 69% 80%, rgba(168, 71, 109, 0.13), transparent 76%);
}

.chapter--first .chapter__rain {
  inset: -18% -8%;
  z-index: 5;
  background:
    repeating-linear-gradient(104deg, transparent 0 21px, rgba(255, 240, 236, 0.23) 22px 23px, transparent 24px 39px),
    repeating-linear-gradient(104deg, transparent 0 47px, rgba(233, 137, 171, 0.12) 48px 49px, transparent 50px 76px);
  opacity: 0;
  filter: blur(0.45px);
  transform: translate3d(-2%, -8%, 0);
  transition: opacity 800ms ease;
}

.chapter--first.is-raining .chapter__rain {
  opacity: 0.28;
  animation: midnight-fine-rain 620ms linear infinite;
}

.chapter--first .flight__viewport > .hero__canvas {
  z-index: 4;
}

.chapter--first .flight.has-plane-3d .flight__map {
  z-index: 3;
}

.chapter--first .flight__route-mist,
.chapter--first .flight__route-constellation,
.chapter--first .flight__trail,
.chapter--first .flight__trail-halo,
.chapter--first .flight__trail-spark,
.chapter--first .flight__gate {
  filter: drop-shadow(0 0 10px rgba(7, 5, 10, 0.45));
}

.chapter--first .flight.is-overflight .flight__plane-core {
  animation: midnight-plane-overflight 6.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .flight.is-overflight .flight__start,
.chapter--first .flight.is-flying .flight__start,
.chapter--first .flight.is-returning .flight__start,
.chapter--first .flight.is-arriving .flight__start {
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
}

.chapter--first .chapter__celestial-pause {
  z-index: 10;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62% 34% at 50% 108%, rgba(168, 71, 109, 0.17), transparent 72%),
    linear-gradient(180deg, rgba(7, 5, 10, 0.32), rgba(19, 9, 20, 0.91) 44%, rgba(7, 5, 10, 0.74));
  opacity: 0;
  visibility: hidden;
  transition: opacity 850ms ease, visibility 850ms;
}

.chapter--first .chapter__celestial-pause::before,
.chapter--first .chapter__celestial-pause::after {
  inset: -12%;
  background:
    radial-gradient(ellipse 34% 16% at 24% 42%, rgba(62, 30, 55, 0.7), transparent 76%),
    radial-gradient(ellipse 38% 15% at 76% 58%, rgba(48, 22, 44, 0.72), transparent 78%),
    radial-gradient(ellipse 52% 18% at 54% 84%, rgba(19, 9, 20, 0.84), transparent 76%);
  opacity: 0;
}

.chapter--first:has(.flight.is-overflight) .chapter__celestial-pause {
  opacity: 1;
  visibility: visible;
}

.chapter--first:has(.flight.is-overflight) .chapter__celestial-pause::before {
  animation: overflight-clouds-far 6.5s ease-in-out both;
}

.chapter--first:has(.flight.is-overflight) .chapter__celestial-pause::after {
  animation: overflight-clouds-near 6.5s ease-in-out both;
}

.chapter--first .chapter__overflight-cloud {
  z-index: 1;
  width: 72%;
  height: 25%;
  background: radial-gradient(ellipse, rgba(52, 24, 46, 0.84), rgba(19, 9, 20, 0.22) 58%, transparent 76%);
  opacity: 0;
  filter: blur(18px);
}

.chapter--first .chapter__overflight-cloud--far {
  top: 18%;
  left: -24%;
}

.chapter--first .chapter__overflight-cloud--near {
  right: -28%;
  bottom: 13%;
}

.chapter--first:has(.flight.is-overflight) .chapter__overflight-cloud--far {
  animation: overflight-layer-far 6.5s ease-in-out both;
}

.chapter--first:has(.flight.is-overflight) .chapter__overflight-cloud--near {
  animation: overflight-layer-near 6.5s ease-in-out both;
}

.chapter--first .chapter__overflight-current {
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(54rem, 74vw);
  height: 7rem;
  background: linear-gradient(90deg, transparent, rgba(249, 221, 231, 0.06) 20%, rgba(233, 137, 171, 0.2) 50%, rgba(249, 221, 231, 0.08) 78%, transparent);
  border-radius: 50%;
  opacity: 0;
  filter: blur(7px);
  transform: translate(-50%, -50%) rotate(-8deg) scaleX(0.3);
}

.chapter--first:has(.flight.is-overflight) .chapter__overflight-current {
  animation: overflight-current 6.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .chapter__soul-light {
  z-index: 4;
  width: 1.3rem;
}

.chapter--first .chapter__soul-light::before {
  position: absolute;
  top: 50%;
  width: 7rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(249, 221, 231, 0.46));
  opacity: 0.72;
  transform: translateY(-50%);
}

.chapter--first .chapter__soul-light--angel::before {
  right: 55%;
}

.chapter--first .chapter__soul-light--adriana::before {
  left: 55%;
  transform: translateY(-50%) scaleX(-1);
}

.chapter--first:has(.flight.is-overflight) .chapter__soul-light--angel {
  animation: overflight-light-angel 6.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first:has(.flight.is-overflight) .chapter__soul-light--adriana {
  animation: overflight-light-adriana 6.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .chapter__overflight-title {
  top: 63%;
  left: 50%;
  z-index: 5;
  margin: 0;
  color: rgba(255, 240, 236, 0.78);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.15rem, 2.1vw, 1.8rem);
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 0.5rem 1.8rem rgba(7, 5, 10, 0.96);
  opacity: 0;
  transform: translate(-50%, 8px);
}

.chapter--first:has(.flight.is-overflight) .chapter__overflight-title {
  animation: overflight-title 6.5s ease both;
}

.chapter--first:has(.flight.is-overflight) .chapter__checkpoint-wave {
  z-index: 4;
  animation: midnight-checkpoint-wave 1.3s 4.55s ease-out both;
}

@keyframes midnight-fine-rain {
  to { transform: translate3d(1.2%, 12%, 0); }
}

@keyframes midnight-plane-overflight {
  0% { opacity: 1; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) - 2deg)) scale(var(--plane-size, 1)); }
  44% { opacity: 1; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + 5deg)) scale(calc(var(--plane-size, 1) * 1.07)); }
  78% { opacity: 0.9; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) - 2deg)) scale(calc(var(--plane-size, 1) * 0.94)); }
  100% { opacity: 1; transform: scaleY(var(--map-shape-y, 1)) rotate(var(--plane-angle, 0deg)) scale(var(--plane-size, 1)); }
}

@keyframes overflight-clouds-far {
  0% { opacity: 0; transform: translate3d(-5%, 2%, 0); }
  24%, 76% { opacity: 0.78; }
  100% { opacity: 0; transform: translate3d(6%, -2%, 0); }
}

@keyframes overflight-clouds-near {
  0% { opacity: 0; transform: translate3d(8%, 4%, 0) scale(1.05); }
  30%, 72% { opacity: 0.9; }
  100% { opacity: 0; transform: translate3d(-7%, -3%, 0) scale(1.12); }
}

@keyframes overflight-layer-far {
  0% { opacity: 0; transform: translateX(-12%); }
  22%, 74% { opacity: 0.75; }
  100% { opacity: 0; transform: translateX(105%); }
}

@keyframes overflight-layer-near {
  0% { opacity: 0; transform: translateX(18%); }
  28%, 78% { opacity: 0.86; }
  100% { opacity: 0; transform: translateX(-108%); }
}

@keyframes overflight-current {
  0%, 22% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scaleX(0.3); }
  48%, 76% { opacity: 0.78; transform: translate(-50%, -50%) rotate(-5deg) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-2deg) scaleX(1.22); }
}

@keyframes overflight-light-angel {
  0%, 28% { opacity: 0; transform: translate3d(-20rem, 2.5rem, 0) scale(0.48); }
  48%, 78% { opacity: 1; transform: translate3d(-2rem, 0.35rem, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(7rem, -1.2rem, 0) scale(0.7); }
}

@keyframes overflight-light-adriana {
  0%, 28% { opacity: 0; transform: translate3d(20rem, -2.5rem, 0) scale(0.48); }
  48%, 78% { opacity: 1; transform: translate3d(2rem, -0.35rem, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-7rem, 1.2rem, 0) scale(0.7); }
}

@keyframes overflight-title {
  0%, 27% { opacity: 0; transform: translate(-50%, 8px); }
  42%, 73% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -5px); }
}

@media (max-width: 759px) {
  .chapter--first .chapter__backdrop[data-scene="tocumen"] { background-position: 56% center; }
  .chapter--first .chapter__backdrop[data-scene="panama-canal"] { background-position: 54% center; }
  .chapter--first .chapter__backdrop[data-scene="costa-verde"] { background-position: 58% center; }
  .chapter--first .chapter__backdrop[data-scene="barranco-bajada"] { background-position: 55% center; }
  .chapter--first .chapter__overflight-title { top: 66%; width: calc(100% - 2rem); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .chapter--first .chapter__rain { display: none; }
  .chapter--first .chapter__backdrop {
    transform: scale(1.035);
    transition-duration: 500ms;
  }
  .chapter--first .chapter__overflight-cloud,
  .chapter--first .chapter__overflight-current,
  .chapter--first .chapter__overflight-title,
  .chapter--first:has(.flight.is-overflight) .chapter__celestial-pause::before,
  .chapter--first:has(.flight.is-overflight) .chapter__celestial-pause::after {
    animation: none !important;
  }
  .chapter--first:has(.flight.is-overflight) .chapter__soul-light {
    opacity: 0.82;
  }
  .chapter--first:has(.flight.is-overflight) .chapter__soul-light--angel {
    transform: translate3d(-2rem, 0, 0);
  }
  .chapter--first:has(.flight.is-overflight) .chapter__soul-light--adriana {
    transform: translate3d(2rem, 0, 0);
  }
  .chapter--first:has(.flight.is-overflight) .chapter__overflight-title {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Chapter 1: Midnight Flight / La ruta que nos une */
.chapter--first {
  --midnight-black: #07050a;
  --midnight-plum: #130914;
  --midnight-wine: #291020;
  --midnight-raspberry: #a8476d;
  --midnight-blush: #e989ab;
  --midnight-ivory: #fff0ec;
  --midnight-pearl: #f9dde7;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--midnight-ivory);
  background: transparent;
}

.chapter--first::before,
.chapter--first::after,
.chapter--first.is-visible::before,
.chapter--first.is-visible::after {
  z-index: 2;
  opacity: 1;
  transform: none;
}

.chapter--first::before {
  background:
    radial-gradient(circle at 16% 21%, rgba(249, 221, 231, 0.36) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 16%, rgba(233, 137, 171, 0.28) 0 1.2px, transparent 2.3px),
    radial-gradient(circle at 68% 76%, rgba(255, 240, 236, 0.22) 0 1px, transparent 2px),
    radial-gradient(ellipse 52% 42% at 50% 55%, transparent 35%, rgba(7, 5, 10, 0.24) 100%);
  animation: midnight-stars-drift 18s ease-in-out infinite alternate;
}

.chapter--first::after {
  z-index: 8;
  background:
    linear-gradient(180deg, rgba(7, 5, 10, 0.58) 0%, transparent 24%, transparent 67%, rgba(7, 5, 10, 0.72) 100%),
    radial-gradient(ellipse at center, transparent 30%, rgba(7, 5, 10, 0.16) 61%, rgba(7, 5, 10, 0.82) 116%);
}

.chapter--first .chapter__back {
  z-index: 30;
  top: max(1.15rem, env(safe-area-inset-top));
  left: max(1.15rem, env(safe-area-inset-left));
  min-height: 2.65rem;
  color: rgba(255, 240, 236, 0.84);
  font-size: 0.82rem;
  background: rgba(7, 5, 10, 0.42);
  border-color: rgba(249, 221, 231, 0.18);
  box-shadow: 0 0.9rem 2.8rem rgba(7, 5, 10, 0.28);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.chapter--first .chapter__back:hover {
  color: #ffffff;
  background: rgba(41, 16, 32, 0.62);
  border-color: rgba(233, 137, 171, 0.42);
}

.chapter--first .chapter__sky,
.chapter--first .chapter__backdrop,
.chapter--first .chapter__scene-shade,
.chapter--first .chapter__mist,
.chapter--first .chapter__grain,
.chapter--first .chapter__distant-sparks,
.chapter--first .chapter__celestial-pause {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chapter--first .chapter__sky {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62% 46% at 74% 34%, rgba(168, 71, 109, 0.2), transparent 72%),
    radial-gradient(ellipse 54% 42% at 20% 92%, rgba(41, 16, 32, 0.72), transparent 78%),
    linear-gradient(145deg, var(--midnight-plum), var(--midnight-black) 68%);
}

.chapter--first:has(.flight.is-paused) .chapter__sky {
  z-index: 13;
}

.chapter--first:has(.flight.is-paused) .chapter__sky,
.chapter--first[data-phase="reward"] .chapter__sky,
.chapter--first[data-phase="memory"] .chapter__sky,
.chapter--first[data-phase="memories"] .chapter__sky,
.chapter--first:has(.flight.is-paused)::before,
.chapter--first[data-phase="reward"]::before,
.chapter--first[data-phase="memory"]::before,
.chapter--first[data-phase="memories"]::before,
.chapter--first:has(.flight.is-paused)::after,
.chapter--first[data-phase="reward"]::after,
.chapter--first[data-phase="memory"]::after,
.chapter--first[data-phase="memories"]::after {
  -webkit-mask-image: radial-gradient(
    circle clamp(8.5rem, 15vw, 13.5rem) at var(--heart-window-x, 74%) var(--heart-window-y, 50%),
    transparent 0 42%,
    rgba(0, 0, 0, 0.3) 64%,
    #000 100%
  );
  mask-image: radial-gradient(
    circle clamp(8.5rem, 15vw, 13.5rem) at var(--heart-window-x, 74%) var(--heart-window-y, 50%),
    transparent 0 42%,
    rgba(0, 0, 0, 0.3) 64%,
    #000 100%
  );
}

.chapter--first .chapter__sky::before,
.chapter--first .chapter__sky::after {
  display: none;
}

.chapter--first .chapter__backdrop {
  inset: -2.5%;
  z-index: 1;
  background-color: var(--midnight-plum);
  background-image: var(--chapter-scene-image);
  background-position: center;
  background-size: cover;
  filter: none;
  opacity: 0;
  transform: translate3d(var(--chapter-parallax-x, 0), var(--chapter-parallax-y, 0), 0) scale(1.065);
  transition: opacity 1750ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: midnight-photo-drift 24s ease-in-out infinite alternate paused;
  will-change: auto;
}

.chapter--first .chapter__backdrop.is-active {
  animation-play-state: running;
  will-change: opacity, transform;
}

.chapter--first .chapter__backdrop[data-scene="panama-sunset"] {
  background-position: center 48%;
}

.chapter--first .chapter__backdrop[data-scene="panama-night"] {
  background-position: center 56%;
}

.chapter--first .chapter__backdrop[data-scene="miraflores"] {
  background-position: center 62%;
}

.chapter--first .chapter__backdrop[data-scene="barranco"] {
  background-position: center 48%;
}

.chapter--first .chapter__scene-shade {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(7, 5, 10, 0.62) 0%, rgba(7, 5, 10, 0.18) 36%, rgba(7, 5, 10, 0.08) 64%, rgba(7, 5, 10, 0.34) 100%),
    linear-gradient(180deg, rgba(19, 9, 20, 0.24), rgba(7, 5, 10, 0.12) 46%, rgba(7, 5, 10, 0.56));
  transition: background-color 700ms ease, opacity 700ms ease;
}

.chapter--first:has(.flight.is-error) .chapter__scene-shade {
  background-color: rgba(41, 16, 32, 0.32);
  opacity: 0.96;
}

.chapter--first .chapter__mist {
  z-index: 4;
  inset: -12%;
  opacity: 0.58;
}

.chapter--first .chapter__mist--near {
  background:
    radial-gradient(ellipse 38% 15% at 20% 72%, rgba(168, 71, 109, 0.22), transparent 72%),
    radial-gradient(ellipse 46% 18% at 78% 43%, rgba(233, 137, 171, 0.14), transparent 74%),
    radial-gradient(ellipse 58% 22% at 54% 101%, rgba(41, 16, 32, 0.54), transparent 72%);
  animation: midnight-mist-near 16s ease-in-out infinite alternate;
}

.chapter--first .chapter__mist--far {
  background:
    radial-gradient(ellipse 42% 14% at 45% 30%, rgba(249, 221, 231, 0.08), transparent 76%),
    radial-gradient(ellipse 52% 17% at 68% 78%, rgba(168, 71, 109, 0.17), transparent 74%);
  opacity: 0.44;
  animation: midnight-mist-far 22s ease-in-out infinite alternate;
}

.chapter--first .chapter__grain {
  z-index: 6;
  background:
    repeating-radial-gradient(circle at 27% 18%, rgba(255, 255, 255, 0.2) 0 0.35px, transparent 0.65px 3.2px),
    repeating-linear-gradient(117deg, transparent 0 3px, rgba(255, 240, 236, 0.035) 4px, transparent 5px 9px);
  background-size: 7px 7px, 11px 13px;
  opacity: 0.08;
}

.chapter--first .chapter__distant-sparks {
  z-index: 5;
}

.chapter--first .chapter__distant-sparks span {
  position: absolute;
  width: 3px;
  aspect-ratio: 1;
  background: var(--midnight-pearl);
  border-radius: 50%;
  box-shadow: 0 0 0.9rem rgba(249, 221, 231, 0.65);
  opacity: 0.35;
  animation: midnight-spark 4.8s ease-in-out infinite;
}

.chapter--first .chapter__distant-sparks span:nth-child(1) { top: 18%; left: 12%; }
.chapter--first .chapter__distant-sparks span:nth-child(2) { top: 29%; left: 32%; animation-delay: -1.1s; }
.chapter--first .chapter__distant-sparks span:nth-child(3) { top: 13%; left: 61%; animation-delay: -2.8s; }
.chapter--first .chapter__distant-sparks span:nth-child(4) { top: 24%; left: 86%; animation-delay: -0.7s; }
.chapter--first .chapter__distant-sparks span:nth-child(5) { top: 72%; left: 18%; animation-delay: -3.4s; }
.chapter--first .chapter__distant-sparks span:nth-child(6) { top: 81%; left: 43%; animation-delay: -1.9s; }
.chapter--first .chapter__distant-sparks span:nth-child(7) { top: 67%; left: 69%; animation-delay: -4.1s; }
.chapter--first .chapter__distant-sparks span:nth-child(8) { top: 46%; left: 78%; animation-delay: -2.2s; }
.chapter--first .chapter__distant-sparks span:nth-child(9) { top: 86%; left: 91%; animation-delay: -0.4s; }

.chapter--first .chapter__intro {
  display: none !important;
}

.chapter--first .chapter__note {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 16;
  width: min(42rem, calc(100% - 2.5rem));
  margin: 0;
  padding: 0;
  color: var(--midnight-ivory);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.65rem, 3.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.22;
  text-align: center;
  text-wrap: balance;
  background: none;
  border: 0;
  opacity: 0;
  filter: blur(8px);
  text-shadow:
    0 0.45rem 2rem rgba(7, 5, 10, 0.92),
    0 0 2.8rem rgba(233, 137, 171, 0.22);
  transform: translate(-50%, -47%) scale(0.985);
  transition:
    opacity 900ms ease,
    filter 1050ms ease,
    transform 1150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .chapter__note::before,
.chapter--first .chapter__note::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  aspect-ratio: 1;
  content: "";
  background: var(--midnight-pearl);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    -9rem -2rem 0 rgba(255, 240, 236, 0.85),
    -5rem 3rem 0 rgba(233, 137, 171, 0.74),
    -1rem -3.5rem 0 rgba(249, 221, 231, 0.72),
    3.8rem 2.5rem 0 rgba(233, 137, 171, 0.72),
    8rem -1rem 0 rgba(255, 240, 236, 0.82);
}

.chapter--first .chapter__note.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}

.chapter--first .chapter__note.is-dissolving {
  color: rgba(255, 240, 236, 0);
  opacity: 0;
  filter: blur(5px);
  transform: translate(-50%, -54%) scale(1.025);
}

.chapter--first .chapter__note.is-dissolving::before,
.chapter--first .chapter__note.is-dissolving::after {
  animation: midnight-note-stars 1100ms ease-out both;
}

.chapter--first .chapter__note.is-dissolving::after {
  animation-delay: 90ms;
  transform: rotate(38deg) scale(0.72);
}

.chapter--first .chapter__guiding-star {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 18;
  display: grid;
  width: 5.25rem;
  height: 5.25rem;
  padding: 0;
  color: var(--midnight-ivory);
  font-size: 2rem;
  cursor: pointer;
  touch-action: manipulation;
  background: radial-gradient(circle, rgba(255, 240, 236, 0.18) 0 8%, rgba(233, 137, 171, 0.1) 24%, transparent 68%);
  border: 0;
  border-radius: 50%;
  opacity: 0;
  filter: blur(5px);
  transform: translate(calc(-50% + var(--star-follow-x, 0px)), calc(-50% + var(--star-follow-y, 0px))) scale(0.72);
  transition: opacity 700ms ease, filter 700ms ease, color 260ms ease;
  place-items: center;
}

.chapter--first .chapter__guiding-star::before,
.chapter--first .chapter__guiding-star::after {
  position: absolute;
  inset: 11%;
  content: "";
  border: 1px solid rgba(249, 221, 231, 0.24);
  border-radius: 50%;
  transform: scale(0.76);
  transition: transform 500ms ease, border-color 500ms ease;
}

.chapter--first .chapter__guiding-star::after {
  inset: 24%;
  border-color: rgba(233, 137, 171, 0.34);
}

.chapter--first .chapter__guiding-star.is-visible {
  opacity: 1;
  filter: blur(0);
  animation: midnight-guiding-star 3.4s ease-in-out infinite;
}

.chapter--first .chapter__guiding-star:hover::before,
.chapter--first .chapter__guiding-star:focus-visible::before {
  border-color: rgba(255, 240, 236, 0.62);
  transform: scale(1.12);
}

.chapter--first .flight {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
  transform: none;
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .flight.is-visible {
  opacity: 1;
  transform: none;
}

.chapter--first .flight__header {
  position: absolute;
  top: clamp(5rem, 9vh, 6.7rem);
  left: clamp(1.25rem, 5vw, 5.5rem);
  z-index: 6;
  display: flex;
  width: min(90%, 82rem);
  padding: 0;
  pointer-events: none;
  align-items: flex-start;
  justify-content: space-between;
}

.chapter--first .flight__identity {
  max-width: min(32rem, 58vw);
  opacity: 0;
  filter: blur(7px);
  text-shadow: 0 0.5rem 2rem rgba(7, 5, 10, 0.92);
  transform: translateY(12px);
}

.chapter--first .flight.is-visible .flight__identity {
  animation: midnight-title-reveal 5.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .flight__eyebrow {
  margin: 0 0 0.42rem;
  color: rgba(249, 221, 231, 0.78);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
}

.chapter--first .flight__chapter-title {
  margin: 0;
  color: var(--midnight-ivory);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(2.35rem, 4.3vw, 4.65rem);
  font-weight: 600;
  line-height: 0.98;
  text-wrap: balance;
}

.chapter--first .flight__title {
  margin: 0.62rem 0 0;
  color: rgba(249, 221, 231, 0.88);
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(0.9rem, 1.2vw, 1.08rem);
  font-weight: 600;
  line-height: 1.4;
}

.chapter--first .flight__status {
  display: flex;
  min-width: 8rem;
  padding-top: 0.4rem;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.chapter--first .flight__leg {
  min-width: 0;
  margin: 0;
  padding: 0.3rem 0 0.3rem 0.7rem;
  color: rgba(255, 240, 236, 0.76);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  background: none;
  border: 0;
  border-left: 1px solid rgba(233, 137, 171, 0.38);
  border-radius: 0;
  box-shadow: none;
}

.chapter--first .flight__checkpoint-mark {
  color: var(--midnight-pearl);
  font-size: 0.85rem;
  opacity: 0;
  transform: scale(0.45);
  transition: opacity 700ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .flight.has-checkpoint .flight__checkpoint-mark {
  opacity: 1;
  transform: scale(1);
  text-shadow: 0 0 1.1rem rgba(233, 137, 171, 0.76);
}

.chapter--first .flight__location-plate {
  position: absolute;
  top: clamp(5rem, 9vh, 6.7rem);
  right: clamp(1.25rem, 5vw, 5.5rem);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .flight__location-plate[hidden] {
  display: none;
}

.chapter--first .flight__location-plate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chapter--first .flight__location-plate__content {
  display: grid;
  gap: 0.12rem;
  text-align: right;
  padding: 0.6rem 0.85rem;
  background:
    linear-gradient(135deg, rgba(7, 5, 10, 0.82), rgba(19, 9, 20, 0.78));
  border: 1px solid rgba(233, 137, 171, 0.28);
  border-radius: 8px;
  box-shadow:
    0 0.6rem 1.8rem rgba(7, 5, 10, 0.4),
    0 0 0.8rem rgba(233, 137, 171, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chapter--first .flight__location-plate__name {
  margin: 0;
  color: var(--midnight-ivory);
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(0.78rem, 1.3vw, 0.95rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 0.15rem 0.6rem rgba(7, 5, 10, 0.8);
}

.chapter--first .flight__location-plate__detail {
  margin: 0;
  color: rgba(249, 221, 231, 0.72);
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(0.62rem, 1vw, 0.72rem);
  font-weight: 600;
  line-height: 1.3;
}

.chapter--first .flight__location-plate__runway {
  margin: 0;
  color: rgba(233, 137, 171, 0.9);
  font-family: "Nunito Sans", sans-serif;
  font-size: clamp(0.58rem, 0.9vw, 0.68rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

@media (max-width: 759px) {
  .chapter--first .flight__location-plate {
    top: clamp(4.2rem, 8vh, 5.5rem);
    right: clamp(1rem, 4vw, 1.5rem);
    left: clamp(1rem, 4vw, 1.5rem);
  }

  .chapter--first .flight__location-plate__content {
    padding: 0.5rem 0.75rem;
    gap: 0.1rem;
  }

  .chapter--first .flight__location-plate__name {
    font-size: clamp(0.7rem, 2.2vw, 0.85rem);
  }

  .chapter--first .flight__location-plate__detail {
    font-size: clamp(0.56rem, 1.8vw, 0.66rem);
  }

  .chapter--first .flight__location-plate__runway {
    font-size: clamp(0.52rem, 1.6vw, 0.62rem);
  }
}

@media (max-height: 650px) and (min-width: 760px) {
  .chapter--first .flight__location-plate {
    top: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter--first .flight__location-plate {
    transition:
      opacity 200ms ease,
      transform 200ms ease;
  }

  .chapter--first .flight__location-plate.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

.chapter--first .flight__viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chapter--first .flight__viewport::before,
.chapter--first .flight__viewport::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.chapter--first .flight__viewport:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 2px rgba(249, 221, 231, 0.5),
    inset 0 0 2.4rem rgba(233, 137, 171, 0.12);
}

.chapter--first .flight__viewport::before {
  background:
    radial-gradient(ellipse 23% 9% at 30% 77%, rgba(233, 137, 171, 0.14), transparent 72%),
    radial-gradient(ellipse 27% 8% at 72% 35%, rgba(249, 221, 231, 0.09), transparent 74%);
  opacity: 0.84;
  animation: midnight-current-breathe 7s ease-in-out infinite alternate;
}

.chapter--first .flight__viewport::after {
  background: linear-gradient(112deg, transparent 31%, rgba(255, 240, 236, 0.035) 49%, transparent 67%);
  transform: translateX(-48%);
  animation: midnight-reflection 13s ease-in-out infinite;
}

.chapter--first .flight.is-flying .flight__viewport {
  cursor: grabbing;
}

.chapter--first .flight__map {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chapter--first .flight__viewport > .hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  animation: none;
}

.chapter--first .flight.has-plane-3d .flight__map {
  z-index: 3;
}

.chapter--first .flight.has-plane-3d .flight__plane-core {
  opacity: 0;
  visibility: hidden;
}

.chapter--first .flight__stars circle {
  fill: var(--midnight-pearl);
  opacity: 0.42;
  filter: url(#flight-soft-glow);
  transform: scaleY(var(--map-shape-y, 1));
  transform-box: fill-box;
  transform-origin: center;
  animation: midnight-map-star 4.6s ease-in-out infinite alternate;
}

.chapter--first .flight__stars circle:nth-child(3n) { animation-delay: -1.7s; }
.chapter--first .flight__stars circle:nth-child(4n) { animation-delay: -3.2s; }

.chapter--first .flight__current,
.chapter--first .flight__route-mist,
.chapter--first .flight__route-constellation,
.chapter--first .flight__route-hint,
.chapter--first .flight__trail,
.chapter--first .flight__trail-halo,
.chapter--first .flight__trail-spark {
  fill: none;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chapter--first .flight__branches .flight__current {
  stroke: rgba(233, 137, 171, 0.3);
  stroke-width: 1.25;
  stroke-dasharray: 30 34 8 48;
  opacity: 0.28;
  animation: midnight-route-flow 19s linear infinite;
}

.chapter--first .flight__branches .flight__current--mist {
  stroke: rgba(168, 71, 109, 0.14);
  stroke-width: 16;
  stroke-dasharray: none;
  opacity: 0.2;
  filter: url(#flight-route-glow);
  animation: none;
}

.chapter--first .flight__route-mist {
  stroke: rgba(233, 137, 171, 0.14);
  stroke-width: 14;
  stroke-dasharray: 22 188 10 274 34 330;
  opacity: 0.11;
  filter: url(#flight-route-glow);
}

.chapter--first .flight__route-constellation {
  stroke: rgba(249, 221, 231, 0.58);
  stroke-width: 1.2;
  stroke-dasharray: 2 86 14 172 3 240;
  opacity: 0.18;
}

.chapter--first .flight__route-hint {
  stroke: var(--midnight-ivory);
  stroke-width: 4.2;
  opacity: 0;
  filter: url(#flight-soft-glow);
}

.chapter--first .flight.has-hint[data-hint-level="2"] .flight__route-hint {
  animation: midnight-hint-constellation 4.8s ease-out both;
}

.chapter--first .flight.has-hint[data-hint-level="3"] .flight__route-hint {
  animation: midnight-hint-current 3.9s ease-out both;
}

.chapter--first .flight__trail {
  stroke: var(--midnight-pearl);
  stroke-width: calc(3.2px + var(--flight-energy, 0) * 3px);
  opacity: calc(0.68 + var(--flight-energy, 0) * 0.24);
  filter: url(#flight-soft-glow);
  transition: opacity 300ms ease;
}

.chapter--first .flight__trail-halo {
  stroke: rgba(233, 137, 171, 0.4);
  stroke-width: calc(7px + var(--flight-energy, 0) * 7px);
  opacity: calc(0.22 + var(--flight-energy, 0) * 0.22);
  pointer-events: none;
  filter: url(#flight-route-glow);
  transition: opacity 300ms ease;
}

.chapter--first .flight__trail-spark {
  stroke: rgba(255, 240, 236, 0.8);
  stroke-width: 2;
  stroke-dasharray: 2 46 12 34 3 58;
  opacity: calc(0.28 + var(--flight-energy, 0) * 0.3);
  pointer-events: none;
  transition: opacity 300ms ease;
}

.chapter--first .flight.is-arriving .flight__trail-halo,
.chapter--first .flight.is-arriving .flight__trail-spark {
  opacity: 1;
  animation: midnight-arrival-trail 2.8s ease-out both;
}

.chapter--first .flight.is-error .flight__trail {
  stroke-dasharray: 14 13;
  opacity: 0.38;
}

.chapter--first .flight.is-arriving .flight__trail {
  stroke-width: 8;
  opacity: 1;
  animation: midnight-arrival-trail 2.8s ease-out both;
}

.chapter--first .flight__gate circle {
  fill: none;
  stroke: rgba(249, 221, 231, 0.24);
  stroke-width: 1.15;
  opacity: 0.5;
  transform: scaleY(var(--map-shape-y, 1));
  transform-box: fill-box;
  transform-origin: center;
}

.chapter--first .flight__gate circle:first-child {
  filter: url(#flight-route-glow);
}

.chapter--first .flight__gate circle:nth-child(2) {
  stroke: rgba(233, 137, 171, 0.34);
  stroke-dasharray: 18 14;
}

.chapter--first .flight__gate circle:last-child {
  fill: var(--midnight-pearl);
  stroke: none;
  opacity: 0.56;
  filter: url(#flight-soft-glow);
}

.chapter--first .flight.has-hint .flight__gate.is-next circle:first-child {
  stroke: rgba(255, 240, 236, 0.7);
  animation: midnight-gate-call 2.5s ease-in-out infinite;
}

.chapter--first .flight__gate.is-passed circle:first-child {
  fill: rgba(233, 137, 171, 0.15);
  stroke: rgba(255, 240, 236, 0.9);
  opacity: 0.9;
  animation: midnight-gate-cross 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .flight__gate.is-passed circle:last-child {
  fill: #ffffff;
  opacity: 1;
}

.chapter--first .flight__plane {
  pointer-events: none;
  animation: none !important;
  transform-box: fill-box;
  transform-origin: center;
}

.chapter--first .flight__plane-core {
  transform: scaleY(var(--map-shape-y, 1))
    rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg)))
    scale(var(--plane-size, 1));
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 360ms ease;
}

.chapter--first .flight__plane-halo {
  fill: rgba(233, 137, 171, calc(0.16 + var(--flight-energy, 0) * 0.14));
  filter: url(#flight-route-glow);
}

.chapter--first .flight__plane-shadow {
  fill: rgba(7, 5, 10, 0.55);
}

.chapter--first .flight__plane-tail,
.chapter--first .flight__plane-wing,
.chapter--first .flight__plane-fuselage {
  fill: url(#flight-plane-ivory);
  stroke: rgba(94, 66, 88, 0.35);
  stroke-width: 0.6;
}

.chapter--first .flight__plane-tail {
  fill: url(#flight-plane-blush);
  stroke: rgba(168, 71, 109, 0.32);
}

.chapter--first .flight__plane-blush {
  fill: rgba(168, 71, 109, 0.34);
}

.chapter--first .flight__plane-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-linecap: round;
  stroke-width: 1.2;
}

.chapter--first .flight__plane-window {
  fill: rgba(58, 34, 52, 0.92);
  stroke: rgba(255, 244, 248, 0.4);
  stroke-width: 0.5;
}

.chapter--first .flight__plane-fin,
.chapter--first .flight__plane-nose {
  fill: url(#flight-plane-ivory);
  stroke: rgba(94, 66, 88, 0.3);
  stroke-width: 0.5;
}

.chapter--first .flight__plane-engine {
  fill: url(#flight-plane-ivory);
  stroke: rgba(94, 66, 88, 0.3);
  stroke-width: 0.5;
}

.chapter--first .flight__plane-thrust {
  fill: #ffffff;
  filter: url(#flight-soft-glow);
  opacity: 0.9;
}

.chapter--first .flight.is-flying:not(.is-taking-off) .flight__plane-core {
  animation: midnight-plane-breathe 1.8s ease-in-out infinite alternate;
}

.chapter--first .flight.is-taking-off .flight__plane-core {
  animation: midnight-plane-takeoff 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chapter--first .flight.is-returning .flight__plane-core {
  opacity: 0.7;
}

.chapter--first .flight.is-paused .flight__plane-core {
  animation: midnight-plane-pause 2.6s ease-in-out infinite;
  filter: grayscale(0.15) sepia(0.12) brightness(0.78);
}

.chapter--first .flight.is-paused .flight__plane-shadow {
  opacity: 0;
}

.chapter--first .flight.is-arriving .flight__plane-core {
  animation: midnight-plane-arrive 2.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .flight.is-transitioning .flight__header {
  opacity: 0;
  transform: translateY(-1.5rem);
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1), transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .flight.is-transitioning .flight__controls {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .flight.is-transitioning .flight__place {
  opacity: 0;
  transition: opacity 1000ms ease;
}

.chapter--first .flight.is-transitioning .flight__map {
  opacity: 0;
  transition: opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .flight.is-transitioning .flight__plane-core {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 1400ms cubic-bezier(0.22, 1, 0.36, 1), transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .flight.is-transitioning .flight__trail,
.chapter--first .flight.is-transitioning .flight__trail-halo,
.chapter--first .flight.is-transitioning .flight__trail-spark {
  opacity: 0;
  transition: opacity 1200ms ease;
}

.chapter--first .flight.is-transitioning .flight__gate {
  opacity: 0;
  transition: opacity 1000ms ease;
}

.chapter--first .flight.is-transitioning .flight__route-constellation,
.chapter--first .flight.is-transitioning .flight__route-mist,
.chapter--first .flight.is-transitioning .flight__branches {
  opacity: 0;
  transition: opacity 1400ms ease;
}

.chapter--first .flight.is-transitioning .flight__viewport::before {
  opacity: 0;
  transition: opacity 1800ms ease;
}

.chapter--first .flight.is-transitioning .flight__viewport::after {
  opacity: 0;
  transition: opacity 1800ms ease;
}

.chapter--first .flight.is-transitioning .flight__cinematic-line {
  opacity: 0;
  transition: opacity 800ms ease;
}

.chapter--first .flight.is-transitioning .flight__feedback {
  opacity: 0;
  transition: opacity 800ms ease;
}

.chapter__sky {
  transition: opacity 2000ms ease;
}

.chapter--first[data-phase="reward"] .chapter__sky,
.chapter--first[data-phase="memory"] .chapter__sky,
.chapter--first[data-phase="memories"] .chapter__sky {
  opacity: 1;
}

.chapter__backdrop {
  transition: opacity 2000ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first[data-phase="reward"] .chapter__backdrop,
.chapter--first[data-phase="memory"] .chapter__backdrop,
.chapter--first[data-phase="memories"] .chapter__backdrop {
  opacity: 0;
}

.chapter__mist {
  transition: opacity 1800ms ease;
}

.chapter--first[data-phase="reward"] .chapter__mist,
.chapter--first[data-phase="memory"] .chapter__mist,
.chapter--first[data-phase="memories"] .chapter__mist {
  opacity: 0.3;
}

.chapter__grain {
  transition: opacity 2000ms ease;
}

.chapter__distant-sparks {
  transition: opacity 1800ms ease;
}

.chapter--first[data-phase="reward"] .chapter__distant-sparks,
.chapter--first[data-phase="memory"] .chapter__distant-sparks,
.chapter--first[data-phase="memories"] .chapter__distant-sparks {
  opacity: 0.15;
}

.chapter__celestial-pause {
  transition: opacity 1600ms ease, visibility 1600ms;
}

.chapter__air-wave {
  transition: opacity 1200ms ease;
}

.chapter--first .flight.is-transitioning ~ .chapter__air-wave {
  opacity: 0;
}

.chapter-reward,
.memories {
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 1200ms ease, transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .chapter-reward.is-visible,
.chapter--first .memories.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .chapter--first .flight.is-transitioning .flight__header,
  .chapter--first .flight.is-transitioning .flight__controls,
  .chapter--first .flight.is-transitioning .flight__place,
  .chapter--first .flight.is-transitioning .flight__map,
  .chapter--first .flight.is-transitioning .flight__plane-core,
  .chapter--first .flight.is-transitioning .flight__trail,
  .chapter--first .flight.is-transitioning .flight__trail-halo,
  .chapter--first .flight.is-transitioning .flight__trail-spark,
  .chapter--first .flight.is-transitioning .flight__gate,
  .chapter--first .flight.is-transitioning .flight__route-constellation,
  .chapter--first .flight.is-transitioning .flight__route-mist,
  .chapter--first .flight.is-transitioning .flight__branches,
  .chapter--first .flight.is-transitioning .flight__viewport::before,
  .chapter--first .flight.is-transitioning .flight__viewport::after,
  .chapter--first .flight.is-transitioning .flight__cinematic-line,
  .chapter--first .flight.is-transitioning .flight__feedback,
  .chapter__sky,
  .chapter__backdrop,
  .chapter__mist,
  .chapter__grain,
  .chapter__distant-sparks,
  .chapter__celestial-pause,
  .chapter__air-wave,
  .chapter-reward,
  .memories {
    transition-duration: 400ms !important;
  }
}

.chapter--first .flight__place {
  position: absolute;
  z-index: 4;
  color: rgba(255, 240, 236, 0.76);
  font-size: 0.72rem;
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 0.3rem 1rem rgba(7, 5, 10, 0.95);
}

.chapter--first .flight__place::before {
  width: 0.38rem;
  height: 0.38rem;
  background: var(--midnight-pearl);
  box-shadow: 0 0 1.2rem rgba(233, 137, 171, 0.9);
}

.chapter--first .flight__place--origin {
  bottom: 14%;
  left: 6.5%;
}

.chapter--first .flight__place--destination {
  top: 18%;
  right: 5%;
}

.chapter--first .flight__controls {
  position: absolute;
  right: clamp(1.25rem, 5vw, 5.5rem);
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  left: clamp(1.25rem, 5vw, 5.5rem);
  z-index: 8;
  display: flex;
  min-height: 3.1rem;
  padding: 0;
  pointer-events: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
}

.chapter--first .flight__start {
  min-width: 9.5rem;
  min-height: 2.85rem;
  padding: 0.65rem 1.15rem;
  pointer-events: auto;
  background: linear-gradient(135deg, rgba(168, 71, 109, 0.82), rgba(41, 16, 32, 0.88));
  border-color: rgba(249, 221, 231, 0.4);
  box-shadow:
    0 0.9rem 2.4rem rgba(7, 5, 10, 0.42),
    0 0 1.8rem rgba(233, 137, 171, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.chapter--first .flight.is-flying .flight__start,
.chapter--first .flight.is-paused .flight__start,
.chapter--first .flight.is-returning .flight__start,
.chapter--first .flight.is-arriving .flight__start {
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
}

.chapter--first .flight__feedback {
  width: min(31rem, 58vw);
  min-height: 0;
  padding: 0.7rem 0.85rem;
  color: rgba(255, 240, 236, 0.9);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: right;
  text-shadow: 0 0.3rem 1rem rgba(7, 5, 10, 0.96);
  background: linear-gradient(90deg, transparent, rgba(19, 9, 20, 0.48));
  border-radius: 4px;
}

.chapter--first .chapter__celestial-pause {
  z-index: 10;
  display: grid;
  opacity: 0;
  visibility: hidden;
  background:
    linear-gradient(180deg, rgba(10, 6, 14, 0.97), rgba(22, 11, 24, 0.9) 46%, rgba(7, 5, 10, 0.82)),
    radial-gradient(ellipse at 50% 120%, rgba(168, 71, 109, 0.22), transparent 60%);
  transition: opacity 900ms ease, visibility 900ms;
  place-items: center;
}

.chapter--first .chapter__celestial-pause::before,
.chapter--first .chapter__celestial-pause::after {
  position: absolute;
  inset: -6% 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 30%, rgba(168, 71, 109, 0.16), transparent 42%),
    radial-gradient(ellipse at 80% 62%, rgba(233, 137, 171, 0.12), transparent 46%),
    radial-gradient(ellipse at 42% 84%, rgba(19, 9, 20, 0.5), transparent 55%);
  opacity: 0.5;
}

.chapter--first .chapter__celestial-pause::before {
  animation: midnight-clouds-drift 26s linear infinite alternate;
}

.chapter--first .chapter__celestial-pause::after {
  animation: midnight-clouds-slow 38s linear infinite alternate;
  filter: brightness(0.92);
}

.chapter--first:has(.flight.is-paused) .chapter__celestial-pause {
  opacity: 1;
  visibility: visible;
}

.chapter--first .chapter__soul-light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.55rem;
  aspect-ratio: 1;
  background: radial-gradient(circle, #ffffff 0 9%, var(--midnight-pearl) 22%, rgba(233, 137, 171, 0.4) 50%, transparent 74%);
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 0.8rem rgba(233, 137, 171, 0.6));
}

.chapter--first .chapter__soul-light::after {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 50%;
  color: rgba(249, 221, 231, 0.72);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  content: attr(data-name);
  text-shadow: 0 0.18rem 0.7rem rgba(7, 5, 10, 0.92);
  transform: translateX(-50%);
}

.chapter--first:has(.flight.is-paused) .chapter__soul-light--angel {
  animation: midnight-soul-angel 5.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first:has(.flight.is-paused) .chapter__soul-light--adriana {
  animation: midnight-soul-adriana 5.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .chapter__checkpoint-wave {
  width: 3rem;
  aspect-ratio: 1;
  border: 1px solid rgba(249, 221, 231, 0.6);
  border-radius: 50%;
  opacity: 0;
}

.chapter--first:has(.flight.is-paused) .chapter__checkpoint-wave {
  animation: midnight-checkpoint-wave 1.4s 4.45s ease-out both;
}

.chapter--first .chapter-reward,
.chapter--first .memories {
  position: absolute;
  inset: 0;
  z-index: 14;
  width: 100%;
  min-height: 100%;
}

.chapter--first .chapter-reward__memory {
  top: 52%;
  left: clamp(1.25rem, 7vw, 7rem);
  width: min(28rem, 42vw);
}

.chapter--first .chapter-reward__figure {
  padding: 0.72rem 0.72rem 1.15rem;
  background: linear-gradient(145deg, rgba(41, 16, 32, 0.72), rgba(7, 5, 10, 0.64));
  border-color: rgba(249, 221, 231, 0.25);
  border-radius: 18px;
  box-shadow:
    0 2.4rem 6rem rgba(7, 5, 10, 0.62),
    0 0 3.4rem rgba(168, 71, 109, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chapter--first .chapter-reward__portrait {
  min-height: clamp(15rem, 42vh, 24rem);
  background:
    radial-gradient(circle at 50% 38%, rgba(249, 221, 231, 0.18), transparent 32%),
    linear-gradient(155deg, rgba(168, 71, 109, 0.32), rgba(19, 9, 20, 0.88));
  border-radius: 12px;
}

.chapter--first .chapter-reward__figure figcaption {
  color: var(--midnight-pearl);
  font-size: clamp(1.15rem, 1.8vw, 1.38rem);
}

.chapter--first .chapter-reward__light {
  right: -4.3rem;
  background: radial-gradient(circle, #ffffff 0 8%, var(--midnight-pearl) 18%, rgba(233, 137, 171, 0.28) 46%, transparent 72%);
  box-shadow: 0 0 3rem rgba(233, 137, 171, 0.5);
}

.chapter--first .chapter-reward__heart-target {
  top: var(--heart-target-y, 50%);
  right: auto;
  left: var(--heart-target-x, 74%);
  display: grid;
  transform: translate(-50%, -50%) scale(0.82);
  place-items: center;
}

.chapter--first .chapter-reward__heart-target.is-active {
  transform: translate(-50%, -50%) scale(1);
}

.no-webgl .chapter--first:has(.flight.is-paused) .chapter__sky,
.no-webgl .chapter--first[data-phase="reward"] .chapter__sky,
.no-webgl .chapter--first[data-phase="memory"] .chapter__sky,
.no-webgl .chapter--first[data-phase="memories"] .chapter__sky,
.no-webgl .chapter--first:has(.flight.is-paused)::before,
.no-webgl .chapter--first[data-phase="reward"]::before,
.no-webgl .chapter--first[data-phase="memory"]::before,
.no-webgl .chapter--first[data-phase="memories"]::before,
.no-webgl .chapter--first:has(.flight.is-paused)::after,
.no-webgl .chapter--first[data-phase="reward"]::after,
.no-webgl .chapter--first[data-phase="memory"]::after,
.no-webgl .chapter--first[data-phase="memories"]::after {
  -webkit-mask-image: none;
  mask-image: none;
}

.no-webgl .chapter--first .chapter-reward__heart-target::before {
  width: 76%;
  aspect-ratio: 1;
  content: "";
  background: linear-gradient(145deg, #fff0ec, #e989ab 62%, #a8476d);
  clip-path: polygon(50% 91%, 15% 58%, 7% 37%, 11% 20%, 24% 10%, 39% 12%, 50% 24%, 61% 12%, 76% 10%, 89% 20%, 93% 37%, 85% 58%);
  filter: drop-shadow(0 0 1.4rem rgba(233, 137, 171, 0.52));
}

.chapter--first .memories {
  display: grid;
  padding: clamp(5.5rem, 11vh, 8rem) clamp(1.25rem, 8vw, 8rem) 3rem;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-content: center;
  justify-items: center;
}

.chapter--first .memories__eyebrow {
  color: rgba(233, 137, 171, 0.82);
  font-size: 0.72rem;
  letter-spacing: 0;
}

.chapter--first .memories__title {
  color: var(--midnight-ivory);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1;
  text-shadow: 0 0.5rem 2.2rem rgba(7, 5, 10, 0.94);
}

.chapter--first .memories__stars {
  width: min(100%, 38rem);
  min-height: 15rem;
  margin: 1.5rem auto 1rem;
}

.chapter--first .memories__star {
  background: rgba(7, 5, 10, 0.22);
  border-color: rgba(249, 221, 231, 0.12);
}

@keyframes midnight-photo-drift {
  from { transform: translate3d(var(--chapter-parallax-x, 0), var(--chapter-parallax-y, 0), 0) scale(1.065); }
  to { transform: translate3d(var(--chapter-parallax-x, 0), calc(var(--chapter-parallax-y, 0) - 0.6%), 0) scale(1.105); }
}

@keyframes midnight-stars-drift {
  from { background-position: 0 0, 0 0, 0 0, center; }
  to { background-position: 13px -9px, -11px -7px, 9px -14px, center; }
}

@keyframes midnight-mist-near {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to { transform: translate3d(3%, -1.5%, 0) scale(1.035); }
}

@keyframes midnight-mist-far {
  from { transform: translate3d(2%, -1%, 0); }
  to { transform: translate3d(-3%, 1%, 0); }
}

@keyframes midnight-spark {
  0%, 100% { opacity: 0.18; transform: scale(0.72); }
  45% { opacity: 0.72; transform: scale(1.18); }
}

@keyframes midnight-note-stars {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  24% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -92%) scale(1.3); }
}

@keyframes midnight-guiding-star {
  0%, 100% { box-shadow: 0 0 1.8rem rgba(233, 137, 171, 0.12); }
  50% { box-shadow: 0 0 4rem rgba(233, 137, 171, 0.32); }
}

@keyframes midnight-title-reveal {
  0% { opacity: 0; filter: blur(7px); transform: translateY(12px); }
  18%, 68% { opacity: 1; filter: blur(0); transform: translateY(0); }
  100% { opacity: 0; filter: blur(0); transform: translateY(-3px); }
}

@keyframes midnight-current-breathe {
  from { opacity: 0.52; transform: translateX(-1.5%); }
  to { opacity: 0.9; transform: translateX(1.7%); }
}

@keyframes midnight-reflection {
  0%, 18% { opacity: 0; transform: translateX(-48%); }
  42% { opacity: 0.7; }
  74%, 100% { opacity: 0; transform: translateX(58%); }
}

@keyframes midnight-map-star {
  from { opacity: 0.24; }
  to { opacity: 0.66; }
}

@keyframes midnight-route-flow {
  to { stroke-dashoffset: -260; }
}

@keyframes midnight-hint-constellation {
  0% { opacity: 0; stroke-width: 2.5; }
  16%, 72% { opacity: 0.62; stroke-width: 3.2; }
  100% { opacity: 0; stroke-width: 2.4; }
}

@keyframes midnight-hint-current {
  0% { opacity: 0; stroke-dashoffset: var(--hint-offset, 0); }
  18%, 66% { opacity: 0.82; }
  100% { opacity: 0; stroke-dashoffset: calc(var(--hint-offset, 0) - 130px); }
}

@keyframes midnight-gate-call {
  0%, 100% { opacity: 0.38; transform: scale(0.82) scaleY(var(--map-shape-y, 1)); }
  50% { opacity: 1; transform: scale(1.14) scaleY(var(--map-shape-y, 1)); }
}

@keyframes midnight-gate-cross {
  0% { opacity: 0.44; transform: scale(0.86) scaleY(var(--map-shape-y, 1)); }
  46% { opacity: 1; transform: scale(1.52) scaleY(var(--map-shape-y, 1)); }
  100% { opacity: 0.9; transform: scale(1) scaleY(var(--map-shape-y, 1)); }
}

@keyframes midnight-plane-breathe {
  from { opacity: 0.9; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg))) scale(var(--plane-size, 1)) scale(0.985); }
  to { opacity: 1; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg))) scale(var(--plane-size, 1)) scale(1.025); }
}

@keyframes midnight-plane-takeoff {
  0% { opacity: 0.28; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg) - 6deg)) translate3d(-34px, 22px, 0) scale(var(--plane-size, 1)) scale(0.5); }
  32% { opacity: 1; }
  66% { transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg) - 2deg)) translate3d(-8px, 7px, 0) scale(var(--plane-size, 1)) scale(0.82); }
  100% { opacity: 1; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg))) translate3d(0, -2px, 0) scale(var(--plane-size, 1)) scale(1); }
}

@keyframes midnight-plane-pause {
  0%, 100% { opacity: 0.72; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg))) scale(var(--plane-size, 1)) scale(0.96); }
  50% { opacity: 1; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg))) scale(var(--plane-size, 1)) scale(1.08); }
}

@keyframes midnight-plane-arrive {
  0%, 55% { opacity: 1; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg))) translate3d(0, 0, 0) scale(var(--plane-size, 1)); }
  74% { opacity: 1; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg) - 1deg)) translate3d(4px, 6px, 0) scale(var(--plane-size, 1)) scale(1.2); }
  92% { opacity: 0.9; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg))) translate3d(10px, 12px, 0) scale(var(--plane-size, 1)) scale(0.86); }
  100% { opacity: 0; transform: scaleY(var(--map-shape-y, 1)) rotate(calc(var(--plane-angle, 0deg) + var(--plane-bank, 0deg))) translate3d(16px, 14px, 0) scale(var(--plane-size, 1)) scale(0.4); }
}

@keyframes midnight-clouds-drift {
  from { transform: translate3d(-3%, 0, 0); }
  to { transform: translate3d(3%, -1.5%, 0); }
}

@keyframes midnight-clouds-slow {
  from { transform: translate3d(3.5%, 0.8%, 0); }
  to { transform: translate3d(-3.5%, -1.2%, 0); }
}

@keyframes midnight-arrival-trail {
  0% { opacity: 0.78; }
  52% { opacity: 1; stroke-width: 11; }
  100% { opacity: 0; stroke-width: 18; }
}

@keyframes midnight-soul-angel {
  0% { opacity: 0; transform: translate3d(-13rem, 2rem, 0) scale(0.55); }
  18% { opacity: 1; }
  72%, 100% { opacity: 1; transform: translate3d(-1.05rem, 0, 0) scale(1); }
}

@keyframes midnight-soul-adriana {
  0% { opacity: 0; transform: translate3d(13rem, -2rem, 0) scale(0.55); }
  18% { opacity: 1; }
  72%, 100% { opacity: 1; transform: translate3d(1.05rem, 0, 0) scale(1); }
}

@keyframes midnight-checkpoint-wave {
  0% { opacity: 0; transform: scale(0.5); }
  18% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(4.8); }
}

@media (max-width: 759px) {
  .chapter--first {
    padding: 0;
  }

  .chapter--first .chapter__back {
    top: max(0.8rem, env(safe-area-inset-top));
    left: max(0.8rem, env(safe-area-inset-left));
    min-height: 2.55rem;
    padding: 0.48rem 0.62rem;
    font-size: 0.76rem;
  }

  .chapter--first .chapter__backdrop[data-scene="panama-sunset"] {
    background-position: 64% center;
  }

  .chapter--first .chapter__backdrop[data-scene="panama-night"] {
    background-position: 49% center;
  }

  .chapter--first .chapter__backdrop[data-scene="miraflores"] {
    background-position: center 54%;
  }

  .chapter--first .chapter__backdrop[data-scene="barranco"] {
    background-position: 58% center;
  }

  .chapter--first .chapter__scene-shade {
    background:
      linear-gradient(180deg, rgba(7, 5, 10, 0.5), rgba(7, 5, 10, 0.08) 34%, rgba(7, 5, 10, 0.18) 61%, rgba(7, 5, 10, 0.78)),
      radial-gradient(ellipse at center, transparent 24%, rgba(7, 5, 10, 0.38) 116%);
  }

  .chapter--first .chapter__note {
    width: calc(100% - 2.25rem);
    font-size: clamp(1.55rem, 7.2vw, 2.1rem);
  }

  .chapter--first .chapter__guiding-star {
    width: 4.8rem;
    height: 4.8rem;
  }

  .chapter--first .flight__header {
    top: max(4.55rem, calc(env(safe-area-inset-top) + 4.1rem));
    right: 1rem;
    left: 1rem;
    width: auto;
  }

  .chapter--first .flight__identity {
    max-width: 68%;
  }

  .chapter--first .flight__eyebrow {
    margin-bottom: 0.28rem;
    font-size: 0.61rem;
  }

  .chapter--first .flight__chapter-title {
    font-size: clamp(1.72rem, 8.3vw, 2.25rem);
    line-height: 1;
  }

  .chapter--first .flight__title {
    margin-top: 0.42rem;
    font-size: 0.78rem;
  }

  .chapter--first .flight__status {
    min-width: 5.7rem;
    padding-top: 0.2rem;
  }

  .chapter--first .flight__leg {
    padding-left: 0.48rem;
    font-size: 0.63rem;
  }

  .chapter--first .flight__map {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
  }

  .chapter--first .flight {
    --plane-size: 1.34;
  }

  .chapter--first .flight__place {
    font-size: 0.62rem;
  }

  .chapter--first .flight__place--origin {
    bottom: auto;
    top: 84%;
    left: 5%;
  }

  .chapter--first .flight__place--destination {
    top: 27%;
    right: 4%;
  }

  .chapter--first .flight__controls {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: max(1rem, env(safe-area-inset-left));
    min-height: 0;
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 0.4rem;
  }

  .chapter--first .flight__start {
    width: 100%;
  }

  .chapter--first .flight__feedback {
    width: 100%;
    min-height: 2.4rem;
    padding: 0.45rem 0.25rem;
    font-size: 0.8rem;
    text-align: center;
    background: linear-gradient(90deg, transparent, rgba(19, 9, 20, 0.5), transparent);
  }

  .chapter--first .chapter__soul-light {
    width: 2.2rem;
  }

  .chapter--first .chapter-reward {
    width: 100%;
    min-height: 100%;
  }

  .chapter--first .chapter-reward__memory {
    top: auto;
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 1rem;
    width: calc(100% - 2rem);
    transform: none;
  }

  .chapter--first .chapter-reward__portrait {
    min-height: min(43svh, 20rem);
    max-height: min(43svh, 20rem);
  }

  .chapter--first .chapter-reward__light {
    right: 0.15rem;
    bottom: calc(100% - 3.9rem);
  }

  .chapter--first .chapter-reward__heart-target {
    top: var(--heart-target-y, 33%);
    right: auto;
    left: var(--heart-target-x, 50%);
    transform: translate(-50%, -50%) scale(0.82);
  }

  .chapter--first .chapter-reward__heart-target.is-active {
    transform: translate(-50%, -50%) scale(1);
  }

  .chapter--first .memories {
    width: 100%;
    min-height: 100%;
    padding: 5rem 1rem 2rem;
    border-radius: 0;
  }

  .chapter--first .memories__stars {
    min-height: 12.5rem;
  }
}

@media (min-width: 1200px) {
  .chapter--first .flight__title {
    font-size: clamp(1.24rem, 1.5vw, 1.35rem);
  }

  .chapter--first .flight__leg {
    font-size: 1.04rem;
  }

  .chapter--first .flight__place {
    font-size: 1.02rem;
    text-shadow:
      0 0 0.5rem rgba(19, 9, 20, 0.6),
      0 0.35rem 1.2rem rgba(7, 5, 10, 0.95);
  }

  .chapter--first .flight__place--origin,
  .chapter--first .flight__place--destination {
    background: linear-gradient(90deg, rgba(19, 9, 20, 0.34), rgba(19, 9, 20, 0.12));
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
  }

  .chapter--first .flight__controls {
    bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

@media (max-height: 650px) and (min-width: 760px) {
  .chapter--first .flight__header {
    top: 4.5rem;
  }

  .chapter--first .flight__chapter-title {
    font-size: 2.4rem;
  }

  .chapter--first .flight__controls {
    bottom: 1rem;
  }

  .chapter--first .chapter-reward__portrait {
    min-height: 13rem;
    max-height: 18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter--first::before,
  .chapter--first .chapter__backdrop,
  .chapter--first .chapter__mist,
  .chapter--first .chapter__distant-sparks span,
  .chapter--first .chapter__guiding-star,
  .chapter--first .chapter__celestial-pause::before,
  .chapter--first .chapter__celestial-pause::after,
  .chapter--first .chapter__soul-light,
  .chapter--first .chapter__checkpoint-wave,
  .chapter--first .flight__identity,
  .chapter--first .flight__viewport::before,
  .chapter--first .flight__viewport::after,
  .chapter--first .flight__stars circle,
  .chapter--first .flight__current,
  .chapter--first .flight__route-hint,
  .chapter--first .flight__gate circle,
  .chapter--first .flight__plane-core,
  .chapter--first .flight__trail,
  .chapter--first .flight__trail-halo,
  .chapter--first .flight__trail-spark {
    animation: none !important;
  }

  .chapter--first .chapter__celestial-pause::before,
  .chapter--first .chapter__celestial-pause::after {
    transform: none;
  }

  .chapter--first .chapter__backdrop {
    transform: scale(1.035);
  }

  .chapter--first .flight__identity {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .chapter--first .flight__plane-core {
    transform: scaleY(var(--map-shape-y, 1)) rotate(var(--plane-angle, 0deg))
      scale(var(--plane-size, 1));
  }

  .chapter--first:has(.flight.is-paused) .chapter__soul-light {
    opacity: 1;
  }

  .chapter--first:has(.flight.is-paused) .chapter__soul-light--angel {
    transform: translate3d(-1.05rem, 0, 0);
  }

  .chapter--first:has(.flight.is-paused) .chapter__soul-light--adriana {
    transform: translate3d(1.05rem, 0, 0);
  }
}

/* Keep the cinematic layer authoritative after the legacy chapter rules. */
.chapter--first .chapter__backdrop {
  transform:
    translate3d(
      var(--chapter-parallax-x, 0px),
      calc(var(--chapter-parallax-y, 0px) + var(--scene-depth, 0px)),
      0
    )
    scale(1.065);
  transition:
    opacity 1450ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1450ms ease;
}

.chapter--first .chapter__scene-shade {
  background:
    linear-gradient(90deg, rgba(7, 5, 10, 0.52) 0%, rgba(7, 5, 10, 0.11) 38%, rgba(7, 5, 10, 0.04) 66%, rgba(7, 5, 10, 0.25) 100%),
    linear-gradient(180deg, rgba(19, 9, 20, 0.2), rgba(7, 5, 10, 0.04) 46%, rgba(7, 5, 10, 0.5));
}

.chapter--first .chapter__mist--near {
  background:
    radial-gradient(ellipse 42% 12% at 16% 74%, rgba(249, 221, 231, 0.16), transparent 74%),
    radial-gradient(ellipse 48% 15% at 72% 48%, rgba(233, 137, 171, 0.13), transparent 76%),
    radial-gradient(ellipse 64% 20% at 52% 102%, rgba(41, 16, 32, 0.48), transparent 75%);
  mix-blend-mode: screen;
  opacity: 0.48;
}

.chapter--first .chapter__mist--far {
  background:
    radial-gradient(ellipse 48% 13% at 42% 31%, rgba(249, 221, 231, 0.08), transparent 78%),
    radial-gradient(ellipse 58% 16% at 69% 80%, rgba(168, 71, 109, 0.13), transparent 76%);
}

.chapter--first .flight__viewport > .hero__canvas { z-index: 4; }
.chapter--first .flight.has-plane-3d .flight__map { z-index: 3; }

.chapter--first .chapter__celestial-pause {
  z-index: 10;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62% 34% at 50% 108%, rgba(168, 71, 109, 0.17), transparent 72%),
    linear-gradient(180deg, rgba(7, 5, 10, 0.32), rgba(19, 9, 20, 0.91) 44%, rgba(7, 5, 10, 0.74));
  opacity: 0;
  visibility: hidden;
  transition: opacity 850ms ease, visibility 850ms;
}

.chapter--first .chapter__celestial-pause::before,
.chapter--first .chapter__celestial-pause::after {
  inset: -12%;
  background:
    radial-gradient(ellipse 34% 16% at 24% 42%, rgba(62, 30, 55, 0.7), transparent 76%),
    radial-gradient(ellipse 38% 15% at 76% 58%, rgba(48, 22, 44, 0.72), transparent 78%),
    radial-gradient(ellipse 52% 18% at 54% 84%, rgba(19, 9, 20, 0.84), transparent 76%);
  opacity: 0;
}

.chapter--first:has(.flight.is-overflight) .chapter__celestial-pause {
  opacity: 1;
  visibility: visible;
}

.chapter--first .chapter__soul-light {
  z-index: 4;
  width: 1.3rem;
}

.chapter--first .flight.is-visible .flight__identity {
  animation: midnight-title-arrive 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes midnight-title-arrive {
  from { opacity: 0; filter: blur(7px); transform: translateY(12px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .chapter--first .chapter__backdrop {
    transform: scale(1.035);
    transition-duration: 500ms;
  }
}

/* Chapter 1 final atmosphere and real ring reward. */
.chapter--first .chapter__backdrop[data-scene="barranco-bajada"] {
  inset: 0;
  overflow: hidden;
  background: transparent;
  filter: none;
  transform: none;
  animation: none;
}

.chapter--first .chapter__backdrop[data-scene="barranco-bajada"]::before,
.chapter--first .chapter__backdrop[data-scene="barranco-bajada"]::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.chapter--first .chapter__backdrop[data-scene="barranco-bajada"]::before {
  inset: -3.5%;
  background-image: var(--chapter-scene-image);
  background-position: center;
  background-size: cover;
  filter: blur(16px) brightness(0.28) saturate(0.5) sepia(0.12);
  transform: scale(1.075);
}

.chapter--first .chapter__backdrop[data-scene="barranco-bajada"]::after {
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(19, 9, 20, 0.18), transparent 35%, rgba(7, 5, 10, 0.42)),
    radial-gradient(ellipse at center, transparent 54%, rgba(19, 9, 20, 0.36) 100%),
    var(--chapter-scene-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, contain;
  filter: brightness(0.72) saturate(0.76) sepia(0.06) contrast(1.04);
}

.chapter--first .chapter__mist {
  inset: -8%;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 900ms ease, background 1200ms ease;
  will-change: transform;
}

.chapter--first .chapter__mist--far {
  z-index: 2;
  filter: blur(2px);
  animation: chapter-atmosphere-far 29s ease-in-out infinite alternate;
}

.chapter--first .chapter__mist--middle {
  z-index: 4;
  filter: blur(3px);
  animation: chapter-atmosphere-middle 21s ease-in-out infinite alternate;
}

.chapter--first .chapter__mist--near {
  z-index: 5;
  filter: blur(4px);
  animation: chapter-atmosphere-near 15s ease-in-out infinite alternate;
}

.chapter--first[data-atmosphere="tocumen"] .chapter__mist--far {
  background:
    radial-gradient(ellipse 32% 7% at 18% 80%, rgba(255, 219, 181, 0.18), transparent 74%),
    radial-gradient(ellipse 38% 8% at 72% 78%, rgba(239, 184, 204, 0.16), transparent 76%);
  opacity: 0.72;
}

.chapter--first[data-atmosphere="tocumen"] .chapter__mist--middle {
  background:
    radial-gradient(ellipse 48% 10% at 12% 91%, rgba(249, 221, 231, 0.2), transparent 73%),
    radial-gradient(ellipse 44% 9% at 82% 86%, rgba(216, 134, 166, 0.17), transparent 76%);
  opacity: 0.82;
}

.chapter--first[data-atmosphere="tocumen"] .chapter__mist--near {
  background:
    radial-gradient(ellipse 58% 12% at 31% 105%, rgba(255, 240, 236, 0.26), transparent 72%),
    radial-gradient(ellipse 54% 11% at 86% 101%, rgba(168, 71, 109, 0.2), transparent 75%);
  opacity: 0.92;
}

.chapter--first[data-atmosphere="panama-bay"] .chapter__mist--far,
.chapter--first[data-atmosphere="panama-canal"] .chapter__mist--far {
  background:
    radial-gradient(ellipse 40% 10% at 18% 48%, rgba(255, 240, 236, 0.13), transparent 76%),
    radial-gradient(ellipse 34% 9% at 78% 67%, rgba(239, 184, 204, 0.15), transparent 77%);
  opacity: 0.68;
}

.chapter--first[data-atmosphere="panama-bay"] .chapter__mist--middle,
.chapter--first[data-atmosphere="panama-canal"] .chapter__mist--middle {
  background:
    radial-gradient(ellipse 46% 11% at 9% 70%, rgba(249, 221, 231, 0.18), transparent 75%),
    radial-gradient(ellipse 42% 10% at 88% 52%, rgba(216, 134, 166, 0.16), transparent 76%);
  opacity: 0.78;
}

.chapter--first[data-atmosphere="panama-bay"] .chapter__mist--near,
.chapter--first[data-atmosphere="panama-canal"] .chapter__mist--near {
  background:
    radial-gradient(ellipse 52% 12% at 28% 101%, rgba(255, 240, 236, 0.22), transparent 73%),
    radial-gradient(ellipse 48% 11% at 92% 92%, rgba(168, 71, 109, 0.2), transparent 76%);
  opacity: 0.82;
}

.chapter--first[data-atmosphere="panama-canal"] .chapter__mist--middle {
  opacity: 0.9;
  background:
    radial-gradient(ellipse 42% 10% at 18% 62%, rgba(249, 221, 231, 0.2), transparent 74%),
    radial-gradient(ellipse 47% 11% at 82% 75%, rgba(205, 126, 157, 0.18), transparent 77%);
}

.chapter--first[data-atmosphere="panama-night"] .chapter__mist--far {
  background:
    radial-gradient(ellipse 34% 8% at 23% 38%, rgba(218, 188, 206, 0.12), transparent 76%),
    radial-gradient(ellipse 40% 10% at 76% 74%, rgba(133, 74, 111, 0.18), transparent 77%);
  opacity: 0.64;
}

.chapter--first[data-atmosphere="panama-night"] .chapter__mist--middle {
  background:
    radial-gradient(ellipse 44% 10% at 8% 72%, rgba(230, 203, 218, 0.15), transparent 75%),
    radial-gradient(ellipse 38% 9% at 88% 56%, rgba(168, 71, 109, 0.17), transparent 76%);
  opacity: 0.76;
}

.chapter--first[data-atmosphere="panama-night"] .chapter__mist--near {
  background: radial-gradient(ellipse 58% 13% at 48% 105%, rgba(121, 65, 102, 0.26), transparent 73%);
  opacity: 0.78;
}

.chapter--first[data-atmosphere="costa-verde"] .chapter__mist--far,
.chapter--first[data-atmosphere="miraflores"] .chapter__mist--far {
  background:
    radial-gradient(ellipse 42% 10% at 22% 44%, rgba(218, 226, 235, 0.17), transparent 76%),
    radial-gradient(ellipse 38% 9% at 78% 70%, rgba(235, 222, 232, 0.15), transparent 77%);
  opacity: 0.74;
}

.chapter--first[data-atmosphere="costa-verde"] .chapter__mist--middle,
.chapter--first[data-atmosphere="miraflores"] .chapter__mist--middle {
  background:
    radial-gradient(ellipse 50% 11% at 8% 72%, rgba(225, 232, 239, 0.21), transparent 75%),
    radial-gradient(ellipse 44% 10% at 91% 58%, rgba(220, 202, 218, 0.17), transparent 77%);
  opacity: 0.86;
}

.chapter--first[data-atmosphere="costa-verde"] .chapter__mist--near,
.chapter--first[data-atmosphere="miraflores"] .chapter__mist--near {
  background:
    radial-gradient(ellipse 58% 12% at 24% 104%, rgba(231, 236, 241, 0.25), transparent 73%),
    radial-gradient(ellipse 52% 11% at 88% 98%, rgba(183, 163, 184, 0.2), transparent 76%);
  opacity: 0.9;
}

.chapter--first[data-atmosphere="barranco-bajada"] .chapter__mist--far,
.chapter--first[data-atmosphere="barranco"] .chapter__mist--far,
.chapter--first[data-atmosphere="arrival"] .chapter__mist--far {
  background:
    radial-gradient(ellipse 36% 8% at 16% 42%, rgba(255, 218, 185, 0.12), transparent 76%),
    radial-gradient(ellipse 40% 9% at 82% 72%, rgba(239, 184, 204, 0.14), transparent 77%);
  opacity: 0.58;
}

.chapter--first[data-atmosphere="barranco-bajada"] .chapter__mist--middle,
.chapter--first[data-atmosphere="barranco"] .chapter__mist--middle,
.chapter--first[data-atmosphere="arrival"] .chapter__mist--middle {
  background:
    radial-gradient(ellipse 44% 10% at 6% 74%, rgba(255, 226, 199, 0.16), transparent 75%),
    radial-gradient(ellipse 38% 9% at 90% 58%, rgba(216, 134, 166, 0.16), transparent 77%);
  opacity: 0.68;
}

.chapter--first[data-atmosphere="barranco-bajada"] .chapter__mist--near,
.chapter--first[data-atmosphere="barranco"] .chapter__mist--near,
.chapter--first[data-atmosphere="arrival"] .chapter__mist--near {
  background: radial-gradient(ellipse 55% 12% at 52% 106%, rgba(116, 57, 92, 0.22), transparent 74%);
  opacity: 0.72;
}

.chapter--first[data-atmosphere="overflight"] .chapter__mist {
  mix-blend-mode: normal;
}

.chapter--first[data-atmosphere="overflight"] .chapter__mist--far {
  background:
    radial-gradient(ellipse 38% 16% at 12% 32%, rgba(62, 34, 58, 0.58), transparent 76%),
    radial-gradient(ellipse 34% 14% at 78% 25%, rgba(43, 24, 46, 0.66), transparent 77%);
  opacity: 0.76;
}

.chapter--first[data-atmosphere="overflight"] .chapter__mist--middle {
  background:
    radial-gradient(ellipse 48% 18% at 84% 58%, rgba(72, 38, 65, 0.62), transparent 75%),
    radial-gradient(ellipse 40% 16% at 22% 72%, rgba(34, 19, 38, 0.72), transparent 77%);
  opacity: 0.86;
}

.chapter--first[data-atmosphere="overflight"] .chapter__mist--near {
  background:
    radial-gradient(ellipse 56% 20% at 18% 92%, rgba(50, 26, 48, 0.72), transparent 74%),
    radial-gradient(ellipse 45% 18% at 92% 78%, rgba(28, 16, 32, 0.8), transparent 76%);
  opacity: 0.94;
}

.chapter--first .chapter__rain {
  position: absolute;
  inset: -10%;
  z-index: 5;
  overflow: hidden;
  background: none;
  opacity: 0;
  filter: none;
  transform: none;
  transition: opacity 700ms ease;
}

.chapter--first .chapter__rain-layer {
  position: absolute;
  inset: -12%;
  background-repeat: repeat;
  opacity: 0;
  transform: rotate(-2.5deg);
}

.chapter--first .chapter__rain-layer--far {
  background-image: radial-gradient(ellipse 0.5px 4.5px at center, rgba(235, 225, 232, 0.58), transparent 78%);
  background-size: 23px 34px;
  animation: midnight-rain-far 1.35s linear infinite;
}

.chapter--first .chapter__rain-layer--middle {
  background-image: radial-gradient(ellipse 0.55px 7px at center, rgba(245, 231, 239, 0.62), transparent 79%);
  background-size: 34px 52px;
  animation: midnight-rain-middle 980ms linear infinite;
}

.chapter--first .chapter__rain-layer--near {
  background-image: radial-gradient(ellipse 0.75px 11px at center, rgba(255, 240, 236, 0.66), transparent 80%);
  background-size: 49px 76px;
  filter: blur(0.25px);
  animation: midnight-rain-near 760ms linear infinite;
}

.chapter--first[data-atmosphere="panama-canal"].is-raining .chapter__rain {
  opacity: 0.34;
  animation: none;
}

.chapter--first[data-atmosphere="panama-canal"].is-raining .chapter__rain-layer--far { opacity: 0.32; }
.chapter--first[data-atmosphere="panama-canal"].is-raining .chapter__rain-layer--middle { opacity: 0.44; }
.chapter--first[data-atmosphere="panama-canal"].is-raining .chapter__rain-layer--near { opacity: 0.5; }

.chapter--first[data-atmosphere="panama-night"].is-raining .chapter__rain {
  opacity: 0.54;
  animation: none;
}

.chapter--first[data-atmosphere="panama-night"].is-raining .chapter__rain-layer--far { opacity: 0.48; }
.chapter--first[data-atmosphere="panama-night"].is-raining .chapter__rain-layer--middle { opacity: 0.66; }
.chapter--first[data-atmosphere="panama-night"].is-raining .chapter__rain-layer--near { opacity: 0.76; }

.chapter--first .chapter__air-wave {
  position: absolute;
  top: var(--air-wave-y, 50%);
  left: var(--air-wave-x, 50%);
  z-index: 7;
  width: 2rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 240, 236, 0.68);
  border-radius: 50%;
  box-shadow: 0 0 1.4rem rgba(233, 137, 171, 0.28), inset 0 0 0.8rem rgba(249, 221, 231, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.35);
}

.chapter--first .chapter__air-wave.is-active {
  animation: midnight-air-wave 920ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first:has(.flight.is-overflight) .chapter__overflight-cloud {
  background:
    radial-gradient(ellipse 31% 42% at 20% 56%, rgba(70, 34, 62, 0.72), transparent 78%),
    radial-gradient(ellipse 38% 48% at 55% 42%, rgba(50, 24, 46, 0.78), transparent 79%),
    radial-gradient(ellipse 30% 40% at 86% 61%, rgba(28, 14, 31, 0.86), transparent 78%);
  filter: blur(7px);
}

.chapter--first:has(.flight.is-overflight) .chapter__celestial-pause::before,
.chapter--first:has(.flight.is-overflight) .chapter__celestial-pause::after {
  filter: blur(7px);
}

.chapter--first .chapter__distant-sparks {
  transform: translate3d(var(--particle-parallax-x, 0px), var(--particle-parallax-y, 0px), 0);
  transition: transform 700ms ease;
}

.chapter--first[data-atmosphere="tocumen"] .chapter__distant-sparks span {
  background: #ffe0b9;
  box-shadow: 0 0 0.85rem rgba(255, 213, 169, 0.55);
  opacity: 0.18;
}

.chapter--first[data-atmosphere="tocumen"] .chapter__distant-sparks span:nth-child(5),
.chapter--first[data-atmosphere="tocumen"] .chapter__distant-sparks span:nth-child(6),
.chapter--first[data-atmosphere="tocumen"] .chapter__distant-sparks span:nth-child(9) {
  opacity: 0.58;
}

.chapter--first[data-atmosphere="panama-bay"] .chapter__distant-sparks span,
.chapter--first[data-atmosphere="panama-canal"] .chapter__distant-sparks span,
.chapter--first[data-atmosphere="costa-verde"] .chapter__distant-sparks span,
.chapter--first[data-atmosphere="miraflores"] .chapter__distant-sparks span {
  opacity: 0.18;
}

.chapter--first[data-atmosphere="overflight"] .chapter__soul-light {
  box-shadow:
    0 0 1.2rem rgba(255, 226, 199, 0.44),
    0 0 3.4rem rgba(233, 137, 171, 0.18);
}

.chapter--first:is([data-atmosphere="barranco-bajada"], [data-atmosphere="barranco"], [data-atmosphere="arrival"]) .chapter__distant-sparks span {
  background: #ffe1c7;
  box-shadow: 0 0 1rem rgba(239, 184, 204, 0.42);
  opacity: 0.12;
}

.chapter--first:is([data-atmosphere="barranco-bajada"], [data-atmosphere="barranco"], [data-atmosphere="arrival"]) .chapter__distant-sparks span:nth-child(2),
.chapter--first:is([data-atmosphere="barranco-bajada"], [data-atmosphere="barranco"], [data-atmosphere="arrival"]) .chapter__distant-sparks span:nth-child(4),
.chapter--first:is([data-atmosphere="barranco-bajada"], [data-atmosphere="barranco"], [data-atmosphere="arrival"]) .chapter__distant-sparks span:nth-child(6),
.chapter--first:is([data-atmosphere="barranco-bajada"], [data-atmosphere="barranco"], [data-atmosphere="arrival"]) .chapter__distant-sparks span:nth-child(8) {
  opacity: 0.48;
  animation: midnight-barranco-breeze 6.8s ease-in-out infinite;
}

/* TEMPORAL — NAVEGACIÓN DE DESARROLLO DEL CAPÍTULO 1 */
.chapter--first .chapter-dev-nav {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 42;
  display: flex;
  width: min(46rem, calc(100% - 24rem));
  min-width: 0;
  padding: 0.42rem 0.5rem 0.42rem 0.72rem;
  color: rgba(255, 240, 236, 0.82);
  font-family: "Nunito Sans", sans-serif;
  background: rgba(12, 7, 15, 0.78);
  border: 1px solid rgba(249, 221, 231, 0.16);
  border-radius: 8px;
  box-shadow: 0 0.8rem 2.2rem rgba(7, 5, 10, 0.34);
  transform: translateX(-50%);
  backdrop-filter: blur(10px) saturate(108%);
  -webkit-backdrop-filter: blur(10px) saturate(108%);
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.chapter--first .chapter-dev-nav__label {
  flex: 0 0 auto;
  color: rgba(239, 184, 204, 0.76);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

.chapter--first .chapter-dev-nav__controls {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-columns: 2rem minmax(9rem, 1fr) 2rem;
  align-items: center;
  gap: 0.38rem;
}

.chapter--first .chapter-dev-nav__step,
.chapter--first .chapter-dev-nav__select {
  min-height: 2rem;
  color: rgba(255, 240, 236, 0.88);
  font: 700 0.7rem/1 "Nunito Sans", sans-serif;
  background: rgba(65, 29, 50, 0.58);
  border: 1px solid rgba(239, 184, 204, 0.18);
  border-radius: 6px;
}

.chapter--first .chapter-dev-nav__step {
  display: grid;
  width: 2rem;
  padding: 0;
  cursor: pointer;
  place-items: center;
}

.chapter--first .chapter-dev-nav__select {
  width: 100%;
  min-width: 0;
  padding: 0.25rem 1.8rem 0.25rem 0.55rem;
  cursor: pointer;
}

.chapter--first .chapter-dev-nav__step:hover,
.chapter--first .chapter-dev-nav__select:hover,
.chapter--first .chapter-dev-nav__step:focus-visible,
.chapter--first .chapter-dev-nav__select:focus-visible {
  color: #fffafc;
  background: rgba(122, 62, 85, 0.72);
  border-color: rgba(249, 221, 231, 0.4);
  outline: none;
}

.chapter--first .flight__cinematic-line {
  position: absolute;
  bottom: clamp(5.8rem, 11vh, 7.8rem);
  left: 50%;
  z-index: 7;
  width: min(38rem, 72vw);
  margin: 0;
  padding: 0.65rem 1rem 0.7rem;
  color: rgba(255, 240, 236, 0.92);
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.05rem, 1.45vw, 1.42rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0.45rem 1.4rem rgba(7, 5, 10, 0.92);
  background: linear-gradient(90deg, transparent, rgba(19, 9, 20, 0.5) 18% 82%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 9px);
  transition: opacity 680ms ease, transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter--first .flight__cinematic-line.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.chapter--first .flight__cinematic-line.is-leaving {
  opacity: 0;
  transform: translate(-50%, -7px);
  transition-duration: 760ms;
}

.chapter--first .flight__overflight-veil {
  position: absolute;
  inset: -10%;
  z-index: 5;
  background:
    radial-gradient(ellipse 33% 14% at 18% 34%, rgba(73, 38, 66, 0.72), transparent 78%),
    radial-gradient(ellipse 42% 16% at 77% 57%, rgba(48, 25, 47, 0.76), transparent 79%),
    radial-gradient(ellipse 48% 13% at 48% 86%, rgba(26, 15, 30, 0.72), transparent 78%);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-4%, 1%, 0) scale(1.03);
  transition: opacity 850ms ease;
}

.chapter--first .flight.is-overflight .flight__overflight-veil {
  opacity: 0.38;
  animation: midnight-overflight-near-cloud 7.4s ease-in-out both;
}

.chapter--first .chapter__scene-shade {
  box-shadow: inset 0 0 clamp(5rem, 12vw, 13rem)
    rgb(7 5 10 / var(--flight-vignette-opacity, 0.14));
}

.chapter--first[data-atmosphere="tocumen"] .chapter__scene-shade {
  background:
    linear-gradient(180deg, rgba(15, 10, 17, 0.16), transparent 46%, rgba(7, 5, 10, 0.5)),
    radial-gradient(ellipse 70% 28% at 42% 100%, rgba(255, 205, 167, 0.075), transparent 74%);
}

.chapter--first:is([data-atmosphere="panama-bay"], [data-atmosphere="panama-canal"]) .chapter__scene-shade {
  background:
    linear-gradient(180deg, rgba(25, 15, 25, 0.18), transparent 48%, rgba(7, 5, 10, 0.52)),
    radial-gradient(ellipse 64% 34% at 76% 72%, rgba(216, 134, 166, 0.08), transparent 74%);
}

.chapter--first[data-atmosphere="panama-night"] .chapter__scene-shade {
  background:
    linear-gradient(180deg, rgba(7, 5, 10, 0.28), transparent 42%, rgba(7, 5, 10, 0.58)),
    radial-gradient(ellipse at center, transparent 42%, rgba(19, 9, 20, 0.3));
}

.chapter--first:is([data-atmosphere="costa-verde"], [data-atmosphere="miraflores"]) .chapter__scene-shade {
  background:
    linear-gradient(180deg, rgba(20, 24, 31, 0.14), transparent 46%, rgba(7, 5, 10, 0.46)),
    radial-gradient(ellipse 62% 24% at 48% 100%, rgba(218, 226, 235, 0.08), transparent 76%);
}

.chapter--first:has(.flight.is-arriving) .chapter__mist {
  opacity: 0.44;
  transition-duration: 1500ms;
}

.chapter--first .flight.is-arriving .flight__map,
.chapter--first .flight.is-arriving .flight__viewport > .hero__canvas,
.chapter--first .flight.is-arriving .flight__header,
.chapter--first .flight.is-arriving .flight__controls,
.chapter--first .flight.is-arriving .flight__place {
  animation: midnight-arrival-settle 2.8s ease-out both;
}

.chapter--first .chapter__distant-sparks span {
  animation-name: chapter-air-particle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.chapter--first .chapter__distant-sparks span:nth-child(3n + 1) { animation-duration: 13s; }
.chapter--first .chapter__distant-sparks span:nth-child(3n + 2) { animation-duration: 9s; }
.chapter--first .chapter__distant-sparks span:nth-child(3n) { animation-duration: 6.8s; }

.chapter--first .chapter-reward {
  overflow: hidden;
  padding: clamp(5.2rem, 8vh, 6.5rem) clamp(1.5rem, 3vw, 3rem) 2rem;
}

.chapter--first .chapter-reward__memory {
  position: relative;
  top: auto;
  left: auto;
  width: min(82rem, 94vw);
  margin: auto;
  transform: none;
}

.chapter--first .chapter-reward__copy {
  max-width: 56rem;
  margin: 0 0 0.9rem;
}

.chapter--first .chapter-reward__eyebrow,
.chapter--first .chapter-reward__title,
.chapter--first .chapter-reward__phrase,
.chapter--first .chapter-reward__photo,
.chapter--first .chapter-reward__light-ritual {
  opacity: 0;
}

.chapter--first .chapter-reward__eyebrow {
  margin: 0 0 0.55rem;
  color: rgba(239, 184, 204, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.chapter--first .chapter-reward__title {
  margin: 0;
  color: #fff0ec;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(1.7rem, 2.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.02;
  text-wrap: balance;
  text-shadow: 0 0.7rem 2.2rem rgba(7, 5, 10, 0.72);
}

.chapter--first .chapter-reward__phrase {
  position: relative;
  z-index: 18;
  max-width: 24ch;
  margin: 0;
  padding: clamp(1.45rem, 2.5vw, 2.15rem);
  color: #ffe9e6;
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 600;
  line-height: 1.17;
  text-wrap: balance;
  text-shadow:
    0 0.55rem 1.7rem rgba(78, 27, 55, 0.66),
    0 0 1.2rem rgba(233, 137, 171, 0.1);
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 231, 238, 0.075), transparent 42%),
    linear-gradient(145deg, rgba(54, 25, 48, 0.62), rgba(16, 9, 20, 0.54));
  border: 1px solid rgba(255, 231, 238, 0.22);
  border-radius: 26px;
  box-shadow:
    0 1.4rem 4rem rgba(7, 5, 10, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -1.4rem 2.8rem rgba(78, 27, 55, 0.075);
  backdrop-filter: blur(10px) saturate(108%);
  -webkit-backdrop-filter: blur(10px) saturate(108%);
}

.chapter--first .chapter-reward__composition {
  display: grid;
  grid-template-columns: minmax(0, 1.58fr) minmax(19rem, 0.92fr);
  gap: clamp(1.4rem, 2.8vw, 3.25rem);
  align-items: center;
}

.chapter--first .chapter-reward__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.35rem);
}

.chapter--first .chapter-reward__photo {
  position: relative;
  display: grid;
  width: auto;
  max-width: 100%;
  height: min(54vh, 34rem);
  min-height: 19rem;
  aspect-ratio: 9 / 16;
  margin: 0;
  padding: 0.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 8%, rgba(233, 137, 171, 0.13), transparent 44%),
    linear-gradient(145deg, rgba(41, 16, 32, 0.82), rgba(7, 5, 10, 0.74));
  border: 1px solid rgba(255, 240, 236, 0.24);
  border-radius: 18px;
  box-shadow:
    0 1.2rem 3.8rem rgba(7, 5, 10, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  place-items: center;
  justify-self: center;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.chapter--first .chapter-reward__photo::before,
.chapter--first .chapter-reward__photo::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.chapter--first .chapter-reward__photo::before {
  inset: -4%;
  background-position: center;
  background-size: cover;
  filter: blur(13px) brightness(0.32) saturate(0.65);
  transform: scale(1.08);
}

.chapter--first .chapter-reward__photo--box::before {
  background-image: url("assets/chapter-1/reward/ring-box.jpg");
}

.chapter--first .chapter-reward__photo--hand::before {
  background-image: url("assets/chapter-1/reward/ring-on-hand.jpg");
}

.chapter--first .chapter-reward__photo::after {
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(19, 9, 20, 0.3));
  border-radius: 17px;
  box-shadow: inset 0 0 2rem rgba(7, 5, 10, 0.2);
}

.chapter--first .chapter-reward__photo img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center;
  border-radius: 12px;
}

.chapter--first .chapter-reward__story {
  position: relative;
  z-index: 16;
  display: grid;
  align-content: center;
  min-width: 0;
}

.chapter--first .chapter-reward__destination {
  position: relative;
  z-index: 6;
  display: grid;
  min-height: clamp(11rem, 20vh, 14rem);
  margin-top: clamp(1.2rem, 2.5vh, 2rem);
  padding: 1rem 0;
  align-items: end;
}

.chapter--first .chapter-reward__light-ritual {
  display: flex;
  width: min(100%, 18rem);
  align-items: center;
  gap: 0.85rem;
}

.chapter--first .chapter-reward__hint {
  max-width: 13rem;
  margin: 0;
  color: rgba(255, 231, 238, 0.76);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}

.chapter--first .chapter-reward.is-visible .chapter-reward__eyebrow {
  animation: ring-reward-copy-in 650ms 80ms ease-out both;
}

.chapter--first .chapter-reward.is-visible .chapter-reward__photo--box {
  animation: ring-reward-photo-in 820ms 230ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .chapter-reward.is-visible .chapter-reward__photo--hand {
  animation: ring-reward-photo-in 820ms 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.chapter--first .chapter-reward.is-visible .chapter-reward__title {
  animation: ring-reward-copy-in 760ms 790ms ease-out both;
}

.chapter--first .chapter-reward.is-visible .chapter-reward__phrase {
  animation: ring-reward-copy-in 760ms 1040ms ease-out both;
}

.chapter--first .chapter-reward.is-visible .chapter-reward__light-ritual {
  animation: ring-reward-copy-in 700ms 1260ms ease-out both;
}

.chapter--first .chapter-reward__light {
  position: relative;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
}

.chapter--first .chapter-reward__heart-target {
  top: var(--heart-target-y, 58%);
  right: auto;
  left: var(--heart-target-x, 78%);
  z-index: 4;
  width: clamp(130px, 13vw, 190px);
  aspect-ratio: 1.56;
  background:
    radial-gradient(ellipse 64% 46% at 50% 54%, rgba(255, 240, 236, 0.075), rgba(143, 62, 91, 0.045) 48%, transparent 78%);
  border: 0;
  border-radius: 50%;
  box-shadow:
    0 1.2rem 3.2rem rgba(143, 62, 91, 0.1),
    inset 0 0 1.5rem rgba(255, 240, 236, 0.035);
  transform: translate(-50%, -50%) scale(0.88);
}

.chapter--first .chapter-reward__heart-target.is-active {
  border-color: transparent;
  transform: translate(-50%, -50%) scale(1);
  animation: reward-heart-target-breathe 5.4s ease-in-out infinite;
}

.chapter--first .chapter-reward.is-revisit .chapter-reward__destination {
  display: none;
}

@keyframes chapter-atmosphere-far {
  from { transform: translate3d(calc(var(--mist-parallax-x, 0px) - 1.5%), var(--mist-parallax-y, 0px), 0) scale(1.01); }
  to { transform: translate3d(calc(var(--mist-parallax-x, 0px) + 2.5%), calc(var(--mist-parallax-y, 0px) - 0.7%), 0) scale(1.025); }
}

@keyframes chapter-air-particle {
  0%, 100% { transform: translate3d(-2px, 3px, 0) scale(0.78); }
  48% { transform: translate3d(7px, -5px, 0) scale(1); }
  72% { transform: translate3d(10px, -7px, 0) scale(0.9); }
}

@keyframes midnight-overflight-near-cloud {
  0% { opacity: 0; transform: translate3d(-6%, 1%, 0) scale(1.04); }
  18% { opacity: 0.28; }
  52% { opacity: 0.42; transform: translate3d(2%, -1%, 0) scale(1.08); }
  82% { opacity: 0.24; }
  100% { opacity: 0; transform: translate3d(7%, -2%, 0) scale(1.12); }
}

@keyframes midnight-arrival-settle {
  0%, 28% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0.28; transform: translate3d(0, -5px, 0); }
}

@keyframes chapter-atmosphere-middle {
  from { transform: translate3d(calc(var(--mist-parallax-x, 0px) + 3%), calc(var(--mist-parallax-y, 0px) - 0.5%), 0) scale(1.01); }
  to { transform: translate3d(calc(var(--mist-parallax-x, 0px) - 4%), calc(var(--mist-parallax-y, 0px) + 1.2%), 0) scale(1.045); }
}

@keyframes chapter-atmosphere-near {
  from { transform: translate3d(calc(var(--mist-parallax-x, 0px) - 5%), calc(var(--mist-parallax-y, 0px) + 0.8%), 0) scale(1.025); }
  to { transform: translate3d(calc(var(--mist-parallax-x, 0px) + 4%), calc(var(--mist-parallax-y, 0px) - 1%), 0) scale(1.065); }
}

@keyframes midnight-rain-far {
  from { transform: translate3d(-2px, -30px, 0) rotate(-2.5deg); }
  to { transform: translate3d(5px, 54px, 0) rotate(-2.5deg); }
}

@keyframes midnight-rain-middle {
  from { transform: translate3d(-3px, -48px, 0) rotate(-2.5deg); }
  to { transform: translate3d(6px, 72px, 0) rotate(-2.5deg); }
}

@keyframes midnight-rain-near {
  from { transform: translate3d(-5px, -72px, 0) rotate(-2.5deg); }
  to { transform: translate3d(8px, 96px, 0) rotate(-2.5deg); }
}

@keyframes midnight-air-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  18% { opacity: 0.72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.6); }
}

@keyframes midnight-barranco-breeze {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0.18; }
  48% { transform: translate3d(12px, -7px, 0) scale(1.05); opacity: 0.52; }
}

@keyframes ring-reward-photo-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(18px) scale(0.985); }
  to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes ring-reward-copy-in {
  from { opacity: 0; filter: blur(5px); transform: translateY(9px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes reward-heart-target-breathe {
  0%, 100% {
    box-shadow:
      0 1.2rem 3rem rgba(143, 62, 91, 0.075),
      inset 0 0 1.3rem rgba(255, 240, 236, 0.025);
  }
  50% {
    box-shadow:
      0 1.3rem 3.8rem rgba(216, 134, 166, 0.13),
      inset 0 0 1.6rem rgba(255, 240, 236, 0.045);
  }
}

@media (max-width: 759px) {
  .chapter--first .chapter-dev-nav {
    top: max(4.35rem, calc(env(safe-area-inset-top) + 3.35rem));
    right: max(1rem, env(safe-area-inset-right));
    left: max(1rem, env(safe-area-inset-left));
    width: auto;
    min-width: 0;
    padding: 0.38rem;
    transform: none;
  }

  .chapter--first .chapter-dev-nav__label {
    display: none;
  }

  .chapter--first .chapter-dev-nav__controls {
    grid-template-columns: 2.1rem minmax(0, 1fr) 2.1rem;
  }

  .chapter--first .chapter-dev-nav__step {
    width: 2.1rem;
  }

  .chapter--first .flight__cinematic-line {
    bottom: 7.2rem;
    width: calc(100% - 2rem);
    padding-inline: 0.75rem;
    font-size: clamp(0.98rem, 4.5vw, 1.18rem);
    line-height: 1.28;
  }

  .chapter--first .chapter-reward {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6.5rem 0 3rem;
  }

  .chapter--first .chapter-reward__memory {
    width: 100%;
    margin: 0;
    padding: 0 1rem 1.5rem;
  }

  .chapter--first .chapter-reward__copy {
    margin-bottom: 1rem;
    text-align: center;
  }

  .chapter--first .chapter-reward__title {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
  }

  .chapter--first .chapter-reward__phrase {
    max-width: 24ch;
    margin-inline: auto;
    font-size: clamp(21px, 6vw, 30px);
    line-height: 1.18;
    text-align: center;
  }

  .chapter--first .chapter-reward__composition {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .chapter--first .chapter-reward__gallery {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .chapter--first .chapter-reward__photo {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    padding: 0.4rem;
  }

  .chapter--first .chapter-reward__photo img {
    height: auto;
  }

  .chapter--first .chapter-reward__story {
    justify-items: center;
  }

  .chapter--first .chapter-reward__destination {
    width: 100%;
    min-height: 12rem;
    justify-items: center;
  }

  .chapter--first .chapter-reward__light-ritual {
    justify-content: center;
  }

  .chapter--first .chapter-reward__light {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .chapter--first .chapter-reward__heart-target,
  .chapter--first .chapter-reward__heart-target.is-active {
    position: absolute;
    top: var(--heart-target-y, 72%);
    right: auto;
    bottom: auto;
    left: var(--heart-target-x, 50%);
    width: clamp(140px, 42vw, 178px);
    transform: translate(-50%, -50%) scale(0.88);
  }

  .chapter--first .chapter-reward__heart-target.is-active {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter--first .chapter__mist,
  .chapter--first .chapter__rain-layer,
  .chapter--first .chapter__distant-sparks span,
  .chapter--first .chapter__air-wave,
  .chapter--first .chapter-reward__heart-target,
  .chapter--first .flight__overflight-veil,
  .chapter--first .flight.is-cinematic-takeoff .flight__viewport,
  .chapter--first .flight.is-cinematic-takeoff .flight__map,
  .chapter--first .flight.is-cinematic-takeoff .flight__viewport > .hero__canvas,
  .chapter--first .flight.is-arriving .flight__map,
  .chapter--first .flight.is-arriving .flight__viewport > .hero__canvas,
  .chapter--first .flight.is-arriving .flight__header,
  .chapter--first .flight.is-arriving .flight__controls,
  .chapter--first .flight.is-arriving .flight__place,
  .chapter--first .chapter-reward.is-visible .chapter-reward__eyebrow,
  .chapter--first .chapter-reward.is-visible .chapter-reward__title,
  .chapter--first .chapter-reward.is-visible .chapter-reward__phrase,
  .chapter--first .chapter-reward.is-visible .chapter-reward__photo,
  .chapter--first .chapter-reward.is-visible .chapter-reward__light-ritual {
    animation: none !important;
  }

  .chapter--first .flight__cinematic-line {
    transform: translate(-50%, 0);
    transition-duration: 180ms;
  }

  .chapter--first .flight.is-overflight .flight__overflight-veil {
    opacity: 0.22;
    transform: none;
  }

  .chapter--first .flight.is-cinematic-takeoff .flight__viewport::before,
  .chapter--first .flight.is-cinematic-takeoff .flight__viewport::after,
  .chapter--first .flight.is-cinematic-takeoff .flight__route-mist,
  .chapter--first .flight.is-cinematic-takeoff .flight__route-constellation,
  .chapter--first .flight.is-cinematic-takeoff .flight__gates,
  .chapter--first .flight.is-cinematic-takeoff .flight__place--destination,
  .chapter--first .flight.is-cinematic-takeoff .flight__trail,
  .chapter--first .flight.is-cinematic-takeoff .flight__trail-halo,
  .chapter--first .flight.is-cinematic-takeoff .flight__trail-spark {
    animation: none !important;
  }

  .chapter--first .flight.is-cinematic-takeoff .flight__route-mist,
  .chapter--first .flight.is-cinematic-takeoff .flight__route-constellation,
  .chapter--first .flight.is-cinematic-takeoff .flight__gates,
  .chapter--first .flight.is-cinematic-takeoff .flight__place--destination {
    opacity: 1;
  }

  .chapter--first[data-atmosphere="panama-canal"] .chapter__rain,
  .chapter--first[data-atmosphere="panama-night"] .chapter__rain {
    display: block;
    opacity: 0.075;
  }

  .chapter--first[data-atmosphere="panama-canal"] .chapter__rain-layer--far,
  .chapter--first[data-atmosphere="panama-canal"] .chapter__rain-layer--middle,
  .chapter--first[data-atmosphere="panama-canal"] .chapter__rain-layer--near,
  .chapter--first[data-atmosphere="panama-night"] .chapter__rain-layer--far,
  .chapter--first[data-atmosphere="panama-night"] .chapter__rain-layer--middle,
  .chapter--first[data-atmosphere="panama-night"] .chapter__rain-layer--near {
    opacity: 0.28;
  }

  .chapter--first .chapter-reward.is-visible .chapter-reward__eyebrow,
  .chapter--first .chapter-reward.is-visible .chapter-reward__title,
  .chapter--first .chapter-reward.is-visible .chapter-reward__phrase,
  .chapter--first .chapter-reward.is-visible .chapter-reward__photo,
  .chapter--first .chapter-reward.is-visible .chapter-reward__light-ritual {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (max-width: 759px) {
  .chapter--first .chapter-dev-nav {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    left: auto;
    width: min(13.25rem, calc(100% - 11rem));
    min-width: 0;
    transform: none;
  }

  .chapter--first .chapter-dev-nav__controls {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  }

  .chapter--first .chapter-dev-nav__step,
  .chapter--first .chapter-dev-nav__select {
    min-height: 2.75rem;
  }

  .chapter--first .chapter-dev-nav__step {
    width: 2.75rem;
  }
}