:root {
  --text-color: #ffffff;
  --bg-color: #050510;
  --accent-color: #ffcc00;
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --transition-speed: 2s;
  --animation-delay: 0s;
  --cycle-duration: 120s;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 1s ease-out, background-color 4s ease-in-out;
  line-height: 1.6;
}

body.loaded {
  opacity: 1;
}

/* Theme Colors */
body.day-theme {
  background-color: #1e98d1;
  --wave-1: rgba(0, 153, 255, 0.6);
  --wave-2: rgba(0, 119, 190, 0.7);
  --wave-3: rgba(0, 95, 153, 0.8);
  --wave-4: rgba(0, 70, 120, 1);
}

body.sunset-theme {
  background-color: #f5560c;
  --wave-1: rgba(180, 50, 90, 0.6);
  --wave-2: rgba(140, 20, 80, 0.8);
  --wave-3: rgba(92, 24, 68, 0.9);
  --wave-4: rgba(40, 5, 25, 1);
}

body.night-theme {
  background-color: #050510;
  --wave-1: rgba(15, 30, 80, 0.6);
  --wave-2: rgba(9, 26, 56, 0.8);
  --wave-3: rgba(5, 15, 35, 0.9);
  --wave-4: rgba(3, 10, 23, 1);
}

/* 3-Stage Sky System */
/* Sunburst / Rays */
.sunburst {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200vw;
  height: 200vw;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.05) 0 15deg,
    transparent 15deg 30deg
  );
  animation: rotateRays 60s linear infinite;
  z-index: -9;
  pointer-events: none;
}
@keyframes rotateRays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

#sky-day,
#sky-sunset,
#sky-night {
  position: fixed;
  inset: 0;
  z-index: -10;
  transition: opacity 4s ease-in-out;
  pointer-events: none;
}

#sky-day {
  background: linear-gradient(180deg, #1e98d1 0%, #68bde3 100%);
  opacity: 0;
}

#sky-sunset {
  background: linear-gradient(180deg, #f5560c 0%, #feb47b 100%);
  opacity: 0;
}

#sky-night {
  background: radial-gradient(circle at center, #111133 0%, #050510 100%);
  opacity: 0;
}

body.day-theme #sky-day {
  opacity: 1;
}

body.sunset-theme #sky-sunset {
  opacity: 1;
}

body.night-theme #sky-night {
  opacity: 1;
}

/* Stars */
#sky-night::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #eee, transparent),
    radial-gradient(1.5px 1.5px at 40px 70px, #fff, transparent),
    radial-gradient(1px 1px at 50px 160px, #ddd, transparent),
    radial-gradient(2px 2px at 90px 40px, #fff, transparent);
  background-size: 300px 300px, 400px 400px, 500px 500px, 600px 600px;
  opacity: 0.5;
}



/* Twinkling Stars */
#sky-night::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 120px 100px, #fff, transparent),
    radial-gradient(2px 2px at 250px 50px, #fff, transparent),
    radial-gradient(1px 1px at 350px 200px, #eee, transparent),
    radial-gradient(2px 2px at 100px 300px, #fff, transparent);
  background-size: 350px 350px, 250px 250px, 450px 450px, 550px 550px;
  opacity: 0;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.1; }
  100% { opacity: 0.8; }
}

/* Shooting Stars */
.shooting-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s;
}

body.night-theme .shooting-stars {
  opacity: 1;
}

.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,1), transparent);
  opacity: 0;
  animation: shootingStar 10s linear infinite;
}

.shooting-star:nth-child(1) { top: 10%; left: 80%; animation-delay: 0s; animation-duration: 8s; }
.shooting-star:nth-child(2) { top: 30%; left: 60%; animation-delay: 4s; animation-duration: 12s; }
.shooting-star:nth-child(3) { top: 5%; left: 40%; animation-delay: 8s; animation-duration: 15s; }

