/*
Theme Name: Talk2u 2024 (basé sur Hello Elementor)
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: François Barnich - Talk2u sarl
Author URI: talk2u.lu
Version: 1.0.0.1704290195
Updated: 2024-01-03 14:56:35

*/
/* Dégradé de fond*/
.t2u-bg-grad01 {
    background-size: 100% 100%;
    background-image: radial-gradient(50% 40% at 0% 80%, rgba(0, 144, 215, 0.333) 1%, rgba(0, 144, 215, 0) 100%), radial-gradient(30% 40% at 100% 0%, rgba(163, 234, 113, 0.333) 1%, rgba(163, 234, 113, 0) 99%), linear-gradient(0deg, rgb(19, 49, 68) 0%, rgb(19, 49, 68) 100%);
    background-position: 0px 0px, 0px 0px, 0px 0px;
}

/*HOVER MENU*/
.t2u-hover-fx {
  position: relative;
  display: inline-block;
  color: #ffffff;
  transition: color 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}
.t2u-hover-fx:hover {
  text-shadow: 4px 1px 1px #0090D7, -4px -1px 1px #e23a78; 
}

/*Progress Bar*/
.t2u-progress-container {
  width: 100%;
  height: .3rem;
  background:var( --e-global-color-primary );
  }

.t2u-progress-bar {
  height: .3rem;
  background:var( --e-global-color-secondary );
  width: 0%;
}
/* sticky effect */
/* Les elements se maintiennent en haut de page le temps que leur conteneur défile*/
.t2u-sticky{
	position: sticky;
	top: 160px;
	transform-origin: center top;
}


/* STACK CARDS EFFECT */
/* Pour les cartes en page d'accueil. Chaque carte (qui doit avoir une ID dans Elementor)
 * devient sticky lorsqu'elle atteint le sommet de l'écran (+offset) */
#card1 { --card-index: 1; --rotation: -5deg; --posX: -30rem; --posY: 10rem;}
#card2 { --card-index: 2; --rotation: 3deg; --posX: 20rem; --posY: 4rem; }
#card3 { --card-index: 3; --rotation: -1deg; --posX: 0rem; --posY: 32rem; }
#card4 { --card-index: 4; --rotation: 0deg; --posX: 0rem; --posY: 0rem; } /*pas utilisé*/
#card5 { --card-index: 5; --rotation: 0deg; --posX: 0rem; --posY: 0rem; } /*pas utilisé*/
#card6 { --card-index: 5; --rotation: 0deg; --posX: 0rem; --posY: 0rem; } /*pas utilisé*/

.stack-cards__item {
  --card-spacing: 2rem;
  position: sticky;
  pointer-events: none; /*les clics dans cet éléments n'ont pas d'effet*/
  /*top: calc(4rem + var(--card-spacing) * var(--card-index));*/
  top: 50px;
  transform-origin: center top;
  transition: transform 0.3s ease-in-out; /* Adding transition for smooth animation */
}
/* lorsque la carte est sticky (voir la fonction dans le fichier de scripts custom 't2u-scripts.js'), elle subit une transformation. */
.stack-cards__item.sticky {
  transform: scale(0.75) rotate(var(--rotation)) translateX(var(--posX)) translateY(var(--posY));
}
.stack-cards__button{
	pointer-events: initial; /*les clics dans cet élément produisent l'effet normal (annule le "pointer-events: none;" appliqué au reste de la carte, voir plus haut)*/
}


/*SLIDE UP WHEN VISIBLE*/
/* Pour les éléments comme les mockups (dans le portfolio), cette classe crée une légère animation lorsque l'élément arrive dans le viewport
 * Voir dans le le fichier de scripts custom 't2u-scripts.js' pour la fonction qui détecte la présence de l'émément dans le viewport'*/
.t2u-slide-up {
  transform: translateY(4rem) ;
  transition: transform 1.5s ease-out;
}

.t2u-slide-up.visible {
  transform: translateY(0) scale(1.0);
  animation: rebound 1.5s ease-out;
}

@keyframes rebound {
  33% {
    transform: translateY(-0.2rem) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
}