/* ─────────────────────────────────────────
   CONSTELLATION — mots financiers flottants
   Translate isolé (CSS Individual Transform) pour ne pas
   écraser le rotate() défini en inline style par mot.
   ───────────────────────────────────────── */
@keyframes drift-a {
  0%,100% { translate: 0px 0px; }
  25%     { translate: 8px -11px; }
  75%     { translate: -5px 6px; }
}
@keyframes drift-b {
  0%,100% { translate: 0px 0px; }
  35%     { translate: -9px 8px; }
  70%     { translate: 7px -5px; }
}
@keyframes drift-c {
  0%,100% { translate: 0px 0px; }
  40%     { translate: 11px 7px; }
  80%     { translate: -4px -6px; }
}
@keyframes drift-d {
  0%,100% { translate: 0px 0px; }
  30%     { translate: -7px -9px; }
  65%     { translate: 9px 4px; }
}

/* ─────────────────────────────────────────
   STAMP — wax seal entrance
   ───────────────────────────────────────── */
@keyframes stamp {
  0%   { transform: scale(0.25) rotate(-6deg); opacity: 0; filter: blur(12px); }
  55%  { transform: scale(1.10) rotate(0deg);  opacity: 1; filter: blur(0); }
  72%  { transform: scale(0.96) rotate(0deg); }
  85%  { transform: scale(1.03) rotate(0deg); }
  100% { transform: scale(1)    rotate(0deg); opacity: 1; }
}

@keyframes wax-spread {
  0%   { opacity: 0;   transform: scale(0.6); }
  30%  { opacity: 0.55; transform: scale(1.15); }
  100% { opacity: 0;   transform: scale(1.6); }
}

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

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────
   TICKER — telegraph marquee
   ───────────────────────────────────────── */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────
   CHAOS → ORDRE (scroll narrative)
   ───────────────────────────────────────── */
@keyframes float-chaos {
  0%   { transform: translate(var(--dx,0px), var(--dy,0px)) rotate(var(--rot,0deg)); }
  50%  { transform: translate(calc(var(--dx,0px) * -0.4), calc(var(--dy,0px) * 0.6)) rotate(calc(var(--rot,0deg) * -0.5)); }
  100% { transform: translate(var(--dx,0px), var(--dy,0px)) rotate(var(--rot,0deg)); }
}

@keyframes gold-line {
  from { width: 0; opacity: 0; }
  to   { width: 100%; opacity: 1; }
}

/* ─────────────────────────────────────────
   SECTION REVEALS (Intersection Observer)
   ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 320ms; }
.reveal-delay-4 { transition-delay: 440ms; }

/* ─────────────────────────────────────────
   REDUCED MOTION — everything off
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .seal-logo { animation: none !important; opacity: 1 !important; }
  .seal-glow  { display: none; }
  .reveal    { opacity: 1 !important; transform: none !important; }
}