@charset "UTF-8";

@import url("reset.css");
@import url("swiper-bundle.min.css");

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100..700&family=IBM+Plex+Serif:ital,wght@0,400;1,500&display=swap');

:root{
    
    --app-height: 100vh;
    --headroom-height: 0;
    --scrollbar-width: 0;
 
    --c0: #0d0d0d;
    --c1: #FFFFFF;
    --c2: #090979;
    --c3: #D4FE08;
    --c4: rgba(255,255,255,.2);
    --c5: rgba(255,255,255,.5);
   
    --f-s: max(10px, 12rem);
    --f-d: max(12px, 18rem);
    --f-btn: max(12px, 22rem);
    --f-m: max(12px, 30rem);
    --f-b: max(12px, 45rem);
    --f-l: max(12px, 65rem);
    --f-xl: max(12px, 80rem);
    
    --wr: 50rem;
    --awr: calc(-1 * var(--wr));
    
    --sl: max(1px, 1rem);
    
    --mw: 1920px; 
    
    --br1: max(10px, 10rem);
    --br2: max(20px, 20rem);
    
    --gap1: 30rem;
    --gap2: 50rem;
    --gap3: 100rem;
    
    --grad: radial-gradient(49.73% 49.73% at 55.08% 0%, rgba(0, 240, 255, 0.5) 0%, rgba(0, 209, 255, 0) 100%, rgba(0, 198, 241, 0) 100%), radial-gradient(55.14% 55.14% at 100% 44.86%, rgba(0, 240, 24, 0.5) 0%, rgba(0, 255, 25, 0) 100%);
    
   
}


/* globals */

