/* ================== TROPICAL COAST PRELOADER ================== */

/* Hide page while loading */
body.loading {
  overflow: hidden;
  height: 100vh;
  position: relative;
}

/* Preloader container */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #021728; /* fallback while sky paints */
  transition: opacity .9s ease, visibility .9s;
  will-change: opacity;
}

/* fade-out state */
#preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* Scene sizing */
.scene {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  font-family: sans-serif;
}

/* SKY + SUN */
.sky {
  position: absolute;
  inset: 0 0 40% 0;
  background: linear-gradient(180deg, #9ad0ff 0%, #4fb3ff 40%, #1b7fd5 100%);
  transform-origin: top center;
}

/* Sun */
.sun {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -220px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff8d6 0%, #ffd97b 35%, #ff9a2b 65%);
  box-shadow: 0 0 80px #ffb76b66, 0 0 180px #ffb76b33;
  animation: sunRise 7.6s cubic-bezier(.2,.9,.3,1) infinite;
  will-change: transform, bottom;
}

/* subtle halo */
.sun-glow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -240px;
  width: 420px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(255,200,120,.18), rgba(255,140,60,0.03));
  filter: blur(40px);
  animation: sunRise 7.6s cubic-bezier(.2,.9,.3,1) infinite;
}

/* Island silhouette */
.island {
  position: absolute;
  left: 18%;
  bottom: 18%;
  transform: translateX(0);
  z-index: 40;
  pointer-events: none;
}
.island-hill {
  width: 320px;
  height: 92px;
  background: linear-gradient(180deg,#063a31 0%, #0a5b4d 100%);
  border-radius: 50% 50% 30% 30%;
  transform: translateY(10px);
  box-shadow: 0 8px 20px rgba(2,18,16,0.6);
}
.palm {
  position: absolute;
  bottom: 60px;
  width: 12px;
  height: 70px;
  background: linear-gradient(#2e1f10,#3b2b14);
  border-radius: 8px;
}
.palm1 { left: 44px; transform: rotate(-6deg); }
.palm2 { left: 230px; transform: rotate(8deg); }

/* Palm leaves - CSS pseudo via before/after on palms */
.palm::before, .palm::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 20px;
  background: linear-gradient(90deg,#1f7d5e,#1aa37a);
  border-radius: 60px;
  top: -6px;
  left: -36px;
  transform-origin: left center;
  filter: saturate(1.05);
}
.palm::after { top: 6px; left: -20px; transform: rotate(30deg); }

/* BOAT (rocking) */
.boat {
  position: absolute;
  right: 22%;
  bottom: 22%;
  width: 110px;
  height: 48px;
  z-index: 70;
  transform-origin: 50% 50%;
  animation: boatRock 4.8s ease-in-out infinite;
}
.hull {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(90deg,#6b3f2a,#3f2a1f);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.mast {
  position: absolute;
  left: 56%;
  bottom: 22px;
  width: 4px;
  height: 44px;
  background: linear-gradient(#3a2b22,#1d130f);
  transform-origin: bottom center;
}
.sail {
  position: absolute;
  left: 60%;
  bottom: 36px;
  width: 36px;
  height: 26px;
  background: linear-gradient(135deg,#fff,#fff3cc);
  transform-origin: left center;
  clip-path: polygon(0 0,100% 50%,0 100%);
  opacity: .95;
}

/* BIRDS (tiny shapes flying) */
.birds { position: absolute; left: 10%; top: 10%; z-index: 90; }
.bird { position: absolute; width: 22px; height: 12px; transform: rotate(14deg); }
.bird::before, .bird::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: transparent;
  border-top: 3px solid rgba(10,10,10,0.85);
  border-left: 3px solid transparent;
  transform-origin: center;
}
.b1 { left: 0; top: 0; animation: birdFly 6s linear infinite; }
.b2 { left: 6%; top: 28px; transform: scale(.8); animation: birdFly 7s linear -1s infinite; }
.b3 { left: 14%; top: 6px; transform: scale(.9); animation: birdFly 5.6s linear -0.6s infinite; }

/* FOG / mist */
.fog {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 120px;
  bottom: 30%;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01), rgba(255,255,255,0.06));
  filter: blur(18px);
  transform: translateX(0);
  z-index: 50;
  animation: fogDrift 14s linear infinite;
}
.fog2 { bottom: 24%; opacity: .55; animation-duration: 20s; }

/* SPARKLES (sea particles) */
.sparkles { position: absolute; bottom: 28%; left: 6%; width: 88%; height: 20%; z-index: 60; pointer-events: none; }
.sparkles span {
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.1) 60%);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(0) scale(.6);
  animation: sparkle 3.5s linear infinite;
}
.sparkles span:nth-child(1){ left:12%; bottom:40%; animation-delay:0.2s; }
.sparkles span:nth-child(2){ left:26%; bottom:30%; animation-delay:0.6s; }
.sparkles span:nth-child(3){ left:40%; bottom:45%; animation-delay:1.1s; }
.sparkles span:nth-child(4){ left:58%; bottom:35%; animation-delay:1.6s; }
.sparkles span:nth-child(5){ left:72%; bottom:42%; animation-delay:2s; }
.sparkles span:nth-child(6){ left:82%; bottom:38%; animation-delay:2.4s; }
.sparkles span:nth-child(7){ left:46%; bottom:28%; animation-delay:2.8s; }
.sparkles span:nth-child(8){ left:33%; bottom:22%; animation-delay:3.2s; }

