/* ===============================
   Page Loader Styles
   =============================== */

/* Base loader container */
.page-loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fbbf24; /* Vibrant yellow background */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  overflow: hidden;
}


.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}




/* Dark mode variant */
html.dark .page-loader {
  background: rgba(17, 24, 39, 0.97); /* near-solid dark overlay */
}

/* Smooth hide effect */
.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===============================
   Logo Animation
   =============================== */

.page-loader img {
  width: 100px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  animation: bounce 1.4s infinite ease-in-out;
  opacity: 1;
  transform-origin: bottom center;
}

/* Bounce keyframes */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-25px);
  }
  60% {
    transform: translateY(-12px);
  }
}

/* ===============================
   Brand Text Styling
   =============================== */

.brand-text {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  font-family: 'Inter', Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  letter-spacing: 0.3px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

html.dark .brand-text {
  color: #f9fafb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Highlighted brand keyword */
.brand-text strong {
  color: white;
}

/* ===============================
   Optional: Fade-in on load
   =============================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-loader {
  animation: fadeIn 0.4s ease-in-out;
}