/* ============================================================================
   tibida — Fond animé "Soie" pour les pages de connexion (style Resend)
   ----------------------------------------------------------------------------
   Usage :
     <link rel="stylesheet" href="/shared/login-bg.css?v=20261001t2">
     <div class="t-login-bg" aria-hidden="true">
       <span class="t-silk t-s1"></span><span class="t-silk t-s2"></span>
       <span class="t-silk t-s3"></span><span class="t-silk t-s4"></span>
       <span class="t-silk t-s5"></span>
     </div>
   Le fond s'adapte au thème : [data-theme="dark"] (défaut) ou [data-theme="light"].
   100 % CSS, aucune image, aucun JS. Les traînées dérivent lentement en diagonale.
   ========================================================================== */

.t-login-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: #000 url('/shared/fond-soie-noir.jpg') center / cover no-repeat;
  pointer-events: none;
}
[data-theme="light"] .t-login-bg { background: #000 url('/shared/fond-soie-noir.jpg') center / cover no-repeat; }

/* Écrans larges : la soie paysage, dont les vagues traversent le cadre
   (le cadrage « cover » du portrait ne montrerait que le centre noir). */
@media (min-aspect-ratio: 1/1) {
  .t-login-bg, [data-theme="light"] .t-login-bg, .t-silk-screen {
    background-image: url('/shared/fond-soie-noir-paysage.jpg');
  }
}

/* Écran d'accès complet habillé de la soie (vues SPA : PWA cliente…) :
   la vue elle-même porte le fond, aucun élément ajouté nécessaire. */
.t-silk-screen {
  background: #000 url('/shared/fond-soie-noir.jpg') center / cover no-repeat !important;
  color: #fff;
}

/* Le fond animé est réservé aux ÉCRANS DE CONNEXION uniquement.
   Sur les applis SPA (admin, portail), le fond est un enfant direct de <body>
   qui reste dans le DOM après connexion : on ne l'affiche que quand un
   écran de connexion est visible, jamais sur le tableau de bord. */
body > .t-login-bg { display: none; }
body:has(#login-view:not(.hidden)) > .t-login-bg,
body:has(#otp-view:not(.hidden)) > .t-login-bg,
body:has(#totp-view:not(.hidden)) > .t-login-bg,
body:has(.login-stage) > .t-login-bg { display: block; }

.t-login-bg .t-silk { display: none;
  position: absolute;
  top: -30%;
  left: -20%;
  width: 140%;
  height: 160%;
  will-change: transform, opacity;
  filter: blur(38px);
  opacity: .55;
  animation: t-silk-drift 26s ease-in-out infinite alternate;
}

/* ---- Dark : traînées de soie blanches/grises ---- */
.t-silk.t-s1 {
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  animation-duration: 24s;
}
.t-silk.t-s2 {
  background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.10) 48%, transparent 60%);
  animation-duration: 32s;
  animation-delay: -8s;
  opacity: .5;
}
.t-silk.t-s3 {
  background: linear-gradient(115deg, transparent 48%, rgba(200,200,200,.12) 55%, transparent 63%);
  animation-duration: 28s;
  animation-delay: -14s;
}
.t-silk.t-s4 {
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 44%, transparent 56%);
  animation-duration: 38s;
  animation-delay: -20s;
  opacity: .45;
}
.t-silk.t-s5 {
  background: radial-gradient(ellipse 60% 45% at 50% 110%, rgba(255,255,255,.06), transparent 70%);
  filter: blur(50px);
  animation: t-silk-breathe 18s ease-in-out infinite alternate;
}

/* ---- Light : traînées de soie grises douces ---- */
[data-theme="light"] .t-login-bg .t-silk { display: none; filter: blur(44px); opacity: .6; }
[data-theme="light"] .t-silk.t-s1 {
  background: linear-gradient(115deg, transparent 42%, rgba(120,120,120,.20) 50%, transparent 58%);
}
[data-theme="light"] .t-silk.t-s2 {
  background: linear-gradient(115deg, transparent 36%, rgba(140,140,140,.14) 48%, transparent 60%);
}
[data-theme="light"] .t-silk.t-s3 {
  background: linear-gradient(115deg, transparent 48%, rgba(100,100,100,.16) 55%, transparent 63%);
}
[data-theme="light"] .t-silk.t-s4 {
  background: linear-gradient(115deg, transparent 30%, rgba(160,160,160,.10) 44%, transparent 56%);
}
[data-theme="light"] .t-silk.t-s5 {
  background: radial-gradient(ellipse 60% 45% at 50% 110%, rgba(120,120,120,.10), transparent 70%);
}

@keyframes t-silk-drift {
  0%   { transform: translate3d(-4%, -2%, 0) rotate(-2deg) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) rotate(1.5deg) scale(1.04); }
  100% { transform: translate3d(-2%, 3%, 0) rotate(-1deg) scale(1.02); }
}
@keyframes t-silk-breathe {
  0%   { opacity: .35; transform: scale(1); }
  100% { opacity: .6; transform: scale(1.08); }
}

/* Réduit les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .t-login-bg .t-silk { display: none; animation: none; }
}

/* Le contenu de connexion passe au-dessus du fond */
.t-login-shell { position: relative; z-index: 1; }