*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--black: #070403;
--orange: #FE6100;
--white: #FFFFFF;
}

html{
scroll-behavior:smooth;
scrollbar-width:thin;
scrollbar-color:var(--orange) #070403;
}
body{
background:var(--black);
font-family:'Source Sans 3', sans-serif;
color:var(--white);
overflow-x:hidden;
max-width: 100%;
width: 100%;
}

/* HERO */

.hero{
position:relative;
min-height:100vh;

display:flex;
align-items:center;
justify-content:center;
top: 6em;
overflow:hidden;
}



.hero-content{
max-width:70rem;
width:100%;

margin:0 auto;

position:relative;

display:flex;
flex-direction:column;
align-items:center;
}



.LogoHero{
  width:130%;
  height:90%;   
  display:block;
}



.subtitle{
align-self:flex-start;
margin-top:-9em;
font-size:1.5em;
font-weight:300;
color:#FFFFFF;
margin-left: 3.1em;
}



.arrows{
display:block;
margin:60px auto 0 auto;
width:12em;
opacity:0.8;
}


.halftone{
position:absolute;
width:20rem;
}

#HalftoneHero1{
position:absolute;
left:0;
top:-14rem;
clip-path: inset(0 20px 0 0); 

}

#HalftoneHero2{
position:absolute;
right:0;
top:10rem;
transform:rotate(180deg);
clip-path: inset(0 20px 0 0); 
}


/* Locations */


/* SECTION */

.Locations{
padding:10rem 2rem 6rem 2rem;
}


/* TITLE */

.locations-title img{
width:12rem;
}


.parallax{
transform:translateY(0);
will-change:transform;
}

.locations-title{
margin-bottom:-1.1rem;
}


/* GRID */

.locations-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.2rem;

max-width:60rem;
margin:0 auto;

align-items:stretch;
}


/* COLUMNS */

.location-left,
.location-right{
display:flex;
flex-direction:column;
gap:1.2rem;
}


/* IMAGES */

.location-img{
width:100%;
display:block;
}



#Secondimg{
width:100%;
flex:1;
object-fit:cover;
display:block;
}


/* CARD */

.location-card{
background:var(--orange);
padding:2rem;
color:var(--black);
}

.location-card a{
color:var(--black);

}
/* TEXT */

.small-title{
font-family:'Source Sans 3',sans-serif;
font-size:1.3rem;
margin-bottom:1rem;
font-weight:600;
text-align:center;
}

.location-logo{
display:block;
margin:0 auto 1rem auto;
text-align:center;
line-height:0.9;
}
.location-text{
text-align:center;
font-size:1rem;
line-height:1.4;
}

.tickets-button{
text-align:center;
margin-top:4rem;
}
.tickets-button img{
width:22rem;
display:inline-block;

transition:transform 0.25s ease;
cursor:pointer;
}

.tickets-button img:hover{
transform:scale(1.05);
}

.tickets-button img:hover{
transform:scale(1.05);
}

/* Sponsors */

.sponsors{
background:var(--orange);
width:100%;
padding:2rem 0;
}

.sponsor-grid{
max-width:70rem;
margin:0 auto;

display:grid;
/* grid-template-columns:1fr 1fr 1fr; */
align-items:center;
}

.sponsor-grid img{
max-height:3rem;
width:auto;
justify-self:center;
}
#HyperIslandLogo{
    max-height: 1.2rem !important;
}

/* ABOUT US */

.about{
padding:8rem 2rem;
background:var(--black);
}

.about-grid{

max-width:80rem;
margin:0 auto;

display:grid;
grid-template-columns:1.6fr 1fr 1fr;

gap:2.8rem;

align-items:start;

}



.about-graphic{
display:flex;
align-items:flex-start;
}

.about-graphic img{
width:100%;

display:block;
}


/* TEXT */

.about-content{
color:var(--white);
font-size:0.95rem;
line-height:1.6;

display:flex;
flex-direction:column;

gap:1.4rem;

font-weight:300;

max-width:28rem;

height:100%; 
}


/* BUTTON */

.about-btn{

align-self:flex-start;

margin-top:auto;   

padding:0.9rem 2.4rem;

border:2px solid var(--orange);

color:var(--orange);
text-decoration:none;
width: 100%;
text-align: center;
font-weight:300;

transition:0.25s ease;

}

.about-btn:hover{

background:var(--orange);
color:var(--black);
font-weight: 600;

}



.about-images{

display:flex;
flex-direction:column;

gap:1.5rem;

}

.about-images img{

width:100%;
height:auto;
display:block;

}

/* ANIMATIONS ABOUT */

.fade-left,
.fade-right,
.fade-up{
opacity:0;
transition:
transform 0.8s cubic-bezier(.22,1,.36,1),
opacity 0.8s ease;
}

.fade-left{
transform:translateX(-40px);
}

.fade-right{
transform:translateX(40px);
}

.fade-up{
transform:translateY(25px);
}



.reveal{
opacity:1;
transform:translate(0,0);
}

.fade-left,
.fade-right,
.fade-up{
opacity:0;
transition:
transform 0.8s cubic-bezier(.22,1,.36,1),
opacity 0.8s ease;
}


