/* ── FOND DYNAMIQUE DES PAGES DE CONNEXION ─────────────────────
   6 images en boucle continue. Chaque image joue un Ken Burns complet
   (zoom + dérive), s'efface en fondu pendant que la suivante apparaît.

   Réglage : --slide = durée d'une image (la boucle dure 6 x --slide).
   Les animations utilisent la même keyframe, décalée de --slide par image,
   donc aucun JS et le fondu enchaîné reste synchrone. */

.login-bg {
  --slide: 9s;
  --fade: 2s;
  position: fixed;
  inset: 0;
  z-index: -1;            /* sous le contenu, au-dessus du fond du body */
  overflow: hidden;
  background: #0b1a1f;    /* visible le temps du chargement */
  pointer-events: none;
}

.login-bg__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
  animation: login-kenburns calc(var(--slide) * 6) linear infinite;
  animation-delay: calc(var(--slide) * var(--i));
  transform-origin: var(--ox, 50%) var(--oy, 50%);
}

/* Voile pour garder la carte de connexion lisible */
.login-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(8,20,24,.15) 0%, rgba(8,20,24,.55) 100%);
}

/* Une image : fondu entrant -> maintien -> fondu sortant -> repos.
   Fenêtre active = --slide + --fade (le fondu sortant chevauche
   le fondu entrant de l'image suivante). Pourcentages calculés sur 6 x 9s = 54s. */
@keyframes login-kenburns {
  0%      { opacity: 0; transform: scale(1)    translate(0, 0); }
  3.7%    { opacity: 1; }                                         /* fondu entrant 2s */
  16.67%  { opacity: 1; }                                         /* plein jusqu'à 9s */
  20.37%  { opacity: 0; transform: scale(1.2) translate(var(--kx, -2%), var(--ky, -1.5%)); } /* fondu sortant 2s */
  100%    { opacity: 0; transform: scale(1.2) translate(var(--kx, -2%), var(--ky, -1.5%)); }
}

/* Chaque image : image, ordre, point d'ancrage et direction de la dérive */
.login-bg__slide:nth-child(1) { --i: 0; background-image: url("../images/drone/drone_img_1.5140738b591b.webp"); --ox: 30%; --oy: 40%; --kx: -2%;  --ky: -1.5%; }
.login-bg__slide:nth-child(2) { --i: 1; background-image: url("../images/drone/drone_img_2.5e96b9e5e718.webp"); --ox: 70%; --oy: 60%; --kx:  2%;  --ky:  1%; }
.login-bg__slide:nth-child(3) { --i: 2; background-image: url("../images/drone/drone_img_3.9b588d12c30a.webp"); --ox: 50%; --oy: 30%; --kx:  1.5%; --ky: -2%; }
.login-bg__slide:nth-child(4) { --i: 3; background-image: url("../images/drone/drone_img_4.25a499bbf6a9.webp"); --ox: 25%; --oy: 65%; --kx: -1.5%; --ky:  2%; }
.login-bg__slide:nth-child(5) { --i: 4; background-image: url("../images/drone/drone_img_5.9d21dd7e5eb3.webp"); --ox: 75%; --oy: 35%; --kx:  2%;  --ky: -1%; }
.login-bg__slide:nth-child(6) { --i: 5; background-image: url("../images/drone/drone_img_6.cdd60f863b5c.webp"); --ox: 50%; --oy: 55%; --kx: -2%;  --ky:  1.5%; }

/* ── GLASSMORPHISM : topbar, carte, footer ─────────────────────
   Teinte du thème (clair/sombre) en semi-transparence + léger flou,
   pour laisser deviner l'image derrière. Réglage : --glass-blur / pourcentages. */
.login-page {
  --glass-blur: 2px;
}

.login-page .navbar-main {
  background: color-mix(in srgb, var(--navbar-bg) 50%, transparent);
  border-bottom: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

.login-card,
.login-page .site-footer {
  background: color-mix(in srgb, var(--bg-card) 62%, transparent) !important;
  border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

.login-card { box-shadow: 0 20px 50px rgba(0,0,0,.35); }

.login-page .site-footer { border-width: 1px 0 0; }

/* Champs : un peu plus opaques que la carte pour rester lisibles */
.login-card .form-control {
  background: color-mix(in srgb, var(--bg-input) 80%, transparent) !important;
}

/* Accessibilité : pas de mouvement -> première image fixe */
@media (prefers-reduced-motion: reduce) {
  .login-bg__slide { animation: none; }
  .login-bg__slide:nth-child(1) { opacity: 1; }
}

/* ── LOGO DE LA CARTE ───────────────────────────────────────────
   Clair : logo texte noir. Sombre : logo texte blanc. */
.login-logo { margin-bottom: 20px; }
.login-logo img { display: block; width: min(240px, 80%); height: auto; margin: 0 auto; }
.login-logo__white { display: none !important; }
html[data-theme="dark"] .login-logo__dark { display: none !important; }
html[data-theme="dark"] .login-logo__white { display: block !important; }