/* ===================================================================
   MOBILE.CSS
   ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   Applies when screen width ≤ 768px (linked via media query).
   =================================================================== */

   html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    font-family: Arial, sans-serif;
    /* overflow-x: hidden; */
  }
  
  html {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  
  html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  
  
  
  
  .panel {
    height: 100vh;
    width: 100vw;
  
    padding-top: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-bottom: 5vh;
  
    position: relative;
    box-sizing: border-box;
  
    /* outline: 1px solid blue; */
  }
  

  /*
    
  .section {
    outline: 1px solid gray;
  }
  

*/




  .title {
    font-size: 4.8vh;
    line-height: 1.15;
    white-space: nowrap;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
  
   cursor: pointer;
   font-style: normal;
  }

  .title.active {
   font-style: italic;
  }


  
  .body {
    font-size: 1.9vh;
    line-height: 1.5;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
  }
  

  a {
    color: #fff;
    text-decoration: none;
    font-size: 1.9vh;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;

  }
  
  
  a:hover {
    font-style: italic;
  }







  
  /* 
  
  /$$   /$$ /$$$$$$$$ /$$$$$$$   /$$$$$$ 
  | $$  | $$| $$_____/| $$__  $$ /$$__  $$
  | $$  | $$| $$      | $$  \ $$| $$  \ $$
  | $$$$$$$$| $$$$$   | $$$$$$$/| $$  | $$
  | $$__  $$| $$__/   | $$__  $$| $$  | $$
  | $$  | $$| $$      | $$  \ $$| $$  | $$
  | $$  | $$| $$$$$$$$| $$  | $$|  $$$$$$/
  |__/  |__/|________/|__/  |__/ \______/                                     
  
  */

#panelHero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  position: relative;
  height: 95vh;

}

/* --- MENU (Top) --- */

#panelHero .menuDramatiker {
  position: absolute; 
  z-index: 20;

  display: flex;
  justify-content: center;
  
  width: 60%;
  height: 4vh;
}

#panelHero .menuDramatiker .body {
  position: absolute;
  z-index: 10;
  color: #050505;
}


#panelHero .menuDramatiker .body.white {
  color: white;
  animation: slow 3s ease-in;
}


@keyframes slow {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}


#panelHero .menuDramatiker .blackTriangle {
  position: absolute;
  top: -0.1vh;
  left: 0;
  z-index: 9;

  width: 100%;
  height: auto;
  pointer-events: none;
}



  /* IMAGE IMAGE IMAGE */

#panelHero .epicStage {
  height: 60vh;      
  width: 100%;
  overflow: hidden;
  position: relative; 
}

#panelHero .parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#panelHero .parallax-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}








  /* TITLE TITLE TITLE */

#panelHero .sectionTitle {
  height: 35vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;

  padding-top: 1vh;
  padding-left: 2vw;
}

#panelHero .sectionTitle .scream {
  font-size: 16vh;
  line-height: 0.9;
  color: #050505;
  font-family: 'Bebas Neue', sans-serif;
  display: inline-block;
  max-width: 90vw;
}


















  
  /*
  
   /$$      /$$  /$$$$$$  /$$$$$$$  /$$   /$$
  | $$  /$ | $$ /$$__  $$| $$__  $$| $$  / $$
  | $$ /$$$| $$| $$  \ $$| $$  \ $$|  $$/ $$/
  | $$/$$ $$ $$| $$  | $$| $$$$$$$/ \  $$$$/ 
  | $$$$_  $$$$| $$  | $$| $$__  $$  >$$  $$ 
  | $$$/ \  $$$| $$  | $$| $$  \ $$ /$$/\  $$
  | $$/   \  $$|  $$$$$$/| $$  | $$| $$  \ $$
  |__/     \__/ \______/ |__/  |__/|__/  |__/                                 
                                             
  */

#panelWorks {
  min-height: 120vh;
  position: relative;
  align-items: center;

  display: flex;
  flex-direction: column;
}


