/* Facade "Windows 2FA" (FS-002): an anonymous lock screen — gradient wallpaper, an avatar without a
   photo, the computer name — with the second factor as a dialog. No trademarks, no logos. The
   success screen unlocks into a schematic desktop after --facade-winlogon-delay (CSS only). */

.facade-win {
    --facade-winlogon-delay: 2.5s;
    --facade-win-glass: color-mix(in srgb, var(--veriqa-card-bg) 92%, transparent);

    position: relative;
    width: 100%;
    max-width: 36rem;
    min-height: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--veriqa-spacing-md);
    padding: var(--veriqa-spacing-lg) var(--veriqa-spacing-md) var(--veriqa-spacing-xl);
    overflow: hidden;
    border: 1px solid var(--veriqa-card-border);
    border-radius: var(--veriqa-radius-lg);
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--veriqa-color-accent) 18%, transparent), transparent 32%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--veriqa-card-fg) 10%, transparent), transparent 38%),
        linear-gradient(145deg, var(--veriqa-card-border), var(--veriqa-card-bg) 60%, var(--veriqa-card-border));
    color: var(--veriqa-card-fg);
    box-shadow: var(--veriqa-shadow-lg);
}

.facade-win-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--veriqa-spacing-sm);
    width: min(100%, 24rem);
    text-align: center;
}

.facade-win-avatar {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border: 1px solid var(--veriqa-card-border);
    border-radius: 50%;
    background: var(--veriqa-card-bg);
}

.facade-win-person {
    width: 2.75rem;
    height: 2.75rem;
    fill: none;
    stroke: var(--veriqa-card-muted);
    stroke-width: 4.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.facade-win-pc {
    margin: 0;
    font-size: var(--veriqa-font-size-md);
    font-weight: var(--veriqa-font-weight-bold);
}

.facade-win-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--veriqa-spacing-sm);
    width: 100%;
    padding: var(--veriqa-spacing-md);
    border: 1px solid var(--veriqa-card-border);
    border-radius: var(--veriqa-radius-md);
    background: var(--facade-win-glass);
    box-shadow: var(--veriqa-shadow-lg);
}

.facade-win-dialog-title {
    margin: 0;
    font-size: var(--veriqa-font-size-sm);
    font-weight: var(--veriqa-font-weight-bold);
}

.facade-win-dialog-text {
    margin: 0;
    font-size: var(--veriqa-font-size-xs);
    line-height: 1.45;
    color: var(--veriqa-card-muted);
}

.facade-win-unlocking {
    display: inline-flex;
    align-items: center;
    gap: var(--veriqa-spacing-sm);
    margin: 0;
    font-size: var(--veriqa-font-size-sm);
}

/* In the flow, as the last item of the column: pinned to the bottom edge it had no room of its own
   and, wrapped onto two lines on a phone, ran over the panel. Positioned only to stay above the
   desktop that fades in on success. */
.facade-win > .veriqa-facade-honesty {
    position: relative;
    padding-inline: var(--veriqa-spacing-md);
}

/* ── Success: the lock screen fades out, the desktop fades in after the delay ── */
.facade-win-desktop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--veriqa-spacing-lg);
    background:
        linear-gradient(180deg, transparent 88%, color-mix(in srgb, var(--veriqa-card-fg) 12%, transparent) 88%),
        linear-gradient(145deg, color-mix(in srgb, var(--veriqa-color-accent) 10%, var(--veriqa-card-bg)), var(--veriqa-card-bg));
    opacity: 0;
    animation: facade-win-show 0.6s ease var(--facade-winlogon-delay) forwards;
}

.facade-win.is-unlocked .facade-win-lock {
    animation: facade-win-hide 0.4s ease var(--facade-winlogon-delay) forwards;
}

.facade-win-window {
    display: flex;
    flex-direction: column;
    gap: var(--veriqa-spacing-sm);
    min-width: min(100%, 18rem);
    padding: var(--veriqa-spacing-md) var(--veriqa-spacing-lg);
    border: 1px solid var(--veriqa-card-border);
    border-radius: var(--veriqa-radius-md);
    background: var(--veriqa-card-bg);
    box-shadow: var(--veriqa-shadow-lg);
}

.facade-win-window-title {
    margin: 0;
    font-size: var(--veriqa-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--veriqa-card-muted);
}

.facade-win-window-text {
    margin: 0;
    font-size: var(--veriqa-font-size-md);
    font-weight: var(--veriqa-font-weight-bold);
}

@keyframes facade-win-show {
    to { opacity: 1; }
}

@keyframes facade-win-hide {
    to { opacity: 0; visibility: hidden; }
}

/* Reduced motion: no transition — the desktop is there at once. */
@media (prefers-reduced-motion: reduce) {
    .facade-win-desktop {
        opacity: 1;
        animation: none;
    }

    .facade-win.is-unlocked .facade-win-lock {
        animation: none;
        visibility: hidden;
    }
}

.veriqa-result--facade .facade-win {
    min-height: 32rem;
}