.fade-left{ transform:translateX(-40px); }
.fade-right{ transform:translateX(40px); }
.fade-up{ transform:translateY(25px); }


.reveal{
opacity:1;
transform:translate(0,0);
}


.hide.fade-left{
opacity:0;
transform:translateX(-40px);
}

.hide.fade-right{
opacity:0;
transform:translateX(40px);
}

.hide.fade-up{
opacity:0;
transform:translateY(25px);
}



/* TEASER */
.teaser{
padding:12rem 2rem;
background:var(--black);
color:var(--white);
}

.teaser-grid{

max-width:75rem;
margin:0 auto;

display:grid;
grid-template-columns:1fr;

gap:25rem;

justify-items:center;

text-align:center;

}

.teaser-grid h2{
font-size:3rem;
font-weight:300;
position:relative;
}
.teaser{
overflow:hidden;
}
#Teaser1{ transform:translateX(-3rem); }
#Teaser2{ transform:translateX(3rem); }
#Teaser3{ transform:translateX(-3rem); }
#Teaser4{ transform:translateX(3rem); }
#Teaser5{ transform:translateX(-3rem); }

.AutoBlur{
filter: blur(10px);
opacity:0.4;

transition: filter 0.2s ease-in, opacity 0.2s ease-in;
}

.AutoBlur.focus{
filter: blur(0);
opacity:1;
text-shadow:
0 0 1px rgba(255, 255, 255, 0.068),
0 0 5px rgba(255, 255, 255, 0.048),
0 0 10px rgba(255,255,255,0.1);
}

.test-stretch{
font-family: "Anton", sans-serif;

font-size:2.3em;

display:block;
transform:scaleY(1.35);
transform-origin:center;

letter-spacing:0.03em;
line-height:0.9;
}



/* TICKETS */

.Tickets{
padding:10rem 2rem;
display:flex;
justify-content:center;
background:var(--black);
}



.tickets-container{
position:relative;
max-width:64rem;
width:100%;
margin:0 auto;

overflow:visible;
}


.tickets-bg{
width:75%;
margin:0 auto;
display:block;
}


.tickets-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);

display:flex;
flex-direction:column;
align-items:center;

text-align:center;
width:100%;
}




.tickets-title{
font-family: "Anton", sans-serif;

font-size:clamp(3rem, 7vw, 6rem);
line-height:0.9;

color:var(--orange);
letter-spacing:0.05em;

white-space:nowrap;
}
.form-word{
display:inline-block;

transform:translateY(-80px); 
opacity:0;

transition:
transform 0.8s cubic-bezier(.22,1,.36,1),
opacity 0.8s ease;
}


.Tickets.visible .form-word{
transform:translateY(0);
opacity:1;
}



.tickets-title span{
color:transparent;
-webkit-text-stroke:2px var(--orange);
}




.tickets-sub{
margin-top:clamp(1rem, 2vw, 2rem);

font-size:clamp(0.6rem, 1vw, 0.8rem);
letter-spacing:0.25em;
font-weight:300;

color:var(--orange);
}


/* BUTTON */

.CTA-tickets-button{
position:relative;
display:inline-block;
overflow:hidden; 
margin-top: 1.5rem;
}
.CTA-tickets-button img{
width:clamp(10rem, 20vw, 16rem);
display:block;

height:auto;

transition:transform 0.25s ease;
cursor:pointer;
}

.CTA-tickets-button img:hover{
transform:scale(1.05);

}

.test-stretch-strong{
font-family:"Anton", sans-serif;

transform:scaleY(1.55);

transform-origin:center;
display:inline-block;

letter-spacing:0.04em;
}

.CTA-tickets-button{
position:relative;
overflow:hidden;
}

/* Aniamtion */
.CTA-tickets-button::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:120%;
height:100%;

background:linear-gradient(
90deg,
transparent 0%,
rgba(44, 36, 31, 0.35) 50%,
transparent 100%
);

transition:left 0.6s ease;
pointer-events:none;
}

.CTA-tickets-button:hover::after{
left:120%;
}




@media (max-width:1450px){
.halftone{
width: 5rem;
}
#HalftoneHero1{
top:-14rem;
}
#HalftoneHero2{
top:15rem;}
}

@media (max-width:1450px){
.halftone{
width: 2em;
}
#HalftoneHero1{
top:-14rem;
}
#HalftoneHero2{
top:15rem;}
}


@media (max-width:1198px){


.hero{
top:4em;
padding:3rem;

}

.subtitle{
font-size:1.2rem;
margin-top:-13rem;
}


  .locations-grid{
    grid-template-columns:1fr;
    max-width:500px;
    gap:2rem;
  }

  .location-left,
  .location-right{
    display:contents;
  }


  .locations-title{
    order:0;
  }

  .location-right .location-card{
    order:1;
  }

  .location-left .location-img{
    order:2;
  }

  .location-left .location-card{
    order:3;
  }

  #Secondimg{
    order:4;
  }

    .location-img{
    width:100%;
    aspect-ratio: 1 / 1;  
    object-fit: cover;
  }

  #Secondimg{
    aspect-ratio: 1 / 1;
    flex: none; 
  }



