/* ===== SPINNER LOADING SCREEN ===== */

.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  overflow: hidden;
}

.spinner-overlay.closing {
  pointer-events: none;
}

.spinner-container {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}

.spinner-logo {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: spinnerRotate 3s linear infinite, spinnerBreathing 3s ease-in-out infinite;
}

.spinner-logo img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(52, 152, 219, 0.6));
}

/* Rotation du logo */
@keyframes spinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Animation de respiration (réduction et augmentation de taille) */
@keyframes spinnerBreathing {
  0% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 20px rgba(52, 152, 219, 0.6));
  }
  50% {
    transform: rotate(180deg) scale(0.7);
    filter: drop-shadow(0 0 10px rgba(52, 152, 219, 0.3));
  }
  100% {
    transform: rotate(360deg) scale(1);
    filter: drop-shadow(0 0 20px rgba(52, 152, 219, 0.6));
  }
}

/* Loading text */
.spinner-text {
  position: absolute;
  top: -20px;
  font-size: 14px;
  color: #3498db;
  letter-spacing: 2px;
  animation: spinnerFade 1.5s ease-in-out infinite;
  font-weight: 300;
}

@keyframes spinnerFade {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* Animation d'ouverture - volets qui s'écartent pour révéler la page */
.spinner-overlay.open {
  animation: none;
  background: transparent;
  pointer-events: none;
}

.spinner-overlay.open .spinner-container {
  pointer-events: none;
  opacity: 0;
  animation: hideSpinner 0.3s ease-out forwards;
}

.spinner-overlay.open .spinner-text {
  animation: none;
  opacity: 0;
}

/* Cache le spinner pendant l'ouverture */
@keyframes hideSpinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Pseudo-éléments pour créer les deux volets */
.spinner-overlay.open::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  animation: splitOpenLeft 1s ease-out forwards;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

.spinner-overlay.open::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  animation: splitOpenRight 1s ease-out forwards;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
}

/* Animation de séparation vers la gauche */
@keyframes splitOpenLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Animation de séparation vers la droite */
@keyframes splitOpenRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* Fade out du spinner et du texte */
.spinner-overlay.fade-out {
  animation: fadeOut 0.6s ease forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Body scrolling control */
body.spinner-active {
  overflow: hidden;
}

/* Responsive - Adapter pour petits écrans */
@media (max-width: 768px) {
  .spinner-container {
    width: 150px;
    height: 150px;
  }

  .spinner-logo {
    width: 120px;
    height: 120px;
  }

  .spinner-text {
    font-size: 12px;
    bottom: 30px;
  }
}