@font-face {
  font-family: "AmbisiFont";
  src: url("../media/font/relish-gargler.ttf") format("opentype");
}

/* Default (Light Mode) */
html,
body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f9fafb; /* Light mode background */
  font-family: "Share Tech Mono", monospace;
  overflow: hidden;
}

.loader-wrapper {
  position: fixed;
  inset: 0;
  background-color: #f9fafb; /* Light mode bg */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader {
  width: 100px;
  height: 100px;
  transform: rotate(165deg);
  position: relative;
  margin-bottom: 20px;
}

.loader:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  animation: before-light 2s infinite;
}

.loader:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  animation: after-light 2s infinite;
}

@keyframes before-light {
  0% {
    width: 8px;
    box-shadow: 16px -8px #0ea5e9, -16px 8px #d1d5db;
  }
  35% {
    width: 40px;
    box-shadow: 0 -8px #0ea5e9, 0 8px #d1d5db;
  }
  70% {
    width: 8px;
    box-shadow: -16px -8px #0ea5e9, 16px 8px #d1d5db;
  }
  100% {
    box-shadow: 16px -8px #0ea5e9, -16px 8px #d1d5db;
  }
}

@keyframes after-light {
  0% {
    height: 8px;
    box-shadow: 8px 16px #0ea5e9, -8px -16px #d1d5db;
  }
  35% {
    height: 40px;
    box-shadow: 8px 0 #0ea5e9, -8px 0 #d1d5db;
  }
  70% {
    height: 8px;
    box-shadow: 8px -16px #0ea5e9, -8px 16px #d1d5db;
  }
  100% {
    box-shadow: 8px 16px #0ea5e9, -8px -16px #d1d5db;
  }
}

/* Dark Mode Override */
.dark body {
  background: #0f0f0f;
}

.dark .loader-wrapper {
  background-color: #0f0f0f;
}

.dark .loader:before {
  animation: before-dark 2s infinite;
}

.dark .loader:after {
  animation: after-dark 2s infinite;
}

@keyframes before-dark {
  0% {
    width: 8px;
    box-shadow: 16px -8px #0ea5e9, -16px 8px #f3f4f6;
  }
  35% {
    width: 40px;
    box-shadow: 0 -8px #0ea5e9, 0 8px #f3f4f6;
  }
  70% {
    width: 8px;
    box-shadow: -16px -8px #0ea5e9, 16px 8px #f3f4f6;
  }
  100% {
    box-shadow: 16px -8px #0ea5e9, -16px 8px #f3f4f6;
  }
}

@keyframes after-dark {
  0% {
    height: 8px;
    box-shadow: 8px 16px #0ea5e9, -8px -16px #f3f4f6;
  }
  35% {
    height: 40px;
    box-shadow: 8px 0 #0ea5e9, -8px 0 #f3f4f6;
  }
  70% {
    height: 8px;
    box-shadow: 8px -16px #0ea5e9, -8px 16px #f3f4f6;
  }
  100% {
    box-shadow: 8px 16px #0ea5e9, -8px -16px #f3f4f6;
  }
}

.animated-text span {
  display: inline-block;
  opacity: 0;
  transform: scale(0.6);
  animation: zoomFadeIn 0.5s ease-out forwards,
    colorPulseLight 3s ease-in-out infinite;
  font-size: 2.8rem;
  margin: 0 2px;
  font-family: "AmbisiFont", sans-serif;
  color: #d1d5db; /* gray-300 untuk light */
  animation-delay: var(--delay), var(--delay);
}

@keyframes zoomFadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Light mode color pulse */
@keyframes colorPulseLight {
  0% {
    color: #d1d5db; /* abu terang */
  }
  50% {
    color: #0ea5e9; /* biru logo */
  }
  100% {
    color: #d1d5db;
  }
}

/* Dark mode override */
.dark .animated-text span {
  animation: zoomFadeIn 0.5s ease-out forwards,
    colorPulseDark 3s ease-in-out infinite;
  color: #ffffff; /* default white di dark */
}

@keyframes colorPulseDark {
  0% {
    color: #f3f4f6; /* gray-100 */
  }
  50% {
    color: #0ea5e9; /* biru */
  }
  100% {
    color: #f3f4f6;
  }
}

/* Fade Out + Fade In */
.fade-out {
  animation: fadeOut 1s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

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