/* ==========================================
   XANDRO
   Global Styles
   Version 1.1
========================================== */


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

:root{

    --bg:#111111;

    --panel:#1b1b1b;

    --border:#303030;

    --accent:#d11a2a;

    --text:#f5f5f5;

    --muted:#888888;

    --radius:18px;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html,
body{

    width:100%;

    min-height:100%;

}

/* ==========================================
   BODY
========================================== */

body{

    background:var(--bg);
    color:var(--text);

    font-family:"Inter",sans-serif;

    margin:0;
    padding:0;

    overflow-y:auto;
    overflow-x:hidden;

}

body.lock-scroll{
    overflow:hidden;
    height:100vh;
    touch-action:none;
    overscroll-behavior:none;
}

/* ==========================================
   DASHBOARD
========================================== */

.dashboard{

    width:min(1400px,100%);

    min-height:100vh;

    margin:auto;

    padding:22px 40px 32px;

}

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

.top-bar{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:24px;

    margin-bottom:22px;

}

/* ==========================================
   BRANDING
========================================== */

/* ==========================================
   BRANDING
========================================== */

.branding{

    display:flex;

    flex-direction:column;

    justify-content:center;

    justify-self:start;

}

.branding h1{

    font-family:"Bebas Neue",sans-serif;

    font-size:4.5rem;

    color:var(--accent);

    line-height:.9;

    letter-spacing:2px;

    margin-bottom:6px;

}

#greeting{

    color:#9a9a9a;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.95rem;

}

.dashboard-tagline{

    margin-top:6px;

    color:#7a7a7a;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:.95rem;

}


/* ==========================================
   CLOCK
========================================== */

.header-center{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    justify-self:center;

}

.clock{

    font-family:"JetBrains Mono",monospace;

    font-size:3.8rem;

    font-weight:700;

    line-height:1;

}

.date{

    margin-top:10px;

    color:#9a9a9a;

    font-size:1.4rem;

}

/* ==========================================
   WEATHER
========================================== */

.weather{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-end;

    justify-self:end;

}

.weather-main{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:2rem;

}

.weather-location{

    margin-top:8px;

    color:#9a9a9a;

    font-size:1.3rem;

}

/* ==========================================
   DASHBOARD GRID
========================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    align-items:start;

}

.left-column,
.right-column{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/* ===========================
   TASKS
=========================== */

/* task card */
/* task item */
/* task input */

.task-checkbox{
    appearance:none;
    -webkit-appearance:none;

    width:18px;
    height:18px;

    border-radius:5px;
    border:2px solid rgba(255,255,255,.18);

    background:rgba(255,255,255,.03);

    cursor:pointer;
    transition:.2s;

    display:grid;
    place-items:center;
}

.task-checkbox:hover{
    border-color:rgba(255,255,255,.4);
}

.task-checkbox:checked{
    background:var(--accent);
    border-color:var(--accent);
}

.task-checkbox:checked::before{
    content:"✓";
    color:white;
    font-size:12px;
    font-weight:700;
}

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

::-webkit-scrollbar{

    width:6px;
    height:10px;

}

::-webkit-scrollbar-track{

    background:transparent;

}

::-webkit-scrollbar-thumb{

    background:#3a3a3a;

    border-radius:999px;

    border:2px solid transparent;

    background-clip:padding-box;

    transition:background .2s ease;

}

::-webkit-scrollbar-thumb:hover{

    background:rgba(209,26,42,.65);

    background-clip:padding-box;

}

::-webkit-scrollbar-corner{

    background:transparent;

}

html{

    scrollbar-width:thin;

    scrollbar-color:rgba(209,26,42,.55) transparent;

    scroll-behavior: auto;

}

/* ==========================================
   BOOT SCREEN
========================================== */

#boot-screen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(209,26,42,.10),
            transparent 45%
        ),
        var(--bg);

    z-index:9999;

}

#boot-center{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

.boot-branding{

    display:flex;

    flex-direction:column;

    align-items:center;

    transition:
        transform 1s cubic-bezier(.22,.61,.36,1);

}

#boot-logo{

    font-family:"Bebas Neue",sans-serif;

    font-size:5rem;

    font-weight:400;

    letter-spacing:8px;

    line-height:.9;

    color:var(--accent);

    text-shadow:
        0 0 35px rgba(209,26,42,.18);

    opacity:0;

    transition:
        opacity .8s ease;

}

#boot-tagline{

    margin-top:18px;

    color:var(--muted);

    font-size:.95rem;

    letter-spacing:5px;

    text-transform:uppercase;

    opacity:0;

    transition:
        opacity .8s ease;

}

/* ==========================================
   WELCOME SCREEN
========================================== */

#welcome-layer{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

#welcome-content{

    width:min(520px,90%);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:24px;

    opacity:0;

    transform:translateY(90px);

    transition:
        opacity .55s ease .30s,
        transform .75s cubic-bezier(.22,.61,.36,1) .30s;

}

#welcome-content h2{

    font-size:2.2rem;

    font-weight:700;

}

.welcome-subtitle{

    color:var(--muted);

}

#name-input{

    width:320px;

    padding:18px;

    border:none;

    border-radius:14px;

    background:#1d1d26;

    color:white;

    font-size:1rem;

}

#name-input:focus{

    outline:none;

    box-shadow:
        0 0 0 2px rgba(209,26,42,.35);

}

.welcome-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

    margin-top:28px;

}

#continue-btn{

    min-width:170px;

    padding:14px 24px;

    border:none;

    border-radius:999px;

    background:var(--accent);

    color:white;

    cursor:pointer;

}

#name-error{

    min-height:20px;

    color:#ff7b7b;

    visibility:hidden;

}

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

#boot-logo.visible{
    opacity:1;
}

#boot-tagline.visible{
    opacity:1;
    transition-delay:.35s;
}

#boot-screen.welcome .boot-branding{

    transform:translateY(-260px);

}

#boot-screen.welcome #boot-logo,
#boot-screen.welcome #boot-tagline{

    opacity:1;

}

#boot-screen.welcome #welcome-content{

    opacity:1;

    transform:translateY(0);

}

#boot-screen.fade-out{

    opacity:0;

    transition:opacity .7s cubic-bezier(.22,.61,.36,1);

}

/* ==========================================
   APP VISIBILITY
========================================== */

#app{

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

#app.show{

    opacity:1;

    visibility:visible;

    transform:none;

}

#background-video {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    object-fit: cover;

    z-index: -2;

    pointer-events: none;

    filter:
        brightness(.50)
        blur(4px)
        saturate(.65);

}
.background-overlay {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: rgba(0, 0, 0, 0.55);

    z-index: -1;

    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
}

#background-video.active,
.background-overlay.active {
    opacity: 1;
    visibility: visible;
}

#dashboard-background{
    position:fixed;
    inset:0;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .8s ease,
        visibility .8s;

    z-index:-2;
}

#dashboard-background.show{
    opacity:1;
    visibility:visible;
}