.stack-title{


  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.5px;
  position: fixed;
  line-height: 1;
  left: 2rem;
pointer-events: none;
    top: 2.5rem;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  font-family: var(--monofont);
  font-weight: 400;
 }


@media only screen and (min-width: 980px) {


.stack-title{
 font-size: 20px;
 }

  }


.body-home > * {
            transition: opacity 1s ease-in-out;
      }


.containervideostack{
transition: opacity 1s ease-in-out;
opacity: 1;


}


@starting-style{


.containervideostack{

  opacity: 0;


}
}


.hover-box > .stack-title{


  left: 50%;

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







}


.hover-box:hover > .stack-title{

  opacity: 1;
  
}


.hover-box.active > .stack-title{

  opacity: 1;
  
}


.stack-title.default.intro-active {

  display: flex;
  flex-direction: row;
  gap: .5rem;
}


.stacks img{
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

 
    -webkit-touch-callout: none;
}


.stacks {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
margin: auto;
   position: relative;

 
 -webkit-touch-callout: none;


  aspect-ratio: 1/1;
  max-height: 80svh;


   height: 100%;

 


}


@media only screen and (max-width: 520px) and  (min-height: 520px) {


.stacks {

max-height: none;
max-width: 90svw;
 aspect-ratio: 1/1;
 width:100%;
 height: auto;

 


}

  }


.chapter-title{

font-size: var(--step-4);
max-width:30vw;
font-weight: 700;
}


@media only screen and (max-width: 768px) {


.chapter-title{

font-size: var(--step-2);
}}


.stack-title.default.intro-active{opacity: 1}


/* ---- your original visual rules (unchanged) ---- */


.hover-box{
  --bg: var(--white); 
  width:30%;
  height:30%;
  background:transparent;
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
 border: 0;
  font-size:1.2rem;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  border-radius:600000px;          /* makes it a perfect circle */
  position:absolute;
  transition:transform 150ms ease-in;
  container-name: hoverbox;

pointer-events: auto;
  transition: all 250ms ease-in-out;
  font-family: var(--mainfont);
border: 2px dashed var(--grey);
border: 2px dashed hsl(from var(--grey) h s l / .5);


}


@starting-style{


.hover-box{


  pointer-events: none;


}
}


.hover-box:hover{
border: 2px dashed var(--layercolor);
border: 2px dashed hsl(from var(--layercolor) h s l / .5);

}


.hover-box svg > path {
    fill: var(--white);
}


/* ---- when the element gets .active, start the animation ---- */


.bg-video-loader.active::before{
  animation:borderSweep 2s linear forwards;   /* 2 s = LONG_PRESS_DURATION */
}


/* ---- when the element gets .active, start the animation ---- */


.bg-video-loader.active::before{
  animation:borderSweep 2s linear forwards;   /* 2 s = LONG_PRESS_DURATION */
}


.body-home footer{margin-top: 120svh; z-index:9999999;}


.bg-video, .bg-video-loader{

    position: fixed;
    top: 49%;
    left: 51%;
    transform: translate(-51%, -49%);
   	width: 40%;
    aspect-ratio: 1 / 1;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: -1;

    border-radius: 999999px;

}


.bg-video-loader{  width: 20%;
}


@media only screen and (max-width: 768px) {


.bg-video-loader{

 width: 30%;
}}


.bg-video{
display: none;
transition: opacity 0.5s;
  opacity: 0;
   width: 100%;
}


/* ---- the animated border (hidden by default) ---- */


.bg-video-loader::before{
  content:"";
  position:fixed;
  inset:-3px;                     /* how far the ring sticks out */
  border-radius:inherit;
  border:3px solid currentColor;
  transform:rotate(45deg);
  clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0);
opacity: 0;

}


.bg-video-loader.active::before{
 
opacity: 1;

}


.hover-box:nth-child(1) {
    top: 5%;
    left: 18%;


/*
     @starting-style {
      top: 15%;
      left: 33%;

    } */

      
    }


.hover-box:nth-child(2) {
     top: 5%;
    left: 52%;

/*
     @starting-style {
      top: 15%;
      left: 47%;
    }
*/
      
    }


.hover-box:nth-child(3) {
top: 35%;
      left: 70%;

/*
     @starting-style {
      top: 35%;
      left: 65%;
    }

   */
    }