@keyframes shootingStar {
  0% { transform: rotate(-45deg) translateX(0); opacity: 1; }
  10% { transform: rotate(-45deg) translateX(-300px); opacity: 0; }
  100% { transform: rotate(-45deg) translateX(-300px); opacity: 0; }
}

/* Clouds */
.clouds-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 60vh;
  z-index: -4;
  pointer-events: none;
}
.clouds-fg {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 8;
  pointer-events: none;
}
.cloud-flat {
  position: absolute;
  animation: floatCloud linear infinite;
  will-change: transform;
  overflow: visible;
}
.cloud-bg-1 { width: 260px; height: 130px; top: 8%; left: 0; animation-duration: 55s; animation-delay: -5s; }
.cloud-bg-2 { width: 200px; height: 100px; top: 22%; left: 0; animation-duration: 75s; animation-delay: -35s; opacity: 0.75; }
.cloud-fg-1 { width: 340px; height: 170px; top: 15%; left: 0; animation-duration: 42s; animation-delay: -12s; opacity: 0.5; }
@keyframes floatCloud {
  0%   { transform: translateX(-30vw); }
  100% { transform: translateX(115vw); }
}

:root {
  --text-color: #ffffff;
  --bg-color: #050510;
  --accent-color: #ffcc00;
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --transition-speed: 2s;
  --animation-delay: 0s;
  --cycle-duration: 120s;
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 24px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 1s ease-out, background-color 4s ease-in-out;
  line-height: 1.6;
}

body.loaded {
  opacity: 1;
}

/* Theme Colors */
body.day-theme {
  background-color: #1e98d1;
  --wave-1: rgba(0, 153, 255, 0.6);
  --wave-2: rgba(0, 119, 190, 0.7);
  --wave-3: rgba(0, 95, 153, 0.8);
  --wave-4: rgba(0, 70, 120, 1);
}

body.sunset-theme {
  background-color: #f5560c;
  --wave-1: rgba(180, 50, 90, 0.6);
  --wave-2: rgba(140, 20, 80, 0.8);
  --wave-3: rgba(92, 24, 68, 0.9);
  --wave-4: rgba(40, 5, 25, 1);
}

body.night-theme {
  background-color: #050510;
  --wave-1: rgba(15, 30, 80, 0.6);
  --wave-2: rgba(9, 26, 56, 0.8);
  --wave-3: rgba(5, 15, 35, 0.9);
  --wave-4: rgba(3, 10, 23, 1);
}

/* 3-Stage Sky System */
/* Sunburst / Rays */
.sunburst {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200vw;
  height: 200vw;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.05) 0 15deg,
    transparent 15deg 30deg
  );
  animation: rotateRays 60s linear infinite;
  z-index: -9;
  pointer-events: none;
}
@keyframes rotateRays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

#sky-day,
#sky-sunset,
#sky-night {
  position: fixed;
  inset: 0;
  z-index: -10;
  transition: opacity 4s ease-in-out;
  pointer-events: none;
}

#sky-day {
  background: linear-gradient(180deg, #1e98d1 0%, #68bde3 100%);
  opacity: 0;
}

#sky-sunset {
  background: linear-gradient(180deg, #f5560c 0%, #feb47b 100%);
  opacity: 0;
}

#sky-night {
  background: radial-gradient(circle at center, #111133 0%, #050510 100%);
  opacity: 0;
}

body.day-theme #sky-day {
  opacity: 1;
}

body.sunset-theme #sky-sunset {
  opacity: 1;
}

body.night-theme #sky-night {
  opacity: 1;
}

