/* ============================================================
   Opening Cinematic Scene
   ============================================================ */

#opening-scene {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050a14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Georgia', serif;
}

#opening-scene.hidden {
  display: none;
}

/* ── Sky & atmosphere ── */
.opening-sky {
  position: absolute;
  inset: 0;
  background-color: #050a14;
  /* background-image set inline via JS with harbor-night.png */
  background-size: cover;
  background-position: center bottom;
  transition: opacity 0.5s;
}

/* Dark overlay so text is readable over the background image */
.opening-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5, 10, 20, 0.5) 0%, rgba(5, 10, 20, 0.2) 50%, rgba(5, 10, 20, 0.7) 100%);
}

/* Moon — hidden since harbor background has one */
.opening-moon {
  display: none;
}


/* Stars */
.opening-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.opening-stars::before,
.opening-stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: white;
  box-shadow:
    120px 40px 0 rgba(255, 255, 255, 0.9),
    250px 80px 0 rgba(255, 255, 255, 0.7),
    80px 120px 0 rgba(255, 255, 255, 0.8),
    400px 50px 0 rgba(255, 255, 255, 0.6),
    600px 30px 0 rgba(255, 255, 255, 0.9),
    750px 90px 0 rgba(255, 255, 255, 0.7),
    900px 60px 0 rgba(255, 255, 255, 0.8),
    50px 200px 0 rgba(255, 255, 255, 0.5),
    300px 160px 0 rgba(255, 255, 255, 0.7),
    500px 140px 0 rgba(255, 255, 255, 0.9),
    700px 100px 0 rgba(255, 255, 255, 0.6),
    850px 180px 0 rgba(255, 255, 255, 0.8),
    150px 250px 0 rgba(255, 255, 255, 0.5),
    450px 220px 0 rgba(255, 255, 255, 0.7);
}

.opening-stars::after {
  width: 1px;
  height: 1px;
  box-shadow:
    180px 70px 0 rgba(255, 255, 255, 0.6),
    320px 30px 0 rgba(255, 255, 255, 0.8),
    560px 110px 0 rgba(255, 255, 255, 0.7),
    680px 50px 0 rgba(255, 255, 255, 0.9),
    820px 130px 0 rgba(255, 255, 255, 0.5),
    100px 170px 0 rgba(255, 255, 255, 0.8),
    380px 190px 0 rgba(255, 255, 255, 0.6),
    760px 200px 0 rgba(255, 255, 255, 0.7);
}

/* Moonlight shimmer on water */
.opening-moonlight {
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 200px;
  background: linear-gradient(to bottom, rgba(213, 185, 106, 0.15), transparent);
  filter: blur(8px);
  animation: moonlight-shimmer 3s ease-in-out infinite alternate;
  opacity: 0;
}

@keyframes moonlight-shimmer {
  0% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.6;
  }

  100% {
    transform: translateX(-50%) scaleX(1.3);
    opacity: 0.9;
  }
}

/* ── Ocean waves ── */
.opening-ocean {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  overflow: hidden;
}

.wave {
  position: absolute;
  left: -100%;
  width: 300%;
  bottom: 0;
  background: #0d2847;
  border-radius: 45% 55% 0 0 / 20px 20px 0 0;
}

.wave-1 {
  height: 55%;
  background: linear-gradient(180deg, #0d2847 0%, #071a30 100%);
  animation: wave-move 8s linear infinite;
  opacity: 0.9;
  bottom: 0;
}

.wave-2 {
  height: 50%;
  background: linear-gradient(180deg, #112e52 0%, #0a2240 100%);
  animation: wave-move 10s linear infinite reverse;
  opacity: 0.75;
  bottom: 5px;
}

.wave-3 {
  height: 45%;
  background: linear-gradient(180deg, #163565 0%, #0d2847 100%);
  animation: wave-move 13s linear infinite;
  opacity: 0.6;
  bottom: 10px;
}

@keyframes wave-move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(33.33%);
  }
}

/* Ocean surface glint */
.opening-ocean::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(213, 185, 106, 0.2) 30%,
      rgba(213, 185, 106, 0.5) 50%,
      rgba(213, 185, 106, 0.2) 70%,
      transparent 100%);
  animation: glint 4s ease-in-out infinite;
}

@keyframes glint {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

/* ── Ship ── */
.opening-ship {
  position: absolute;
  /* Slightly raised, finding the perfect balance to avoid text */
  bottom: 16%;
  right: -240px;
  width: 220px;
  opacity: 0;
  /* Subtle blending: golden moonlight rim + deep water shadow */
  filter: drop-shadow(0 -3px 8px rgba(213, 185, 106, 0.25)) drop-shadow(0 20px 25px rgba(0, 10, 20, 0.8));
  animation: ship-bob 4s ease-in-out infinite;
  z-index: 10;
}

@keyframes ship-bob {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

/* ── Captain Leo speech ── */
.opening-leo {
  position: absolute;
  bottom: 42%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  max-width: 520px;
  width: 90%;
}

.opening-leo-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(213, 185, 106, 0.6);
  background: linear-gradient(135deg, #1a3a5c, #0d2847);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 12px;
  box-shadow: 0 0 20px rgba(213, 185, 106, 0.2);
}

.opening-leo-name {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(213, 185, 106, 0.7);
  margin-bottom: 10px;
}

.opening-leo-text {
  font-size: clamp(15px, 2.5vw, 18px);
  line-height: 1.8;
  color: rgba(255, 245, 220, 0.92);
  font-style: italic;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
  min-height: 3em;
}

/* cursor blink in typewriter */
.opening-leo-text::after {
  content: '|';
  animation: cursor-blink 0.7s step-end infinite;
  color: rgba(213, 185, 106, 0.7);
  margin-left: 2px;
}

.opening-leo-text.done::after {
  display: none;
}

@keyframes cursor-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* ── Skip button ── */
.opening-skip {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  outline: none;
}

.opening-skip:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

/* ── Anchor pulse (end of scene) ── */
.opening-anchor {
  position: absolute;
  /* Above the captain's head (which grows upwards from 42%) */
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36px;
  opacity: 0;
  animation: anchor-pulse 1.5s ease-in-out infinite;
  z-index: 20;
}

@keyframes anchor-pulse {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translateX(-50%) scale(1.15);
    opacity: 1;
  }
}

/* ── Fade overlay (used for transitions) ── */
.opening-fade {
  position: absolute;
  inset: 0;
  background: #050a14;
  opacity: 0;
  pointer-events: none;
}