@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&display=swap');

:root {
	--primary: #10b981;
	--dark: #070f17;
	--scrollTOP: 0px;
	--transition: transform .75s cubic-bezier(.075, 0.5, 0, 1);
}

body, html {
	margin: 0;
	padding: 0;
	background-color: var(--dark);
	color: #e2e8f0;
	font-family: 'Raleway', sans-serif;
	overflow-x: hidden;
}

/* --- ВЕРХНИЙ ЯРУС: ПАРАЛЛАКС ЛЕСА --- */
.main-header {
	position: relative;
	height: 100vh;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.layer {
	position: absolute;
	width: 100%;
	height: 115%;
	top: -5%;
	background-size: cover;
	background-position: center;
	will-change: transform;
	transition: var(--transition);
}

.layer__base {
	background-image: url('../img/layer-base.png');
	z-index: 0;
	transform: translate3d(0, calc(var(--scrollTOP) / 1.6), 0);
}

.layer__header {
	z-index: 1; /* В обычном состоянии текст прячется за стволами деревьев */
	text-align: center;
	margin-top: -10vh;
	transform: translate3d(0, calc(var(--scrollTOP) / 2), 0);
	will-change: transform;
	transition: var(--transition);
	color: #e7e7e0;
	text-shadow: 0 0 15px #9e7d35;
}


.layer__header:hover {
	z-index: 10; /* Временно перекрываем вообще все слои леса (z-index 2 и 3) */
}

/* --- БАЗОВЫЕ СТИЛИ ДЛЯ ШИРОКИХ ЭКРАНОВ И ПК --- */
.layers__middle {
    background-image: url('../img/layer-middle.png');
    z-index: 2; 
    transform: translate3d(0, calc(var(--scrollTOP) / 2.5), 0);
    pointer-events: none; 
    /* Мы убрали отсюда background-position: bottom */
} 

.layers__front {
    background-image: url('../img/layer-front.png');
    z-index: 3;
    transform: translate3d(0, calc(var(--scrollTOP) / 5.7), 0);
    pointer-events: none; 
    /* Мы убрали отсюда top и background-position */
}

/* --- МАГИЯ ТОЛЬКО ДЛЯ УЗКИХ ЭКРАНОВ И ТЕЛЕФОНОВ --- */
@media (max-width: 768px), (max-aspect-ratio: 1/1) {
    .layers__middle {
        background-position: bottom;
        height: 125%;
        top: -10%;
    }
    .layers__front {
        background-position: bottom;
    }
}

.layers__title {
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 900;
	letter-spacing: 0.1em;
	margin-bottom: 0.5rem;
	line-height: 1;
}

.layers__caption {
	font-size: clamp(1rem, 2vw, 1.5rem);
	letter-spacing: 0.3em;
	color: var(--primary);
	text-transform: uppercase;
}

/* --- СРЕДНИЙ И НИЖНИЙ ЯРУСЫ --- */
.main-article {
	position: relative;
	z-index: 10;
	background-color: var(--dark);
	min-height: 50vh;
	box-shadow: 0 -20px 50px rgba(7, 15, 23, 1);
}

.dungeon-section {
	position: relative;
	min-height: 100vh;
	background-image: url('../img/dungeon.jpg'), linear-gradient(to bottom, #070f17, #000000);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ground-layer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	background-image: url('../img/ground.png'), linear-gradient(to top, #000 20%, transparent);
	background-size: cover;
	background-position: top center;
	z-index: 11;
}

/* ==========================================
   Светлячки (Волшебный Лес)
   ========================================== */
.fireflies-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1; /* Находятся над дальним фоном, но под деревьями среднего плана */
	pointer-events: none; /* Пропускают клики сквозь себя, чтобы работала кнопка */
	overflow: hidden;
}

.firefly {
	position: absolute;
	width: 3px;
	height: 3px;
	background-color: #eaff00; /* Яркое ядро светлячка */
	border-radius: 50%;
	box-shadow: 0 0 8px 2px #eaff00, 0 0 15px #eaff00; /* Неоновое свечение */
	opacity: 0; /* Прозрачные до запуска GSAP-анимации */
}