@media screen {
    
    html{font-size: 0.052vw;background-color: var(--c0);}

    .document{font-weight: 400;font-family: 'IBM Plex Sans', sans-serif;font-size: var(--f-d);line-height: 1.3;color: var(--c1);background-color: var(--c0);letter-spacing: normal;}
    
    .wrapper{width: 100%;margin: 0 auto;padding: 0 var(--wr);max-width: var(--mw);}
    
    .no-scroll{overflow: hidden!important;margin-right: var(--scrollbar-width);}
    
    .current{color: var(--c4);}
    
    .rub{white-space: nowrap;}
    .rub:not(:empty)::after{content: "\20bd";display: inline;}
    
    .icon{display: flex;max-height: 100%;align-items:center;justify-content:center;line-height: 0;max-width: 100%;width: auto;height: auto;}
    .cover,
    .contain{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-position: center;pointer-events: none;}
    .cover{object-fit: cover;}
    .contain{object-fit: contain;}
    .fill::after{content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;}

    .button{display: inline-flex;justify-content: center;max-width: 100%;user-select: none;cursor: pointer;align-items: center;z-index: 1;}
    .button:not(.fill){overflow: hidden;position: relative;}
    .button-text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;position: relative;z-index: 2;min-width: 0;font-size: var(--f-btn);font-weight: 500;}
    
    .button__primary{background-color: rgba(0,0,0,0);padding: 0 60rem;border-radius: 25rem;min-height: max(50px, 60rem);color: var(--c3);border: max(2px, 2rem) solid var(--c3);background-size: 0% 100%;background-image: linear-gradient(var(--c3), var(--c3));background-position: left;background-repeat: no-repeat;}
    .button__wide{width: 100%;}
    
    .title{line-height: 1.1;}
    .title i,
    .altfont,
    .textbox h2,
    .textbox h3{line-height: 1.1;font-family: 'IBM Plex Serif';color: var(--c3);font-style: italic;}
    
    .title__small{font-size: var(--f-m);}
    .title__default{font-size: var(--f-b);font-weight: 500;}
    .title__large{font-size: var(--f-l);font-weight: 500;}
    .title__xlarge{font-size: var(--f-xl);font-weight: 500;}
    
    .container{display: flex;flex-direction: column;min-height: var(--app-height);position: relative;z-index: 1;overflow: clip;}
    
    .header{flex: none;user-select: none;padding: 45rem 0 30rem;position: relative;z-index: 10;pointer-events: none;}
    .header a{pointer-events: all;}
    
    .topbar{display: grid;grid-template-columns: auto 1fr auto auto;grid-gap: 0;}
    .topbar-clip{position: relative;}
    .topbar-logo{max-width: calc(250rem + var(--gap2));display: flex;align-items: center;padding-right: var(--gap2);}
    .topbar-nav{display: flex;align-items: center;padding: 0 var(--gap3) 0 var(--gap2);}
    .topbar-nav ul{display: grid;grid-auto-flow: column;grid-gap: var(--gap2);}
    
    .main{flex: auto;display: flex;flex-direction: column;}
    
    .footer{flex: none;padding: 50rem 0;margin-top: 150rem;border-top: var(--sl) solid var(--c4);color: var(--c5);}
    .footer::before{content: "";height: 100vh; position: absolute;bottom: 0;left: 0;aspect-ratio: 1/1;z-index: -1;background: radial-gradient(circle closest-side, var(--c2), rgba(0,0,0,0));opacity: .6;pointer-events: none;max-height: 100vw;transform: translate(-50%, 50%);}

    .footer-grid{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: var(--gap3) var(--gap2);grid-template-areas: "a1 . a2 a2" "a4 . a5 a3";align-items: center;}
    .footer-logo{grid-area: a1;max-width: 250rem;margin-bottom: auto;}
    .footer-nav{grid-area: a2;display: grid;grid-template-columns: auto;grid-gap: 20rem;margin-bottom: auto;}
    .footer-nav-item{position: relative;padding: 0 0 20rem;display: grid;align-items: center;border-bottom: var(--sl) solid var(--c4);grid-template-columns: 1fr auto;grid-gap: var(--gap2);}
    .footer-nav-title,
    .footer-nav-icon{font-size: var(--f-m);}
    .footer-nav-icon{display: flex;align-items: center;justify-content: center;width: max(24px, 30rem);height: max(24px, 30rem);}
    .footer-social{grid-area: a3;margin-left: auto;}
    .footer-copyright{grid-area: a4;}
    .footer-policy{grid-area: a5;}
    
    .social{display: inline-grid;grid-auto-flow: column;grid-gap: 15rem;}
    .social-item{width: max(24px, 40rem);height: max(24px, 40rem);border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;padding: 8rem 7rem;line-height: 0;background-color: var(--c4);color: var(--c0);}
   
    
    .section:not(:first-child){border-top: var(--sl) solid var(--c4);padding-top: 50rem;}
    .section:not(:last-child){margin-bottom: 150rem;}
    
    .section-header{margin-bottom: 100rem;text-align: center;}
    .section-header-pretitle{opacity: .5;font-size: var(--f-m);}
    .section-header-pretitle:not(:last-child){margin-bottom: 1em;}
    
    .cursorFollow{transform: scale(0);position: absolute;left: 0;top:0;pointer-events: none;z-index: 10;transition: transform .15s 0s;margin: -70rem 0 0 -70rem;will-change: left, top;border-radius: 50%;width: 140rem;height: 140rem;background-color: var(--c3);background-image: var(--grad);display: inline-flex;align-items: center;justify-content: center;color: var(--c0);font-size: var(--f-d);text-align: center;padding: 20rem;font-weight: 500;}
    .cursorFollow.active{transform: scale(1);transition: transform .15s .15s;}
    
    .cursorZone-active *{cursor: none!important;}
    
    .popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: var(--c0);border-radius: var(--br2) var(--br2) 0 0;overflow: auto;z-index: 99;transition: all 1s;will-change: transform;}
    .popup:not(.active){transform: translateY(100%) scaleX(.9);visibility: hidden;}
    
    .popup-inner{min-height: var(--app-height);display: flex;flex-direction: column;padding: 50rem 0 100rem;}
    .popup-close{position: absolute;top: 0;right: 0;z-index: 1;cursor: pointer;display: flex;align-items: center;justify-content: center;width: 40rem;height: 40rem;opacity: .5;}
    .popup-header{margin-bottom: 100rem;position: relative;padding-right: 100rem;}
    .popup-header .pretitle{opacity: .5;font-size: var(--f-m);margin-bottom: 1em;}
    .popup-main{margin-bottom: auto;}
    .popup-footer{margin-top: 50rem;}
    .popup-footer-note{margin-top: 30rem;text-align: center;}
    .popup-footer-note a{color: var(--c3);}
    
    
    .formbox{display: grid;grid-template-columns: auto;grid-gap: var(--gap2);}
    .formbox-row{display: flex;}
    .formbox-cell{flex: 1;}
    .formbox-cell:not(:first-child){margin-left: var(--gap2);}
    
    .textfield{display: flex;flex-direction: column;}
    .textfield-input{padding-bottom: 15rem;text-overflow: ellipsis;resize: none;width: 100%;text-overflow: ellipsis;background-image:linear-gradient(var(--c1),var(--c1)),linear-gradient(var(--c5), var(--c5));background-position: bottom;background-repeat: no-repeat;background-size: 0 var(--sl), 100% var(--sl);transition: background-size .25s;font-size: var(--f-m);}
    .textfield-input:focus{background-size: 100% var(--sl), 100% var(--sl);}
    
    .textbox{}
    .textbox h2{margin: 2em 0 .5em;font-size: var(--f-b);}
    .textbox h3{margin: 2em 0 .5em;font-size: var(--f-m);}
    .textbox ul{margin: 1em 0;}
    .textbox h2:first-child,
    .textbox h3:first-child,
    .textbox ul:first-child{margin-top: 0;}
    .textbox h2:last-child,
    .textbox h3:last-child,
    .textbox ul:last-child{margin-bottom: 0;}
    .textbox ul{display: grid;grid-template-columns: auto;grid-gap: .5em;}
    .textbox ul li{position: relative;padding-left: 1.5em;}
    .textbox ul li::before{content: "\2022";opacity: .5;position: absolute;top: 0;left: 0;width: 1.5em;text-align: center;}
    
    .karaoke{position: relative;}
    .karaoke-front{position: relative;z-index: 1;transition: clip-path .5s;clip-path: inset(0 0% 0 0);}
    .karaoke-back{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;opacity: .2;}
    
    .karaoke:not(.visible):not(.active) .karaoke-front{clip-path: inset(0 100% 0 0);}
    
    
    .gallery{position: relative;width: 100%;}
    
    .gallery .swiper{overflow: visible;margin: 0 calc(var(--gap1) / -2);}
    .gallery .swiper-slide{display: flex;width: auto!important;margin: 0 calc(var(--gap1) / 2);height: 50vh;overflow: hidden;border-radius: var(--br1);}
    .gallery .swiper-slide img{max-height: 100%;height: 100%;width: auto;}
    
    .gallery .carousel-button{position: absolute;width: 50vw;height: 100%;top: 0;z-index: 1;}
    .gallery .carousel-button__prev{right: 50%;}
    .gallery .carousel-button__next{left: 50%;}
    .gallery .carousel-button.swiper-button-disabled{display: none;}
    
    
    .cookies-alert-inner{display: flex;align-items: flex-start;user-select: none;}
    .cookies-alert-text{max-width: 500rem;}
    .cookies-alert-icon{display: flex;align-items: center;justify-content: center;width: max(22px, 30rem);height: max(22px, 30rem);flex: none;cursor: pointer;margin-left: auto;}
    
    
}

