/* ============================================================
   Digital Labs — Animations layer (Sprint 13 · 2026-04-26)
   Pure CSS keyframes + utility classes activées par
   le composant <Reveal /> (IntersectionObserver one-shot)
   et l'hydratation de Hero (data-anim-load).
   Tokens motion : voir colors_and_type.css:77-83
   ============================================================ */

/* ----------------------------------------------------------
   1. Keyframes
   ---------------------------------------------------------- */

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

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

@keyframes dl-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes dl-card-3d {
  from { opacity: 0; transform: perspective(900px) rotateY(-12deg) translateX(-16px); }
  to   { opacity: 1; transform: perspective(900px) rotateY(0deg) translateX(0); }
}

@keyframes dl-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes dl-sparkle-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px var(--color-accent)); }
  50%      { opacity: 0.55; filter: drop-shadow(0 0 8px var(--color-accent)); }
}

@keyframes dl-pricing-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--color-accent), 0 18px 48px rgba(13, 231, 180, 0.18); }
  50%      { box-shadow: 0 0 0 1px var(--color-accent), 0 18px 64px rgba(13, 231, 180, 0.32); }
}

/* ----------------------------------------------------------
   2. Reveal utility — driven by IntersectionObserver
   Initial state when [data-anim-in="false"] · final on "true"
   ---------------------------------------------------------- */

[data-anim] {
  --anim-delay: 0ms;
  will-change: opacity, transform;
}

[data-anim][data-anim-in="false"] {
  opacity: 0;
}

[data-anim="fade-up"][data-anim-in="false"]  { transform: translateY(20px); }
[data-anim="fade-in"][data-anim-in="false"]  { transform: none; }
[data-anim="scale-in"][data-anim-in="false"] { transform: scale(0.96); }
[data-anim="card-3d"][data-anim-in="false"]  { transform: perspective(900px) rotateY(-12deg) translateX(-16px); }
[data-anim="slide-l"][data-anim-in="false"]  { transform: translateX(-24px); }
[data-anim="slide-r"][data-anim-in="false"]  { transform: translateX(24px); }

[data-anim][data-anim-in="true"] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-reveal) var(--anim-delay),
    transform var(--dur-reveal) var(--ease-reveal) var(--anim-delay);
}

[data-anim="card-3d"][data-anim-in="true"] {
  transition:
    opacity 700ms var(--ease-reveal) var(--anim-delay),
    transform 700ms var(--ease-reveal) var(--anim-delay);
}

/* When the reveal is done, drop will-change to free GPU memory */
[data-anim][data-anim-in="true"] {
  will-change: auto;
}

/* ----------------------------------------------------------
   3. Hero load animations — fire on page load, no IO
   Use data-anim-load + --anim-delay
   ---------------------------------------------------------- */

[data-anim-load="fade-up"] {
  opacity: 0;
  animation: dl-fade-up var(--dur-reveal) var(--ease-reveal) var(--anim-delay, 0ms) forwards;
  will-change: opacity, transform;
}

[data-anim-load="fade-in"] {
  opacity: 0;
  animation: dl-fade-in var(--dur-reveal) var(--ease-reveal) var(--anim-delay, 0ms) forwards;
}

[data-anim-load="scale-in"] {
  opacity: 0;
  animation: dl-scale-in var(--dur-reveal) var(--ease-reveal) var(--anim-delay, 0ms) forwards;
}

/* ----------------------------------------------------------
   4. Sparkle nav active — discrete continuous pulse
   ---------------------------------------------------------- */

.dl-sparkle-pulse {
  animation: dl-sparkle-pulse 2.4s ease-in-out infinite;
}

/* ----------------------------------------------------------
   5. Pricing recommended tier — subtle glow breathing
   ---------------------------------------------------------- */

.dl-pricing-recommended {
  animation: dl-pricing-glow 3.2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   6. Marquee — for logos overline (paused on hover)
   ---------------------------------------------------------- */

.dl-marquee {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: dl-marquee 30s linear infinite;
}

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

.dl-marquee-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ----------------------------------------------------------
   7. Hover utilities — consolidated (cards, chips, buttons)
   Replaces ad-hoc inline transitions
   ---------------------------------------------------------- */

.dl-hover-lift {
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.dl-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.dl-hover-glow {
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.dl-hover-glow:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* ----------------------------------------------------------
   8. prefers-reduced-motion — accessibility
   Désactive transforms et animations infinies, opacity-only
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim-load] {
    animation: none !important;
    transition: opacity 200ms linear !important;
    transform: none !important;
  }

  [data-anim][data-anim-in="false"],
  [data-anim-load] {
    opacity: 1 !important;
  }

  .dl-sparkle-pulse,
  .dl-pricing-recommended,
  .dl-marquee {
    animation: none !important;
  }

  .dl-hover-lift:hover,
  .dl-hover-glow:hover {
    transform: none !important;
  }
}