/* WAVES - 3 layers for depth */
.waves { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; overflow: visible; pointer-events: none; }
.wave {
  position: absolute;
  left: -25%;
  width: 150%;
  border-radius: 45%;
  filter: blur(1px);
  will-change: transform;
}

/* front wave (closest) - glossy with highlight */
.wave-front {
  bottom: 0;
  height: 220px;
  background:
    radial-gradient(120% 60% at 30% 30%, rgba(255,255,255,0.28), rgba(255,255,255,0.02) 20%),
    linear-gradient(180deg, rgba(55,188,210,0.95), rgba(6,129,164,0.95));
  box-shadow: inset 0 -12px 24px rgba(0,0,0,0.12);
  transform: translate3d(0,0,0);
  animation: waveMoveFront 5.2s cubic-bezier(.25,.9,.35,1) infinite;
}

/* mid wave */
.wave-mid {
  bottom: 18px;
  height: 260px;
  background:
    radial-gradient(120% 60% at 70% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0) 25%),
    linear-gradient(180deg, rgba(32,160,192,0.86), rgba(10,110,140,0.86));
  opacity: .92;
  animation: waveMoveMid 8.6s cubic-bezier(.3,.9,.4,1) infinite;
}

/* back wave */
.wave-back {
  bottom: 42px;
  height: 320px;
  background:
    radial-gradient(120% 60% at 40% 20%, rgba(255,255,255,0.08), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, rgba(10,130,170,0.82), rgba(6,90,120,0.82));
  opacity: .82;
  filter: blur(2px) saturate(.95);
  animation: waveMoveBack 12.4s cubic-bezier(.35,.9,.45,1) infinite;
}

/* Sun reflection strip */
.reflection {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 260px;
  height: 220px;
  transform: translateX(-50%) rotate(-6deg);
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.02));
  filter: blur(10px);
  opacity: .55;
  mix-blend-mode: screen;
  animation: reflectFlow 6.6s ease-in-out infinite;
  pointer-events:none;
}

/* Loader label */
.loader-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6%;
  color: rgba(255,255,255,0.92);
  letter-spacing: 3px;
  font-weight: 600;
  z-index: 120;
  font-size: 14px;
}

/* ===== Animations ===== */

@keyframes sunRise {
  0% { bottom: -220px; transform: translateX(-50%) scale(.9); opacity:0; }
  35% { bottom: 62px; transform: translateX(-50%) scale(1); opacity:1; }
  60% { bottom: 110px; transform: translateX(-50%) scale(1.02); }
  100%{ bottom: -220px; opacity:0; }
}

@keyframes birdFly {
  0% { transform: translate3d(-10vw, 0, 0) rotate(0deg); opacity: .9; }
  50% { transform: translate3d(40vw, -18vh, 0) rotate(-6deg); opacity: .7; }
  100%{ transform: translate3d(110vw, 4vh, 0) rotate(0deg); opacity: 0; }
}

@keyframes fogDrift {
  0% { transform: translateX(-2%); opacity:.9; }
  50%{ transform: translateX(18%); opacity:.6; }
  100%{ transform: translateX(-2%); opacity:.9; }
}

@keyframes sparkle {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  30% { opacity: 1; transform: translateY(-8px) scale(1); }
  80% { opacity: 0; transform: translateY(-20px) scale(.8); }
  100% { opacity: 0; transform: translateY(-30px) scale(.6); }
}

