/* ============================================================
   LOGIN LANDING — port of the public landing hero globe
   1:1 with src/landing-ui ... landing.css (.hero-globe + .hero__halo
   + .hero__rings + .particle). Names rebranded to .login-* so we
   don't collide with the operator portal's other styles.
   ============================================================ */

/* Visual wrapper — big, square, centered */
.login-logo-anim {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    margin: 0 auto;
}

/* The globe itself: same SVG content, scaled to fill, with a very slow
   80s rotation and a soft drop-shadow. Dark theme: white outlines +
   accent core. Light theme: accent outlines too. */
.login-globe {
    width: 100%;
    height: 100%;
    color: var(--color-text-primary);
    animation: ll-rotate-slow 180s linear infinite;
    filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.35));
    position: relative;
    z-index: 1;
}
.login-globe-core { color: var(--color-accent); }
[data-theme="light"] .login-globe { color: var(--color-accent); }

@keyframes ll-rotate-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Accent halo behind everything */
.login-halo {
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 50% 50%,
        rgba(143, 255, 0, 0.20) 0%,
        transparent 55%);
    pointer-events: none;
    z-index: 0;
    animation: ll-halo-pulse 6s ease-in-out infinite;
}
@keyframes ll-halo-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1.0; transform: scale(1.05); }
}
[data-theme="light"] .login-halo {
    background: radial-gradient(circle at 50% 50%,
        rgba(79, 70, 229, 0.20) 0%,
        transparent 55%);
}

/* Concentric rings — slow expand outward, staggered */
.login-rings {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.login-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(143, 255, 0, 0.22);
    transform: translate(-50%, -50%);
    animation: ll-ring-pulse 4s ease-out infinite;
}
.login-ring--1 { width: 65%; height: 65%; animation-delay: 0s; }
.login-ring--2 { width: 65%; height: 65%; animation-delay: 1.3s; }
.login-ring--3 { width: 65%; height: 65%; animation-delay: 2.6s; }
@keyframes ll-ring-pulse {
    0%   { width: 65%;  height: 65%;  opacity: 0.6; }
    100% { width: 130%; height: 130%; opacity: 0; }
}
[data-theme="light"] .login-ring { border-color: rgba(79, 70, 229, 0.22); }

/* Floating accent particles around the globe */
.login-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--color-accent);
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}
.login-particle--1 { top: 18%; left: 10%; animation: ll-float  8s ease-in-out infinite; }
.login-particle--2 { top: 75%; left: 15%; animation: ll-float 10s ease-in-out infinite -2s; }
.login-particle--3 { top: 35%; right: 12%; animation: ll-float 12s ease-in-out infinite -4s; }
.login-particle--4 { bottom: 18%; right: 8%;  animation: ll-float  9s ease-in-out infinite -6s; }
.login-particle--5 { top: 50%; left: 50%;  animation: ll-float 11s ease-in-out infinite -3s; }
@keyframes ll-float {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(8px, -12px); }
    50%      { transform: translate(-6px, -20px); }
    75%      { transform: translate(-10px, -8px); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .login-globe,
    .login-halo,
    .login-ring,
    .login-particle { animation: none !important; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 640px) {
    .login-logo-anim { max-width: 320px; }
}
@media (max-width: 480px) {
    .login-logo-anim { max-width: 260px; }
    .login-particle { width: 5px; height: 5px; }
}