/* ================================================================
# DACOG Search Engine – System Architecture
# File: biometric-modal.css
# Path: /static/css/biometric-modal.css
# Version: 3.0.0
# Description: Mathematical-Unit Biometric Modal (Light/Hero)
# ================================================================*/

/* 1. Modal Dialog Resets (Theme Adaptive) */
.bio-modal-content {
    background-color: var(--dacog-bg-nav);
    color: var(--dacog-text-main);
    border: 0.0625rem solid var(--dacog-border-color);
}

.bio-modal-header {
    background: linear-gradient(135deg, var(--dacog-bg-topbar), #000000);
    color: #ffffff;
    border-bottom: none;
}

.bio-modal-footer {
    background-color: var(--dacog-bg-base);
    border-top: 0.0625rem solid var(--dacog-border-color);
}

/* 2. Circular Viewfinder */
.verify-camera-box {
    position: relative;
    width: 100%;
    max-width: 20rem; /* 320px */
    height: 20rem;
    margin: 0 auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    background-color: #111111;
    border: 0.25rem solid var(--dacog-accent-green);
    -webkit-box-shadow: 0 0 2.5rem rgba(32, 201, 151, 0.4);
    -moz-box-shadow: 0 0 2.5rem rgba(32, 201, 151, 0.4);
    box-shadow: 0 0 2.5rem rgba(32, 201, 151, 0.4);
}

#verifyStream {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: scaleX(-1); /* Mirror for natural user movement */
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1); 
}

/* 3. Liveness Overlay & Laser Animation */
.verification-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.375rem; /* 6px */
    background: linear-gradient(to bottom, transparent, var(--dacog-accent-green));
    -webkit-box-shadow: 0 0 1.25rem var(--dacog-accent-green);
    -moz-box-shadow: 0 0 1.25rem var(--dacog-accent-green);
    box-shadow: 0 0 1.25rem var(--dacog-accent-green);
    -webkit-animation: scanMove 2.5s infinite ease-in-out;
    -moz-animation: scanMove 2.5s infinite ease-in-out;
    -o-animation: scanMove 2.5s infinite ease-in-out;
    animation: scanMove 2.5s infinite ease-in-out;
    display: none;
    z-index: 10;
}

@-webkit-keyframes scanMove { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }
@-moz-keyframes scanMove { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }
@-o-keyframes scanMove { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }
@keyframes scanMove { 0% { top: 0%; } 50% { top: 100%; } 100% { top: 0%; } }

/* ==========================================================================
   4. MEDIA QUERIES (AFRICAN TARGET OPTIMIZATION)
   ========================================================================== */

@media screen and (max-width: 30em) { /* 480px */
    .verify-camera-box {
        max-width: 15rem; /* 240px */
        height: 15rem;
    }
    
    .bio-modal-footer .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}