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

* {
    padding: 0;
    margin: 0;
}

.container-main {
    height: 100vh;
    width: 100vw;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    background: #050a30;
    position: relative;
}



.header-main {
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.footer {
    height: 5%;
    display: flex;
    justify-content: space-around;
    padding: 0 6px;
    opacity: 0;
    animation: opacity-1 1s 3s forwards;
    /* animation: ; */
}

.foot-content {
    font-size: 1rem;
    /* display: flex; */
    align-items: center;
    font-family: 'Raleway', sans-serif;
    justify-content: center;
    color: #f1f1f1;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 30%;
    z-index: 2;
}

.socials {
    /* height: 100%; */
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 0 auto;
}

.socials a {
    height: 2rem;
    width: 2rem;
    font-size: 1.2rem;
}

.socials a,
.socials a:visited,
.socials a:active {
    text-decoration: none;
    color: #f5f5f5;
}

.socials a:hover {
    transition: all .2s ease-in;
    transform: translateY(-6px);

}

.content-section {
    height: 100%;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#section-1 {
    width: 100%;
}

#section-2 {
    width: 0%;
}

.content-section#section-1 {
    background: whitesmoke;
    background: #050a30;
    animation: color-change 5s 2s forwards;
    position: relative;
    /* align-items: flex-end; */

}

.content-section#section-2 {
    background: #00a2ff;
}

.base {
    position: absolute;
    bottom: -.8rem;
    height: 1rem;
    background-color: #a06e3c;
    width: 60%;
    animation: opacity-0 500ms 2s forwards;
}

.illustration-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80%;
    width: 80%;
    bottom: calc(-5vh + 1rem);
    /* z-index: 3; */
}

.door-frame {
    height: calc(100% - .6rem);
    aspect-ratio: calc(1/2);
    border: #a06e3c solid .6rem;
    border-bottom-style: none;
    position: relative;
    background: #050a30;
    background: transparent;
    animation: opacity-0 500ms 2s forwards;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

#element::after,
#element::before {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    transition: clip-path 50ms ease-in;
    background-color: #1a1a1a;
}

.text {
    font-size: 5vw;
    position: absolute;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    color: white;
}

#section-1>.text {
    opacity: 0;
    animation: opacity-1 1s 3s forwards;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.door>.knob {
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 45%;
    right: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-shadow: 0 -1px 0 #f4cc9b, 0 1px 0 #a77334, 0 2px 0 #9b6b30, 0 3px 0 #90632d, 0 4px 0 #7a5426, 0 4px 2px #7a5426, 0 0.075em 0.1em rgba(26, 35, 39, 0.3), 0 0.15em 0.3em rgba(222, 153, 69, 0.2);
    background-image: radial-gradient(ellipse farthest-corner at right bottom, white 0%, #F0BB7A 20%, #E8A95B 60%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, white 0%, #F0BB7A 50%, #DE9945 75%, #E8A95B 100%);
}

.knob>.i-knob {
    width: 0.9rem;
    height: 0.9rem;

    border-radius: 50%;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}


.door>.text {
    /* opacity: 1; */
    position: absolute;
    font-size: 3vw;
    /* font-family: 'Abril Fatface', cursive; */
    font-family: 'Raleway', sans-serif;
    color: #ffffff;
    font-weight: bold;
    top: 15%;
}

.sub-text {
    font-family: 'Nunito', sans-serif;
    font-size: 2.95vw;
}

.door {
    height: 100%;
    width: 100%;
    z-index: 3;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom right, #70451b, #49260a);
    transform-origin: left;
    transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-45deg);
    animation-name: door-close;
    animation-duration: 2s;
    /* animation-delay: 2s; */
    /* animation-timing-function: ease-in-out; */
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-fill-mode: forwards;
}


@keyframes color-change {
    100% {
        background: #050a30;
    }
}

@keyframes door-close {
    100% {
        transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(0deg);
    }
}


@keyframes opacity-1 {
    100% {
        opacity: 1;
    }
}

@keyframes opacity-0 {
    100% {
        opacity: 0;
    }
}




.glitch {
    color: rgb(223, 191, 191);
    position: relative;
    /* font-size: 9vw; */
    /* margin: 70px 200px; */
    animation: glitch 5s 5s infinite;
    /* text-align: center; */
    width: fit-content;
    font-family: 'Raleway', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    font-size: 5vw;
}

