/* Efectos del acceso (los que responden a la persona): los puertos que unen el panel con el lienzo, el anillo del
   logo, la chispa de cada tecla y la entrada en la oficina. La base del acceso está en auth.css. */

/* La luz que sigue al puntero sobre el lienzo. La mueve el compositor (solo cambia su posición), así que no le
   cuesta nada al dibujo. */
.auth-light { position: fixed; left: 0; top: 0; z-index: -1; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, 0) 65%); pointer-events: none; opacity: 0; transition: opacity .4s ease; will-change: translate; }

/* Puertos: por el izquierdo llegan pulsos del lienzo; por el derecho salen los de cada tecla. */
.auth-card > .auth-port { position: absolute; top: 50%; z-index: 2; width: 11px; height: 11px; margin-top: -5.5px; border: 2px solid var(--violet-soft); border-radius: 50%; background: #17181c; box-shadow: 0 0 0 4px rgba(122, 90, 248, .18); }
.auth-port.is-left { left: -6px; }
.auth-port.is-right { right: -6px; }

/* El anillo del logo se llena según avanza el acceso y gira mientras el servidor comprueba. */
.auth-logo { --ring: 0; position: relative; display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 12px; }
.auth-logo .auth-card-logo { margin: 0; }
.auth-logo-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; fill: none; }
.auth-logo-track { stroke: rgba(255, 255, 255, .12); stroke-width: 1.5; }
.auth-logo-fill { stroke: var(--violet); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ring)); transition: stroke-dashoffset .55s var(--ease-out); }
.auth-logo.is-busy .auth-logo-ring { animation: auth-ring-spin 1s linear infinite; }

/* La chispa de una tecla: vuela desde el final de lo escrito hasta el nodo del paso en curso. */
.auth-spark { position: fixed; z-index: 120; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--violet-soft); box-shadow: 0 0 10px 2px rgba(122, 90, 248, .9); pointer-events: none; }

/* La entrada: el panel se recoge hacia el nodo «Oficina», una luz se abre desde él y el lienzo se acerca. */
.auth-flash { position: fixed; left: var(--dive-x, 50%); top: var(--dive-y, 50%); z-index: 110; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; border-radius: 50%; background: radial-gradient(circle, rgba(207, 196, 255, .5) 0, rgba(122, 90, 248, .22) 28%, transparent 60%); pointer-events: none; opacity: 0; scale: 0; }
.auth-gate.is-diving .auth-flow { transform: scale(3.2); transform-origin: var(--dive-x) var(--dive-y); opacity: 0; transition: transform 1.05s cubic-bezier(.7, 0, .25, 1), opacity .85s ease .2s; }
.auth-gate.is-diving .auth-card { transform: scale(.05); transform-origin: var(--sink-x) var(--sink-y); opacity: 0; transition: transform .7s cubic-bezier(.6, 0, .3, 1), opacity .45s ease .25s; }
.auth-gate.is-diving .auth-top, .auth-gate.is-diving .auth-veil { opacity: 0; transition: opacity .5s ease; }

/* Modo ligero: cuando el equipo no llega al ritmo (lo mide el lienzo), se quita lo que más cuesta componer. El acceso
   se ve casi igual: panel de grafito opaco en vez de cristal, sin inclinación y sin el halo que late. */
.auth-gate.is-low-power .auth-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(27, 28, 32, .96); transform: none; }
.auth-gate.is-low-power .auth-rail li.is-active .auth-node::after { animation: none; opacity: 0; }
.auth-gate.is-low-power .auth-light, .auth-gate.is-low-power .auth-flash { display: none; }
.auth-gate.is-low-power.is-diving .auth-flow { transform: none; transition: opacity .6s ease; }
.auth-gate.is-low-power.is-diving .auth-card { transform: scale(.9); transform-origin: center; }

@keyframes auth-ring-spin { to { rotate: 270deg; } }

/* En pantallas estrechas el panel ocupa el ancho: no hay sitio para los cables. */
@media (max-width: 600px) {
  .auth-card > .auth-port { display: none; }
}
@media (max-height: 700px) {
  .auth-logo { display: none; }
}