<style>
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

    /* === PRELOADER BASE === */
    #preloader {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: #fff;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #preloader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
	#preloader .preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}


    #preloader.day {
      background: #fff;
      color: #b90000;
    }

    #preloader.night {
      background: #000;
      color: #fff;
    }

    .typewriter-text {
      font-size: 20px;
      margin-top: 20px;
      border-right: 2px solid;
      white-space: nowrap;
      overflow: hidden;
      width: 14ch;
      animation: typing 2s steps(14), blink 0.5s step-end infinite alternate;
    }
	.loading-dots {
  font-size: 16px;
  margin-top: 10px;
}
.typewriter-text {
  font-size: 20px;
  margin-top: 20px;
  border-right: 2px solid;
  white-space: nowrap;
  overflow: hidden;
  width: 14ch;
  max-width: 100%;
  animation: typing 2s steps(14), blink 0.5s step-end infinite alternate;
}


    @keyframes typing {
      from { width: 0 }
    }

    @keyframes blink {
      50% { border-color: transparent }
    }

    .preloader-logo-flip {
      width: 100px;
      animation: flipX 1.2s infinite;
    }

    @keyframes flipX {
      0% { transform: rotateY(0deg); }
      50% { transform: rotateY(180deg); }
      100% { transform: rotateY(360deg); }
    }
  </style>