/* ===========================
   НЕОМОНАХ v0.1
   =========================== */

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

html,
body{

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

    background:#050505;
    color:#fff;

    font-family:'Inter',sans-serif;

}


/* ===========================
   BACKGROUND
   =========================== */

#background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-10;

}


/* Мягкий свет */

.gradient{

    position:absolute;

    width:140vw;
    height:140vw;

    left:50%;
    top:45%;

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

    background:
    radial-gradient(circle,
    rgba(255,255,255,.06),
    rgba(0,0,0,0) 70%);

    animation:breath 12s ease-in-out infinite;

}



/* Шум */

.noise{

    position:absolute;

    inset:0;

    opacity:.05;

    background-image:
    repeating-radial-gradient(circle at center,
    rgba(255,255,255,.05) 0px,
    transparent 2px,
    transparent 4px);

}



/* Частицы */

#particles{

    position:absolute;

    inset:0;

}



/* ===========================
   HERO
   =========================== */

.hero{

    width:100%;
    height:100vh;

    display:flex;

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

    text-align:center;

    position:relative;

    z-index:2;

}



.hero-content{

    width:min(1400px,95vw);

}



.subtitle{

    color:#888;

    text-transform:uppercase;

    letter-spacing:7px;

    font-size:12px;

    margin-bottom:30px;

}



h1{

    font-family:'Cinzel',serif;

    font-size:clamp(60px,9vw,140px);

    white-space:nowrap;

    letter-spacing:8px;

    font-weight:700;

    letter-spacing:12px;

    line-height:1;

    margin-bottom:25px;

    user-select:none;

}



/* Каждая буква */

h1 span{

    display:inline-block;

    opacity:0;

    transform:translateY(40px);

}



/* Линия */

.line{

    width:120px;

    height:1px;

    background:#888;

    margin:30px auto;

}



/* Текст */

.description{

    color:#bcbcbc;

    font-size:18px;

    line-height:1.8;

    margin-bottom:55px;

}



/* Кнопка */

#enterButton{

    background:none;

    border:1px solid rgba(255,255,255,.25);

    color:white;

    padding:18px 52px;

    letter-spacing:6px;

    cursor:pointer;

    transition:.4s;

    font-size:14px;

    text-transform:uppercase;
	
	text-decoration:none;
	
    display:inline-block;

}



#enterButton:hover{

    background:white;

    color:black;

    box-shadow:

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

}



/* ===========================
   Scroll
   =========================== */

.scroll{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

}



.scroll span{

    width:2px;

    height:60px;

    display:block;

    background:linear-gradient(transparent,#fff);

    animation:scroll 2s infinite;

}



/* ===========================
   PRELOADER
   =========================== */

#preloader{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:999;

}



.loader-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.15);

    border-top:1px solid white;

    animation:rotate 2s linear infinite;

}



.loader-text{

    margin-top:35px;

    letter-spacing:8px;

    font-size:14px;

    color:#aaa;

}



/* ===========================
   Animations
   =========================== */

@keyframes rotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



@keyframes breath{

0%{

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

opacity:.25;

}

50%{

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

opacity:.45;

}

100%{

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

opacity:.25;

}

}



@keyframes scroll{

0%{

opacity:0;

transform:translateY(-15px);

}

50%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(15px);

}

}



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

@media(max-width:768px){

.subtitle{

letter-spacing:4px;

font-size:10px;

}

.description{

font-size:15px;

}

#enterButton{

padding:16px 36px;

letter-spacing:4px;

}

}