/* Stars */
#sky-night::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #eee, transparent),
    radial-gradient(1.5px 1.5px at 40px 70px, #fff, transparent),
    radial-gradient(1px 1px at 50px 160px, #ddd, transparent),
    radial-gradient(2px 2px at 90px 40px, #fff, transparent);
  background-size: 300px 300px, 400px 400px, 500px 500px, 600px 600px;
  opacity: 0.5;
}



/* Twinkling Stars */
#sky-night::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 120px 100px, #fff, transparent),
    radial-gradient(2px 2px at 250px 50px, #fff, transparent),
    radial-gradient(1px 1px at 350px 200px, #eee, transparent),
    radial-gradient(2px 2px at 100px 300px, #fff, transparent);
  background-size: 350px 350px, 250px 250px, 450px 450px, 550px 550px;
  opacity: 0;
  animation: twinkle 4s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.1; }
  100% { opacity: 0.8; }
}

/* Shooting Stars */
.shooting-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s;
}

body.night-theme .shooting-stars {
  opacity: 1;
}

.shooting-star {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,1), transparent);
  opacity: 0;
  animation: shootingStar 10s linear infinite;
}

.shooting-star:nth-child(1) { top: 10%; left: 80%; animation-delay: 0s; animation-duration: 8s; }
.shooting-star:nth-child(2) { top: 30%; left: 60%; animation-delay: 4s; animation-duration: 12s; }
.shooting-star:nth-child(3) { top: 5%; left: 40%; animation-delay: 8s; animation-duration: 15s; }

@keyframes shootingStar {
  0% { transform: rotate(-45deg) translateX(0); opacity: 1; }
  10% { transform: rotate(-45deg) translateX(-300px); opacity: 0; }
  100% { transform: rotate(-45deg) translateX(-300px); opacity: 0; }
}

/* Orbital System */
.orbit-container {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -5;
  pointer-events: none;
}
.sun-group, .moon-group {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  offset-path: ellipse(50vw calc(100vh - 120px) at 50vw 100vh);
  offset-rotate: 0deg;
  will-change: offset-distance;
  transition: opacity 3s ease;
}
.sun-group {
  animation: sunOrbit var(--cycle-duration) linear infinite;
  animation-delay: var(--animation-delay);
}
.moon-group {
  animation: moonOrbit var(--cycle-duration) linear infinite;
  animation-delay: var(--animation-delay);
}
body.day-theme .moon-group    { opacity: 0; pointer-events: none; }
body.sunset-theme .moon-group { opacity: 0.35; }
body.night-theme .sun-group   { opacity: 0; pointer-events: none; }
@keyframes sunOrbit {
  0%   { offset-distance: 75%; }
  33%  { offset-distance: 100%; }
  50%  { offset-distance: 125%; }
  67%  { offset-distance: 150%; }
  100% { offset-distance: 175%; }
}
@keyframes moonOrbit {
  0%   { offset-distance: 25%; }
  33%  { offset-distance: 50%; }
  50%  { offset-distance: 75%; }
  67%  { offset-distance: 100%; }
  100% { offset-distance: 125%; }
}
.sun, .moon, .atmosphere-sun, .atmosphere-moon {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
}


/* Clouds */
.clouds-bg {
  position: fixed;
  top: 10%;
  left: 0;
  width: 100vw;
  height: 40vh;
  z-index: -4;
  pointer-events: none;
  opacity: 0.8;
}

.clouds-fg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  pointer-events: none;
  opacity: 0.35;
}

.cloud-flat {

  position: absolute;
  width: 300px;
  height: 120px;
  
  animation: floatCloud linear infinite;
  will-change: transform;
  
}

.puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 100%);
  box-shadow: inset -10px -10px 30px rgba(0,0,0,0.15);
}

.puff-1 { width: 100px; height: 100px; bottom: 0; left: 20px; }
.puff-2 { width: 150px; height: 150px; bottom: 20px; left: 80px; }
.puff-3 { width: 120px; height: 120px; bottom: 10px; left: 180px; }
.puff-4 { width: 220px; height: 80px; bottom: -10px; left: 40px; border-radius: 40px; }
.puff-5 { width: 90px; height: 90px; bottom: 40px; left: 50px; }

.cloud-bg-1 { top: 8%;  left: 0; animation-duration: 55s; animation-delay: -5s;  }
.cloud-bg-2 { top: 20%; left: 0; animation-duration: 75s; animation-delay: -35s; opacity: 0.7; }
.cloud-fg-1 { top: 15%; left: 0; animation-duration: 42s; animation-delay: -12s; }

