/* =====================================================
   SANDRASAGRA.ORG
   Museum-grade genealogy interface
   ===================================================== */


/* -----------------------------------------------------
   GLOBAL
   ----------------------------------------------------- */


html,
body {

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    overflow:hidden;

    background:#020204;

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

    color:white;

}



* {

    box-sizing:border-box;

}



/* -----------------------------------------------------
   GRAPH CANVAS
   ----------------------------------------------------- */


#graph {

    position:absolute;

    inset:0;

    z-index:1;

}



svg {

    width:100%;
    height:100%;

}



/* -----------------------------------------------------
   ATMOSPHERIC VIGNETTE
   ----------------------------------------------------- */


#vignette {

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:2;


    background:

        radial-gradient(
            circle at center,
            transparent 25%,
            rgba(0,0,0,.45) 65%,
            rgba(0,0,0,.9) 100%
        );

}



/* -----------------------------------------------------
   HEADER
   ----------------------------------------------------- */


#intro {

    position:absolute;

    top:50%;
    left:50%;

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


    text-align:center;

    z-index:5;


    transition:

        all 1.5s cubic-bezier(.2,.8,.2,1);

}



.title {

    font-size:56px;

    font-weight:200;

    letter-spacing:14px;

    white-space:nowrap;

    text-shadow:

        0 0 20px rgba(255,255,255,.35);


    transition:.8s ease;

}



.subtitle {

    margin-top:18px;

    font-size:24px;

    letter-spacing:5px;

    font-weight:300;

    opacity:.75;

}



/* focused state */

body.focused #intro {

    top:45px;

    transform:
        translateX(-50%);

}



body.focused .title {

    font-size:34px;

    letter-spacing:8px;

}



body.focused .subtitle {

    font-size:18px;

    opacity:.55;

}



/* -----------------------------------------------------
   SEARCH
   ----------------------------------------------------- */


#search-container {

    position:absolute;

    bottom:45px;

    left:50%;

    transform:
        translateX(-50%);


    z-index:10;

}



#search {

    width:360px;

    padding:

        15px 25px;


    border-radius:40px;

    border:none;

    outline:none;


    background:

        rgba(255,255,255,.10);


    backdrop-filter:

        blur(12px);


    color:white;


    font-size:18px;

    text-align:center;


    box-shadow:

        0 0 30px rgba(255,255,255,.08);


    transition:.3s ease;

}



#search:focus {

    background:

        rgba(255,255,255,.18);


    box-shadow:

        0 0 40px rgba(255,255,255,.25);

}



#search::placeholder {

    color:

        rgba(255,255,255,.55);

}



/* -----------------------------------------------------
   SEARCH RESULTS
   ----------------------------------------------------- */


#results {

    display:none;

    position:absolute;

    bottom:70px;

    width:360px;


    max-height:300px;

    overflow-y:auto;


    background:

        rgba(10,10,15,.85);


    backdrop-filter:

        blur(15px);


    border-radius:15px;


    box-shadow:

        0 0 40px rgba(0,0,0,.6);


}



.result-item {

    padding:

        14px 20px;


    cursor:pointer;


    border-bottom:

        1px solid rgba(255,255,255,.08);


    font-size:16px;


    transition:.25s ease;

}



.result-item:hover {

    background:

        rgba(255,255,255,.15);

}



/* -----------------------------------------------------
   PERSON INFORMATION PANEL
   ----------------------------------------------------- */


#panel {

    position:absolute;


    right:40px;

    top:50%;


    transform:

        translateY(-50%);


    width:320px;


    padding:25px;


    background:

        rgba(255,255,255,.08);


    backdrop-filter:

        blur(18px);


    border-radius:20px;


    z-index:8;


    opacity:0;


    pointer-events:none;


    transition:

        .8s ease;

}



body.person-selected #panel {

    opacity:1;

}



#person-name {

    font-size:26px;

    letter-spacing:2px;

}



#person-details {

    margin-top:15px;

    line-height:1.6;

    opacity:.75;

}



/* -----------------------------------------------------
   CONTROL BUTTONS
   ----------------------------------------------------- */


#controls {

    position:absolute;

    left:30px;

    bottom:35px;


    z-index:10;


    display:flex;

    gap:12px;

}



button {

    padding:

        10px 18px;


    border-radius:25px;


    border:none;


    background:

        rgba(255,255,255,.12);


    color:white;


    cursor:pointer;


    backdrop-filter:

        blur(10px);


    transition:.3s ease;

}



button:hover {

    background:

        rgba(255,255,255,.25);

}



/* -----------------------------------------------------
   D3 GRAPH ELEMENTS
   ----------------------------------------------------- */


line {

    stroke:

        rgba(255,255,255,.35);

}



text {

    pointer-events:none;

    fill:white;

    font-size:14px;

}



/* nodes */

circle {

    stroke:

        rgba(255,255,255,.5);


    stroke-width:

        1px;


    transition:

        .3s ease;

}



circle:hover {

    stroke:white;

    stroke-width:3px;

}



/* male */

.male {

    fill:#8ec5ff;

}



/* female */

.female {

    fill:#ffb6d9;

}



/* -----------------------------------------------------
   SCROLLBAR
   ----------------------------------------------------- */


::-webkit-scrollbar {

    width:8px;

}


::-webkit-scrollbar-thumb {

    background:

        rgba(255,255,255,.25);

    border-radius:10px;

}