/* ===================== CHAPTER 1 — THE HARBOR ===================== */

#chapter1 {
  --ship-w: min(44vw, 210px); /* declared here so ship AND reflection both see it */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  overflow: hidden;
}

/* ---- tap-to-begin veil: black, patient, the first beat of the film ---- */
.begin-veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: #04060a;
  cursor: pointer;
}

.begin-veil-hint {
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--color-text-whisper);
}

.begin-veil-tap {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--color-text-dim);
  animation: veil-breathe 3.2s ease-in-out infinite;
}

@keyframes veil-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

/* ---- the harbor world (every layer hidden until the reveal) ---- */
.harbor-sky {
  position: absolute;
  inset: 0 0 34% 0;
  background: linear-gradient(180deg, #04060c 0%, #071021 62%, #0b1830 100%);
  opacity: 0;
  pointer-events: none;
}

.harbor-sky .star {
  position: absolute;
  left: var(--s-left);
  top: var(--s-top);
  width: var(--s-size, 1.5px);
  height: var(--s-size, 1.5px);
  border-radius: 50%;
  background: #e6f0ff;
  animation: star-twinkle var(--s-dur, 4s) ease-in-out var(--s-delay, 0s) infinite;
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: var(--s-peak, 0.85); }
}

/* moon halo — the repurposed glow orb, now hanging low over the water */
.glow-orb {
  position: absolute;
  top: 12%;
  left: 68%;
  width: min(34vw, 300px);
  height: min(34vw, 300px);
  transform: translate(-50%, -50%) scale(0.9);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(226, 238, 255, 0.28) 0%,
    rgba(140, 180, 255, 0.1) 45%,
    rgba(6, 8, 13, 0) 72%
  );
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.harbor-sea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, #0b1830 0%, #081221 30%, #050a12 100%);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* slow drifting light bands — the water never sits still */
.sea-shimmer {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(160, 200, 255, 0) 0px,
    rgba(160, 200, 255, 0.14) 26px,
    rgba(160, 200, 255, 0) 60px
  );
  animation: shimmer-drift 26s linear infinite;
}

.sea-shimmer-1 {
  top: 22%;
}

.sea-shimmer-2 {
  top: 55%;
  animation-duration: 34s;
  animation-direction: reverse;
  opacity: 0.6;
}

@keyframes shimmer-drift {
  from { transform: translateX(0); }
  to { transform: translateX(60px); }
}

/* the lantern's warm smear on the water, flickering with it */
.lantern-reflection {
  position: absolute;
  top: 4%;
  left: calc(58% + var(--ship-w) * 0.91); /* directly under the stern lantern */
  width: 10px;
  height: 62%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 217, 138, 0.3), rgba(255, 217, 138, 0));
  filter: blur(4px);
  animation: lantern-flicker 3.4s ease-in-out infinite;
}

/* ---- the ship, waiting ---- */
.harbor-ship {
  position: absolute;
  left: 58%;
  bottom: calc(34% - 26px);
  width: var(--ship-w);
  opacity: 0;
  pointer-events: none;
  animation: ship-bob 7s ease-in-out infinite;
  will-change: transform;
}

.harbor-ship svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes ship-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(5px) rotate(-0.8deg); }
}

.lantern-core,
.lantern-halo {
  animation: lantern-flicker 3.4s ease-in-out infinite;
}

@keyframes lantern-flicker {
  0%, 100% { opacity: 0.85; }
  8% { opacity: 1; }
  13% { opacity: 0.7; }
  17% { opacity: 0.95; }
  46% { opacity: 0.8; }
  71% { opacity: 1; }
  84% { opacity: 0.75; }
}

/* ---- the voyage's opening words ---- */
.voyage-text {
  position: relative;
  display: none; /* JS reveals it — the display:none default rule for step sections */
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.voyage-line {
  font-weight: 300;
  letter-spacing: 0.04em;
  opacity: 0;
}

.voyage-date {
  font-size: clamp(2rem, 7vw, 3.2rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--color-text);
  text-shadow: 0 0 24px rgba(79, 158, 255, 0.35);
}

.voyage-line-soft {
  color: var(--color-text-dim);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
}

/* ---- subtle film-grain texture so the dark bg doesn't read as flat ---- */
.noise-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- layout wrapper for all foreground content ---- */
.chapter1-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25rem;
  width: min(90vw, 640px);
  text-align: center;
  padding: 2rem;
}

/* ---- narrative lines ---- */
.narrative {
  /* display:none until the boot sequence finishes and hides itself — an
     invisible-but-flex section still occupies layout height and would
     crop content in this centered column (same bug/fix as Chapter 2). */
  position: relative;
  display: none;
  flex-direction: column;
  gap: 0.9rem;
}

.line {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

/* Lines start invisible; JS (SplitText + GSAP) reveals them char-by-char. */
.narrative .line,
.reveal-text .line {
  opacity: 0;
}

.line-whisper {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 300;
  color: var(--color-text-dim);
}

/* SplitText wraps each char/word in a span; keep kerning stable */
.line .word,
.line .char {
  font-kerning: none;
}

/* ---- name gate ---- */
.name-gate {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: min(100%, 340px);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.name-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  font-weight: 400;
  color: var(--color-text);
  padding: 0.4rem 0;
  letter-spacing: 0.02em;
}

.name-input::placeholder {
  color: var(--color-text-whisper);
  font-weight: 300;
}

.input-underline {
  width: 100%;
  height: 1.5px;
  background: rgba(143, 163, 179, 0.35);
  transform-origin: center;
  position: relative;
}

.input-underline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-accent);
  opacity: 0;
  border-radius: 2px;
  transition: opacity 0.25s var(--ease-soft);
}

.input-underline.is-verified::after {
  opacity: 1;
}

/* keyboard/focus indicator — replaces the removed native outline with the
   same accent glow the underline already uses for "verified" */
.name-input:focus ~ .input-underline::after {
  opacity: 0.7;
}

.gate-response {
  min-height: 1.2em;
  font-size: 0.9rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-mint);
  opacity: 0;
}

/* ---- post-verification reveal text ---- */
.reveal-text {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0;
}

/* ---- a soft dark scrim behind every text beat in this scene, so the ship
   sitting quietly in the harbor never fights her for legibility, at any
   screen size ---- */
.voyage-text::before,
.narrative::before,
.name-gate::before,
.reveal-text::before {
  content: "";
  position: absolute;
  inset: -18% -24% -26% -24%;
  background: rgba(4, 6, 10, 0.6);
  border-radius: 40px;
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

.reveal-line-2 {
  color: var(--color-text-dim);
  font-weight: 300;
}

/* ---- begin button ---- */
.begin-btn {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(109, 240, 194, 0.35);
  opacity: 0;
  transform: scale(0.9);
  isolation: isolate;
  pointer-events: none;
}

.begin-btn-glow {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: var(--gradient-accent-soft);
  filter: blur(14px);
  opacity: 0.5;
  z-index: -1;
}

.begin-btn-label {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ripple {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-mint);
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
}

/* ---- full-screen light-wipe transition ---- */
.light-wipe {
  position: fixed;
  inset: 0;
  background: var(--gradient-accent);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* ---- responsive tightening for small screens ---- */
@media (max-width: 480px) {
  .chapter1-inner {
    gap: 1.75rem;
  }

  .begin-btn {
    width: 104px;
    height: 104px;
  }

  /* keep the whole ship — lantern included — inside the frame */
  .harbor-ship {
    left: auto;
    right: 4%;
  }

  .lantern-reflection {
    left: calc(96% - var(--ship-w) * 0.09);
  }
}