@keyframes floatCloud {
  0%   { transform: translateX(-30vw); }
  100% { transform: translateX(115vw); }
}

/* Ocean */
.ocean-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 28vh;
  z-index: -4;
  pointer-events: none;
  overflow: hidden;
}
.ocean-svg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 100%;
}
.wave-path {
  transition: fill 2s ease;
}
.mer3-path { animation: waveYoyo3 3s ease-in-out infinite alternate; }
.mer2-path { animation: waveYoyo2 2.5s ease-in-out infinite alternate; }
.mer1-path { animation: waveYoyo1 2s ease-in-out infinite alternate; }
@keyframes waveYoyo3 { 0% { transform: translateX(0); } 100% { transform: translateX(-30px); } }
@keyframes waveYoyo2 { 0% { transform: translateX(0); } 100% { transform: translateX(-20px); } }
@keyframes waveYoyo1 { 0% { transform: translateX(0); } 100% { transform: translateX(-12px); } }

/* Ship */
.ship-wrapper {
  position: absolute;
  bottom: 65%;
  left: 0;
  z-index: 1;
  animation: sail 60s linear infinite;
  will-change: transform;
}
.ship-bob-y {
  animation: bobY 2s ease-in-out infinite alternate;
  will-change: transform;
}
.ship {
  width: 220px;
  height: 165px;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
}
@keyframes sail {
  0%   { transform: translateX(-25vw); }
  100% { transform: translateX(120vw); }
}
@keyframes bobY {
  0%   { transform: translateY(0px) rotate(-1deg); }
  100% { transform: translateY(10px) rotate(1deg); }
}

/* Airships */
.airship-wrapper {
  position: fixed;
  left: 0;
  z-index: -3;
  pointer-events: none;
}
.airship-1 { top: 12vh; animation: fly-reverse 70s linear infinite; }
.airship-2 { top: 22vh; animation: fly-reverse 95s linear infinite; animation-delay: -40s; opacity: 0.8; }
.airship-bob { animation: bob 5s ease-in-out infinite alternate; will-change: transform; }
/* airship size controlled by override below */
@keyframes fly-reverse {
  0%   { transform: translateX(120vw); }
  100% { transform: translateX(-30vw); }
}
@keyframes bob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(18px); }
}

/* Birds removed */
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(-80px) translateY(-10vh) scale(1.1); opacity: 0; }
}

/* Sun & Moon */
.sun {
  width: 130px; height: 130px;
  filter: drop-shadow(0 0 30px rgba(255,180,0,0.5));
}
.moon {
  width: 90px; height: 90px;
  filter: drop-shadow(0 0 20px rgba(200,210,255,0.4));
}
.atmosphere-sun {
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,204,0,0.18) 0%, transparent 70%);
  border-radius: 50%;
  position: absolute; top: 0; left: 0;
  transform: translate(-50%,-50%);
  z-index: -1;
}
.atmosphere-moon {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(180,200,255,0.12) 0%, transparent 70%);
  border-radius: 50%;
  position: absolute; top: 0; left: 0;
  transform: translate(-50%,-50%);
  z-index: -1;
}


/* Lanterns - hidden during day/sunset, glow at night */
.lantern, .lantern-halo {
  display: none;
  pointer-events: none;
}
body.night-theme .lantern {
  display: block;
  animation: lanternFlicker 3s ease-in-out infinite alternate;
}
body.night-theme .lantern-halo {
  display: block;
  opacity: 0.6;
  animation: lanternFlicker 3s ease-in-out infinite alternate;
}
@keyframes lanternFlicker {
  0%   { opacity: 0.8; }
  30%  { opacity: 1.0; }
  60%  { opacity: 0.7; }
  100% { opacity: 0.95; }
}

