/* Подключение шрифтов */

@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: 400;
}

@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: 700;
}

@font-face {
font-family: 'Montserrat';
src: url('fonts/Montserrat-Light.ttf') format('truetype');
font-weight: 300;
}


/*
Основные стили страницы
- убираем отступы
- отключаем обычный скролл
- задаем космический фон
*/

html,body{
margin:0;
height:100%;
overflow:hidden;
font-family:'Montserrat',sans-serif;
background: radial-gradient(circle at top,#0b1a3a,#000000);
}


/*
Каждая страница занимает 100% высоты экрана
Контент центрируется
*/

.page{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}


/* Контейнер второй страницы */
.page2 {
    position: relative; /* Обязательно для привязки картинки */
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex; /* Центрирует контент (текст) поверх */
    justify-content: center;
    align-items: center;
}

/* Состояние картинки */
.page-img {
    display: none !important;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    filter: invert(1) brightness(0.3);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
    transition: opacity 1s ease-out, transform 0.7s ease-out;
}

/* Состояние текста и таблицы */
.page-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(30px); /* Смещение вниз для эффекта всплытия */
    /* transition: opacity 1s ease-out 0.5s, transform 0.5s ease-out 0.5s; */
    transition: opacity 1.2s ease-out, transform 0.7s ease-out;

}

/* Классы активации (добавляются через JS) */
.page-img.visible {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
}

.page-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Заголовок */

.title{
font-size:clamp(25px,10vw,70px);
font-weight:700;
color:#e5f2ff;
letter-spacing:7px;
margin-bottom:30px;
}


.title-weather{
font-size:clamp(20px, 4vw, 70px);
font-weight:700;
color:#e5f2ff;
letter-spacing:7px;
margin-bottom:30px;
}

/*
Анимация появления букв
Каждая буква появляется с задержкой
*/

.title span {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    --i: 0;
}

/* Добавляем анимацию только когда у родителя (.title) есть класс .active */
.title.active span {
    animation: fadeInUp 1.4s forwards;
    animation-delay: calc(var(--i) * 0.10s);
}

.title span:nth-child(1){--i:0;}
.title span:nth-child(2){--i:1;}
.title span:nth-child(3){--i:2;}
.title span:nth-child(4){--i:3;}
.title span:nth-child(5){--i:4;}
.title span:nth-child(6){--i:5;}
.title span:nth-child(7){--i:6;}


/* Анимация подъема текста */

@keyframes fadeInUp{
to{
opacity:1;
transform:translateY(0);
}
}


/* Ограничения для картинки */

img{
max-width:90vw;
max-height:90vh;
}



/* label img {
  filter: brightness(1);
  filter: grayscale(0%);
  transition: filter 0.5s ease;
}

label img:hover {
  filter: brightness(1);
  filter: grayscale(0%);
} */


/* Подзаголовок */

.subtitle{
font-size:clamp(16px,4vw,25px);
font-weight:300;
color:#7aa7ff;
margin-top:30px;
}

/* Таблица */

  table {
    /* border-collapse: collapse; */
    border-collapse: separate; 
    border-spacing: 30px 0px;
  }
  th, td {
    padding: 8px 12px;
    text-align: left;
    font-size:clamp(16px,3.5vw,35px);
    font-weight:300;
    color:#7aa7ff;
    margin-top:30px;
    line-height: 2;
  }

/*
Скрываем checkbox
Он используется только как логический переключатель
*/

#toggleStars{
display:none;
}


/*
Контейнер звезд
position: fixed — звезды всегда остаются на месте
*/

.stars{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
opacity:0;
transition:0.5s;
}


/*
Когда checkbox активен
звезды становятся видимыми
*/

#toggleStars:checked ~ .stars{
opacity:1;
}


/* Общие стили звезд */

.star{
position:absolute;
background:white;
border-radius:50%;
animation:twinkle linear infinite;
}


/* Анимация мерцания звезд */

@keyframes twinkle{
0%{opacity:0.1;}
50%{opacity:1;}
100%{opacity:0.1;}
}


/*
Позиции и размеры каждой звезды
Это создаёт эффект случайного звездного неба
*/

.star:nth-child(1){top:10%;left:5%;width:2px;height:2px;animation-duration:2s;}
.star:nth-child(2){top:27%;left:15%;width:1px;height:1px;animation-duration:3s;}
.star:nth-child(3){top:14%;left:25%;width:2px;height:2px;animation-duration:4s;}
.star:nth-child(4){top:45%;left:35%;width:1px;height:1px;animation-duration:2.5s;}
.star:nth-child(5){top:90%;left:45%;width:3px;height:3px;animation-duration:5s;}
.star:nth-child(6){top:46%;left:55%;width:2px;height:2px;animation-duration:3.5s;}
.star:nth-child(7){top:70%;left:65%;width:1px;height:1px;animation-duration:4.5s;}
.star:nth-child(8){top:15%;left:40%;width:3px;height:3px;animation-duration:2s;}
.star:nth-child(9){top:20%;left:10%;width:2px;height:2px;animation-duration:3s;}
.star:nth-child(10){top:30%;left:23%;width:3px;height:3px;animation-duration:4s;}
.star:nth-child(11){top:48%;left:90%;width:2px;height:2px;animation-duration:2.5s;}
.star:nth-child(12){top:90%;left:5%;width:1px;height:1px;animation-duration:5s;}
.star:nth-child(13){top:70%;left:95%;width:2px;height:2px;animation-duration:3.5s;}
.star:nth-child(14){top:77%;left:61%;width:2px;height:2px;animation-duration:4.5s;}
.star:nth-child(15){top:75%;left:75%;width:2px;height:2px;animation-duration:3s;}
.star:nth-child(16){top:90%;left:85%;width:1px;height:1px;animation-duration:5s;}
.star:nth-child(17){top:20%;left:50%;width:2px;height:2px;animation-duration:2.8s;}
.star:nth-child(18){top:35%;left:70%;width:1px;height:1px;animation-duration:4.2s;}
.star:nth-child(19){top:60%;left:20%;width:2px;height:2px;animation-duration:3.7s;}
.star:nth-child(20){top:15%;left:80%;width:1px;height:1px;animation-duration:4.5s;}
.star:nth-child(21){top:75%;left:40%;width:2px;height:2px;animation-duration:3.3s;}
.star:nth-child(22){top:50%;left:5%;width:3px;height:3px;animation-duration:5s;}
.star:nth-child(23){top:20%;left:90%;width:1px;height:1px;animation-duration:2.2s;}
.star:nth-child(24){top:80%;left:14%;width:2px;height:2px;animation-duration:3.8s;}
.star:nth-child(25){top:85%;left:30%;width:1px;height:1px;animation-duration:4.8s;}
.star:nth-child(26){top:40%;left:80%;width:2px;height:2px;animation-duration:3.1s;}
.star:nth-child(27){top:10%;left:60%;width:1px;height:1px;animation-duration:2.5s;}