/* ===== LOADER BACKGROUND ===== */
#loader {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255,215,0,0.18), transparent 60%),
    linear-gradient(135deg, #87CEEB, #4facfe);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  overflow: hidden;
}

/* layout */
.loader-wrapper {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ===== LOGO WRAP (untuk shine effect) ===== */
.logo-wrap {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden; /* penting untuk efek kilau */
}

/* ===== LOGO ===== */
.logo-loader {
  width: 95px;
  display: block;

  /* selalu terlihat */
  opacity: 1;

  /* animasi berlapis */
  animation:
    spinIntro 2.2s cubic-bezier(.22,.61,.36,1) forwards,
    floatIdle 3s ease-in-out infinite 2.2s,
    glowPulse 2.4s ease-in-out infinite;
  
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.6));
}

/* spin halus + zoom out */
@keyframes spinIntro {
  0%   { transform: scale(1.2) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* floating halus */
@keyframes floatIdle {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* glow “bernapas” */
@keyframes glowPulse {
  0%   { filter: drop-shadow(0 0 6px rgba(255,215,0,0.35)); }
  50%  { filter: drop-shadow(0 0 20px rgba(255,215,0,0.9)); }
  100% { filter: drop-shadow(0 0 6px rgba(255,215,0,0.35)); }
}

/* ===== SHINE SWEEP (kilau lewat) ===== */
.logo-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 240%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.0) 35%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.0) 65%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shineMove 3s ease-in-out infinite 1.2s;
}

@keyframes shineMove {
  0%   { left: -120%; }
  100% { left: 120%; }
}

/* ===== TEXT ===== */
#typing-text {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #e6ac00;
  white-space: nowrap;
}

/* kata per kata */
.word {
  opacity: 0;
  display: inline-block;
  transform: translateY(10px);
  animation: wordIn 0.6s ease forwards;
}

@keyframes wordIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}