/* Fichier CSS dédié aux animations pour Tryze */

/* États de base des éléments animés */
.reveal-item,
.reveal-text,
.progressive-reveal {
  opacity: 0;
  will-change: transform, opacity;
}

/* Les animations seront appliquées via motionOne dans main.js */

/* Animation de survol pour les éléments interactifs */
nav a {
  transition: color 0.3s ease, transform 0.2s ease;
}

nav a:hover {
  transform: translateY(-2px);
}

/* Animation pour les boutons */
button {
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

button:active {
  transform: translateY(1px);
}

/* Animation pour les images */
img {
  transition: transform 0.5s ease;
}

.img-hover:hover img {
  transform: scale(1.03);
}

/* Animation pour mettre en évidence les cartes */
.bg-gray-50 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bg-gray-50:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Animation pour le scrolling fluide */
html {
  scroll-behavior: smooth;
}

/* Animation pour le header lors du défilement */
header {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

header.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.95);
}

/* Animation pour les inputs des formulaires */
input {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

/* Animation de pulsation subtile pour attirer l'attention */
@keyframes subtle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(14, 165, 233, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

.pulse-attention {
  animation: subtle-pulse 2s infinite;
}

/* Nouveaux styles pour les formulaires redessinés */
/* Animation de focus pour les formulaires */
#waitlist-form,
#cta-waitlist-form {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

#waitlist-form:focus-within,
#cta-waitlist-form:focus-within {
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.5), 0 8px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Animation du bouton dans les formulaires */
#waitlist-form button,
#cta-waitlist-form button {
  transform: translateZ(0);
  transition: transform 0.3s ease, background-color 0.3s ease,
    box-shadow 0.3s ease;
}

#waitlist-form button:hover,
#cta-waitlist-form button:hover {
  transform: translateY(0) scale(1.03);
}

/* Animation d'apparition progressive pour le placeholder */
@keyframes fadeInPlaceholder {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}

#waitlist-form input::placeholder,
#cta-waitlist-form input::placeholder {
  /* Suppression de l'animation qui cause le problème */
  /* animation: fadeInPlaceholder 1s ease-in-out forwards; */
  opacity: 0.7; /* Opacité directe au lieu de l'animation */
  color: inherit; /* S'assure que la couleur est héritée correctement */
}

/* Spécifique pour le formulaire de la section hero qui a un fond sombre */
#waitlist-form input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Spécifique pour le formulaire CTA qui a un fond clair */
#cta-waitlist-form input::placeholder {
  color: rgba(75, 85, 99, 0.7); /* gray-600 avec transparence */
}

/* Effet de brillance sur le bouton au survol */
@keyframes shine {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

#waitlist-form button:hover,
#cta-waitlist-form button:hover {
  background-image: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% auto;
  animation: shine 2s linear infinite;
}