/* cards */

@media screen {
   
    .card{position: relative;overflow: hidden;display: flex;min-height: 100%;flex-direction: column;user-select: none;z-index: 1;}
    
    .card-1{}
    .card-1 .card-media{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;border-radius: var(--br2);overflow: hidden;opacity: .5;}
    .card-1 .card-title{font-size: var(--f-m);font-weight: 500;color: var(--c3);}
    .card-1 .card-header{position: relative;z-index: 1;background-color: var(--c0);max-width: 75%;margin-right: auto;padding: 20rem 1.5em 20rem 0;border-bottom-right-radius: var(--br2);display: flex;align-items: center;min-height: calc(2 * var(--br2));min-width: calc(2 * var(--br2));}
    .card-1 .card-header::before,
    .card-1 .card-header::after{content: "";position: absolute;width: calc(2 * var(--br2));z-index: -1;border-top-left-radius: var(--br2);}
    .card-1 .card-header::before{left: 100%;top: 0;box-shadow: calc(var(--br2) / -1) 0 0 var(--c0);height: calc(1 * var(--br2));}
    .card-1 .card-header::after{top: 100%;left: 0;box-shadow: 0 calc(var(--br2) / -1) 0 var(--c0);height: calc(2 * var(--br2));}
    .card-1 .card-content{flex: auto;display: flex;align-items: center;justify-content: center;text-align: center;}
    .card-1 .card-content::before{content: "";flex: none;width: 0;padding-top: 50%;}
    .card-1 .card-content .title{padding: 50rem 100rem;}
    .card-1 .card-footer{position: relative;z-index: 1;background-color: var(--c0);max-width: 75%;margin-left: auto;padding: 20rem 0 20rem 1.5em;border-top-left-radius: var(--br2);display: flex;align-items: center;min-height: calc(2 * var(--br2));margin-top: auto;min-width: calc(2 * var(--br2));font-weight: 500;}
    .card-1 .card-footer::before,
    .card-1 .card-footer::after{content: "";position: absolute;width: calc(2 * var(--br2));z-index: -1;border-bottom-right-radius: var(--br2);}
    .card-1 .card-footer::before{right: 0;bottom: 100%;box-shadow: var(--br2) 0 0 var(--c0);height: calc(2 * var(--br2));}
    .card-1 .card-footer::after{right: 100%;bottom: 0;box-shadow: 0 var(--br2) 0 var(--c0);height: calc(2 * var(--br2));}
    .card-1 .card-action{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
    
    
    
    
}

/* sections */

@media screen {
   
    
    .hero{margin-top: calc(-1 * var(--headroom-height));position: relative;z-index: 1;}
    .hero-inner{min-height: var(--app-height);padding: calc(var(--headroom-height) + 100rem) 0 100rem;display: flex;align-items: center;position: relative;z-index: 1;pointer-events: none;justify-content: center;flex-direction: column;}
    .hero-pretitle{font-size: var(--f-m);text-align: center;margin-bottom: 1em;opacity: .7;}
    .hero-title{margin: 0 auto;max-width: 1000rem;text-align: center;}
    .hero-action{margin-top: 50rem;pointer-events: all;}
    
    .hero a{pointer-events: all;}
    
    .hero-canvas{position: absolute;top:0;right: 0;bottom: 0;left: 0;z-index: 0;width: 100%;height: 100%;opacity: .7;}
    
    
    .s1-1{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: var(--gap1);}
    .s1-2{position: relative;overflow: hidden;display: flex;border-radius: var(--br2);}
    .s1-2::before{content: "";flex: none;width: 0;padding-top: 55%;}
     
    .s1-3{grid-column: 1/-1;}
    .s1-3 ~ .s1-2{display: none;}
    
    .s2-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap1);}
    
    .s3 .swiper{overflow: visible;}
    .s3 .swiper-wrapper{transition-timing-function: linear !important;}
    .s3 .swiper-slide{margin: 0 var(--gap2);display: flex;max-width: 250rem;justify-content: center;align-items: center;}
    
    .s3 .swiper-slide{aspect-ratio: 200/150;}
    
    .s4-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap1);}
    
    .s5-1{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: var(--gap1);}
    .s5-3{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: var(--gap1);}
    .s5-3:not(:last-child){margin-bottom: 100rem;}
    
    .s6-2{position: relative;display: flex;overflow: hidden;border-radius: var(--br2);margin-bottom: 100rem;margin-top: calc(-1 * var(--headroom-height) + 30rem);max-height: 85vh;}
    .s6-2::before{content: "";flex: none;width: 0;padding-top: 56.25%;}
    .s6-3{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 50rem var(--gap1);grid-template-areas: "a1 a1" "a2 ." "a3 .";position: relative;align-items: flex-start;grid-template-rows: auto auto 1fr;}
    
    .s6-3::before{content: "";height: 100vh; position: absolute;bottom: 0;right: 0;aspect-ratio: 1/1;z-index: -1;background: radial-gradient(circle closest-side, var(--c2), rgba(0,0,0,0));opacity: .6;pointer-events: none;max-height: 100vw;transform: translate(50%, 50%);}
    .s6-4{grid-area: a1;}
    .s6-5{grid-area: a2;display: grid;grid-template-columns: auto;grid-gap: var(--gap1);align-items: center;}
    .s6-5-1{font-size: var(--f-l);font-weight: 700;}
    .s6-6{grid-area: a3;font-size: var(--f-m);max-width: 700rem;}
    
    .s6-7{margin-bottom: 50rem;}
    .s6-8{margin-bottom: 1em;font-size: var(--f-m);}
    
}

