/* ============================================================
   FONDATION DORCAS — animations.css
   Keyframes · GSAP-ready states · Transitions · Micro-interactions
   ============================================================ */

/* ── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes scrollLine {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.8; }
}

@keyframes pulseSlow {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

@keyframes loaderFill {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(0.95); }
}

@keyframes ripple {
  from { transform: scale(0); opacity: 0.4; }
  to   { transform: scale(4); opacity: 0; }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes borderDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* ── GSAP-READY — États initiaux ────────────────────────────
   GSAP anime depuis ces états. Les éléments [data-animate]
   restent cachés jusqu'à l'initialisation GSAP via JS.
   Si GSAP n'est pas chargé, CSS fallback via .js-ready.
   ─────────────────────────────────────────────────────────── */

/* Marqueur : GSAP est initialisé */
body.gsap-ready [data-animate] { opacity: 0; }

[data-animate="fade-up"]    { transform: translateY(32px); }
[data-animate="fade-down"]  { transform: translateY(-24px); }
[data-animate="fade-left"]  { transform: translateX(32px); }
[data-animate="fade-right"] { transform: translateX(-32px); }
[data-animate="fade-scale"] { transform: scale(0.9); }
[data-animate="clip-up"]    { clip-path: inset(100% 0 0 0); }

/* Stagger children  */
[data-animate-stagger] > * { opacity: 0; transform: translateY(24px); }

/* ── CSS FALLBACK (si GSAP indisponible) ─────────────────────
   Active l'animation CSS native sur .no-gsap
   ─────────────────────────────────────────────────────────── */
body.no-gsap [data-animate] {
  animation: fadeSlideUp 0.7s var(--ease-out) both;
}

body.no-gsap [data-animate][data-delay="80"]  { animation-delay: 80ms; }
body.no-gsap [data-animate][data-delay="160"] { animation-delay: 160ms; }
body.no-gsap [data-animate][data-delay="240"] { animation-delay: 240ms; }
body.no-gsap [data-animate][data-delay="320"] { animation-delay: 320ms; }
body.no-gsap [data-animate][data-delay="400"] { animation-delay: 400ms; }
body.no-gsap [data-animate][data-delay="500"] { animation-delay: 500ms; }
body.no-gsap [data-animate][data-delay="600"] { animation-delay: 600ms; }

/* ── HOVER MICRO-INTERACTIONS ───────────────────────────────── */

/* Lift on hover (cartes) */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

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

/* Scale subtil */
.hover-scale {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.hover-scale:hover { transform: scale(1.04); }

/* Icon rotate */
.hover-icon-spin:hover i {
  animation: spin 0.4s var(--ease-spring) forwards;
}

/* Link underline slide */
.link-slide {
  position: relative;
  display: inline-block;
}

.link-slide::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-slide:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── SCROLL REVEAL — classes ajoutées par GSAP / IntersectionObserver ── */
.is-revealed { opacity: 1 !important; transform: none !important; }

/* ── COUNTER ────────────────────────────────────────────────── */
.counter-animated {
  transition: color var(--duration-slow) var(--ease-out);
}

.counter-animated.is-counting {
  color: var(--color-gold-dark);
}

/* ── SECTION TRANSITIONS ────────────────────────────────────── */

/* Fond texturé subtil (section hero alternative) */
.section--textured::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 L30 0 L60 30 L30 60Z' fill='none' stroke='rgba(201,168,76,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Diviseur décoratif */
.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-12) 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.divider__icon {
  color: var(--color-gold);
  font-size: var(--text-sm);
}

.divider--gold::before,
.divider--gold::after {
  background: rgba(201,168,76,0.3);
}

/* Transition de section "vague" */
.section-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  overflow: hidden;
}

.section-wave svg { width: 100%; height: 100%; display: block; }

/* ── IMAGE PARALLAX WRAPPER ─────────────────────────────────── */
.parallax-wrap {
  overflow: hidden;
  will-change: transform;
}

.parallax-wrap .parallax-inner {
  transform: translateY(0);
  will-change: transform;
  transition: none; /* Animé par GSAP */
}

/* ── HERO CINEMATIC ─────────────────────────────────────────── */
/* Ligne décorative animée (utilisée en hero) */
.deco-line {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  animation: shimmer 3s ease infinite;
  background-size: 200% auto;
  opacity: 0.5;
}

/* Points décoratifs */
.deco-dots {
  display: grid;
  grid-template-columns: repeat(3, 6px);
  gap: 5px;
}

.deco-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  opacity: 0.4;
}

.deco-dots span:first-child { opacity: 0.8; }
.deco-dots span:last-child  { opacity: 0.2; }

/* ── CARD STAGGER (accueil) ─────────────────────────────────── */
/* Délais inline pour les grilles */
.stagger-item:nth-child(1)  { --stagger-delay: 0ms; }
.stagger-item:nth-child(2)  { --stagger-delay: 80ms; }
.stagger-item:nth-child(3)  { --stagger-delay: 160ms; }
.stagger-item:nth-child(4)  { --stagger-delay: 240ms; }
.stagger-item:nth-child(5)  { --stagger-delay: 320ms; }
.stagger-item:nth-child(6)  { --stagger-delay: 400ms; }

/* CSS fallback si GSAP désactivé */
body.no-gsap .stagger-item {
  animation: fadeSlideUp 0.7s var(--ease-out) var(--stagger-delay, 0ms) both;
}

/* ── PROGRESS BAR ANIMATED ──────────────────────────────────── */
.progress-bar__fill {
  transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-bar__fill--animated { width: 0; }
.progress-bar__fill--animated.is-animated { width: var(--target-width, 0%); }

/* ── NOMBRE COMPTEUR ────────────────────────────────────────── */
[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ── REVEAL IMAGE ───────────────────────────────────────────── */
.img-reveal-wrap {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-out);
}

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

/* ── TEXTE REVEAL (lettre par lettre) ───────────────────────── */
/* Utilisé par GSAP SplitText ou split manuel */
.word-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word-reveal .char {
  display: inline-block;
  will-change: transform;
}

/* ── NAV MOBILE STAGGER ─────────────────────────────────────── */
.nav__mobile.is-open .nav__mobile-link {
  animation: fadeSlideRight 0.4s var(--ease-out) both;
}

.nav__mobile.is-open .nav__mobile-link:nth-child(1) { animation-delay: 0.1s; }
.nav__mobile.is-open .nav__mobile-link:nth-child(2) { animation-delay: 0.16s; }
.nav__mobile.is-open .nav__mobile-link:nth-child(3) { animation-delay: 0.22s; }
.nav__mobile.is-open .nav__mobile-link:nth-child(4) { animation-delay: 0.28s; }
.nav__mobile.is-open .nav__mobile-link:nth-child(5) { animation-delay: 0.34s; }
.nav__mobile.is-open .nav__mobile-link:nth-child(6) { animation-delay: 0.40s; }
.nav__mobile.is-open .nav__mobile-link:nth-child(7) { animation-delay: 0.46s; }

/* ── FOCUS VISIBLE GLOBAL ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }

  .parallax-inner { transform: none !important; }

  [data-animate],
  [data-animate-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__bg::before { transform: none !important; }
}