#panelWorks .menuWorks {
  position: absolute; 
  z-index: 50;

  display: flex;
  justify-content: center;
  
  width: 60%;
  height: 4vh; 
 }

 #panelWorks .menuWorks .body {
  position: absolute;
  z-index: 10;          
}

 #panelWorks .menuWorks .blackTriangle {
  position: absolute;
  top: -0.1vh;
  left: 0;
  z-index: 9;

  width: 100%;
  height: auto;
  pointer-events: none;
}



#panelWorks .floating {
  position: sticky;
  top: 0;
  z-index: 30;

  display: flex;

  width: 100%;

  min-height: 30vh;
  justify-content: center;
  align-items: flex-start;

  background: rgba(0, 0, 0, 0.8);
  }




#panelWorks .floating .logline {
  position: relative;
  display: flex;

  z-index: 25;
  min-height: 15vh;
  width: 100%;


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

  margin-top: 10vh;
}

#panelWorks .floating .logline .body {
  position: relative;
  display: flex;

  z-index: 25;
  
  text-align: justify;
  justify-content: center;
  align-content: center;
  color: white;
  transition: opacity 0.3s ease-out;

  max-width: 80vw;
}





#panelWorks .floating .lightBeam {
  position: absolute; 

  width: 100%;
  height: auto;
  z-index: 21;

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


  background: black;
  padding-top: 5vh;
}



 #panelWorks .floating .lightBeam .beamImage {
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
 }








 #panelWorks .lightingPanel {
  position: relative; 

  display: flex;
  flex-direction: column;

  width: 100%;
  height: auto;

  margin-top: 10vh;
}


.lightingPanel .lightingLeft,
.lightingPanel .lightingRight {
  display: flex;
  flex-direction: column;
}




#panelWorks .lightingPanel .exposee {
  display: flex;
  position: relative;
  flex-direction: column;

  justify-content: space-between;
  align-items: center;
  width: 100%;

  margin-bottom: 2.5vh;
}


#panelWorks .lightingPanel .exposee .title {  
  display: flex;

  order: 1;
  height: auto;

  display: inline-block;
  white-space: normal;
  text-align: center;
}



#panelWorks .lightingPanel .exposee .workInfo {
  display: flex;
  position: relative;
  flex-direction: row;

  justify-content: center;
  align-items: center;
  width: 100%;

  order: 2;
}



#panelWorks .lightingPanel .exposee .workInfo .body {
  display: flex;
  justify-content: flex-start;
  text-align: center;

  order: 2;

}


