.stage-area{
overflow: hidden;
margin: 0 -1.5rem 6rem;
}
.stage-area:after{
content: '';
pointer-events: none;
position: absolute;inset: auto 0 0;
height: 15rem;
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,5) 35%, rgba(255,255,255,0) 100%);
}
h1, .stage-area .intro p{ 
cursor: pointer;
text-align: center;
color: hsl(220 30% 30% / 1);
}
.stage-area.init h1{ 
cursor: auto;
pointer-events: none;
}
h1{
position: absolute;top: 10vh;left: 0;z-index: 9;
min-width: 100%;
max-width: 100vw;
font-size: 5rem;
text-shadow: 0 3px 5px #fff;
transition: all .5s;
}
@media (min-width: 992px){
h1{
top: 20vh;left: 10rem;
min-width: calc(100% - (2 * 10rem));
font-size: 8rem;
}
}
.stage-area.init h1{
top: 3rem;
font-size: 3.4rem;
}
@media (min-width: 992px){
.stage-area.init h1{
top: 7rem;
min-width: 0;
}
}
.stage-area .intro{
opacity: 1;
position: absolute;left: 50%;bottom: 10rem;z-index: 1;
width: 100%;
max-width: calc(100% - (2 * 8rem));
transform: translateX(-50%);
transition: all .4s;
}
@media (max-width: 550px), (max-height: 600px){
.stage-area .intro{display: none;}
}
@media (min-width: 768px){
.stage-area .intro{max-width: calc(100% - (2 * 10rem));}
}
@media (min-width: 992px){
.stage-area .intro{max-width: 80vw;}
}
@media (min-width: 2000px){
.stage-area .intro{max-width: 50vw;}
}
.stage-area.init .intro{
opacity: 0;
bottom: -30vh;
min-width: 0;
}
.stage-area .intro > div{
background: rgba(255,255,255,.4);
padding:1.5rem;
backdrop-filter: blur(15px);
box-shadow: 0 3px 6px rgb(0 0 0 / 33%);
margin: auto;
}
.stage-area .intro p{
font-size: 1.7rem;
}
#turntable{
position: relative;
height: 80vh;
overflow: hidden;
}
@media (min-width: 1571px){
#turntable{height: 88vh;}
}
.anchor-nav-big{
position: relative;z-index: 3;
margin-top: -14rem;
}
@media (min-width: 768px){
.anchor-nav-big{
margin-top: -12rem;
}
}
.socialshare{
display: none;
}