.hover-box:nth-child(4) {
  top: 65%;
    left: 52%;
/*
     @starting-style {
      top: 55%;
      left: 47%;
    }
*/
      
    }


.hover-box:nth-child(5) {

          top: 65%;
    left: 18%;
/*
     @starting-style {
      top: 55%;
      left: 33%;
    }
*/
      
   
    }


.hover-box:nth-child(6) {
   top: 35%;
   left: 0%;
/*
     @starting-style {
      top: 35%;
      left: 15%;
    }
*/
      
    }


.hover-box svg > path {transition: fill 250ms ease-in-out}


.hover-box:hover svg > path {fill:var(--layercolor);}


.stacks-container{
    position:relative;
    height:100svh;
        overflow: clip;
        display: flex
}


.content{
    position:relative;
    height:auto;
    
}


.cta-end{
    position:relative;
    height:400vh;
    background:#c00;
}


.touch-layer{


z-index:100;

font-size: var(--symbol); 
font-weight: 400;

display: flex;

align-items: center;
justify-content: center;
font-family: var(--mainfont);
     margin-top: 5%;

opacity: 1;

transition: 2s opacity ease-in-out;
transition-delay: 1.5s;   


}


@starting-style{


.touch-layer{

    opacity: 0;   


}
  }


.touch-layer:hover{  background: radial-gradient(circle, var(--layercolor), transparent 70%);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;}


.content-section{height:auto; z-index: 0;}


.slides{position: relative; top:0; width:100%;z-index: 0; height:100svh;}


.button-link-hp{

  text-decoration: none;
  padding: 0.875rem;

border: 1px dashed var(--white);
text-transform: uppercase;
font-family: var(--monofont);
font-size: 1rem;
border-radius: .5rem;
margin-top: 1rem;
    position: relative;
    top: 2rem;
    width: -moz-max-content;
    width: max-content;
        background-color: var(--black);
        color: var(--white);

  
}


.button-link-hp:hover{

  
background-color: var(--black);
}


@supports not (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

.container-content > .animatedtext{

    height: 8.5rem;
    width: calc(100% - 36vw);
    max-width: none;
    text-wrap: balance;
    left: 34vw;
    top: 40%;
   position: sticky;
    font-weight: 400;
    font-size: var(--step-slides);
padding-top: 0;
transform: translateY(0);

    }
     @media only screen and (max-width: 768px) {

.container-content > .animatedtext{
    width: 80%;

 left:0rem;
 width: 100%;
 padding: 1rem;
 top: 30%;

    }
      }


        .stack-title.default.intro-active {
            opacity: 1;
            z-index: 9999;

            text-transform: uppercase;
        }


        .stacks{


            pointer-events: auto;
          position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1);
            z-index: 99;
            opacity: 1;
            transition: all 2s 
ease-in-out;
        }

.img-background {
   position: sticky;
    top: 0%;
    overflow: hidden;

 width: 100%;
    height: auto;
}





@media only screen and (max-width: 768px){

.container-content{
font-size: 1rem;


padding: 0;}


}


  .scrolltodiscover {
    left: 2rem;
 
    position: absolute;
    bottom: 2rem;
    text-transform: uppercase;
    font-size: 14px;
  }
  
 @media only screen and (max-width: 768px){


  .scrolltodiscover {
    width: 100%;
  }
  }

    @media only screen and (max-width: 768px){


.animatedtext {
    padding: 0rem;

}
  }


as-dithered-image {

    display: block;


    
  
    position: relative;
  
   opacity: .1;

}



     @media only screen and (max-width: 768px) {


as-dithered-image {

 width: auto;
    height: 100svh;

}

     }

.container-content{
	max-width: none;
   display: flex;
      flex-direction: column;
      align-items: center;
}

.placeholder-timeline, .container-timeline{display: none;}



.chapter-title{

    position: fixed;
    top: 40%;
    left:2rem; 
    transform:translateY(-50%);
    opacity: 1;
    z-index: 90;
  font-family: var(--mainfont);
    height: 8rem;
    text-transform: uppercase;
    max-width: 20vw;
    line-height: 1.1;


}

  


        @media only screen and (max-width: 768px) {



.chapter-title{
left:1rem; 
    top: 20%;

    max-width: none;


}
         }




