/*
###########################################################################
Home Title mobile styles for jericho-bk.de 2023

FileName:   reveal.css
Author:		Barbara Völk, www.grafik-webdesign.info
Version:    2023.07.07
###########################################################################
*/

/*body.touch .background {        
    box-sizing: border-box;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
    border: none;
    
    box-shadow: 3px 3px 6px -3px black,
                3px -3px 6px -3px black;
        }*/

/*
body.touch .background {        
    box-sizing: border-box;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
    border: none;
    
    box-shadow: 3px 10px 16px -3px rgba(29,37,42,0.7),
                3px -10px 16px -3px rgba(29,37,42,0.7);
        }
*/

/***********************************************/
/* TITLE STYLES TOUCH DEVICES */
/***********************************************/


.content__title, .home-title {
	/*font-size: 8vw;*/
	line-height: 1.2;
    /*font-family: 'NotoSans_ExtraLight', sans-serif;*/
   /* font-size: 5.4rem; font-size: 6vw;*/
     /*text-transform: uppercase;*/
}


body.touch .intro .home-title {
     padding: 0;
            margin: 0;
            margin-top: 10vh;
            height: 80vh;
            text-align: left;
     align-self: auto;
    
    /*font-size: min(max(16px, 4vw), 22px);  *//* supported by Safari (11.1+), Chrome (79+)*/
    /*font-size: clamp(16px, 4vw, 22px); *//* supported by Chrome (79+)*/
    
    /* font-size: min(max(5.4rem, 6vw), 6vh);*/  /* supported by Safari (11.1+), Chrome (79+)*/
    /*font-size: clamp(5.4rem, 6vw, 6vh); */ /*supported by Chrome (79+)*/
}
body.touch .home-title div {
    position: relative;
    /*overflow: hidden;*/
    display: block;
    line-height: 1.2;
    
}

        
body.touch .home-title div:nth-child(1) {
            /*background-color: lightblue;*/
           /* line-height: 0.2;*/
            /*padding-bottom: -60px;*/
          /*  margin-top: 30px;*/
            color: rgba(255, 255, 255, 0.0);
            /*animation: fade-in 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;*/
            animation: fade-in 1s cubic-bezier(.77,0,.18,1) forwards;
        }
        
body.touch .home-title div:nth-child(2) {
           /* background-color: lightgreen;*/
           /* line-height: 0.2;*/
            padding-left: 0px;
            color: rgba(255, 255, 255, 0.0);
            /*animation: fade-in 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;*/
            animation: fade-in 1s cubic-bezier(.77,0,.18,1) forwards;
        }
body.touch .home-title #h1 {
            /*background-color: green;*/
            line-height: 0.1;
            padding: 0px;
            /*color: rgba(255, 255, 255, 0.0);*/
           position: absolute;
    /*top: -2.5rem;*/
    /* right: 0;
    width: 100%;*/
            /*color: green;*/
            opacity: 0;
             /*animation: fade-i 1s cubic-bezier(.77,0,.18,1) forwards;*/
            /*transform: translateX(-101%);*/
            /*animation: fade-i 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;*/
            animation: fade-i 0.3s cubic-bezier(.77,0,.18,1) forwards;
            transform: scale(1); 
        }
        
body.touch .home-title div {    
    /*opacity: 0;*/
    
    
 /* -webkit-animation: text-visible 0.0001s linear forwards;
          animation: text-visible 0.0001s linear forwards;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;*/
    
   /* -webkit-animation: colorchange 20s infinite alternate;*/
   /* color: rgba(255, 255, 255, 0.5);*/
   /* -webkit-animation: colorchange 20s forwards 1;*/
}  


body.touch .home-title  div::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: white;
    background: var(--color-blue);
    /*animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;*/
    animation: a-ltr-after 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    transform: translateX(-101%);
}

body.touch .home-title div:nth-child(2)::after{
    background: var(--bg-color);
    background: var(--color-bg);
     background: var(--color-light-yellow);
    
}
        
body.touch .home-title div::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
   /* background: var(--color-bg);*/
   /* background: var(--color-blue);*/
    /*background: green;*/
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}
        
 .home-title div:nth-child(2)::before{
    /*background: var(--bg-color);
    background: var(--color-bg); 
     background: var(--color-light-yellow);*/
    
}

 @media only screen and (max-width:768px) /*and (orientation:portrait)*/ {

     /*body.touch */.home-title div {
    line-height: 5rem;
           line-height: 3rem;
            /*text-align: right;*/
            align-self: flex-end;  /*align-self: flex-start;*/
           /*background: lightgreen;*/
    
}

}

body.touch .home-title #h1 {
    /*animation: fade-i 8.5s cubic-bezier(.77,0,.18,1) forwards;*/
   /* animation: fade-in 8.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;*/
    /*animation: fade-i 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;*/
    /*transform: translateX(0);*/
    animation-delay: 2.8s;
}
  

body.touch .home-title div:nth-of-type(1)::before,
body.touch .home-title div:nth-of-type(1)::after{
    animation-delay: 1s;
}

body.touch .home-title div:nth-of-type(2)::before,
body.touch .home-title div:nth-of-type(2)::after{
    animation-delay: 1.5s;
}
        
body.touch .home-title div:nth-of-type(1),
body.touch .home-title div:nth-of-type(1) {
    /*animation: text-animation 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);*/
    animation-delay: 0.8s;
}
  
body.touch .home-title div:nth-of-type(2),
body.touch .home-title div:nth-of-type(2) {
    /*animation: text-animation 2s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);*/
    animation-delay: 1.4s;
}
        


@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}

@keyframes fade-i {
    0% {opacity: 0; transform: scale(0.1); }
    /*70% {transform: scale(1.5); }*/
    100% {opacity: 1; transform: scale(1); }
}
        
  @keyframes text-animation {
  0% {margin-left: -100vw;}
  /*10% {margin-left: 0;}
  20% {margin-left: -5.62rem;}
  30% {margin-left: -5.62rem;}
  40% {margin-left: -11.24rem;}
  60% {margin-left: -11.24rem;}
  70% {margin-left: -5.62rem;}
  80% {margin-left: -5.62rem;}
  90% {margin-left: 0;}*/
  100% {margin-left: 0;}
}
        
@keyframes fade-in {
  0% {
    /*color: blue;*/
       color: rgba(255, 255, 255, 0.0);
  }
  
  100% {
    /*color: pink;*/
       color: rgba(255, 255, 255, 1);
  }
}
        @keyframes colorchange {
  0% {
    /*color: blue;*/
       color: rgba(255, 255, 255, 0.0);
  }

  70% {
    /*color: #2980b9;*/
       color: rgba(255, 255, 255, 0.8);
  }
  
  100% {
    /*color: pink;*/
       color: rgba(255, 255, 255, 1);
  }
}



/***********************************************/
/* BLOCK REVEAL TOUCH DEVICES */
/***********************************************/

.block-revealer__element {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	pointer-events: none;
	opacity: 0;
}