@media screen and (max-width: 1023.98px) {
   
    :root{  

        --f-s: 12rem;
        --f-d: 16rem;
        --f-btn: 16rem;
        --f-m: 18rem;
        --f-b: 20rem;
        --f-l: 30rem;
        --f-xl: 30rem;

        --wr: 15rem;

        --br2: 10rem;
        
        --mw: 640px; 

        
    }
    
       
    html{font-size: 1px;}
    
    .desktop,
    .cursorFollow{display: none!important;}
    
    .button{width: 100%;}
    .button__primary{padding: 0 30rem;height: 40rem;}
    
    .carousel-button{display: none;}
    
    .header{padding: 20rem 0;}
    .topbar{grid-template-columns: 1fr auto;}
    .topbar-logo{max-width: 150rem;margin: 0 auto 0 0;padding: 0;}
    .topbar-action{display: none;}
    .topbar-nav{padding: 0;}
    .topbar-nav ul{grid-gap: 20rem;}
    .topbar-nav ul li a{display: flex;align-items: center;justify-content: center;width: 24rem;height: 24rem;color: var(--c3);}
    
    .footer{margin-top: 50rem;}
    .footer-grid{grid-template-columns: auto;grid-gap: 30rem;grid-template-areas: "a1" "a2" "a3" "a5" "a4";}
    .footer-logo{max-width: 200rem;margin: 0 auto;}
    .footer-policy,
    .footer-copyright{text-align: center;}
    
    .gallery .swiper{overflow: auto;padding: 0 var(--wr);margin: 0;}
    .gallery .swiper-wrapper{}
    .gallery .swiper-slide{margin: 0;max-width: 100%;display: inline-flex;justify-content: flex-start;height: 200rem;}
    .gallery .swiper-slide:not(:last-child){margin-right: 10rem;}
    .gallery .swiper-slide img{min-width: 0;max-width: none;height: 200rem;}
    
    
    .section-header{margin-bottom: 50rem;}
    
    .section:not(:last-child){margin-bottom: 100rem;}
    
    .s1-1{grid-template-columns: auto;grid-gap: 10rem;}
    
    .s2-1{grid-template-columns: auto;grid-gap: 20rem;}
    
    .s5-1{grid-template-columns: auto;grid-gap: 20rem;}
    .s5-3{grid-template-columns: auto;margin-bottom: 50rem;}
    
    .s6-2{margin-bottom: 50rem;margin-top: 0;}
    .s6-3{grid-template-areas: "a1" "a2" "a3";grid-gap: 20rem;grid-template-columns: auto;}
    .s6-4{padding: 0;margin: 0 var(--awr);overflow: hidden;pointer-events: all;}
    .s6-5{grid-template-columns: auto;margin-top: 20rem;grid-gap: 20rem;}
    .s6-7{margin-bottom: 20rem;}
    .s6-9{margin: 0;}
    
    .card-1 .card-media,
    .card-1 .card-content{transition: opacity .5s;}
    
    .card-1:not(.visible) .card-media{opacity: 1;}
    .card-1:not(.visible) .card-content{opacity: 0;}
    
    .card-1 .card-header,
    .card-1 .card-footer{padding-top: 10rem;padding-bottom: 10rem;}
    .card-1 .card-content .title{padding: 25rem 20rem;}
    
    .formbox{grid-gap: 30rem;}
    .formbox-row{flex-direction: column;}
    .formbox-cell:not(:first-child){margin-left: 0;margin-top: 30rem;}
    
    .popup-inner{padding: 25rem 0 50rem;}
    .popup-header{margin-bottom: 50rem;padding-right: 50rem;}
    .popup-close{width: 24rem;height: 24rem;}
    
    .cookies-alert{background-color: var(--c2);color: var(--c1);padding: 20rem 0;}
    
}