/* Wave motion using 3D transforms for crisp performance */
@keyframes waveMoveFront {
  0% { transform: translate3d(-6%, 0, 0) skewX(-2deg) rotate(-.3deg); }
  50% { transform: translate3d(12%, -6px, 0) skewX(2deg) rotate(.2deg); }
  100%{ transform: translate3d(-6%, 0, 0) skewX(-2deg) rotate(-.3deg); }
}
@keyframes waveMoveMid {
  0% { transform: translate3d(-12%, 0, 0) skewX(-1deg) rotate(-.2deg); }
  50% { transform: translate3d(10%, -10px, 0) skewX(1deg) rotate(.2deg); }
  100%{ transform: translate3d(-12%, 0, 0) skewX(-1deg) rotate(-.2deg); }
}
@keyframes waveMoveBack {
  0% { transform: translate3d(-18%, 0, 0) skewX(-.6deg) rotate(-.15deg); }
  50% { transform: translate3d(8%, -14px, 0) skewX(.6deg) rotate(.15deg); }
  100%{ transform: translate3d(-18%, 0, 0) skewX(-.6deg) rotate(-.15deg); }
}

@keyframes reflectFlow {
  0% { transform: translateX(-50%) rotate(-6deg) translateY(0); opacity:.45;}
  50% { transform: translateX(-50%) rotate(-6deg) translateY(-8px); opacity:.75;}
  100%{ transform: translateX(-50%) rotate(-6deg) translateY(0); opacity:.45;}
}

/* clean up performance hints */
#preloader, .scene, .waves, .wave, .sun { will-change: transform, opacity; }


/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;600;700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(225, 95%, 56%);
  --black-color: hsl(225, 12%, 12%);
  --white-color: hsl(0, 0%, 100%);
  --text-color: hsl(225, 8%, 65%);
  --body-color: hsl(225, 100%, 99%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Montserrat Alternates", sans-serif;
  --biggest-font-size: 2.5rem;
  --tiny-font-size: .625rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 3.5rem;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  background-color: var(--body-color);
  color: var(--text-color);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
}

/* Remove the property of 100vh, when inserting its content */
.section {
  height: 100vh;
  padding-block: 2.5rem;
}

.section h1 {
  font-size: var(--biggest-font-size);
  color: var(--black-color);
  text-align: center;
}

/*=============== NAVBAR ===============*/
.nav {
  position: fixed;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  background-color: var(--black-color);
  width: 88%;
  margin-inline: auto;
  box-shadow: 0 2px 16px hsla(228, 95%, 4%, .1);
  padding: 1rem 1.75rem;
  border-radius: 4rem;
  z-index: var(--z-fixed);
}

.nav__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__link {
  color: var(--text-color);
  font-size: 1.5rem;
  transition: color .4s;
}

.nav__link {
    display: flex;
    flex-direction: column;     /* Text BELOW icon */
    align-items: center;
    justify-content: center;
    gap: 4px;                   /* Space between icon and text */
    font-size: 1rem;            /* Text size */
}

.nav__link i {
    font-size: 1.8rem;          /* Icon size */
}


.nav__link:hover {
  color: var(--white-color);
}

/*=============== EXPAND LIST ===============*/
.nav__expand {
  border: none;
  outline: none;
  width: 40px;
  height: 40px;
  background-color: var(--first-color);
  border-radius: 50%;
  cursor: pointer;
}

.nav__expand-icon {
  display: inline-block;
  color: var(--white-color);
  font-size: 1.5rem;
  transition: transform .4s;
}

.nav__expand-list {
  position: absolute;
  top: -4.5rem;
  left: 0;
  right: 0;
  background-color: var(--black-color);
  box-shadow: 0 2px 16px hsla(228, 95%, 4%, .1);
  width: max-content;
  margin-inline: auto;
  padding: .5rem 1.5rem;
  border-radius: 4rem;
  display: flex;
  column-gap: 2rem;
  z-index: -1;
  overflow: hidden;
  transform: translateY(5rem) scale(.1);
  transition: transform .5s cubic-bezier(.5, 1.8, .4, .8);
}

.nav__expand-list li {
  transform: translateY(-3rem);
  transition: transform .4s;
}

.nav__expand-list li:nth-child(1) {
  transition-delay: .2s;
}

.nav__expand-list li:nth-child(2) {
  transition-delay: .3s;
}

.nav__expand-list li:nth-child(3) {
  transition-delay: .4s;
}

.nav__expand-link {
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: color .4s;
}

.nav__expand-link i {
  font-size: 1.5rem;
}

.nav__expand-link span {
  font-size: var(--tiny-font-size);
  font-weight: var(--font-semi-bold);
}

.nav__expand-link:hover {
  color: var(--white-color);
}

/* Show list */
.show-list,
.show-list li{
  transform: translateY(0);
}

/* Rotate icon */
.rotate-icon {
  transform: rotate(135deg);
}

/* Active link */
.active-link {
  color: var(--white-color);
}

/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 450px) {
  .nav {
    width: 350px;
  }
}

/* For large devices */
@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }
}