/* ============================================
   BLAFA — animations.css
   Reveals · Keyframes · Micro-interactions
   ============================================ */

/* ═══════════════════════════════════════════
   REVEAL — Fade up (défaut pour tout contenu)
   ═══════════════════════════════════════════ */

.reveal-fade {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal-fade.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ═══════════════════════════════════════════
   REVEAL — Word by word (pour titres display)
   Les mots montent en cascade depuis un mask
   ═══════════════════════════════════════════ */

.reveal-words {
  /* Le conteneur reste normal, c'est chaque .word qui s'anime */
}

.reveal-words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.05em; /* évite clipping des descendantes g, p, j */
}

.reveal-words em .word,
.reveal-words .hero__title-accent .word {
  overflow: visible;
  padding-bottom: 0.16em;
}

.reveal-words .word > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out-expo);
  will-change: transform;
}

.reveal-words.is-visible .word > span {
  transform: translate3d(0, 0, 0);
}

/* ═══════════════════════════════════════════
   REVEAL — Mask (une seule ligne qui monte)
   ═══════════════════════════════════════════ */

.reveal-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.05em;
}

.reveal-mask__inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1s var(--ease-out-expo);
  will-change: transform;
}

.reveal-mask.is-visible .reveal-mask__inner {
  transform: translate3d(0, 0, 0);
}

/* ═══════════════════════════════════════════
   REVEAL — Blur (pour chiffres/metrics qui "pop")
   ═══════════════════════════════════════════ */

.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 1.2s var(--ease-out),
    filter 1.2s var(--ease-out),
    transform 1.2s var(--ease-out);
  will-change: opacity, filter, transform;
}

.reveal-blur.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}

/* ═══════════════════════════════════════════
   REVEAL — Scale (images qui entrent)
   ═══════════════════════════════════════════ */

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 1.1s var(--ease-out-expo),
    transform 1.1s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════════════
   REVEAL — Clip (dévoilement depuis le bas)
   ═══════════════════════════════════════════ */

.reveal-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-out-expo);
  will-change: clip-path;
}

.reveal-clip.is-visible {
  clip-path: inset(0 0 0 0);
}

/* ═══════════════════════════════════════════
   STAGGER — Délais via data-delay
   Permet d'orchestrer l'ordre d'apparition
   ═══════════════════════════════════════════ */

[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }

@media (max-width: 900px) {
  .reveal-fade {
    transform: translate3d(0, 16px, 0);
    transition-duration: 0.72s;
  }

  .reveal-blur {
    filter: blur(6px);
    transform: translate3d(0, 8px, 0);
    transition-duration: 0.8s;
  }

  .reveal-scale {
    transform: scale(0.97);
    transition-duration: 0.78s;
  }

  [data-delay="1"] { transition-delay: 0.05s; }
  [data-delay="2"] { transition-delay: 0.10s; }
  [data-delay="3"] { transition-delay: 0.15s; }
  [data-delay="4"] { transition-delay: 0.20s; }
  [data-delay="5"] { transition-delay: 0.25s; }
  [data-delay="6"] { transition-delay: 0.30s; }
}

/* ═══════════════════════════════════════════
   KEYFRAMES partagées
   ═══════════════════════════════════════════ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════
   Pulse subtil pour les dots, indicateurs
   ═══════════════════════════════════════════ */

.pulse-dot {
  position: relative;
  display: inline-block;
}

.pulse-dot::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: inherit;
  opacity: 0.5;
  animation: pulse-ring 2s var(--ease-out) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ═══════════════════════════════════════════
   MARQUEE (réserve pour logos partenaires)
   ═══════════════════════════════════════════ */

.marquee {
  display: flex;
  overflow: hidden;
  gap: var(--space-7);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-7);
  animation: marquee-scroll 40s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ═══════════════════════════════════════════
   HOVER LIFT — Cards qui se soulèvent
   ═══════════════════════════════════════════ */

.lift {
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out);
  will-change: transform;
}

.lift:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--shadow-lg);
}

@media (hover: none) {
  .lift:hover,
  .service-card:hover,
  .medvi-step:hover,
  .medvi-testimonial:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .service-card:hover .service-card__img,
  .medvi-img-block:hover img,
  .medvi-photo-strip__item:hover img,
  .medvi-step:hover .medvi-step__img img {
    transform: none !important;
  }

  .medvi-img-block:hover::before {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════
   PAGE LOAD — Intro élégante
   ═══════════════════════════════════════════ */

.page-intro {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: var(--z-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform 0.9s var(--ease-in-out) 0.3s;
}

.page-intro__brand {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.03em;
  opacity: 0;
  animation: fadeIn 0.5s var(--ease-out) forwards;
}

.page-intro__brand .dot {
  color: var(--sage);
}

.page-intro.is-done {
  transform: translate3d(0, -100%, 0);
}

/* ═══════════════════════════════════════════
   Respect reduced-motion
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .reveal-fade,
  .reveal-words .word > span,
  .reveal-mask__inner,
  .reveal-blur,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .reveal-clip {
    clip-path: none !important;
  }

  .marquee__track,
  .pulse-dot::before,
  .page-intro__brand {
    animation: none !important;
  }
}