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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    font-family:'Cormorant Garamond',serif;

    background:#1A1816;

}

#experience{

    width:100%;
    height:100%;

}

/* ===========================
   ESCENA
=========================== */

.scene{

    width:100vw;
    height:100vh;

}

.scene-candle{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    overflow:hidden;

    background:#1A1816;

}

/* ===========================
   LUZ
=========================== */

.light{

    position:absolute;

    left:50%;
    top:170px;

    transform:translateX(-50%);

    width:0;
    height:0;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(255,210,120,.40),
        rgba(255,210,120,.12),
        transparent 70%
    );

    pointer-events:none;

}

/* ===========================
   VELA
=========================== */

.candle-container{

    position:absolute;

    top:120px;

    z-index:20;

}

.candle{

    position:relative;

    width:95px;

    height:240px;

    cursor:pointer;

}

.body{

    position:absolute;

    bottom:0;

    width:95px;

    height:190px;

    border-radius:12px;

    background:#F7F3EB;

    box-shadow:
        inset 0 0 15px rgba(255,255,255,.4),
        0 15px 30px rgba(0,0,0,.35);

}

.wick{

    position:absolute;

    left:50%;

    top:35px;

    transform:translateX(-50%);

    width:4px;

    height:22px;

    background:#2B2B2B;

}

.flame{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%) scale(.2);

    width:24px;

    height:38px;

    opacity:0;

    border-radius:50%;

    background:radial-gradient(circle,
        #FFF6B0,
        #FFD65C,
        #F59E0B);

}

/* ===========================
   TEXTO
=========================== */

.message{

    position:absolute;

    bottom:140px;

    width:90%;

    text-align:center;

    color:#E9DDCF;

    font-size:2.2rem;

    line-height:1.3;

}

/* ===========================
   SOBRE
=========================== */

.envelope{

    position:absolute;

    left:50%;

    top:50%;

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

    width:320px;

    height:205px;

    opacity:0;

    z-index:15;

}

/* Parte trasera */

.envelope-back{

    position:absolute;

    width:100%;

    height:100%;

    background:#EFE4D5;

    border-radius:8px;

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

/* Carta */

.envelope-letter{

    position:absolute;

    left:18px;

    top:18px;

    width:284px;

    height:175px;

    background:#FFFDFB;

    border-radius:5px;

    z-index:2;

}

/* Solapa */

.envelope-front{

    position:absolute;

    bottom:0;

    width:100%;

    height:105px;

    background:#E7DCCD;

    clip-path:polygon(0 100%,50% 12%,100% 100%);

    transform-origin:top center;

    transform-style:preserve-3d;

    z-index:4;

}

/* Sello */

.seal{

    position:absolute;

    left:50%;

    top:68px;

    transform:translateX(-50%);

    width:42px;

    height:42px;

    border-radius:50%;

    background:#B44D57;

    cursor:pointer;

    z-index:5;

    box-shadow:0 8px 18px rgba(0,0,0,.20);

}

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

@media(max-width:480px){

    .envelope{

        width:300px;

        height:190px;

    }

    .envelope-letter{

        width:264px;

        height:160px;

    }

    .message{

        font-size:2rem;

    }

}