/*
 Effects CSS
 Last update : 13.20.25
*/


/* rotate img */
.rotate {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-transition-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    }
.rotate:hover img {
    -webkit-transform: scale(1.01) rotate(-0.2deg);
    -moz-transform: scale(1.01) rotate(-0.2deg);
    -o-transform: scale(1.01) rotate(-0.2deg);
    -ms-transform: scale(1.01) rotate(-0.2deg);
    transform: scale(1.01) rotate(-0.2deg);
}

/* animate from bottom */
.animate-bottom.inview {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 2s;
  animation-name: animatebottom;
  animation-duration: 2s
}
@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

/* REVEAL inview  */
.reveal {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    -moz-transition: .8s;
    -o-transition: .8s;
    -webkit-transition: .8s;
    transition: .8s;
}
.reveal:nth-of-type(2) {
    -moz-transition-delay: .6s;
    -o-transition-delay: .6s;
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
}
.reveal:nth-of-type(3) {
    -moz-transition-delay: .9s;
    -o-transition-delay: .9s;
    -webkit-transition-delay: .9s;
    transition-delay: .9s;
}
.reveal:nth-of-type(4) {
    -moz-transition-delay: 1.2s;
    -o-transition-delay: 1.2s;
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s;
}
.reveal:nth-of-type(5) {
    -moz-transition-delay: 1.4s;
    -o-transition-delay: 1.4s;
    -webkit-transition-delay: 1.4s;
    transition-delay: 1.4s;
}
.reveal:nth-of-type(6) {
    -moz-transition-delay: 1.7s;
    -o-transition-delay: 1.7s;
    -webkit-transition-delay: 1.7s;
    transition-delay: 1.7s;
}
.reveal.inview {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}

/* wiggle container */
.wiggle {
    position: absolute;
    display: block;
    width: 100%; /* largeur du conteneur */
    padding: 0;
    animation-name: wiggle;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    z-index: 5;
}

/* wiggle link / picto */
.wiggle a {
    display: block;
    width: clamp(60px, min(15vw, 8vh), 100px); /* largeur responsive */
    aspect-ratio: 2.5 / 1; /* ratio SVG width / height */
    margin: 0 auto;
    border: 0;
    background-image: url(../images/grapes.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-color: transparent;
    padding: 0;
}

/* hover */
.wiggle a:hover {
    background-color: inherit;
    border: 0;
}

/* wiggle animation avec bottom responsive */
@keyframes wiggle {
    0%   { bottom: clamp(20px, 5vh, 40px); }
    50%  { bottom: clamp(25px, 6vh, 45px); }
    100% { bottom: clamp(20px, 5vh, 40px); }
}