.sub-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 3rem 0 0 0;
}

.sub-text {
    font-family: 'Nunito', sans-serif;
    font-size: 2.95vw;
    margin: 0.5rem 0;
}



/* .glitch[data-inner-text='none']::before{
    right: calc(50%-2px);

}
.glitch[data-inner-text='none']::after{
    right:  calc(-50% + 2px);

} */

.glitch::before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: -5px 0 magenta;
    /* background: black; */
    overflow: hidden;
    top: 0;
    animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}

.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -5px 0 lightgreen;
    /* background: black; */
    overflow: hidden;

    top: 0;
    animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}

@keyframes glitch {
    1% {
        transform: rotateX(10deg) skewX(90deg);
    }

    2% {
        transform: rotateX(0deg) skewX(0deg);
    }
}

@keyframes noise-1 {
    3.3333333333% {
        clip-path: inset(73px 0 17px 0);
    }

    6.6666666667% {
        clip-path: inset(91px 0 10px 0);
    }

    10% {
        clip-path: inset(73px 0 9px 0);
    }

    13.3333333333% {
        clip-path: inset(38px 0 60px 0);
    }

    16.6666666667% {
        clip-path: inset(30px 0 57px 0);
    }

    20% {
        clip-path: inset(32px 0 53px 0);
    }

    23.3333333333% {
        clip-path: inset(89px 0 4px 0);
    }

    26.6666666667% {
        clip-path: inset(35px 0 22px 0);
    }

    30% {
        clip-path: inset(56px 0 34px 0);
    }

    33.3333333333% {
        clip-path: inset(26px 0 72px 0);
    }

    36.6666666667% {
        clip-path: inset(97px 0 3px 0);
    }

    40% {
        clip-path: inset(77px 0 8px 0);
    }

    43.3333333333% {
        clip-path: inset(16px 0 8px 0);
    }

    46.6666666667% {
        clip-path: inset(98px 0 1px 0);
    }

    50% {
        clip-path: inset(8px 0 52px 0);
    }

    53.3333333333% {
        clip-path: inset(93px 0 1px 0);
    }

    56.6666666667% {
        clip-path: inset(28px 0 30px 0);
    }

    60% {
        clip-path: inset(55px 0 16px 0);
    }

    63.3333333333% {
        clip-path: inset(21px 0 48px 0);
    }

    66.6666666667% {
        clip-path: inset(42px 0 51px 0);
    }

    70% {
        clip-path: inset(55px 0 8px 0);
    }

    73.3333333333% {
        clip-path: inset(33px 0 43px 0);
    }

    76.6666666667% {
        clip-path: inset(72px 0 4px 0);
    }

    80% {
        clip-path: inset(69px 0 1px 0);
    }

    83.3333333333% {
        clip-path: inset(93px 0 6px 0);
    }

    86.6666666667% {
        clip-path: inset(20px 0 65px 0);
    }

    90% {
        clip-path: inset(8px 0 20px 0);
    }

    93.3333333333% {
        clip-path: inset(65px 0 31px 0);
    }

    96.6666666667% {
        clip-path: inset(74px 0 1px 0);
    }

    100% {
        clip-path: inset(33px 0 12px 0);
    }
}

