/* ==================================================
   Replay Theater
   Version 2.0.1
   Foundation Build
================================================== */

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

:root{
--background:#050505;
--text:#f5f5f5;
--muted:#bdbdbd;
--accent:#e10600;
--content-width:700px;
--video-width:88vw;
--video-max-width:1300px;
--section-spacing:180px;
--radius:18px;
}

html{scroll-behavior:smooth;}

body{
background:var(--background);
color:var(--text);
font-family:Arial,Helvetica,sans-serif;
overflow-x:hidden;
position:relative;
}

.background-glow{
position:fixed;
inset:0;
background:radial-gradient(circle at center,rgba(225,6,0,.12),transparent 70%);
pointer-events:none;
z-index:-1;
}

h1{font-size:clamp(4rem,10vw,7rem);letter-spacing:.08em;}
h2{font-size:clamp(2rem,4vw,3rem);font-weight:600;}
p{color:var(--muted);font-size:1.2rem;line-height:1.7;}

.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
padding:40px 30px;
}

.hero-content{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
max-width:800px;
}

.logo{width:110px;margin-bottom:30px;}
.hero h2{margin:20px 0 40px;color:var(--muted);font-weight:400;}

.button{
display:inline-block;
padding:16px 34px;
border:2px solid var(--accent);
border-radius:999px;
color:var(--text);
text-decoration:none;
transition:.25s ease;
}
.button:hover{background:var(--accent);}

.scroll-indicator{font-size:2rem;padding-bottom:24px;opacity:.65;}

.scene-story,
.scene-media{
padding:var(--section-spacing) 30px;
text-align:center;
}

.scene-content{
max-width:var(--content-width);
margin:0 auto;
}

.scene-content h2{margin-bottom:24px;}
.scene-content p+p{margin-top:10px;}

.product-showcase{
margin-top:60px;
display:flex;
justify-content:center;
}

.product-showcase video{
width:var(--video-width);
max-width:var(--video-max-width);
border-radius:var(--radius);
display:block;
}

@media (max-width:768px){
:root{
--section-spacing:120px;
--video-width:94vw;
}
p{font-size:1.05rem;}
.logo{width:90px;}
}

/* ==========================================
   ENTER REPLAY
========================================== */

.enter-replay-image{

    width:560px;
    max-width:90vw;

    display:block;

    margin:0 auto;

    transition:
        transform .25s ease,
        filter .25s ease;

    cursor:pointer;

}

.enter-replay-image:hover{

    transform:scale(1.02);

    filter:brightness(1.08);

    box-shadow:0 0 40px rgba(225,6,0,.25);

}

.footer{

    padding:80px 0 40px;

    display:flex;
    justify-content:center;

}

.discord-icon{

    width:42px;
    height:42px;

    opacity:.75;

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

}

.discord-icon:hover{

    opacity:1;

    transform:scale(1.1);

}

/* Animations reserved for v2.0.2 */