/* ============================================================
   Effets visuels Sextant : groupe « connexion » (16/09/2026)
   17 Sextant traverse l'écran, 18 la lune passe le relais au phare,
   19 roulis au refus / appareillage au succès, 20 la carte sous la main.
   Classes posées par js/fx/connexion.js sur #loginOverlay, uniquement le temps
   de l'effet. Au repos, aucune de ces règles ne s'applique.
   ============================================================ */

/* multiplicateur d'inclinaison : 1 à la souris, 0 dès qu'un champ a le focus
   (propriété enregistrée pour que le retour à plat soit réellement interpolé) */
@property --fx-connexion-t {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* ----- 20 : la carte de connexion sous la main (souris, grand écran) ----- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .login-overlay.fx-connexion-incline {
    --fx-connexion-t: 1;
    perspective: 1100px;
    transition: --fx-connexion-t .5s ease;
  }
  .login-overlay.fx-connexion-incline:focus-within { --fx-connexion-t: 0; }

  /* la plaque pivote vers le pointeur (plafond 6 degrés) */
  .fx-connexion-incline .login-container {
    transform-style: preserve-3d;
    transform:
      rotateY(calc(var(--fx-connexion-mx, 0) * var(--fx-connexion-t) * 6deg))
      rotateX(calc(var(--fx-connexion-my, 0) * var(--fx-connexion-t) * -6deg));
    transition: transform .18s ease-out;
  }
  /* le flou d'arrière-plan est invisible (fond opaque) mais aplatirait la 3D */
  .fx-connexion-incline .login-box {
    transform-style: preserve-3d;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .fx-connexion-incline .login-logo { transform-style: preserve-3d; }
  /* logo et titre flottent d'un cran devant la carte (0 au repos) */
  .fx-connexion-incline .login-logo img {
    transform: translateZ(calc(var(--fx-connexion-z, 0) * var(--fx-connexion-t) * 40px));
    transition: transform .18s ease-out;
  }
  .fx-connexion-incline .login-title {
    transform: translateZ(calc(var(--fx-connexion-z, 0) * var(--fx-connexion-t) * 24px));
    transition: transform .18s ease-out;
  }
  /* ombre portée qui s'étire à l'opposé du pointeur (invisible à plat) */
  .fx-connexion-incline .login-container::before {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    top: 24%;
    bottom: 0;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
    opacity: calc(var(--fx-connexion-z, 0) * var(--fx-connexion-t));
    transform: translate3d(
      calc(var(--fx-connexion-mx, 0) * var(--fx-connexion-t) * -22px),
      calc(26px + var(--fx-connexion-my, 0) * var(--fx-connexion-t) * -14px),
      -40px);
    transition: transform .18s ease-out, opacity .3s ease;
  }
  body.light-theme .fx-connexion-incline .login-container::before {
    background: radial-gradient(closest-side, rgba(0, 0, 0, .16), transparent);
  }
  /* lune, étoiles et vagues glissent en sens inverse (le léger zoom cache les bords) */
  .fx-connexion-incline #oceanLogin {
    transform:
      translate(calc(var(--fx-connexion-mx, 0) * var(--fx-connexion-t) * -12px),
                calc(var(--fx-connexion-my, 0) * var(--fx-connexion-t) * -8px))
      scale(calc(1 + var(--fx-connexion-z, 0) * var(--fx-connexion-t) * .03));
    transition: transform .3s ease-out;
  }
}

/* ----- 18 et 19 : appareillage au succès (la carte prend de la hauteur et s'efface,
   le voile s'ouvre sur l'application ; les clics passent dès le premier instant) ----- */
.login-overlay.fx-connexion-sortie {
  --fx-connexion-t: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease .2s, --fx-connexion-t .25s ease;
}
/* la carte prend de la hauteur et se dissout comme une buée (flou léger de la démo approuvée) */
.fx-connexion-sortie .login-container {
  opacity: 0;
  translate: 0 -44px;
  scale: .95;
  filter: blur(5px);
  transition:
    translate .6s cubic-bezier(.4, 0, .2, 1),
    scale .6s cubic-bezier(.4, 0, .2, 1),
    opacity .42s ease,
    filter .42s ease,
    transform .2s ease-out;
}
.fx-connexion-sortie .login-box {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* ----- 17 : le mot « Sextant » vole du titre de connexion au mot du tableau de bord.
   Une seule copie figée du mot du tableau de bord (hôte .fx-connexion-vol posé sous
   <html> par js/fx/connexion.js, styles en ligne, inerte et transparent au pointeur)
   part du texte du titre et se pose sur le vrai mot, masqué le temps du vol par une
   animation d'opacité sans remplissage. Pas de transition de vue : la page reste
   cliquable dès le premier instant. Pendant le vol, le titre de la carte laisse sa place. */
.fx-connexion-sortie.fx-connexion-mot .login-title { visibility: hidden; }
.fx-connexion-vol { position: fixed; margin: 0; padding: 0; border: 0; pointer-events: none; }

/* « réduire les animations » : le script ne pose rien, filet côté feuille de style */
@media (prefers-reduced-motion: reduce) {
  .login-overlay.fx-connexion-sortie,
  .fx-connexion-sortie .login-container { transition: none; }
  .fx-connexion-vol { display: none; }
}