/* DESIGN GUILDLINES USED ON THE PAGE */
/* ##DESIGNS TO BE USED ON THE PAGE
--- 01 TYPOGRAPHY SYSTEM
    FONT SIZE SYSTEM (px)
        10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
    
    SPACING SYSTEM (px)
        2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
    
*/
:root {
  /* PRIMARY COLOR */
  --primary-color: #0b2c3f;
  /* shades */
  --primary-color-shade-1: #0a2839;
  --primary-color-shade-2: #092332;
  --primary-color-shade-3: #081f2c;
  /* tints */
  --primary-color-tints-1: #234152;
  --primary-color-tints-2: #3c5665;
  --primary-color-tints-3: #546b79;
  --primary-color-tints-4: #6d808c;
  --primary-color-tints-5: #85969f;
  --primary-color-tints-6: #9dabb2;
  --primary-color-tints-7: #ced5d9;
  --primary-color-tints-8: #e6e9eb;

  /* AUXILAIRY COLOR */
  --auxiliary-color: #e7f5ff;

  /* WHITE */
  --white: #fff;

  /* ACCENT COLOR */
  --accent-color: #c1b48b;
  --accent-color-shade-1: #aea27d;

  /* SECONDARY COLOR */
  --secondary-color: #eaeaea;

  /* TEXT */
  --text-color: #111111;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight: 300;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--accent-color);
}

*:focus {
  outline: none;
}

/* *:link,
*:visited,
*:hover,
*:active,
*:focus {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
} */

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--primary-color);
  color: var(--text-color);
  font-family: "Poppins", sans-serif;
  font-weight: 300;
}

main {
  min-height: 100vh;
}

/* Loader layout */
#loader {
  position: fixed;
  inset: 0;
  background-color: #0b2c3f;
  display: flex;
  justify-content: center; /* horizontally center */
  align-items: flex-start; /* align items at the top */
  padding-top: 40vh; /* push bird downward to ~middle vertically */
  z-index: 99999999;
  transition: opacity 0.5s ease;
}

.loader-content {
  position: absolute;
  top: 50vh; /* vertical center */
  left: 45%; /* move it slightly left of center */
  transform: translate(-50%, -50%);
}

/* Bird logo animation */
/* Combine flapping and flying */
.loading-logo {
  width: 80px;
  animation: flap 2s ease-in-out infinite, float 1s ease-in-out infinite,
    flyStraight 3s ease-in-out infinite;
  transform-origin: center;
}

/* Bird flapping + floating */
@keyframes flap {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.05) rotate(-3deg);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

/* Bird "fly away" animation */
@keyframes flyStraight {
  0% {
    transform: translateX(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  30% {
    transform: translateX(50px) rotate(5deg) scale(1.05);
  }
  60% {
    transform: translateX(100px) rotate(-2deg) scale(1.1);
  }
  100% {
    transform: translateX(150px) rotate(10deg) scale(1.15);
    opacity: 0;
  }
}

/* DESIGN GUILDLINES USED ON THE PAGE */
/* ##DESIGNS TO BE USED ON THE PAGE
--- 01 TYPOGRAPHY SYSTEM
    FONT SIZE SYSTEM (px)
        10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
    
    SPACING SYSTEM (px)
        2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
    
*/