/* ============================================================
   Sooatek — logo vectorisé animé
   Fichier : modules/logo-anim.css
   Dépend de : modules/logo.svg (injecté par modules/logo-anim.js)
   Palette : accent #3B82F6 sur fond #0A0A12
   ============================================================ */

.sooatek-logo {
  position: relative;
  display: inline-block;
  color: #3B82F6;          /* le SVG est rempli en currentColor */
  line-height: 0;
}

.sooatek-logo svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3332 / 616; /* ratio du viewBox : l'inline SVG n'a pas de taille intrinsèque */
  overflow: visible;        /* laisse respirer le glow de la sphère */
}

.sooatek-logo #logo-sphere {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Intro (~1,5 s) : JS ajoute .is-intro ---------- */

/* Révélation des lettres de gauche à droite par clip-path animé */
.sooatek-logo.is-intro #logo-letters {
  clip-path: inset(-6% 100% -6% 0);
  animation: sooatek-reveal 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.05s forwards;
}

@keyframes sooatek-reveal {
  from { clip-path: inset(-6% 100% -6% 0); }
  to   { clip-path: inset(-6% 0%   -6% 0); }
}

/* Barre de lumière verticale qui balaie (élément créé par le JS) */
.sooatek-logo .sooatek-logo-sweep {
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: 0;
  width: 4%;
  pointer-events: none;
  opacity: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0)    0%,
    rgba(59, 130, 246, 0.55) 30%,
    rgba(191, 219, 254, 0.95) 50%,
    rgba(59, 130, 246, 0.55) 70%,
    rgba(59, 130, 246, 0)    100%
  );
  filter: blur(1.5px);
  box-shadow: 0 0 14px 3px rgba(59, 130, 246, 0.55);
}

.sooatek-logo.is-intro .sooatek-logo-sweep {
  animation: sooatek-sweep 1.05s cubic-bezier(0.65, 0, 0.35, 1) 0.05s forwards;
}

@keyframes sooatek-sweep {
  0%   { opacity: 0; transform: translateX(0); }
  6%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(2300%); }
}

/* La sphère "s'allume" quand la révélation arrive à droite.
   NB : filtre CSS appliqué à un élément SVG => longueurs en unités
   utilisateur du viewBox (3332x616), d'où les grandes valeurs. */
.sooatek-logo.is-intro #logo-sphere {
  opacity: 0;
  animation: sooatek-sphere-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
}

@keyframes sooatek-sphere-in {
  0% {
    opacity: 0;
    transform: scale(0.4);
    filter: drop-shadow(0 0 0 rgba(191, 219, 254, 0)) drop-shadow(0 0 0 rgba(59, 130, 246, 0));
  }
  55% {
    opacity: 1;
    transform: scale(1.35);
    filter: drop-shadow(0 0 60px rgba(191, 219, 254, 1)) drop-shadow(0 0 260px rgba(59, 130, 246, 0.9));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 40px rgba(191, 219, 254, 0.35)) drop-shadow(0 0 90px rgba(59, 130, 246, 0.5));
  }
}

/* ---------- Idle : pulsation douce de la sphère (~4 s) ---------- */

.sooatek-logo.is-done #logo-sphere {
  animation: sooatek-sphere-idle 4s ease-in-out infinite;
}

@keyframes sooatek-sphere-idle {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(147, 197, 253, 0.1)) drop-shadow(0 0 60px rgba(59, 130, 246, 0.15));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(147, 197, 253, 0.75)) drop-shadow(0 0 150px rgba(59, 130, 246, 0.8));
  }
}

/* ---------- Impulsion à la demande : window.sooatekLogo.pulse() ----------
   Déclarée APRÈS l'idle : même spécificité, la dernière règle gagne. */
.sooatek-logo #logo-sphere.is-pulse {
  animation: sooatek-sphere-pulse 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes sooatek-sphere-pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(191, 219, 254, 0)) drop-shadow(0 0 50px rgba(59, 130, 246, 0.2));
  }
  22% {
    transform: scale(1.35);
    filter: drop-shadow(0 0 70px rgba(191, 219, 254, 1)) drop-shadow(0 0 300px rgba(59, 130, 246, 0.95));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(191, 219, 254, 0)) drop-shadow(0 0 50px rgba(59, 130, 246, 0.2));
  }
}

/* ---------- Accessibilité : pas d'animation ---------- */

@media (prefers-reduced-motion: reduce) {
  .sooatek-logo #logo-letters,
  .sooatek-logo #logo-sphere {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .sooatek-logo .sooatek-logo-sweep {
    display: none !important;
  }
}