@keyframes noise-2 {
    0% {
        clip-path: inset(100px 0 1px 0);
    }

    3.3333333333% {
        clip-path: inset(90px 0 11px 0);
    }

    6.6666666667% {
        clip-path: inset(68px 0 14px 0);
    }

    10% {
        clip-path: inset(74px 0 23px 0);
    }

    13.3333333333% {
        clip-path: inset(90px 0 8px 0);
    }

    16.6666666667% {
        clip-path: inset(10px 0 33px 0);
    }

    20% {
        clip-path: inset(40px 0 9px 0);
    }

    23.3333333333% {
        clip-path: inset(37px 0 12px 0);
    }

    26.6666666667% {
        clip-path: inset(37px 0 38px 0);
    }

    30% {
        clip-path: inset(6px 0 15px 0);
    }

    33.3333333333% {
        clip-path: inset(22px 0 61px 0);
    }

    36.6666666667% {
        clip-path: inset(23px 0 41px 0);
    }

    40% {
        clip-path: inset(15px 0 16px 0);
    }

    43.3333333333% {
        clip-path: inset(85px 0 13px 0);
    }

    46.6666666667% {
        clip-path: inset(1px 0 46px 0);
    }

    50% {
        clip-path: inset(83px 0 17px 0);
    }

    53.3333333333% {
        clip-path: inset(79px 0 17px 0);
    }

    56.6666666667% {
        clip-path: inset(59px 0 28px 0);
    }

    60% {
        clip-path: inset(13px 0 5px 0);
    }

    63.3333333333% {
        clip-path: inset(43px 0 12px 0);
    }

    66.6666666667% {
        clip-path: inset(57px 0 40px 0);
    }

    70% {
        clip-path: inset(84px 0 10px 0);
    }

    73.3333333333% {
        clip-path: inset(77px 0 11px 0);
    }

    76.6666666667% {
        clip-path: inset(29px 0 46px 0);
    }

    80% {
        clip-path: inset(21px 0 20px 0);
    }

    83.3333333333% {
        clip-path: inset(9px 0 1px 0);
    }

    86.6666666667% {
        clip-path: inset(45px 0 17px 0);
    }

    90% {
        clip-path: inset(85px 0 10px 0);
    }

    93.3333333333% {
        clip-path: inset(90px 0 2px 0);
    }

    96.6666666667% {
        clip-path: inset(91px 0 8px 0);
    }

    100% {
        clip-path: inset(94px 0 3px 0);
    }
}

.scanlines {
    overflow: hidden;
    mix-blend-mode: difference;
}



.brand-container{
    margin: 0.6rem auto;
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-logo{
    width: 85%;
}

.scanlines::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background: repeating-linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.05) .5%,
            transparent 1%);

    animation: fudge 7s ease-in-out alternate infinite;
}


@keyframes fudge {
    from {
        transform: translate(0px, 0px);
    }

    to {
        transform: translate(0px, 2%);
    }
}

.glitch,
.glow {
    color: #dfbfbf;
    position: relative;
    /* font-size: 9vw; */
    /* margin: 70px 200px;
    */
    animation: glitch 5s 5s infinite;
}

.glow {
    text-shadow: 0 0 1000px #dfbfbf;
    color: transparent;
    position: absolute;
    top: 0;
}


.subtitle {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    font-size: .8vw;
    color: rgba(165, 141, 141, .4);
    text-transform: uppercase;
    letter-spacing: 1em;
    text-align: center;
    position: absolute;
    left: 17%;
    animation: glitch-2 5s 5.02s infinite;
}

@keyframes glitch-2 {
    1% {
        transform: rotateX(90deg) skewX(70deg);
    }

    2% {
        transform: rotateX(0deg) skewX(0deg);
    }
}



@media (max-width: 500px) {
    .content-main {
        flex-direction: column;
        justify-content: space-around;
    }

    .header-main>img{
        width: 100%;
    }

    #section-1>.text, .footer{
        animation: opacity-1 1s forwards;
    }

    .glitch{
        font-size: 9vw;
    }

    .sub-text{
        width: 95%;
        text-align: center;
    }

    
    .illustration-container{
        display: none;
    }
    .base{
        width: 80%;
    }

    .door-frame{
        height: 80%;
    }

    .content-main {
        height: 80%;
    }

    .footer {
        height: 10%;
        flex-direction: column-reverse;
    }

    .foot-content:nth-child(1) {
        display: none;
    }

    /* .foot-content:nth-child(2){
      display: flex;
      align-items: center;
      justify-content: center;
    } */
    .foot-content {
        width: 100%;
        height: 45%;
    }

    .socials a {
        height: 95%;
        aspect-ratio: 1;
    }

    .left {
        height: 55%;
    }

    .left .centered {
        height: 100%;
    }

    .split {
        width: 100%;
    }

    .left video {
        height: 100%;
    }

    .right {
        height: 40%;
    }

    .content-ls {
        display: none;
    }

    .content-ms {
        display: flex;
        font-size: 5rem;
    }
    
    .brand-container{
        width: 80%;
    }
    .brand-logo{
        width: 90%;
    }

}