@charset "utf-8";

@font-face {
    font-family: Charm-Regular;
    src: url("font/Charm-Regular.ttf");
}

@font-face {
    font-family: Montserrat-Regular;
    src: url("font/Montserrat-Regular.ttf");
}

html {
    scroll-behavior: smooth;
    font-family: Montserrat-Regular, Arial, sans-serif;
    height: 100%;/*fix for .intro height on mobile*/
}

body {
    height: 100%;/*fix for .intro height on mobile*/
    margin:0;
    background-color: rgb(0, 0, 0);
    background-image: url("img/bg-big-ferns_01.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

body > .curtain {
    position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: black;
  z-index: 10;
}

.web {
    height: 100%;/*fix for .intro height on mobile*/
    color:white;
    margin:0;
    width:100%;
}

.page {
    height: 100%;/*fix for .intro height on mobile*/
}

.intro  {
    position:relative;
    width:100%;
    height:100%;/*instead of 100vh to fix problem on mobile*/
    background-color: rgb(0, 0, 0);
    background-repeat: no-repeat;
    overflow: hidden;
    background-size: cover;
}

.web.ready .introBG {
    width:100%;
    height:100%;
    animation: introScale 3s forwards;
}

@keyframes introScale {
    from {transform: scale(1.1) translate(-3%, 3%);}
    to {transform: scale(1) translate(0%, 0%);}
}

.introBG {
    background-size: cover;
}

.intro > .introTXT {
    position: absolute;
    width:100%;
    bottom:0;
    text-align: center;
}

.intro > .introTXT > div {
    font-size:16vmin;
    width: 100%;
    text-align: center;
    padding-left:5%;
    padding-right:5%;
    box-sizing: border-box;
    margin-bottom:4vh;
}

.intro > .introTXT > div > div:first-child {
    font-family: Charm-Regular, Arial, sans-serif;
    line-height: 148%;
}

.web.ready > .page > .intro > .introTXT > div > div:first-child {
    animation: titleMove 2s;
    animation-fill-mode: forwards;
}

@keyframes titleMove {
    from {transform:translateY(80px); color: rgba(255,255,255,0);}
    to {transform:translateY(0); color: rgba(255,255,255,1);}
}

.intro > .introTXT > div.long {
    font-size:12.5vmin;
}

.intro > .introTXT > div.left {
    text-align: left;
}

.intro > .introTXT > div > div:last-child {
    font-family: Montserrat-Regular, Arial, sans-serif;
    font-size: 0.34em;
    line-height: normal;
    color: rgba(255,255,255,0);
}

.web.ready > .page > .intro > .introTXT > div > div:last-child {
    animation: subtitleMove 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes subtitleMove {
    from {color: rgba(255,255,255,0);}
    to {color: rgba(255,255,255,1);}
}

.intro > .introTXT:last-child > a {
    display:inline-block;
    margin-bottom: 3vmin;
}

.intro > .introTXT:last-child > a > img {
    max-height: 120px;
    height: 16vmin;
    animation: topArrowMove 1s infinite  alternate;
}

@keyframes topArrowMove {
    from {transform: translateY(-5px)}
    to {transform: translateY(0px);}
}



/*STAGE TRANSITION*/ 
.stage {
    position: relative;
    opacity: 0;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
}

.stage > .content {
    transform: translateY(60px);
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
}

.stage.up {
    opacity:1;
}

.stage.up > .content {
    transform: translateY(0);
}

.stage.transition {
    transition: opacity 0.8s;
    transition-delay: 0.1s;
}

.stage.transition > .content {
    transition: transform 1s;
    transition-delay: 0.1s;
}

.anchor.auto {
    position:absolute;
    top:-81px;
}

.gradientUp {
    pointer-events: none;
    z-index: 1;
    position: absolute;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    width: 100%;
    height:40px;
    top:-39px;
}
.gradientDown {
    pointer-events: none;
    z-index: 1;
    position: absolute;
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    width: 100%;
    height:40px;
    bottom:-39px;
}
.gradientLeft {
    z-index: 1;
    position: absolute;
    background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    height: 100%;
    width:40px;
    left:-39px;
}
.gradientRight {
    z-index: 1;
    position: absolute;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    height: 100%;
    width:40px;
    right:-39px;
}



@media only screen and (max-width: 420px) {
    .anchor.auto {
        position:absolute;
        top:-66px;
    }
}

@media only screen and (orientation: landscape) and (max-aspect-ratio:3/2) {
    .intro > .introTXT:last-child > div.long {
        font-size:10vmin;
    }
}