/* Variables CSS pour l'animation */
:root {
  --primary-color: #08454B;
  --accent-color: #ffffff;
  --animation-duration: 4s;
  --fill-delay: 2s;
}

/* Reset et configuration de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Conteneur principal de l'animation */
.animation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Logo SVG */
.logo {
  width: min(40vw, 400px);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
  animation: logoGlow var(--animation-duration) ease-in-out infinite alternate;
}

.logo path {
  fill: transparent;
  stroke: var(--accent-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  
  /* Animation de tracé */
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  
  animation: 
    drawLogo var(--animation-duration) ease-out forwards,
    fillLogo 1.5s ease-out forwards var(--fill-delay);
}

/* Texte de chargement */
.loader-text {
  position: absolute;
  bottom: -80px;
  display: flex;
  gap: 10px;
  opacity: 0;
  animation: showLoader 0.5s ease-out forwards 1s;
}

.loader-letter {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  letter-spacing: 0.2em;
  animation: bounceLetters 1.5s ease-in-out infinite;
}

.loader-letter:nth-child(2) {
  animation-delay: 0.2s;
}

/* Animations */
@keyframes drawLogo {
  from {
    stroke-dashoffset: 3000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillLogo {
  from {
    fill: transparent;
    stroke-width: 4;
  }
  to {
    fill: var(--primary-color);
    stroke-width: 2;
  }
}

@keyframes logoGlow {
  from {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
  }
  to {
    filter: drop-shadow(0 0 30px rgba(8, 69, 75, 0.8));
  }
}

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

@keyframes bounceLetters {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .logo {
    width: 60vw;
  }
  
  .loader-text {
    bottom: -60px;
  }
  
  .loader-letter {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .logo {
    width: 80vw;
  }
  
  .loader-letter {
    font-size: 1.2rem;
  }
}

/* Animation de sortie (optionnelle) */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

.animation-container.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}