/*
 Effects CSS
 Last update : 13.1.26
*/

/* rotate img */
.rotate {
    overflow: hidden;
}
.rotate img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center center;
}
.rotate:hover img {
  transform: scale(1.03) rotate(-0.5deg);
}

/* fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px); /* Décalage initial en hauteur */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Position finale */
    }
}

/* 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 }
}

/* FADE  */
.hidden {
    opacity: 0;
}
@-webkit-keyframes fade-in {
    0%   { opacity: 0; transform: scale(.7,.7) }
    100% { opacity: 1;}
}
@keyframes fade-in {
    0%   { opacity: 0; transform: scale(.7,.7) }
    100% { opacity: 1; }
}
.fade-in-element {
  animation: fade-in 2s;
}

/* 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);
}

/* wiggles */
.wiggle {
    position: absolute;
    display: block;
    bottom: 20px;
    left: 0;
    width: 100%;
    z-index: 5;
}
.wiggle a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: max-content;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: 0;
    text-decoration: none;
}
/* texte (statique) */
.wiggle a::before {
    content: "RIDE!";
    display: block;
    font-family: inherit; /* ou ta font custom */
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}
/* arrow */
.wiggle a::after {
    content: "";
    display: block;
    width: 24px;   /* Largeur de la flèche */
    height: 58px;  /* Hauteur totale */
    background-color: var(--color-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 58'%3E%3Cpath d='M12 0v56M2 46l10 10 10-10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 58'%3E%3Cpath d='M12 0v56M2 46l10 10 10-10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;

    animation: wiggle-arrow 1.6s ease-in-out infinite;
    margin-bottom: 8px;
}

@keyframes wiggle-arrow {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(10px); }
    60%  { transform: translateY(10px); }
    100% { transform: translateY(0); }
}