/* Island */
.island-wrapper {
  position: absolute;
  bottom: 42%;
  right: 8vw;
  z-index: 2;
  pointer-events: none;
}
.island-svg { width: 200px; height: 165px; }

/* Coconut fall */
.coconut { transform-origin: center; }
.coconut-1 {
  animation: coconutFall1 1.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  animation-delay: 12s;
  transform: translate(0, 0);
}
.coconut-2 {
  animation: coconutFall2 1.0s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  animation-delay: 16s;
  transform: translate(0, 0);
}
@keyframes coconutFall1 {
  0%   { transform: translate(0, 0);   opacity: 1; }
  80%  { transform: translate(15px, 90px); opacity: 1; }
  100% { transform: translate(18px, 100px); opacity: 0; }
}
@keyframes coconutFall2 {
  0%   { transform: translate(0, 0);   opacity: 1; }
  80%  { transform: translate(-10px, 85px); opacity: 1; }
  100% { transform: translate(-12px, 95px); opacity: 0; }
}

/* Kraken */
.kraken-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 320px;
  height: 420px;
  z-index: -3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease;
}
/* Show kraken at night and partially at sunset */
body.night-theme .kraken-container  { opacity: 1; }
body.sunset-theme .kraken-container { opacity: 0.5; }
.kraken-svg { width: 100%; height: 100%; }

.tentacle-1 { animation: sway1 4s ease-in-out infinite alternate; transform-origin: 40px 400px; }
.tentacle-2 { animation: sway2 5s ease-in-out infinite alternate; transform-origin: 110px 400px; }
.tentacle-3 { animation: sway3 3.5s ease-in-out infinite alternate; transform-origin: 185px 400px; }
.tentacle-4 { animation: sway4 4.5s ease-in-out infinite alternate; transform-origin: 258px 400px; }

@keyframes sway1 { 0% { transform: rotate(-8deg);  } 100% { transform: rotate(8deg);  } }
@keyframes sway2 { 0% { transform: rotate(6deg);   } 100% { transform: rotate(-10deg); } }
@keyframes sway3 { 0% { transform: rotate(-10deg); } 100% { transform: rotate(7deg);  } }
@keyframes sway4 { 0% { transform: rotate(9deg);   } 100% { transform: rotate(-6deg); } }

/* Puff Clouds (restored) */
.clouds-puff-bg {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 55vh;
  z-index: -3; pointer-events: none;
}
.clouds-puff-fg {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 9; pointer-events: none;
  opacity: 0.35;
}
.cloud {
  position: absolute;
  width: 280px; height: 120px;
  animation: floatCloud linear infinite;
  will-change: transform;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12));
}
.puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.85) 40%,
    rgba(255,255,255,0) 100%);
  box-shadow: inset -8px -8px 25px rgba(0,0,0,0.12);
}
.puff-1 { width: 90px;  height: 90px;  bottom: 0;    left: 20px; }
.puff-2 { width: 135px; height: 135px; bottom: 18px; left: 70px; }
.puff-3 { width: 110px; height: 110px; bottom: 8px;  left: 165px; }
.puff-4 { width: 200px; height: 70px;  bottom: -8px; left: 35px; border-radius: 38px; }
.cloud-puff-1 { top: 6%;  left: 0; animation-duration: 62s; animation-delay: -8s;  }
.cloud-puff-2 { top: 35%; left: 0; animation-duration: 82s; animation-delay: -42s; opacity: 0.75; }
.cloud-puff-fg { top: 18%; left: 0; animation-duration: 47s; animation-delay: -14s; transform: scale(1.8); transform-origin: left center; }

/* Bird from-ship animation */
.bird-3 {
  width: 55px; height: 28px;
  bottom: 32%; left: 0;
  top: auto;
  position: absolute;
  animation: birdFromShip 35s linear infinite;
  animation-delay: -8s;
}
@keyframes birdFromShip {
  0%   { transform: translate(30vw, 0) scale(0.5); opacity: 0; }
  5%   { opacity: 1; }
  50%  { transform: translate(60vw, -12vh) scale(0.9); opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translate(115vw, -20vh) scale(1.3); opacity: 0; }
}