#panelWorks .lightingPanel .exposee .workInfo .pdf {
  display: flex;
  justify-content: flex-start;

  text-align: center;

  text-decoration: underline;

  margin-left: 2vh;

  order: 3;
}






    /*
  
  /$$$$$$  /$$   /$$ /$$$$$$$$ /$$   /$$  /$$$$$$  /$$$$$$$ 
  /$$__  $$| $$  | $$|__  $$__/| $$  | $$ /$$__  $$| $$__  $$
  | $$  \ $$| $$  | $$   | $$   | $$  | $$| $$  \ $$| $$  \ $$
  | $$$$$$$$| $$  | $$   | $$   | $$$$$$$$| $$  | $$| $$$$$$$/
  | $$__  $$| $$  | $$   | $$   | $$__  $$| $$  | $$| $$__  $$
  | $$  | $$| $$  | $$   | $$   | $$  | $$| $$  | $$| $$  \ $$
  | $$  | $$|  $$$$$$/   | $$   | $$  | $$|  $$$$$$/| $$  | $$
  |__/  |__/ \______/    |__/   |__/  |__/ \______/ |__/  |__/ */
  
  
  
  


    #panelAutor {
      display: flex;
      flex-direction: column;
      align-items: center;

      position: relative; 
      min-height: 150vh; 

      justify-content: space-between; 

    }
     


     #panelAutor .menuAuthor {
      position: absolute; 
      z-index: 20;
    
      display: flex;
      justify-content: center;
      
      width: 60%;
      height: 4vh; 
     }
  
     #panelAutor .menuAuthor .body {
      position: absolute;
      z-index: 10;          
    }

     #panelAutor .menuAuthor .blackTriangle {
      position: absolute;
      top: -0.1vh;
      left: 0;
      z-index: 9;
    
      width: 100%;
      height: auto;
      pointer-events: none;
    }


  

     #panelAutor .hzPortrait {
      position: relative; 
      order: 1;
      z-index: 0;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      top: 0vh;
      width: 100%;
      height: auto;     
      
      margin-bottom: 5vh;

     }
   
     #panelAutor .hzPortrait .portraitHz {
      width: 100%;
      height: auto;
      pointer-events: none;

      margin-bottom: 1vh;
     }



     #panelAutor .hzPortrait .body{
      position: relative;
      z-index: 20;
    
      display: flex;
      align-items: flex-start;
      justify-content: center;
    
      width: 100%;
      font-size: 1.1875vh;
      text-align: center;
     }




     #panelAutor .vitaLeft {
      order: 2;

      position: relative;
      z-index: 20;
    
      display: flex;
      align-items: flex-start;
      justify-content: center;
    
      width: 100%;
      margin-bottom: 5vh;
     }
  
     #panelAutor .vitaLeft .body {
      max-width: 80vw;
      text-align: justify;

     }





     #panelAutor .vitaRight {
      order: 2;

      position: relative;
      z-index: 20;
    
      display: flex;
      flex-direction: column;

      align-items: center;
      justify-content: flex-start;
    
      width: 100%;
     }
  
     #panelAutor .vitaRight .body {
      max-width: 80vw;
      text-align: justify;

      margin-bottom: 12.5vh;

     }





     #panelAutor .vitaRight .kontakt {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      z-index: 20;
      margin-bottom: 5vh;
      }


      #panelAutor .vitaRight .kontakt .title {
        font-family: "Bebas Neue", Arial, sans-serif;
        font-size: 4.8vh;

        margin-bottom: 1.5vh;
      }
  

      #panelAutor .vitaRight .kontakt .mail {
      font-style: normal;
      font-size: 1.9vh;
    }
    
















    /* PANEL INFO */

     #panelInfo {
      height: 10vh;
      padding-top: 2vh;
      margin-bottom: 0vh;

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


     #panelInfo .info {
      width: 90vw;
      height: 5vh;
      bottom: 2vh;
      
      text-align: center;
      font-size: 1.1875vh;
      
      flex-direction: column;
      align-items: center;
      justify-content: center;
     }

     #panelInfo .info .body {
      width: 90vw;
      padding-bottom: 1vh;
      
      text-align: center;
      font-size: 1.36vh;
      color: gray;
     }

     #panelInfo .info a.body {
      max-width: 90vw;
     }












  
  
     .curtain-left, .curtain-right {
      position: fixed;
      top: 0;
      width: 51%;
      height: 100%;
      background-color: black;
      z-index: 100;
      transition: transform 3s ease-out;
    }
    
    .curtain-left {
      left: 0;
      transform: translateX(0); /* Start off-screen to the left */
    }
    
    .curtain-right {
      right: 0;
      transform: translateX(0); /* Start off-screen to the right */
    }
    
    .content {
      position: relative;
      z-index: 1;
      padding: 20px;
      transition: opacity 3s ease-out;
      opacity: 0;
    }
    
    /* Animation classes */
    .curtain-left.open {
      transform: translateX(-100%); /* Move to the center */
    }
    
    .curtain-right.open {
      transform: translateX(100%); /* Move to the center */
    }
    
    .content.show {
      opacity: 1;
    }
    
    
    
    
    .scream.flicker {
      animation: flicker 1.5s ease-in-out;
    }
    
    .scream.white {
      color: white; /* Text turns white after curtains open */
    }
    
    @keyframes flicker {
      0%, 100% { opacity: 1; }
      5% { opacity: 0.4; }
      10% { opacity: 0.9; }
      15% { opacity: 0.7; }
      20% { opacity: 0.95; }
      25% { opacity: 0.85; }
      30% { opacity: 0.98; }
      35% { opacity: 0.75; }
      40% { opacity: 0.9; }
      45% { opacity: 0.8; }
      50% { opacity: 1; }
    }