/******************************************************************************
 * Fichier : welcome.css
 * Projet  : SkinZenitude - welcome
 ******************************************************************************/

html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#000;

}

body{

    display:flex;

    justify-content:center;
    align-items:center;

}

#welcome{

    display:flex;

    justify-content:center;
    align-items:center;

    width:100vw;
    height:100vh;

}

#scene{

    position:relative;

    width:fit-content;
    height:fit-content;

    max-width:96vw;
    max-height:96vh;

}

#background{

    display:block;

    max-width:96vw;
    max-height:96vh;

    width:auto;
    height:auto;

}

/* ==========================================================
   Portes
   ========================================================== */

.door{

    position:absolute;

    display:block;

    box-sizing:border-box;

    cursor:pointer;

    background:transparent;

    transition:
        background .25s ease,
        box-shadow .25s ease;

}*/

#hotspots{

    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

    z-index:10;

}

.door{

    position:absolute;

    z-index:20;

    display:block;

    box-sizing:border-box;

    cursor:pointer;

    background:transparent;

    transition:
        background .25s ease,
        box-shadow .25s ease;

}

.door:hover{

    background:transparent;

    box-shadow:

        inset 0 0 40px rgba(255,170,255,.90),

        0 0 20px rgba(255,220,120,.85),

        0 0 50px rgba(255,220,120,.55);

}

#door-fr{

    left:14%;
    top:26%;

    width:9.5%;
    height:34%;

}

#door-en{

    left:76%;
    top:26%;

    width:9.5%;
    height:34%;

}

/* ==========================================================
   Paillasson
   ========================================================== */

#welcome-mat{

    position:absolute;

    /* À ajuster après un premier essai */
    left:37%;
    top:91%;

    width:26%;
    height:7%;

    display:flex;

    justify-content:center;
    align-items:center;

    pointer-events:none;

}

#welcome-text{

    opacity:0;

    transition:opacity .35s ease;

    font-family:"Cormorant Garamond", Garamond, serif;

    font-size:clamp(1.35rem,2vw,2rem);

    font-style:italic;

    font-weight:500;

    letter-spacing:.02em;

    color:#d3bc8a;

    -webkit-text-stroke:0.7px rgba(185,155,225,.85);
    
    text-shadow:
        0 1px 1px rgba(45,30,15,.45);

    user-select:none;

    white-space:nowrap;

}
/* ==========================================================
   Saphyia
   ========================================================== */

.hotspot{

    position:absolute;

    display:block;

    cursor:pointer;

    background:transparent;

}

#saph{

    left:44%;
    top:22%;

    width:12%;
    height:55%;

}