/* UI Layout */
nav { 
  padding: 40px; 
  display: flex; 
  justify-content: center; 
  gap: 40px; 
  position: relative;
  z-index: 10;
}

nav a { 
  color: #ffffff; 
  text-decoration: none; 
  font-size: 0.8rem; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 2px; 
  opacity: 0.5; 
  transition: all 0.3s ease;
}

nav a:hover, nav a.active { opacity: 1; letter-spacing: 3px; }

.container { 
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-content { 
  text-align: center; 
  width: 100%;
  max-width: 800px; 
  padding: 60px 40px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 40px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  
  /* Interactive Glassmorphism */
  position: relative;
  overflow: hidden;
}

.main-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(255, 255, 255, 0.08),
    transparent 40%
  );
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); margin-bottom: 24px; font-weight: 700; letter-spacing: -2px; line-height: 1.1; }
h2 { font-size: 2.5rem; margin-bottom: 24px; font-weight: 600; letter-spacing: -1px; }

.buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.btn { 
  display: inline-block;
  color: #ffffff; 
  border: 1px solid rgba(255, 255, 255, 0.15); 
  padding: 16px 32px; 
  text-decoration: none; 
  border-radius: 100px; 
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  backdrop-filter: blur(10px);
}

.btn:hover { 
  background: #ffffff; 
  color: #050510; 
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  margin-top: 20px;
}

.bento-item {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 32px;
  padding: 40px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bento-item:hover { transform: scale(1.02); background: rgba(255,255,255,0.06); }
.main-hero { grid-column: span 3; grid-row: span 2; }
.side-action { grid-column: span 1; display: flex; align-items: center; justify-content: center; }
.pin-section { grid-column: span 1; }

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr; }
  .main-hero, .side-action, .pin-section { grid-column: span 1; }
  h1 { font-size: 3rem; }
  nav { padding: 20px; gap: 20px; flex-wrap: wrap; }
}


/* ── Propeller spin & steam ── */
@keyframes spinProp {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes steamRise {
  0%   { transform: translateY(0) scale(1);   opacity: 0.6; }
  100% { transform: translateY(-18px) scale(1.5); opacity: 0; }
}

/* ── Ship: fixed at wave waterline ── */
.ship-wrapper {
  position: fixed !important;
  bottom: 8vh !important;
  left: 0 !important;
  z-index: 2 !important;
  animation: sail 70s linear infinite !important;
  will-change: transform !important;
}

/* ── Island: fixed, sitting ON the ocean surface ── */
.island-wrapper {
  position: fixed !important;
  bottom: 9vh !important;
  right: 5vw !important;
  z-index: 2 !important;
  pointer-events: none;
}
.island-svg { width: 190px; height: 158px; }

/* ── Ocean: extend past edges to hide seams ── */
.ocean-container {
  left: -5vw !important;
  width: 112vw !important;
  overflow: hidden !important;
  bottom: 0 !important;
}

/* ── Airship: bigger & crisp ── */
.airship {
  width: 260px !important;
  height: 130px !important;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35)) !important;
  mix-blend-mode: normal !important;
}

/* ── Bird-3: launch from ship level ── */
.bird-3 {
  position: fixed !important;
  bottom: 10vh !important;
  left: 0 !important;
  top: auto !important;
  width: 60px !important;
  height: 30px !important;
  animation: birdFromShip 45s linear infinite !important;
  animation-delay: -6s !important;
}
@keyframes birdFromShip {
  0%   { transform: translate(18vw, 0)      scale(0.55); opacity: 0; }
  5%   { opacity: 1; }
  25%  { transform: translate(35vw, -6vh)   scale(0.75); }
  55%  { transform: translate(62vw, -16vh)  scale(1.0);  opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate(118vw, -28vh) scale(1.4);  opacity: 0; }
}



