/* ═══════════════════════════════════════════════════════════════════════
   AUTH BACKGROUND — animated scenery for the sign-in and sign-up pages
   ═══════════════════════════════════════════════════════════════════════
   Two layers, both pure CSS:

   1. The navy brand panel gets a slow "aurora" — three large, heavily blurred
      colour fields drifting past each other on long, mismatched cycles, over a
      faint perspective grid that creeps upward. Because the cycle lengths are
      coprime-ish (26s / 34s / 41s) the composition never visibly repeats.

   2. The form side gets a much quieter version of the same idea, so the page
      still feels alive on phones where the brand panel is hidden entirely.

   Everything animates transform / opacity only, so it stays on the compositor
   and never triggers layout. Honours prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. brand panel ──────────────────────────────────────────────────── */
.auth-visual { isolation: isolate; }

.auth-aurora {
    position: absolute; inset: -20%;
    z-index: 0; pointer-events: none;
    filter: blur(58px);
    opacity: .85;
}
.auth-aurora span {
    position: absolute; display: block;
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform;
}
/* gold — the brand colour, largest and slowest */
.auth-aurora .a1 {
    width: 46%; padding-bottom: 46%;
    top: 4%; left: -6%;
    background: radial-gradient(circle at 35% 35%, rgba(201,168,76,.55), rgba(201,168,76,0) 70%);
    animation: auroraDriftA 34s ease-in-out infinite;
}
/* cool blue — pulls the eye across the middle */
.auth-aurora .a2 {
    width: 52%; padding-bottom: 52%;
    top: 34%; right: -12%;
    background: radial-gradient(circle at 60% 40%, rgba(64,132,214,.48), rgba(64,132,214,0) 70%);
    animation: auroraDriftB 41s ease-in-out infinite;
}
/* pale teal — smallest, fastest, keeps the bottom from going dead */
.auth-aurora .a3 {
    width: 38%; padding-bottom: 38%;
    bottom: -4%; left: 22%;
    background: radial-gradient(circle at 45% 55%, rgba(94,214,196,.34), rgba(94,214,196,0) 70%);
    animation: auroraDriftC 26s ease-in-out infinite;
}

@keyframes auroraDriftA {
    0%,100% { transform: translate3d(0,0,0)        scale(1);    }
    33%     { transform: translate3d(18%,12%,0)    scale(1.18); }
    66%     { transform: translate3d(6%,26%,0)     scale(.92);  }
}
@keyframes auroraDriftB {
    0%,100% { transform: translate3d(0,0,0)        scale(1.05); }
    40%     { transform: translate3d(-22%,-14%,0)  scale(.88);  }
    70%     { transform: translate3d(-8%,16%,0)    scale(1.22); }
}
@keyframes auroraDriftC {
    0%,100% { transform: translate3d(0,0,0)        scale(.95);  }
    50%     { transform: translate3d(14%,-20%,0)   scale(1.25); }
}

/* faint grid that creeps upward behind the aurora */
.auth-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 46px 46px;
    /* fade it out top and bottom so it reads as texture, not a table */
    -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 45%, #000 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 62% at 50% 45%, #000 40%, transparent 100%);
    animation: gridCreep 24s linear infinite;
    will-change: transform;
}
@keyframes gridCreep {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(0,-46px,0); }   /* exactly one cell — seamless */
}

/* slow shimmer sweeping across, so the panel catches the light now and then */
.auth-visual::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.07) 50%, transparent 62%);
    background-size: 260% 100%;
    animation: shimmerSweep 13s ease-in-out infinite;
    /* the original ::after was a static decorative circle — this replaces it */
    border-radius: 0; width: auto; height: auto; bottom: auto; left: auto;
}
@keyframes shimmerSweep {
    0%, 62% { background-position: 150% 0; }
    100%    { background-position: -60% 0; }
}

/* The panel shipped with a static gold circle bleeding in from the top-right.
   Against the aurora it reads as a hard seam, so it is retired here. */
.auth-visual::before { display: none; }

/* content must float above all of it */
.auth-visual-inner,
.auth-visual-badge { position: relative; z-index: 2; }

/* the old static decorative circles are superseded by the aurora */
.float-shape { display: none; }

/* ── 2. form side ────────────────────────────────────────────────────── */
.auth-form-panel { position: relative; overflow: hidden; }

.auth-form-panel::before {
    content: ''; position: absolute; inset: -30%;
    z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 20% 12%, rgba(201,168,76,.075), transparent 42%),
        radial-gradient(circle at 84% 82%, rgba(15,41,66,.055),  transparent 44%);
    animation: washDrift 30s ease-in-out infinite;
    will-change: transform;
}
@keyframes washDrift {
    0%,100% { transform: translate3d(0,0,0)     scale(1);    }
    50%     { transform: translate3d(3%,-4%,0)  scale(1.12); }
}
.auth-form-wrap { position: relative; z-index: 1; }

/* On dark the wash needs to be dimmer or it glows through the card. */
html[data-theme="dark"] .auth-form-panel::before {
    background:
        radial-gradient(circle at 22% 18%, rgba(217,185,98,.10), transparent 46%),
        radial-gradient(circle at 82% 78%, rgba(90,150,220,.09), transparent 48%);
}
html[data-theme="dark"] .auth-aurora { opacity: .7; }

/* ── motion & performance guards ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .auth-aurora span,
    .auth-grid,
    .auth-visual::after,
    .auth-form-panel::before { animation: none !important; }
}

/* Blur at this radius is expensive on small devices, and the brand panel is
   hidden below 1024px anyway — so only the cheap wash survives on phones. */
@media (max-width: 1024px) {
    .auth-aurora, .auth-grid { display: none; }
    .auth-form-panel::before { animation-duration: 40s; }
}