/* ──────────────────────────────────────────────────────────────────────────
   Animations — page-load orchestré + scroll reveal + micro-interactions
   ────────────────────────────────────────────────────────────────────────── */

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

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

@keyframes inkBleed {
  0%   { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes pinDrop {
  0%   { opacity: 0; transform: translateY(-12px) rotate(0deg); }
  60%  { opacity: 1; transform: translateY(2px) rotate(var(--rot, -1.5deg)); }
  100% { opacity: 1; transform: translateY(0) rotate(var(--rot, -1.5deg)); }
}

@keyframes drawLine {
  from { stroke-dashoffset: var(--dash, 600); }
  to   { stroke-dashoffset: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes slowFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-6px) rotate(var(--rot, 0deg)); }
}

/* — Page load orchestré (hero) ──────────────────────────────────────── */
/* fill-mode: both → opacity:0 appliquée pendant le delay, opacity:1 maintenue après.
   Pas d'opacity:0 hors animation : si CSS animations échouent, contenu visible. */
.hero-eyebrow,
.hero-title-line,
.hero-tagline,
.hero-meta {
  animation: inkBleed 1100ms var(--ease-emph) both;
}

.hero-eyebrow      { animation-delay: 200ms; }
.hero-title-line-1 { animation-delay: 380ms; }
.hero-title-line-2 { animation-delay: 540ms; }
.hero-tagline      { animation-delay: 820ms; }
.hero-meta         { animation-delay: 1080ms; }

/* — Scroll reveal ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity var(--dur-reveal) var(--ease-emph),
    transform var(--dur-reveal) var(--ease-emph);
  will-change: opacity, transform;
}

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

.reveal--right {
  transform: translateX(40px);
}
.reveal--right.is-visible {
  transform: translateX(0);
}

.reveal--left {
  transform: translateX(-40px);
}
.reveal--left.is-visible {
  transform: translateX(0);
}

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

/* Decay des enfants au reveal */
.reveal.is-visible > * {
  animation: fadeUp 900ms var(--ease-emph) backwards;
}
.reveal.is-visible > *:nth-child(1)  { animation-delay: 0ms; }
.reveal.is-visible > *:nth-child(2)  { animation-delay: 120ms; }
.reveal.is-visible > *:nth-child(3)  { animation-delay: 240ms; }
.reveal.is-visible > *:nth-child(4)  { animation-delay: 360ms; }
.reveal.is-visible > *:nth-child(5)  { animation-delay: 480ms; }
.reveal.is-visible > *:nth-child(6)  { animation-delay: 600ms; }

/* — Micro interactions ──────────────────────────────────────────────── */
.balise-pulse {
  animation: pulse 3.4s ease-in-out infinite;
}

.float-slow {
  animation: slowFloat 7s ease-in-out infinite;
}

/* Photos épinglées : décollage subtil au hover.
   La rotation propre à chaque photo est exposée via --rot ; on la neutralise au hover. */
.pinned {
  --rot: 0deg;
  --lift: 0px;
  transform: rotate(var(--rot)) translateY(var(--lift));
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .pinned:hover {
    --rot: 0deg;
    --lift: -4px;
    box-shadow: var(--shadow-pin);
  }
}