/* ═══════════════════════════════════════════
   SEAGULLS
═══════════════════════════════════════════ */
.seagulls-container {
  position: fixed;
  top: 0; left: 0; width: 0; height: 0;
  pointer-events: none;
  z-index: 5;
  color: rgba(255,255,255,0.92);
}
body.sunset-theme .seagulls-container { color: rgba(255,220,180,0.85); }
body.night-theme  .seagulls-container { color: rgba(180,190,220,0.7); }

/* Ship-follower: rides the same sail path */
.ship-follower {
  position: fixed;
  bottom: 10vh;
  left: 0;
  width: 0; height: 0;
  animation: sail 70s linear infinite;
}

/* Individual gulls orbit around the ship */
.gull-orbit { position: absolute; }
.gull-o1 { animation: gullOrbit1 6s ease-in-out infinite; bottom: 50px; left: -20px; }
.gull-o2 { animation: gullOrbit2 8s ease-in-out infinite; bottom: 80px; left: 30px; animation-delay: -3s; }
.gull-o3 { animation: gullOrbit3 5s ease-in-out infinite; bottom: 30px; left: 60px; animation-delay: -1.5s; }

@keyframes gullOrbit1 {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(30px, -20px); }
  50%  { transform: translate(60px, -5px); }
  75%  { transform: translate(30px, 15px); }
  100% { transform: translate(0, 0); }
}
@keyframes gullOrbit2 {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-25px, -30px); }
  66%  { transform: translate(20px, -15px); }
  100% { transform: translate(0, 0); }
}
@keyframes gullOrbit3 {
  0%   { transform: translate(0, 0) scaleX(1); }
  50%  { transform: translate(50px, -25px) scaleX(-1); }
  100% { transform: translate(0, 0) scaleX(1); }
}

/* Flying away gulls */
.gull-away { position: fixed; }
.gull-a1 {
  bottom: 12vh; left: 0;
  animation: gullAway1 50s linear infinite;
  animation-delay: -10s;
}
.gull-a2 {
  bottom: 11vh; left: 0;
  animation: gullAway2 42s linear infinite;
  animation-delay: -22s;
}
.gull-a3 {
  bottom: 13vh; left: 0;
  animation: gullAway3 38s linear infinite;
  animation-delay: -5s;
}
@keyframes gullAway1 {
  0%   { transform: translate(10vw, 0) scale(0.5); opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: translate(110vw, -30vh) scale(1.4); opacity: 0; }
}
@keyframes gullAway2 {
  0%   { transform: translate(20vw, 0) scale(0.45); opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: translate(112vw, -22vh) scale(1.2); opacity: 0; }
}
@keyframes gullAway3 {
  0%   { transform: translate(15vw, 0) scale(0.4); opacity: 0; }
  6%   { opacity: 1; }
  100% { transform: translate(115vw, -38vh) scale(1.6); opacity: 0; }
}

