html{
  scroll-behavior:smooth;
}

:root {
 --gold:#ec994b;
  --amba: #ec994b;
  --height: 100px;
  --pad: 18px;
  --zanzibar-blue: #042f3e;
  --lagoon-green: #33b3a6;
  --sun-sand: #f6e8b1;
  --reef-turquoise: #b6f0d3;
  --text: #ffffff;
   --glass:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.04);
  --max:1180px;
  --blue:#01333f;
  --dark1:#011d24;
  --dark2:#022730;
 --font-family: 'Great Vibes', serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body {
  margin: 0;
  background: linear-gradient(180deg,var(--dark2),#042f3e);
  color: var(--text);
  overflow-x: hidden;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 16px;
}

/* Full Screen Loading Background */
#loading-screen {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(180deg, #022730, #001c24);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
  text-align: center;
transition: opacity 0.5s ease;
}



/* Animations */
@keyframes textFade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes rotateWave { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }


#loading-screen .logo-container {
  animation: pulse 2.5s infinite ease-in-out;
  opacity: 0;
  animation: fadeIn 1s ease forwards, pulse 2.5s infinite ease-in-out;
  animation-delay: 0.3s; /* slight delay before pulse starts */
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.loading-text {
  font-family: 'Great Vibes', serif;
  margin-top: 16px;
  font-size: 24px;
  font-weight: 500;
  color: #ec994b;
  text-align: center;

line-height: 1.2;
  background: none;
  border: none;
  box-shadow: none;

  display: inline-block;
  animation: textFade 2.2s ease-in-out infinite;
}



.logo-bounce {
  animation: popBounce 0.6s ease;
}

@keyframes popBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.25); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Main page logo animation */
/* Main page logo (sky drop) */
#zanLogo {
  transform: translateY(0); /* start off-screen */
  opacity: 0;
  animation: fallBounce 2.6s ease forwards;
  animation-play-state: paused; /* pause until loading ends */
}

@keyframes fallBounce {
  0% {
    transform: translateY(-300px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 1;
  }
  65% {
    transform: translateY(-40px);
  }
  75% {
    transform: translateY(0);
  }
  85% {
    transform: translateY(-20px);
  }
  95% {
    transform: translateY(0);
  }
  100% {
    opacity: 1;
  }
}
.loading-logo {
  width: 150px;
  max-width: 60vw;
  height: auto;
}
@media (max-width: 480px) {
  .loading-logo {
    width: 120px;
  }
}
@media (max-width: 480px) {
  .loading-text {
    font-size: 20px;
  }
}

@font-face {
  font-family: 'Great Vibes';
  src: url('../assets/fonts/GreatVibes-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
}