/* =====================================================
   Project Selah
   Version 1.0
===================================================== */

:root{

    --bg:#050505;
    --gold:#c8a96b;
    --gold-soft:rgba(200,169,107,.25);
    --white:#f7f5f2;
    --grey:#c9c9c9;

    --font-title:"Cormorant Garamond",serif;
    --font-body:"Inter",sans-serif;

}

/* =====================================================
   Reset
===================================================== */

*{

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

}

html,
body{

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

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

    font-family:var(--font-body);

}

/* =====================================================
   App
===================================================== */

#app{

    width:100%;
    height:100%;
    position:relative;

}

/* =====================================================
   Screens
===================================================== */

.screen{

    position:absolute;
    inset:0;

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

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    z-index:0;

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

}
/* =====================================================
   Content
===================================================== */

.content{

    width:min(90%,520px);

    text-align:center;

    position:relative;

    z-index:2;

}
/* =====================================================
   Typography
===================================================== */

.title{

    font-family:var(--font-title);

    font-size:3rem;

    font-weight:400;

    letter-spacing:.5px;

    margin-bottom:2rem;

}

.question{

    font-family:var(--font-title);

    font-size:2.4rem;

    font-weight:400;

    margin-bottom:3rem;

    line-height:1.25;

}

.subtitle{

    font-size:1.1rem;

    color:var(--grey);

    margin-top:1rem;

    line-height:1.7;

}

/* =====================================================
   Input
===================================================== */
#nameInput{

    width:280px;

    background:transparent;

    border:none;

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

    color:white;

    font-size:1.1rem;

    text-align:center;

    padding:12px 0;

    outline:none;

    font-family:var(--font-body);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .5s ease,
        border-color .4s ease;

}
#nameInput.show{

    opacity:1;

    visibility:visible;

    display:block;

}
.screen.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    z-index:10;

}
#nameInput:focus{

    border-color:var(--gold);

}

#nameInput::placeholder{

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

}

video{

    width:100%;

    height:100%;

    object-fit:contain;

}

#videoScene{

    background:black;

}

/* =====================================================
   Buttons
===================================================== */

.primary-btn{

    margin-top:2.5rem;

    padding:12px 34px;

    background:transparent;

    color:var(--gold);

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

    border-radius:999px;

    cursor:pointer;

    font-size:.95rem;

    letter-spacing:1px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease,
        opacity .5s ease;

}

.primary-btn:hover{

    background:var(--gold);
    color:#111;

    transform:translateY(-2px);

}

.primary-btn:active{

    transform:translateY(0);

}

/* =====================================================
   Hidden State
===================================================== */

.hidden{

    display:none !important;

}
.show{

    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

}

/* =====================================================
   Golden Light
===================================================== */

.gold-dot{

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--gold);

    box-shadow:
        0 0 15px var(--gold),
        0 0 45px var(--gold-soft),
        0 0 90px rgba(200,169,107,.15);

    animation:breathe 3.5s ease-in-out infinite;

}

@keyframes breathe{

    0%{

        transform:scale(.9);

        opacity:.65;

    }

    50%{

        transform:scale(1.25);

        opacity:1;

    }

    100%{

        transform:scale(.9);

        opacity:.65;

    }

}

/* =====================================================
   Fade Utilities
===================================================== */

.fade-in{

    animation:fadeIn .8s ease forwards;

}

.fade-out{

    animation:fadeOut .8s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

/* =====================================================
   Mobile
===================================================== */

@media(max-width:768px){

    .title{

        font-size:2.4rem;

    }

    .question{

        font-size:2rem;

    }

    #nameInput{

        width:220px;

    }

    .primary-btn{

        padding:11px 28px;

        font-size:.9rem;

    }

}

#birthdayVideo{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}