/* face-login.css
   Shared styles for the face recognition UI (login, standalone sign-in, manage/enroll).
   Used together with wwwroot/js/face-login.js (FaceLogin.createFlow) and the
   _FaceCamera.cshtml shared partial. Keep all face-login visuals here so every
   surface stays in sync (DRY). */

/* Scanning bar that sweeps across the camera during capture */
@keyframes faceScanLine {
    0%   { top: 0%; }
    50%  { top: 88%; }
    100% { top: 0%; }
}

.face-scan-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 10%,
        rgba(255, 255, 255, 0.9) 40%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.9) 60%,
        rgba(255, 255, 255, 0.25) 90%,
        transparent 100%);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 1);
    animation: faceScanLine 1.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
    border-radius: 5px;
}

/* Countdown number overlay */
.face-countdown-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    z-index: 15;
    border-radius: inherit;
    pointer-events: none;
}

.face-countdown-number {
    font-size: 5rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
    transition: opacity 0.25s;
}

.face-countdown-hint {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 0.5rem;
    text-align: center;
    padding: 0 1rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* Shared success (check) + failure (X) result overlay */
@keyframes faceDrawCheck {
    0%   { stroke-dashoffset: 120; opacity: 1; }
    70%  { stroke-dashoffset: 0;   opacity: 1; }
    85%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset: 0;   opacity: 0; }
}

@keyframes faceDrawX {
    0%   { stroke-dashoffset: 100; opacity: 1; }
    70%  { stroke-dashoffset: 0;   opacity: 1; }
    85%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset: 0;   opacity: 0; }
}

.face-check-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 20;
    border-radius: inherit;
}

.face-check-overlay svg .check-circle {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: faceDrawCheck 1.8s ease forwards;
}

.face-check-overlay svg .check-mark {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: faceDrawCheck 1.8s ease forwards 0.3s;
}

.face-check-overlay svg .fail-circle {
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    animation: faceDrawCheck 1.8s ease forwards;
}

.face-check-overlay svg .fail-x1,
.face-check-overlay svg .fail-x2 {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: faceDrawX 1.8s ease forwards 0.3s;
}

.face-check-overlay svg .fail-x2 {
    animation-delay: 0.5s;
}

/* Face guide circle - always on top of the video during the camera phase */
.face-guide-circle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 8;
}

.face-guide-circle svg circle {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

/* Camera flash overlay shown at the moment of capture */
@keyframes faceCameraFlash {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; }
}

.face-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 25;
    border-radius: inherit;
}

.face-flash.active {
    animation: faceCameraFlash 0.55s ease-out forwards;
}

/* Fixed 4:3 camera box (matches the 480x360 stream) so the guide circle stays
   round even before the camera starts. Applied when the container opts in via
   the .face-fixed-ratio modifier (used by the manage/enroll page). */
.face-camera.face-fixed-ratio {
    aspect-ratio: 4 / 3;
}

.face-camera.face-fixed-ratio > video,
.face-camera.face-fixed-ratio > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder icon shown before the camera is started */
.face-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 7;
    color: rgba(255, 255, 255, 0.55);
}

.face-placeholder i {
    font-size: 5rem;
}

/* Top-right rotate toggle (flips the video/canvas 180°). The rotation is applied
   only to the media elements by the shared JS; overlays (guide/countdown) stay put. */
.face-rotate-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 30;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.face-rotate-btn:hover,
.face-rotate-btn:focus {
    background: rgba(0, 0, 0, 0.7);
    outline: none;
}

.face-rotate-btn.is-rotated i {
    transform: rotate(180deg);
}

/* Inactivity fallback bar shown below the camera after a failed sign-in or when
   switching to password mode. Counts down over a fixed duration, then the page
   navigates back (history.back) unless the user interacts. */
.face-fallback {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
}

.face-fallback-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.face-fallback-bar {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    transform-origin: left center;
    transition: width 0s linear;
}

.face-fallback-text {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    text-align: center;
    color: #6c757d;
}