@media screen and (min-width: 1024px) {
    
    .mobile{display: none!important;}
    
    .header.clipped{padding-bottom: 0;padding-top: 30rem;}
    .header.clipped .topbar-logo{border-bottom-right-radius: var(--br2);position: relative;}
    .header.clipped .topbar-logo::after{content: "";position: absolute;width: calc(2 * var(--br2));border-top-left-radius: var(--br2);top: 100%;left: 0;box-shadow: 0 calc(var(--br2) / -1) 0 var(--c0);height: calc(2* var(--br2));}
    .header.clipped .topbar-nav{border-bottom-left-radius: var(--br2);position: relative;}
    .header.clipped .topbar-action{position: relative;}
    .header.clipped .topbar-action::after{content: "";position: absolute;width: calc(2 * var(--br2));border-top-right-radius: var(--br2);top: 100%;right: 0;box-shadow: 0 calc(var(--br2) / -1) 0 var(--c0);height: calc(2* var(--br2));}
    .header.clipped .topbar-logo,
    .header.clipped .topbar-nav,
    .header.clipped .topbar-action{background-color: var(--c0);padding-top: 15rem;padding-bottom: 30rem;}
    
    
    .header.clipped .topbar-clip::before,
    .header.clipped .topbar-clip::after{content: "";position: absolute;width: calc(2 * var(--br2));top: 0;height: calc(2* var(--br2));}
    .header.clipped .topbar-clip::before{border-top-left-radius: var(--br2);left: 0;box-shadow: calc(var(--br2) / -1) 0 0 var(--c0);}
    .header.clipped .topbar-clip::after{border-top-right-radius: var(--br2);right: 0;box-shadow: calc(var(--br2) / 1) 0 0 var(--c0);}
    
    .s1-2:nth-child(6n + 1),
    .s1-2:nth-child(6n + 4){grid-column-end: span 3;}
    .s1-2:nth-child(6n + 3),
    .s1-2:nth-child(6n + 5){grid-column-end: span 2;}
    .s1-2:nth-child(6n + 2):last-child,
    .s1-2:nth-child(6n + 5):last-child{grid-column-end: span 3;}
    
    .s5-3-1{grid-column: 1/3;}
    
    .cookies-alert-inner{position: fixed;bottom: 0;right: 0;margin: 20rem;background-color: var(--c2);color: var(--c1);padding: 15rem;z-index: 99;border-radius: var(--br1);}
    .cookies-alert-text{padding: 15rem;}
    
}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
 
    .button{transition: all .25s;}
    .button__primary:not(:hover){color: var(--c0);background-size: 100% 100%;}
    
    .card-1 .card-media,
    .card-1 .card-content,
    .popup-close{transition: opacity .35s;}
    
    .card-1:hover .card-media,
    .popup-close:hover{opacity: 1;}
    .card-1:hover .card-content{opacity: 0;}
    
    .footer-policy,
    .footer-nav-item,
    .topbar-nav a{transition: color .15s;}
    
    .social-item{transition: background-color .15s;}
    
    .footer-policy:hover,
    .footer-nav-item:hover{color: var(--c1);}
    
    .topbar-nav a:hover{color: var(--c3);}
    
    .social-item:hover{background-color: var(--c3);}
    
    
    
}