/* SPONSORS */

.sponsor-grid{
grid-template-columns:1fr;
gap:2rem;
text-align:center;
}


/* ABOUT */

.about-grid{
grid-template-columns:1fr;
gap:3rem;
text-align:center;
}

.about-images img:last-child{
display:none;
}

.about-graphic img{
max-width:70%;
margin:auto;
}

.about-content{
margin:auto;
}


/* TEASER */

.teaser-grid{
gap:30rem;
}

.teaser-grid h2{
font-size:2.5rem;
}


/* TICKETS */

.tickets-bg{
width:85%;
}

}




@media (max-width:944px){

    .subtitle{
        margin-top:-8rem;
    }


    #HalftoneHero1{
transform:translateX(-20%);
    }
    #HalftoneHero2{
       transform:translateX(20%) rotate(180deg);

    }
}


@media (max-width:768px){



.hero{
top:3em;
padding:2rem;
min-height:80vh;
}

.subtitle{
align-self:center;
text-align:center;
margin-top:-6rem;
font-size:1rem;
}

.arrows{
width:8rem;
margin-top:2rem;
}

    #HalftoneHero1{
transform:translateX(-25%);
    }
    #HalftoneHero2{
       transform:translateX(28%) rotate(180deg);

    }




.sponsor-grid{
grid-template-columns:1fr;
gap:2rem;
}


/* ABOUT */

.about-grid{
grid-template-columns:1fr;
gap:2rem;
text-align:center;
}


.about-images img:last-child{
display:none;
}



.about-images img:first-child{
width:80%;
margin:auto;
}

.about-graphic img{
max-width:75%;
margin:auto;
}

.about-btn{
width:80%;
margin:auto;
}


/* TEASER */



.teaser-grid h2{
font-size:2rem;
}

#Teaser1{left:-2rem;}
#Teaser2{left:2rem;}
#Teaser3{left:-2rem;}
#Teaser4{left:2rem;}
#Teaser5{left:-2rem;}


/* TICKETS */

.Tickets{
padding:6rem 1.5rem;
}

.tickets-container{
display:flex;
flex-direction:column;
align-items:center;
}

.tickets-bg{
width:100%;
}

.tickets-content{
position:relative;
transform:none;
top:auto;
left:auto;
margin-top:-12rem;
}

.tickets-title{
white-space:normal;
font-size:clamp(2.5rem,12vw,3.5rem);
width:100%;
margin-top:-2rem;
text-align: left;
font-weight: 100;
}

.tickets-sub{
text-align:left;
padding-top: 19em;

}

.CTA-tickets-button img{
width:14rem;
}

}
@media (max-width:480px){
   .tickets-title {
     margin-top: -1.5rem;
   }
}


body{
  cursor: none;
}

/* MAIN CURSOR */
.cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #FE6100;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;

  transition: 
    transform 0.15s cubic-bezier(0.22,1,0.36,1),
    width 0.2s ease,
    height 0.2s ease;
}

/* TRAIL */
.cursor-trail{
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #FE6100;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  z-index: 9998;

  transition: transform 0.25s ease;
}

.cursor.hover{
  transform: translate(-50%, -50%) scale(1.8);
}

.cursor-trail.hover{
  transform: translate(-50%, -50%) scale(1.4);
}

.cursor{
  mix-blend-mode: difference;
}

.cursor-trail{
  mix-blend-mode: difference;
}





/* SHOWCASE */

.showcase{
    max-width:70em;
    margin:0 auto;
    padding:15rem 2rem;
}

.showcase-header{
    text-align:center;
    margin-bottom:2rem;
}

.showcase-header h2{
    font-family:"Anton", sans-serif;
    font-size:clamp(3rem,6vw,6rem);
    color:var(--orange);
    letter-spacing:0.04em;
     margin-bottom:.5rem;
}

.showcase-header p{
    max-width:40rem;
    margin:0 auto;
    opacity:.8;
}

.showreel-card{
    position:relative;
    display:block;
    overflow:hidden;

    border:2px solid var(--orange);
    background:#111;
}

.showreel-card img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;

    transition:transform .6s ease;
}

.showreel-card:hover img{
    transform:scale(1.03);
}

.play-btn{
    position:absolute;
    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:5.5rem;
    height:5.5rem;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--orange);
    color:#000;

    font-size:1.5rem;

    transition:.25s ease;
}


.play-btn i{
    color:black;
    font-size:1.4rem;

    /* slightly offset to visually center */
    margin-left:0.15rem;
}
.showreel-card:hover .play-btn{
    transform:translate(-50%,-50%) scale(1.08);
}

.showcase-btn{
    margin:2rem auto 0;
}


.showcase-btn{
    display:block;

    width:fit-content;

    margin:2rem auto 0;

    padding:1rem 3rem;

    border:2px solid var(--orange);

    color:var(--orange);

    text-decoration:none;

    transition:.25s ease;
}

.showcase-btn:hover{
    background:var(--orange);
    color:var(--black);
}






.custom-cursor {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.custom-cursor.hidden {
    opacity: 0;
}