/* ═══════════════════════════════════════════
   KRAKEN (clipped above ocean)
═══════════════════════════════════════════ */
.kraken-container {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 340px !important;
  height: 50vh !important;
  z-index: -5 !important;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease;
  /* Clip so only the portion ABOVE the ocean shows */
  clip-path: inset(0 0 28vh 0) !important;
}
body.night-theme  .kraken-container { opacity: 1; }
body.sunset-theme .kraken-container { opacity: 0.45; }
.kraken-svg { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════
   AIRSHIP: single right-side propeller, fly L→R
═══════════════════════════════════════════ */
.airship-1 { animation: fly-forward 75s linear infinite !important; }
.airship-2 { animation: fly-forward 100s linear infinite !important; animation-delay: -45s !important; }
@keyframes fly-forward {
  0%   { transform: translateX(-30vw); }
  100% { transform: translateX(125vw); }
}

/* ═══════════════════════════════════════════
   SUN / MOON: soft blurry edges like real sky
═══════════════════════════════════════════ */
.sun {
  width: 100px !important;
  height: 100px !important;
  filter: blur(1.5px) !important;
  overflow: visible !important;
}
.moon {
  width: 75px !important;
  height: 75px !important;
  filter: blur(1px) !important;
}
.atmosphere-sun {
  width: 380px !important;
  height: 380px !important;
  background: radial-gradient(circle,
    rgba(255,255,180,0.7) 0%,
    rgba(255,220,0,0.55) 18%,
    rgba(255,160,0,0.3) 35%,
    rgba(255,80,0,0.12) 55%,
    transparent 75%
  ) !important;
  filter: blur(18px) !important;
}
.atmosphere-moon {
  width: 280px !important;
  height: 280px !important;
  background: radial-gradient(circle,
    rgba(220,230,255,0.55) 0%,
    rgba(180,200,255,0.3) 25%,
    rgba(120,150,220,0.1) 55%,
    transparent 75%
  ) !important;
  filter: blur(14px) !important;
}

/* ═══════════════════════════════════════════
   SHIP NIGHT LANTERNS (fix visibility)
═══════════════════════════════════════════ */
.lantern {
  display: block !important;
  opacity: 0;
  transition: opacity 2s;
}
.lantern-halo {
  display: block !important;
  opacity: 0;
  transition: opacity 2s;
}
body.night-theme .lantern {
  opacity: 1 !important;
  animation: lanternFlicker 3s ease-in-out infinite alternate !important;
}
body.night-theme .lantern-halo {
  opacity: 0.7 !important;
  animation: lanternFlicker 2.5s ease-in-out infinite alternate !important;
}








/* ══════════════════════════════════════════════════════════════════════════════
   FINAL POLISH: DIRECTIONS & KRAKEN BETWEEN WAVES
══════════════════════════════════════════════════════════════════════════════ */

/* Regular Wood Ship goes L → R */
@keyframes sail {
  0%   { transform: translateX(-30vw); }
  100% { transform: translateX(120vw); }
}

/* All Airships go R → L */
.airship-1 { animation: fly-reverse 75s linear infinite !important; }
.airship-2 { animation: fly-reverse 100s linear infinite !important; animation-delay: -45s !important; }

/* Island is fixed on the LEFT side */
.island-wrapper {
  left: 5vw !important;
  right: auto !important;
}

/* Split Ocean layer ordering */
.ocean-bg-svg {
  z-index: 0 !important;
}
.ocean-fg-svg {
  z-index: 2 !important;
}
.ship-wrapper {
  z-index: 3 !important;
}

/* Kraken sitting cleanly BETWEEN waves (z-index: 1) */
.kraken-container {
  position: absolute !important;
  bottom: -40px !important;    /* slightly lowered so mantle sits under water */
  right: 8vw !important;
  width: 320px !important;
  height: 320px !important;
  z-index: 1 !important;
  pointer-events: none;
  opacity: 0;
  clip-path: none !important;
  transform: translateY(180px) !important; /* fully submerged in passive state */
  transition: none !important;
}

/* Day: fully submerged and hidden */
body.day-theme .kraken-container {
  animation: none !important;
  opacity: 0 !important;
  transform: translateY(180px) !important;
}

/* Sunset: smooth partial rising out of the waves */
body.sunset-theme .kraken-container {
  animation: krakenCycle 45s ease-in-out infinite !important;
  --krak-max-op: 0.55;
  --krak-height: 80px; /* partially rises */
}

/* Night: smooth full rising out of the waves */
body.night-theme .kraken-container {
  animation: krakenCycle 40s ease-in-out infinite !important;
  --krak-max-op: 1.0;
  --krak-height: 0px; /* fully rises, body visible at wave base */
}

@keyframes krakenCycle {
  0%, 8% {
    opacity: 0;
    transform: translateY(180px) !important;
  }
  20%, 75% {
    opacity: var(--krak-max-op, 1.0);
    transform: translateY(var(--krak-height, 0px)) !important;
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(180px) !important;
  }
}