/* ======================================
   GOOGLE FONTS
====================================== */
@import url('https://fonts.googleapis.com/css2?family=Gotham&family=Merriweather&display=swap');

/* ======================================
   BASE VARIABLES (light mode defaults)
====================================== */
:root {
  --preloader-bg: #ffffff;
  --blue-dark:  #0047BB;
  --blue-mid:   #43B0E7;
  --blue-light: #B2E0F7;
  --text-gray:  #53565A;
}

/* ======================================
   DARK MODE OVERRIDES
====================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --preloader-bg: #121212;
    --blue-dark:  #84A9FF;
    --blue-mid:   #669FFF;
    --blue-light: #4D80FF;
    --text-gray:  #CCCCCC;
  }
}

/* ======================================
   GLOBAL STYLES
====================================== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Gotham', 'Merriweather', sans-serif;
}

/* ======================================
   PRELOADER CONTAINER
====================================== */
#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100dvh;
  background-color: var(--preloader-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5vh 5vw;
  box-sizing: border-box;
  z-index: 9999;
  transition: opacity 0.8s ease;
}

#preloader.fade-out {
  opacity: 0;
}

/* ======================================
   LOADER WRAPPER & LOGO
====================================== */
.loader-wrapper {
  text-align: center;
  max-width: 90vw;
  animation: fadeInZoom 1s ease-out;
}

.logo {
  width: 36vw;
  max-width: 160px;
  margin-bottom: 24px;
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 0s;
}

/* ======================================
   BRAND TITLE & SUBTITLE
====================================== */
.brand-title {
  font-family: 'Merriweather', serif;
  font-size: clamp(22px, 5vw, 28px);
  color: var(--blue-dark);
  font-weight: 700;
  margin: 12px 0;
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 0.2s;
}

.subtitle {
  font-size: clamp(13px, 3.5vw, 15px);
  color: var(--text-gray);
  margin-bottom: 28px;
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 0.4s;
}

/* ======================================
   DOT LOADER (Option 2 centering)
====================================== */
.dot-loader {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: fit-content;  /* shrink-wrap */
  margin: 0 auto;      /* center within parent */
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 0.6s;
}

.dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  animation: pulse 1.2s infinite ease-in-out;
}

.dot:nth-child(1) {
  background-color: var(--blue-dark);
  animation-delay: 0s;
}
.dot:nth-child(2) {
  background-color: var(--blue-mid);
  animation-delay: 0.2s;
}
.dot:nth-child(3) {
  background-color: var(--blue-light);
  animation-delay: 0.4s;
}

/* ======================================
   KEYFRAME ANIMATIONS
====================================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInZoom {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.5); opacity: 0.6; }
}

/* ======================================
   MOBILE OPTIMIZATIONS
====================================== */
@media (max-width: 480px), (max-height: 500px) {
  .logo          { width: 180px; }
  .brand-title   { font-size: 20px; }
  .subtitle      { font-size: 13px; }
  .dot           { width: 10px; height: 10px; }
}