/* === Notlife Login: bordo luminoso ===
   - glow-runner: lucina bianca che gira attorno alla card
   - edge-glow: luce soffusa statica
   Non altera i colori della card o dei contenuti.
========================================================= */

.auth-page {
  /* Parametri regolabili */
  --nl-glow-speed: 4s;           /* più alto = più lento (es. 6s) */
  --nl-glow-thickness: 2px;      /* spessore della “linea” */
  --nl-glow-blur: 12px;          /* morbidezza alone esterno */
  --nl-glow-peak: .92;           /* intensità del picco luce (0–1) */
}

/* Base card per gli effetti */
.auth-page .login-card.glow-runner,
.auth-page .login-card.edge-glow {
  position: relative;
  border-radius: 16px;   /* adatta al raggio reale della tua card */
  overflow: visible;
  isolation: isolate;    /* crea un contesto di stacking isolato */
}

/* ========== A) LUCINA CHE GIRA (glow-runner) ========== */
/* Implementazione compatibile: ruoto l'intero gradiente,
   così evito @property e massimizzo la resa cross-browser. */

@keyframes nl-border-spin { to { transform: rotate(360deg); } }

/* Versione completa quando il browser supporta le maschere di bordo */
@supports ( ( -webkit-mask-composite: xor ) or ( mask-composite: exclude ) ) {

  .auth-page .login-card.glow-runner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--nl-glow-thickness);
    background:
      conic-gradient(from 0deg,
        rgba(255,255,255,0) 0deg,
        rgba(255,255,255,var(--nl-glow-peak)) 10deg,
        rgba(255,255,255,0) 20deg,
        rgba(255,255,255,0) 360deg);
    /* Mostra solo l’anello (bordo) con una maschera precisa */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) border-box;
            mask-composite: exclude;

    animation: nl-border-spin var(--nl-glow-speed) linear infinite;
    will-change: transform, background;
    pointer-events: none;
    z-index: 1; /* sopra la card, ma senza coprire i contenuti */
  }

  .auth-page .login-card.glow-runner::after {
    content: "";
    position: absolute;
    inset: -8px; /* espando fuori per vedere l’alone */
    border-radius: inherit;
    padding: calc(var(--nl-glow-thickness) + 2px);
    background:
      conic-gradient(from 0deg,
        rgba(255,255,255,0) 0deg,
        rgba(255,255,255,.60) 10deg,
        rgba(255,255,255,0) 20deg,
        rgba(255,255,255,0) 360deg);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0) border-box;
            mask-composite: exclude;

    filter: blur(var(--nl-glow-blur));
    animation: nl-border-spin var(--nl-glow-speed) linear infinite;
    will-change: transform, filter, background;
    pointer-events: none;
    z-index: 0; /* dietro i contenuti della card */
  }
}

/* Fallback elegante per browser senza mask-composite (es. Firefox) */
@supports not ( ( -webkit-mask-composite: xor ) or ( mask-composite: exclude ) ) {
  .auth-page .login-card.glow-runner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Bordo interno statico come fallback, molto discreto */
    box-shadow: inset 0 0 0 var(--nl-glow-thickness) rgba(255,255,255,.35);
    pointer-events: none;
  }
  .auth-page .login-card.glow-runner::after { display: none; }
}

/* Riduzione movimento: mostra un bordo leggero e disattiva la rotazione */
@media (prefers-reduced-motion: reduce) {
  .auth-page .login-card.glow-runner::before,
  .auth-page .login-card.glow-runner::after { animation: none !important; }
  .auth-page .login-card.glow-runner::before {
    background: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    -webkit-mask: none; mask: none;
  }
  .auth-page .login-card.glow-runner::after { display: none; }
}

/* ========== B) GLOW STATICO (edge-glow) ========== */
.auth-page .login-card.edge-glow {
  /* definizione del bordo + alone soffuso */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
           0 0 0 1px rgba(255,255,255,.06),
           0 10px 30px rgba(255,255,255,.06);
}

.auth-page .login-card.edge-glow::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background:
    radial-gradient(100% 60% at 50% 100%,
      rgba(255,255,255,.10), rgba(255,255,255,0) 60%)
    no-repeat 50% 100% / 120% 80%;
  filter: blur(8px);
  pointer-events: none;
}

/* Micro-ottimizzazioni mobile: un filo più soft su schermi stretti */
@media (max-width: 380px) {
  .auth-page .login-card.edge-glow {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.10),
             0 8px 22px rgba(255,255,255,.05);
  }
}