/* ============================================================================
   SPECULAR STUDIO — animations.css
   Keyframes, système de révélation chorégraphié, curseur premium, parallaxe
   ============================================================================ */

@keyframes liquidShift {
  from { background-position: 0% center; }
  to   { background-position: 220% center; }
}

@keyframes metalShine {
  from { background-position: 240% center; }
  to   { background-position: 0% center; }
}

@keyframes orbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, -50px, 0) scale(1.18); }
}

@keyframes heroSweep {
  0%, 100% { transform: translateX(-30%); }
  50%      { transform: translateX(30%); }
}

@keyframes lightningFlash {
  0% { opacity: 0; } 8% { opacity: 1; } 18% { opacity: 0.15; }
  28% { opacity: 0.85; } 100% { opacity: 0; }
}

@keyframes adminPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-gold) 60%, transparent); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.pulse-dot { animation: pulseDot 1.6s ease-in-out infinite; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.float-anim { animation: floatY 5s ease-in-out infinite; }

@keyframes twinkle {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}
.sparkle { animation: twinkle 1.8s ease-in-out infinite; transform-origin: center; }
.sparkle:nth-child(odd) { animation-delay: 0.65s; }

@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }

@keyframes lightboxIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

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

/* --- Système de révélation chorégraphié -------------------------------------- */

.reveal-up    { --rv-x: 0; --rv-y: 40px; --rv-s: 1; }
.reveal-left  { --rv-x: -60px; --rv-y: 0; --rv-s: 1; }
.reveal-right { --rv-x: 60px; --rv-y: 0; --rv-s: 1; }
.reveal-scale { --rv-x: 0; --rv-y: 0; --rv-s: 0.92; }

.reveal-up, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transform: translate(var(--rv-x), var(--rv-y)) scale(var(--rv-s));
  transition: opacity 0.85s var(--ease-spring),
              transform 0.85s var(--ease-spring);
  transition-delay: var(--rv-delay, 0s);
}
.reveal-up.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger automatique des enfants directs */
.stagger-children > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease-spring),
              transform 0.65s var(--ease-spring);
}
.stagger-children.visible > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2)  { transition-delay: 0.12s; }
.stagger-children.visible > *:nth-child(3)  { transition-delay: 0.19s; }
.stagger-children.visible > *:nth-child(4)  { transition-delay: 0.26s; }
.stagger-children.visible > *:nth-child(5)  { transition-delay: 0.33s; }
.stagger-children.visible > *:nth-child(6)  { transition-delay: 0.40s; }
.stagger-children.visible > *:nth-child(7)  { transition-delay: 0.47s; }
.stagger-children.visible > *:nth-child(8)  { transition-delay: 0.54s; }
.stagger-children.visible > *:nth-child(n+9) { transition-delay: 0.6s; }
.stagger-children.visible > * { opacity: 1; transform: translateY(0); }

/* --- Curseur personnalisé premium (desktop uniquement) ------------------------- */

html.has-cursor,
html.has-cursor body,
html.has-cursor a,
html.has-cursor button,
html.has-cursor .btn,
html.has-cursor label { cursor: none; }
html.has-cursor input,
html.has-cursor textarea,
html.has-cursor select { cursor: auto; }

.cursor-ring {
  position: fixed; z-index: 9999;
  left: 0; top: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--c-primary);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.22s ease, height 0.22s ease,
              border-color 0.22s ease, background 0.22s ease, opacity 0.3s ease;
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor-dot {
  position: fixed; z-index: 9999;
  left: 0; top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-primary);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
html.has-cursor .cursor-ring, html.has-cursor .cursor-dot { opacity: 1; }
.cursor-ring.hovering {
  width: 52px; height: 52px;
  background: color-mix(in srgb, var(--c-primary) 15%, transparent);
  border-color: var(--c-secondary);
}

/* --- Parallaxe ------------------------------------------------------------------ */

[data-parallax] { will-change: transform; }