/* Modern, Sensory-Friendly, Premium Loading Screen Styles */

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Creative Animated Gradient Background */
  background: linear-gradient(-45deg, #F2E8D5, #e6d8eb, #d8ebe6, #f7eed7);
  background-size: 400% 400%;
  animation: gradientBG 12s ease infinite;
  
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* Smooth backdrop blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* The exit transition: slower fade, blur goes to 0 */
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
              visibility 1s ease-out,
              backdrop-filter 1s ease-out;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#loader-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Slightly fade the canvas particles so they are less overwhelming */
  opacity: 0.8;
  pointer-events: none;
}

.loader-content {
  position: relative;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  
  /* Entry animation: float up and fade in */
  animation: contentFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  transform: translateY(30px);
}

@keyframes contentFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3D Logo Container with Glowing Breathing Aura */
/* Increased size by 50% */
.loader-logo-container {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The Breathing Aura behind the logo */
.loader-logo-container::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(107, 70, 193, 0.3) 0%, rgba(107,70,193,0) 70%);
  border-radius: 50%;
  animation: pulseAura 3s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes pulseAura {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 1; }
}

/* The actual 3D Model */
/* Increased size by 50% */
.loader-3d-logo {
  width: 210px;
  height: 210px;
  background-color: transparent;
  /* Levitating animation + existing rotation is handled by model-viewer */
  animation: levitate 4s ease-in-out infinite;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
}

@keyframes levitate {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

model-viewer::part(default-progress-bar) {
  display: none;
}
model-viewer:focus-visible {
  outline: none;
}

/* Stunning Gradient Shimmer Text with Elegant Intro Transition */
.loader-text {
  font-family: var(--font-main), sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 4px;
  margin: 0;
  margin-top: 15px;
  
  /* Fallback colors just in case variables fail to load in time */
  background: linear-gradient(
    to right,
    #6B46C1 20%,
    #3B82F6 40%,
    #14B8A6 60%,
    #6B46C1 80%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Extremely elegant text entrance: blurred, tracking-in, fading in */
  animation: elegantTextEntrance 2s cubic-bezier(0.2, 1, 0.3, 1) forwards, shine 4s linear infinite;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(15px) scale(0.95);
}

@keyframes elegantTextEntrance {
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0) scale(1);
    letter-spacing: 2px; /* Smoothly reduces letter spacing */
  }
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* ======================================= */
/* EXIT ANIMATION (When page finishes loading) */
/* ======================================= */

.loaded #loader-wrapper {
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* When loaded, the 3D logo flies UP and SCALES to simulate flying into the navbar */
.loaded .loader-3d-logo {
  animation: flyToNav 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes flyToNav {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-300px) scale(0.2);
    opacity: 0;
  }
}

.loaded .loader-text {
  animation: fadeOutText 0.4s ease-out forwards;
}

@keyframes fadeOutText {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}