/* =============================================
   1NSPIRE – Animations CSS
   ============================================= */

/* --- Scroll Reveal --- */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}

.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --- Generic Reveal (classe universelle) --- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* --- Reveal Children (stagger 80ms automatique) --- */
.reveal-children > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-children.visible > *:nth-child(1)  { transition-delay:   0ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(2)  { transition-delay:  80ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(3)  { transition-delay: 160ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(4)  { transition-delay: 240ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(5)  { transition-delay: 320ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(6)  { transition-delay: 400ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(7)  { transition-delay: 480ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(8)  { transition-delay: 560ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(9)  { transition-delay: 640ms; opacity: 1; transform: none; }
.reveal-children.visible > *:nth-child(10) { transition-delay: 720ms; opacity: 1; transform: none; }

/* --- Parallax Hero --- */
.hero-video-wrap {
  will-change: transform;
}

/* --- Hover Lift --- */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* --- Shimmer / Glare effect --- */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(192, 192, 200, 0.08),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.shimmer:hover::before { left: 150%; }

/* --- Page Transition --- */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 9990;
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

.page-transition-overlay.enter {
  clip-path: inset(0 0 0% 0);
}

.page-transition-overlay.exit {
  clip-path: inset(100% 0 0% 0);
}

/* --- Magnetic Button --- */
.btn-magnetic {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Underline Animated --- */
.animated-underline {
  position: relative;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--silver);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animated-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Stagger children --- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.5s; opacity: 1; transform: none; }

/* --- Pulse Ring (ex: bouton CTA) --- */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

.pulse-ring {
  position: relative;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--silver);
  border-radius: inherit;
  animation: pulseRing 2s ease-out infinite;
  pointer-events: none;
}

/* --- Scroll progress bar --- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--silver);
  z-index: 1001;
  width: 0%;
  transition: width 0.1s linear;
}

/* --- Floating label animation (formulaire) --- */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
  transform: translateY(-1.4rem) scale(0.85);
  color: var(--silver);
}

/* --- Text glitch (pour des effets title) --- */
@keyframes glitch1 {
  0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(-2px, 0); }
  25%       { clip-path: inset(40% 0 50% 0); transform: translate(2px, 0); }
  50%       { clip-path: inset(70% 0 20% 0); transform: translate(-1px, 0); }
  75%       { clip-path: inset(10% 0 80% 0); transform: translate(1px, 0); }
}

/* --- Fade In (utilitaire) --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-in { animation: fadeIn 0.6s ease forwards; }

/* --- Scale In --- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.scale-in { animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }