/* ═══════════════════════════════════════════════════════════════
   AccessBot — Enhanced Lock Screen
   Animated aurora background · Branding · Mobile-first
   ═══════════════════════════════════════════════════════════════ */

/* ── Base overlay ────────────────────────────────────────────── */
#lockscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding:
        max(40px, env(safe-area-inset-top,    40px))  24px
        max(36px, env(safe-area-inset-bottom, 36px))  24px;
    background: #03080f;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    /* entrance fade-in */
    animation: ls-entrance 0.6s ease both;
}

@keyframes ls-entrance {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Unlock transition ───────────────────────────────────────── */
#lockscreen.ls-unlocking {
    animation: ls-swipe-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}
@keyframes ls-swipe-up {
    0%   { opacity: 1; transform: translateY(0)    scale(1); }
    60%  { opacity: 1; transform: translateY(-30px) scale(1.01); }
    100% { opacity: 0; transform: translateY(-110%) scale(0.98); }
}

#lockscreen.ls-gone { display: none !important; }

/* ── Aurora blob layer ───────────────────────────────────────── */
.ls-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ls-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    mix-blend-mode: screen;
}

.ls-orb-1 {
    width: 70vmax; height: 70vmax;
    top: -25%; left: -20%;
    background: radial-gradient(circle, rgba(0,140,120,0.9) 0%, transparent 70%);
    animation: ls-drift-1 18s ease-in-out infinite alternate;
}
.ls-orb-2 {
    width: 60vmax; height: 60vmax;
    top: -15%; right: -25%;
    background: radial-gradient(circle, rgba(0,80,160,0.85) 0%, transparent 70%);
    animation: ls-drift-2 22s ease-in-out infinite alternate;
}
.ls-orb-3 {
    width: 50vmax; height: 50vmax;
    bottom: -20%; left: 10%;
    background: radial-gradient(circle, rgba(60,0,120,0.8) 0%, transparent 70%);
    animation: ls-drift-3 26s ease-in-out infinite alternate;
}
.ls-orb-4 {
    width: 40vmax; height: 40vmax;
    bottom: 5%; right: -15%;
    background: radial-gradient(circle, rgba(0,100,80,0.6) 0%, transparent 70%);
    animation: ls-drift-4 20s ease-in-out infinite alternate;
}

@keyframes ls-drift-1 {
    0%   { transform: translate(0,   0)   scale(1);    }
    50%  { transform: translate(8%,  12%) scale(1.08); }
    100% { transform: translate(-5%, 6%)  scale(0.95); }
}
@keyframes ls-drift-2 {
    0%   { transform: translate(0,  0)   scale(1);    }
    50%  { transform: translate(-6%, 8%) scale(1.05); }
    100% { transform: translate(4%, -4%) scale(1.1);  }
}
@keyframes ls-drift-3 {
    0%   { transform: translate(0,   0)   scale(1);    }
    50%  { transform: translate(5%,  -8%) scale(1.06); }
    100% { transform: translate(-8%, 4%)  scale(0.93); }
}
@keyframes ls-drift-4 {
    0%   { transform: translate(0,   0)   scale(1);    }
    50%  { transform: translate(-4%, -6%) scale(1.1);  }
    100% { transform: translate(6%,  4%)  scale(0.97); }
}

/* ── Star / sparkle field ────────────────────────────────────── */
.ls-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    /* 40 pseudo-stars via box-shadow on a tiny pseudo-element */
}
.ls-stars::before,
.ls-stars::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        /* row 1 */
        12vw  8vh  0 0.5px rgba(255,255,255,0.9),
        28vw  4vh  0 1px   rgba(0,196,167,0.8),
        45vw  11vh 0 0.5px rgba(255,255,255,0.6),
        63vw  6vh  0 1px   rgba(255,255,255,0.8),
        79vw  14vh 0 0.5px rgba(0,196,167,0.7),
        91vw  5vh  0 1px   rgba(255,255,255,0.5),
        /* row 2 */
        7vw   22vh 0 0.5px rgba(0,196,167,0.6),
        33vw  18vh 0 1px   rgba(255,255,255,0.4),
        57vw  25vh 0 0.5px rgba(255,255,255,0.7),
        74vw  19vh 0 1px   rgba(0,196,167,0.5),
        88vw  28vh 0 0.5px rgba(255,255,255,0.6),
        /* row 3 */
        18vw  35vh 0 1px   rgba(255,255,255,0.3),
        42vw  38vh 0 0.5px rgba(0,196,167,0.5),
        66vw  32vh 0 1px   rgba(255,255,255,0.4),
        83vw  40vh 0 0.5px rgba(255,255,255,0.3),
        /* row 4 */
        5vw   50vh 0 1px   rgba(0,196,167,0.4),
        24vw  55vh 0 0.5px rgba(255,255,255,0.5),
        51vw  48vh 0 1px   rgba(255,255,255,0.3),
        76vw  52vh 0 0.5px rgba(0,196,167,0.4),
        95vw  45vh 0 1px   rgba(255,255,255,0.3),
        /* row 5 */
        15vw  65vh 0 0.5px rgba(255,255,255,0.2),
        38vw  70vh 0 1px   rgba(0,196,167,0.3),
        62vw  67vh 0 0.5px rgba(255,255,255,0.3),
        85vw  72vh 0 1px   rgba(255,255,255,0.2);
    animation: ls-twinkle-a 5s ease-in-out infinite alternate;
}
.ls-stars::after {
    box-shadow:
        20vw  3vh  0 0.5px rgba(255,255,255,0.5),
        37vw  9vh  0 1px   rgba(0,196,167,0.6),
        54vw  2vh  0 0.5px rgba(255,255,255,0.7),
        71vw  10vh 0 1px   rgba(255,255,255,0.4),
        3vw   16vh 0 0.5px rgba(0,196,167,0.5),
        48vw  20vh 0 1px   rgba(255,255,255,0.3),
        90vw  17vh 0 0.5px rgba(0,196,167,0.4),
        11vw  30vh 0 1px   rgba(255,255,255,0.4),
        59vw  42vh 0 0.5px rgba(0,196,167,0.3),
        77vw  36vh 0 1px   rgba(255,255,255,0.3),
        30vw  60vh 0 0.5px rgba(255,255,255,0.2),
        70vw  58vh 0 1px   rgba(0,196,167,0.2);
    animation: ls-twinkle-b 7s ease-in-out infinite alternate;
}

@keyframes ls-twinkle-a {
    0%   { opacity: 0.3; transform: scale(0.95); }
    50%  { opacity: 1.0; transform: scale(1.05); }
    100% { opacity: 0.5; transform: scale(1);    }
}
@keyframes ls-twinkle-b {
    0%   { opacity: 0.6; transform: scale(1.05); }
    50%  { opacity: 0.2; transform: scale(0.9);  }
    100% { opacity: 0.8; transform: scale(1);    }
}

/* ── Branding ────────────────────────────────────────────────── */
.ls-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 2;
    animation: ls-brand-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
@keyframes ls-brand-in {
    from { opacity: 0; transform: translateY(-18px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0)      scale(1);   }
}

.ls-brand-icon {
    width: clamp(48px, 10vw, 64px);
    height: clamp(48px, 10vw, 64px);
    filter: drop-shadow(0 0 18px rgba(0,196,167,0.7));
    animation: ls-icon-glow 3s ease-in-out infinite alternate;
}
@keyframes ls-icon-glow {
    0%   { filter: drop-shadow(0 0 12px rgba(0,196,167,0.5)); }
    100% { filter: drop-shadow(0 0 28px rgba(0,196,167,0.9)); }
}

.ls-brand-name {
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 0 0 28px rgba(0,196,167,0.6);
}

.ls-brand-tagline {
    font-size: clamp(0.72rem, 2.5vw, 0.85rem);
    color: rgba(0,196,167,0.7);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
}

