/* плавное появление страницы */

body{
margin:0;
background:black;
animation:fadein 3s ease;
}

/* контейнер сцены */

.scene{
position:relative;
width:100%;
overflow:hidden;
line-height:0;
}

/* картинки */

.bg,
.bg2{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
display:block;
opacity:0;
transition:opacity 2s ease;
}

.bg{
opacity:1;
position:relative;
}

/* переключение сцен */

.scene.active .bg{
opacity:0;
}

.scene.active .bg2{
opacity:1;
}

/* кнопки */

.play1,
.play2{
position:absolute;
transform:translate(-50%,-50%);
width:4%;
height:4%;
cursor:pointer;
border-radius:50%;
animation:playpulse 2.5s infinite;
}

/* кнопка сцена 1 */

.play1{
top:78.3%;
left:50.2%;
}

/* кнопка сцена 2 */

.play2{
top:88.2%;
left:50.2%;
opacity:0;
}

/* переключение кнопок */

.scene.active .play1{
opacity:0;
}

.scene.active .play2{
opacity:1;
}

/* увеличение */

.play1:hover,
.play2:hover{
transform:translate(-50%,-50%) scale(1.1);
}

/* свечение сцена 1 */

.light{
z-index:2;
position:absolute;
top:18%;
left:50%;
transform:translate(-50%,-50%);
width:25vw;
height:25vw;
border-radius:50%;
background:radial-gradient(circle, rgba(255,200,100,0.6), transparent 70%);
animation:glow 5s infinite;
}

/* свечение сцена 2 */

.light2{
z-index:2;
position:absolute;
top:30%;
left:50%;
transform:translate(-50%,-50%);
width:25vw;
height:25vw;
border-radius:50%;
background:radial-gradient(circle, rgba(255,200,100,0.6), transparent 70%);
animation:glow 5s infinite;
opacity:0;
}

/* переключение свечения */

.scene.active .light{
opacity:0;
}

.scene.active .light2{
opacity:1;
}

audio{
display:none;
}

/* анимации */

@keyframes playpulse{

0%{
box-shadow:0 0 100px rgba(255,200,100,0.3);
}

50%{
box-shadow:0 0 10px rgba(255,200,100,0.9);
}

100%{
box-shadow:0 0 100px rgba(255,200,100,0.3);
}

}

@keyframes glow{

0%{opacity:0.3;}
50%{opacity:0.7;}
100%{opacity:0.3;}

}

@keyframes fadein{

0%{opacity:0;}
100%{opacity:1;}

}