/* LAST UPDATE */


 

    /* Spacer sections for scroll demo */
    .spacer {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      background: #f0f0f0;
    }

    .spacer:nth-child(even) {
      background: #e0e0e0;
    }

    /* Main container */
    .container-content {
      position: relative;
      min-height: 100vh;
      z-index: 1;
    }

    /* Fixed background image */
    .img-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.6s ease-in-out;
      
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .img-background.visible {
      opacity: 1;
    }

    .img-background img {
      max-width: 80%;
      max-height: 80%;
      -o-object-fit: contain;
         object-fit: contain;
    }

    /* Fixed animated text */
    .animatedtext {
      position: fixed !important;
      top: 50%;
      left: 0%;
      transform: translateY(-50%);
       transform: translateX(0%) !important;
      z-index: 10;
      max-width: 90%;
      width: 800px;
      text-align: left;
      opacity: 0;

      color: white;
      font-size: 1.5rem;
      padding: 2rem;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    .animatedtext.visible {
      opacity: 1;
    }

    .word {
      display: inline-block;

        opacity: 0;
 
  transform: translateY(0);

    }



    .animatedtext.visible .word {
      animation-play-state: running;
    }

    @keyframes fadeInWord {
      to {
        opacity: 1;
      }
    }

    .whitespace {
      display: inline;
    }

    strong {
      display: block;
      margin-top: 1rem;
      font-size: 2rem;
    }






}
}


@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {


    .container-timeline{
        display:flex;
        flex-direction:row;
        width:60%;
        position:sticky;
        top:95%; left:20%;
        height:.25rem;
        gap:1rem;
        z-index:9999999;
    }
        @media only screen and (max-width: 768px) {


    .container-timeline{
    width:90%;
     gap:.5rem;
     left:5%;
    }
        }
    .timeline{
        height:100%;
        width:100%;
        background:#fff;
        opacity:0;
        transform-origin:left center;
    }
    #placeholder-timeline{
        z-index:888;
    }
    #placeholder-timeline >.timeline{
        opacity:1;
        background:rgba(255,255,255,.15);
    }

        body{
            timeline-scope: --content, --stacks, --slides;
        }

       
        .content{ view-timeline-name: --content; z-index: 0;    margin-top: 100vh; background-color: var(--black)}

    .body-home { view-timeline-name: --body;

     
      overscroll-behavior: none;


    }

     

    .stacks-container{
    view-timeline-name: --stacks;
    opacity: 1;

    position: fixed;
    top: 0;
    z-index: 1;
    pointer-events: none; 

    /* If you still need interactive children inside the overlay,
       re‑enable pointer events just for those children */


    }




    .stacks{
    animation-timeline:  --stacks;
    pointer-events: auto;

    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: linear;


    position: fixed;
    top: 50%;
    left:50%;
    transform:translate(-50%, -50%) scale(1);
    z-index:9;

    opacity: 1;

    transition: all 2s ease-in-out; 
    }

    @starting-style {




    .stacks{
    
    opacity: 0;
   /* transform: translate(-50%, -50%) scale(0.6);*/
     pointer-events: none; 
    } 
    }


    .chapter-title{
    position: fixed; top: 50%; left:2rem; transform:translateY(-50%);
    opacity: 0;
    z-index: 90;
    animation-range: cover 4%;
 font-family: var(--mainfont);
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: linear;

    font-size: var(--step-2);
    
    height: 8rem;
    text-transform: uppercase;
    max-width: 20vw;
            line-height: 1.2;

    }

      @media only screen and (max-width: 768px) {


    .chapter-title{
    top: 30%;
    width: 100%;
    padding: 0 1rem;
    left:0;
max-width:100% !important;

    }

      }

 .chapter-title > span{
text-decoration: none;
text-underline-offset: 15%;

 }