/* ── Clock ───────────────────────────────────────────────────── */
.ls-clock {
    text-align: center;
    z-index: 2;
    animation: ls-brand-in 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

.ls-time {
    font-size: clamp(3.8rem, 17vw, 6.5rem);
    font-weight: 100;
    letter-spacing: -1px;
    color: #fff;
    text-shadow:
        0 0 40px rgba(0,196,167,0.35),
        0 2px 8px rgba(0,0,0,0.5);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ls-date {
    font-size: clamp(0.85rem, 3vw, 1.05rem);
    color: rgba(255,255,255,0.65);
    margin-top: 8px;
    letter-spacing: 0.8px;
    font-weight: 300;
}

/* ── Swipe hint with cascading chevrons ──────────────────────── */
.ls-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.ls-chevrons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 0.7;
}

.ls-chev {
    font-size: 1.6rem;
    color: rgba(0,196,167,0.8);
    transform: rotate(180deg); /* point upward */
    animation: ls-chev-fade 1.6s ease-in-out infinite;
}
.ls-chev-1 { animation-delay: 0s;    opacity: 0.3; }
.ls-chev-2 { animation-delay: 0.2s;  opacity: 0.6; }
.ls-chev-3 { animation-delay: 0.4s;  opacity: 1.0; }

@keyframes ls-chev-fade {
    0%   { opacity: 0.1;  transform: rotate(180deg) translateY(6px);  }
    50%  { opacity: 1.0;  transform: rotate(180deg) translateY(0px);  }
    100% { opacity: 0.1;  transform: rotate(180deg) translateY(-6px); }
}

.ls-hint-text {
    font-size: clamp(0.75rem, 2.5vw, 0.88rem);
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.5px;
    font-weight: 300;
}

/* ── Ring / knob ─────────────────────────────────────────────── */
.ls-ring-area {
    position: relative;
    width: clamp(200px, 46vw, 240px);
    height: clamp(200px, 46vw, 240px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Outer pulse rings */
.ls-pulse-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0,196,167,0.25);
    animation: ls-ring-pulse 3s ease-out infinite;
    pointer-events: none;
}
.ls-pulse-ring-1 {
    width: 100%; height: 100%;
    animation-delay: 0s;
}
.ls-pulse-ring-2 {
    width: 82%; height: 82%;
    animation-delay: 0.8s;
}

@keyframes ls-ring-pulse {
    0%   { transform: scale(0.92); opacity: 0.7; }
    70%  { transform: scale(1.06); opacity: 0.15; }
    100% { transform: scale(1.06); opacity: 0;   }
}

.ls-ring {
    width: clamp(150px, 36vw, 188px);
    height: clamp(150px, 36vw, 188px);
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.18);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow:
        0 0 0 1px rgba(0,196,167,0.08) inset,
        0 0 40px rgba(0,0,0,0.3) inset;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.ls-ring.ls-active {
    border-color: rgba(0,196,167,0.55);
    box-shadow:
        0 0 30px rgba(0,196,167,0.25) inset,
        0 0 0 1px rgba(0,196,167,0.3) inset;
}

.ls-knob {
    width: clamp(58px, 14vw, 72px);
    height: clamp(58px, 14vw, 72px);
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1.5px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: grab;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.35),
        0 0 0 6px rgba(255,255,255,0.04);
}

.ls-knob-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ls-lock-icon {
    font-size: clamp(1.4rem, 4vw, 1.75rem);
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Knob ripple on hover */
.ls-knob::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    animation: ls-knob-halo 2.5s ease-in-out infinite;
}
@keyframes ls-knob-halo {
    0%, 100% { transform: scale(1);    opacity: 0.6; }
    50%       { transform: scale(1.15); opacity: 0.15; }
}

.ls-knob.ls-dragging {
    cursor: grabbing;
    background: rgba(0,196,167,0.22);
    border-color: #00c4a7;
    box-shadow:
        0 4px 32px rgba(0,196,167,0.5),
        0 0 0 8px rgba(0,196,167,0.12);
}
.ls-knob.ls-dragging .ls-lock-icon {
    transform: scale(1.15);
}

/* ── Side shortcut icons ─────────────────────────────────────── */
.ls-shortcut {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    color: rgba(255,255,255,0.35);
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0,196,167,0.3));
}
.ls-shortcut-left  { left:  -2px; }
.ls-shortcut-right { right: -2px; }

/* ── 2FA error (auth card) ───────────────────────────────────── */
#twofa-error {
    background: var(--error-bg, #2a1010);
    border: 1px solid var(--error-border, #6b2020);
    color: var(--error, #ff6b6b);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 360px) {
    .ls-brand-name { font-size: 1.2rem; }
    .ls-brand-tagline { letter-spacing: 2px; }
}

/* Very short screens (landscape phone) */
@media (max-height: 500px) {
    #lockscreen {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        padding: 12px 24px;
    }
    .ls-brand      { gap: 2px; }
    .ls-brand-icon { width: 36px; height: 36px; }
    .ls-clock      { order: -1; }
    .ls-hint       { display: none; }
    .ls-time       { font-size: 2.8rem; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ls-orb,
    .ls-stars::before,
    .ls-stars::after,
    .ls-brand,
    .ls-brand-icon,
    .ls-clock,
    .ls-chev,
    .ls-pulse-ring,
    .ls-knob::before { animation: none !important; }

    #lockscreen.ls-unlocking {
        animation: none !important;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
}