/**

 * Effets auth — spotlight DA (même principe que da-explorer / formation-da-effects).

 * Projecteur : centre lumineux + bords assombris + faisceau bleu accent.

 * Intensité calibrée entre le lab DA (0.28–0.34) et la version trop discrète.

 */



.auth-spotlight {

  --spot-x: 50%;

  --spot-y: 50%;

  --spot-size: 42%;

  --spot-vignette: 0.16;

  --spot-beam: 0.88;

  position: relative;

  isolation: isolate;

}



/* Vignette projecteur — trou transparent au curseur, bords en retrait */

.auth-spotlight::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0;

  border-radius: inherit;

  transition: opacity 0.3s ease;

  background: radial-gradient(

    circle var(--spot-size) at var(--spot-x) var(--spot-y),

    transparent 0%,

    color-mix(

        in srgb,

        var(--da-ink, #262a30) calc(var(--spot-vignette) * 100%),

        transparent

      )

      78%

  );

}



/* Faisceau bleu ardoise — visible dans la zone éclairée */

.auth-spotlight::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: 0;

  border-radius: inherit;

  transition: opacity 0.3s ease;

  background: radial-gradient(

    circle calc(var(--spot-size) * 0.72) at var(--spot-x) var(--spot-y),

    color-mix(in srgb, var(--da-accent, #5c7d97) 32%, transparent) 0%,

    var(--da-accent-soft, rgba(92, 125, 151, 0.14)) 36%,

    color-mix(in srgb, var(--da-accent-glow, rgba(92, 125, 151, 0.28)) 55%, transparent) 58%,

    transparent 78%

  );

}



.auth-spotlight.is-spot-active::before {

  opacity: 1;

}



.auth-spotlight.is-spot-active::after {

  opacity: var(--spot-beam);

}



/* Contenu au-dessus du projecteur */

.auth-spotlight.auth-spotlight--card > *,

.auth-spotlight.auth-spotlight--wide > *,

.auth-spotlight.input-wrapper > * {

  position: relative;

  z-index: 1;

}



.auth-spotlight.auth-spotlight--field {

  border-radius: inherit;

  overflow: visible;

}

input.auth-spotlight.auth-spotlight--field,
button.auth-spotlight.auth-spotlight--field {

  overflow: hidden;

}



/* Carte principale — projecteur large, vignette modérée */

.auth-spotlight.auth-spotlight--card {

  --spot-size: 48%;

  --spot-vignette: 0.14;

  --spot-beam: 0.92;

}



/* Champs — spot plus large sur petits éléments */

.auth-spotlight.auth-spotlight--field {

  --spot-size: 58%;

  --spot-vignette: 0.12;

  --spot-beam: 0.85;

}



/* Boutons accent — reflet clair + léger creux sur les bords */

.auth-spotlight.auth-spotlight--btn {

  --spot-size: 46%;

  --spot-vignette: 0.2;

  --spot-beam: 0.95;

}



.auth-spotlight.auth-spotlight--btn::before {

  background: radial-gradient(

    circle var(--spot-size) at var(--spot-x) var(--spot-y),

    transparent 0%,

    rgba(0, 0, 0, 0.1) 72%,

    rgba(0, 0, 0, 0.18) 78%

  );

}



.auth-spotlight.auth-spotlight--btn::after {

  background: radial-gradient(

    circle calc(var(--spot-size) * 0.62) at var(--spot-x) var(--spot-y),

    rgba(246, 247, 248, 0.34) 0%,

    color-mix(in srgb, var(--da-accent, #5c7d97) 42%, transparent) 38%,

    transparent 74%

  );

}



/* Zones larges (SSO, CGU) */

.auth-spotlight.auth-spotlight--wide {

  --spot-size: 44%;

  --spot-vignette: 0.13;

  --spot-beam: 0.88;

}



@media (prefers-reduced-motion: reduce) {

  .auth-spotlight::before,

  .auth-spotlight::after {

    transition: none;

  }

}