/* ==========================================================
   JOW-L LABS
   Neuroesthetic Observation Instrument
   Internal Build 0.2
========================================================== */

/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --bg:#080808;
    --bg-panel:#111111;
    --bg-viewer:#050505;

    --border:#242424;
    --border-light:#303030;

    --text:#ECECEC;
    --text-soft:#9A9A9A;
    --text-muted:#666666;

    --danger:#b35d5d;

    --accent:#03E9F4;
    --accent-soft:rgba(3,233,244,.15);
    --accent-glow:rgba(3,233,244,.45);

    --radius:8px;

    --transition:.25s ease;

}


/* ==========================================================
   RESET
========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    min-height:100%;

}

body{

    display:flex;
    justify-content:center;

    padding:42px 22px;

    background:
        radial-gradient(circle at top,#101010 0%,#080808 55%,#050505 100%);

    color:var(--text);

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,h2,h3{

    font-weight:600;

}

p{

    line-height:1.6;

}


/* ==========================================================
   STATION
========================================================== */

.station{

    width:100%;
    max-width:980px;

}


/* ==========================================================
   HEADER
========================================================== */

header{

    margin-bottom:42px;

}

.brand{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/* ---------- LOGO ---------- */

header h1{

    font-size:2rem;

    font-weight:700;

    letter-spacing:.18em;

    color:#ffffff;

    text-transform:uppercase;

    text-shadow:

        0 0 4px rgba(3,233,244,.35),

        0 0 10px rgba(3,233,244,.18);

}


/* ---------- Subtitle ---------- */

.subtitle{

    margin-top:10px;

    color:var(--text-soft);

    letter-spacing:.10em;

    font-size:.95rem;

}


/* ---------- Build ---------- */

.build{

    padding:7px 14px;

    border:1px solid var(--border-light);

    border-radius:4px;

    background:#101010;

    color:#777;

    font-size:.72rem;

    letter-spacing:.15em;

    text-transform:uppercase;

}


/* ==========================================================
   GLOBAL ANIMATION
========================================================== */

@keyframes glow{

    0%{

        text-shadow:

            0 0 4px rgba(3,233,244,.25),

            0 0 8px rgba(3,233,244,.15);

    }

    50%{

        text-shadow:

            0 0 8px rgba(3,233,244,.45),

            0 0 16px rgba(3,233,244,.25);

    }

    100%{

        text-shadow:

            0 0 4px rgba(3,233,244,.25),

            0 0 8px rgba(3,233,244,.15);

    }

}

/* ==========================================================
   PANELS
========================================================== */

.panel{

    margin-bottom:28px;

    padding:24px;

    background:linear-gradient(
        180deg,
        #131313 0%,
        #0f0f0f 100%
    );

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.03),

        0 10px 30px rgba(0,0,0,.35);

}


/* ==========================================================
   PANEL HEADER
========================================================== */

.panel-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.panel h2{

    color:#ffffff;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

    text-shadow:

        0 0 5px rgba(3,233,244,.30),

        0 0 12px rgba(3,233,244,.10);

}


/* ==========================================================
   STATES
========================================================== */

.state{

    color:var(--text-muted);

    font-size:.72rem;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.state.online{

    color:var(--accent);

    text-shadow:

        0 0 6px rgba(3,233,244,.60),

        0 0 12px rgba(3,233,244,.30);

}

.state.offline{

    color:var(--danger);

}


/* ==========================================================
   VIEWER
========================================================== */

.viewer{

    position:relative;

    width:100%;

    height:430px;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    border-radius:10px;

    background:

        radial-gradient(
            circle at center,
            #111111 0%,
            #090909 65%,
            #050505 100%
        );

    border:1px solid rgba(255,255,255,.05);

    transition:all .35s ease;

}


/* Halo discret */

.viewer::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle,

            rgba(3,233,244,.03),

            transparent 70%

        );

}


/* Lueur intérieure */

.viewer::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    box-shadow:

        inset 0 0 45px rgba(3,233,244,.04);

}


/* ==========================================================
   ACTIVE MODE
========================================================== */

.viewer.active{

    border-color:rgba(3,233,244,.35);

    box-shadow:

        0 0 18px rgba(3,233,244,.12),

        inset 0 0 40px rgba(3,233,244,.08);

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.placeholder{

    color:#666;

    font-size:.95rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    user-select:none;

    opacity:.75;

}


/* ==========================================================
   IMAGE
========================================================== */

.viewer img{

    width:100%;

    height:100%;

    object-fit:contain;

}


/* ==========================================================
   MODEL VIEWER
========================================================== */

model-viewer{

    width:100%;

    height:100%;

    background:transparent;

}


/* ==========================================================
   FUTURE OVERLAYS
========================================================== */

.overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.overlay canvas{

    position:absolute;

    inset:0;

}

.overlay video{

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.15;

}

.crosshair{

    position:absolute;

    width:18px;

    height:18px;

    border:1px solid rgba(3,233,244,.35);

    border-radius:50%;

    transform:translate(-50%,-50%);

    display:none;

}

.metric{

    position:absolute;

    padding:6px 10px;

    background:rgba(0,0,0,.55);

    border:1px solid rgba(3,233,244,.18);

    border-radius:4px;

    color:#ddd;

    font-size:.72rem;

    backdrop-filter:blur(6px);

}

/* ==========================================================
   ACTIONS
========================================================== */

.actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:22px;

}


