/* ============================================
   BlueWeb Création — animations.css
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.grid .reveal:nth-child(1) { transition-delay: .05s; }
.grid .reveal:nth-child(2) { transition-delay: .12s; }
.grid .reveal:nth-child(3) { transition-delay: .19s; }
.grid .reveal:nth-child(4) { transition-delay: .26s; }
.grid .reveal:nth-child(5) { transition-delay: .33s; }
.grid .reveal:nth-child(6) { transition-delay: .4s; }
.grid .reveal:nth-child(7) { transition-delay: .47s; }
.grid .reveal:nth-child(8) { transition-delay: .54s; }

.hero__content > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn .8s cubic-bezier(.4,0,.2,1) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: .1s; }
.hero__content > *:nth-child(2) { animation-delay: .2s; }
.hero__content > *:nth-child(3) { animation-delay: .3s; }
.hero__content > *:nth-child(4) { animation-delay: .45s; }
.hero__content > *:nth-child(5) { animation-delay: .6s; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

.hero__visual {
  opacity: 0;
  animation: heroIn 1s cubic-bezier(.4,0,.2,1) .35s forwards;
}

@keyframes pulseSoft {
  0%,100% { box-shadow: 0 10px 25px rgba(37,211,102,.4); }
  50% { box-shadow: 0 10px 35px rgba(37,211,102,.65); }
}
.whatsapp-fab { animation: pulseSoft 2.5s ease-in-out infinite; }

.pack__thumb { position: relative; }
.pack__thumb::before {
  content: '';
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  z-index: 2;
}
.pack:hover .pack__thumb::before { left: 125%; }

@keyframes gentleFloat {
  0%,100% { transform: perspective(1200px) rotateY(-6deg) rotateX(3deg) translateY(0); }
  50% { transform: perspective(1200px) rotateY(-6deg) rotateX(3deg) translateY(-8px); }
}
.hero__visual .mock { animation: gentleFloat 6s ease-in-out infinite; }
.hero__visual .mock:hover { animation: none; }

body { animation: pageIn .4s ease; }
@keyframes pageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}