.homepageslides  >  .animatedtext{
          position: sticky;
        
           animation-name:  textfade;

}
 

    .content-section > .container-content  .animatedtext{

    height: 8.5rem;
    width: calc(100% - 36vw);
    max-width: none;
    text-wrap: balance;
    left: 34vw;
    top: 50%;
   
    font-weight: 400;
    font-size: var(--step-slides);

    }


     @media only screen and (max-width: 768px) {
 

    .content-section > .container-content  .animatedtext{
    width: 80%;

 left:0rem;
 width: calc(100% - 4rem);
 top: 30%;

    }
      }
        .container-timeline{
            opacity: 0;
            animation: timeline-on-off ;
            animation-timeline: --content;
            animation-duration: 1ms;
            animation-fill-mode: forwards;
            animation-timing-function: linear;

        }



    .timeline{
      animation-range: entry-crossing;
    animation-name: timeline;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    }



     .slides .word {



    animation-range: unset;
    animation-range-start: unset;


    }


    .container-text-section{


    animation-name: timeline-on-off;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: linear;

    animation-range: contain;
    opacity: 0;
    animation-timeline: --slides !important;
    animation-name: fade-slides;
      animation-range: cover;
    }

    .slides{


      view-timeline-name: --slides !important;


    }




     





     .hover-box{
    opacity: 0;
      animation-name: layer-in;
            animation-duration: 1s;
            animation-delay: .5s;
            animation-fill-mode: forwards;
            animation-timing-function: ease-in-out;
     

     }


    .container-content > .img-background {

        animation-timeline: --container-char-animation;
        animation-fill-mode: both;
        animation-duration: 1s;
        animation-timing-function: 
      cubic-bezier(0.68, -0.55, 0.27, 1.55);
       animation-range: cover 4%;
        animation-name:  imagebackgroundfade;


    }


    .img-background{

        position: fixed;
        top: 0%;
        overflow: hidden;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            flex-direction: column;

    }

    as-dithered-image {

        display: flex;


        
        
       
        position: relative;
                  


    }
    
      
         @media only screen and (max-width: 768px) {

    as-dithered-image {
        
 height: 100svh;
             transform: translateX(-50%);
                  


    }
  
         }

         @media only screen and (max-width: 768px) {

    .word{
/*
    animation-name: none !important;
    color: var(--white) !important;   
    animation-fill-mode:none !important;

    opacity: 1;*/

    }
         }



    .content-section > .container-content{

      height: 400svh;

    text-wrap: pretty;
    max-width: none;
    padding: 0;
    }
       @media only screen and (max-width: 768px) {



    .content-section > .container-content{

     height: 200svh;
    }


         }
       @media only screen and (max-width: 768px) {

    .no-scroll-timeline as-dithered-image {

     transition: none !important;
        
    }


         }
        

      @media only screen and (max-width: 768px) {
    .container-content > .animatedtext, {

     transition: none !important;
    animation-name: none !important;
    opacity: 1 !important;

    }
         }



    .content-section .word { animation-range-start: -400svh; }


    .container-content-section{top: 80px;
    width: calc(100% - 2rem);
    height: calc(100svh - 80px - 1rem);
    left: 1rem;

    overflow: hidden;
    }
  
   @media only screen and (max-width: 768px){


   
#introduction .container-content > .animatedtext {
 position: fixed;
 width: 100%;
 padding: 0 1rem;

   
   

}
   }
   



      .stack-title.default{


      z-index: 9999;
      width: 25%;

      opacity: 0;
      transition: opacity 250ms ease-in-out;
      text-transform: uppercase;
     }


  /*  .stacks-container:has(.hover-box:hover) > #intro{opacity: 0;} */






    .container-text-section {

        position: sticky;
        z-index: 10;
        top: 50%;
        left: 50%;
        width: 71%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 2.5rem;
        font-weight: 700;

        }

.button-link-hp {
  /*
animation-timeline: --container-char-animation;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timing-function: 
cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation-range-start:200vh;


 animation-name:  textfade;
*/

}




}
}


@keyframes imagebackgroundfade{
    0%,10%  {opacity:0;display:none;}
        10%,20%  {opacity:0;display:flex;}
        30%,70%{opacity:0.15;display:flex;}
         95%,96%{opacity:0;display:flex;}
         97%,100%{opacity:0;display:none;}
    }


@media only screen and (max-width: 1048px) {

@keyframes imagebackgroundfade{
       0%,10%  {opacity:0;display:none;}
        10%,20%  {opacity:0;display:block;}
        30%,70%{opacity:0.15;display:block;}
         95%,96%{opacity:0;display:block;}
         97%,100%{opacity:0;display:none;}
    }


     }