/* ==========================================================
   BUTTONS
========================================================== */

button{

    position:relative;

    min-width:170px;

    padding:13px 22px;

    background:linear-gradient(
        180deg,
        #1a1a1a 0%,
        #131313 100%
    );

    color:#d8d8d8;

    border:1px solid #323232;

    border-radius:6px;

    font-size:.82rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    cursor:pointer;

    transition:all .25s ease;

    overflow:hidden;

}


/* Halo au survol */

button::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:120%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(3,233,244,.12),

        transparent

    );

    transition:.6s;

}

button:hover::before{

    left:120%;

}

button:hover{

    color:#ffffff;

    border-color:rgba(3,233,244,.45);

    box-shadow:

        0 0 12px rgba(3,233,244,.12);

}

button:active{

    transform:scale(.98);

}


/* ==========================================================
   OBSERVATION PANEL
========================================================== */

.status{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.status div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

}


/* ==========================================================
   LABELS
========================================================== */

.label{

    color:#8d8d8d;

    letter-spacing:.05em;

}


/* ==========================================================
   VALUES
========================================================== */

.value{

    font-weight:600;

    color:#e4e4e4;

    transition:.25s;

}

.value.online{

    color:var(--accent);

    text-shadow:

        0 0 5px rgba(3,233,244,.55);

}

.value.offline{

    color:var(--danger);

}


/* ==========================================================
   FUTURE METRICS
========================================================== */

.metric-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:14px;

    padding:10px 0;

}

.metric-title{

    color:#777;

    font-size:.8rem;

}

.metric-value{

    color:#ffffff;

    font-weight:600;

}


/* ==========================================================
   STATUS BAR
========================================================== */

.statusbar{

    margin-top:34px;

    padding:18px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    border-top:1px solid rgba(255,255,255,.08);

    color:#6f6f6f;

    font-size:.78rem;

    letter-spacing:.08em;

}


/* ==========================================================
   STATUS LIGHT
========================================================== */

.statusbar span:first-child{

    display:flex;

    align-items:center;

    gap:10px;

}

.statusbar span:first-child::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#777;

}


/* ==========================================================
   READY
========================================================== */

.statusbar.ready span:first-child::before{

    background:#d4d4d4;

}


/* ==========================================================
   ONLINE
========================================================== */

.statusbar.online span:first-child::before{

    background:var(--accent);

    box-shadow:

        0 0 8px rgba(3,233,244,.85),

        0 0 18px rgba(3,233,244,.35);

}


/* ==========================================================
   RECORDING
========================================================== */

.statusbar.recording span:first-child::before{

    background:#ff4a4a;

    box-shadow:

        0 0 10px rgba(255,74,74,.8);

}


/* ==========================================================
   FADE IN
========================================================== */

.panel{

    animation:fadeUp .45s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   BUILD 0.2
   ONLINE STATES
========================================================== */

.online{

    color:var(--accent) !important;

    text-shadow:

        0 0 5px rgba(3,233,244,.55),

        0 0 10px rgba(3,233,244,.18);

}

.offline{

    color:var(--danger);

}

.ready{

    color:#d6d6d6;

}


/* ==========================================================
   GLOW ANIMATION
========================================================== */

@keyframes neonPulse{

    0%{

        text-shadow:

            0 0 4px rgba(3,233,244,.20),

            0 0 10px rgba(3,233,244,.10);

    }

    50%{

        text-shadow:

            0 0 8px rgba(3,233,244,.55),

            0 0 18px rgba(3,233,244,.25);

    }

    100%{

        text-shadow:

            0 0 4px rgba(3,233,244,.20),

            0 0 10px rgba(3,233,244,.10);

    }

}


/* ==========================================================
   SCAN ANIMATION
========================================================== */

@keyframes scanner{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(100%);

    }

}

.viewer.scanning::before{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:2px;

    background:rgba(3,233,244,.7);

    box-shadow:

        0 0 12px rgba(3,233,244,.7);

    animation:

        scanner 2.4s linear infinite;

}


/* ==========================================================
   BOOT ANIMATION
========================================================== */

.station{

    animation:

        boot .7s ease;

}

@keyframes boot{

    from{

        opacity:0;

        transform:translateY(15px);

        filter:blur(4px);

    }

    to{

        opacity:1;

        transform:translateY(0);

        filter:blur(0);

    }

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:#303030;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}


/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:rgba(3,233,244,.25);

    color:white;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

    body{

        padding:24px;

    }

    .viewer{

        height:340px;

    }

}

@media(max-width:700px){

    .brand{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;

    }

    .actions{

        flex-direction:column;

    }

    button{

        width:100%;

    }

    .statusbar{

        flex-direction:column;

        align-items:flex-start;

    }

    .viewer{

        height:280px;

    }

}


/* ==========================================================
   FUTURE STATES
========================================================== */

/*

viewer.classList.add("active")

viewer.classList.add("scanning")

cameraStatus.classList.add("online")

trackingStatus.classList.add("online")

stationState.classList.add("online")

statusbar.classList.add("online")

*/