/* motion.css — Keyframes, transitions globales, reveal au scroll, prefers-reduced-motion. */

/* ---------- Hairline rouge luminance (cycle 4s) ---------- */

@keyframes hairlinePulse {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1;    }
}

.hairline--ambient {
  animation: hairlinePulse 4s var(--ease-std) infinite;
}

/* ---------- Micro-bounce "(scroll ↓)" ---------- */

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

.scroll-hint {
  display: inline-block;
  animation: scrollBounce 3s var(--ease-std) infinite;
}

/* ---------- Reveal au scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 180ms var(--ease-std), transform 180ms var(--ease-std);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger : ajouter un delay en ligne sur chaque enfant */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 180ms var(--ease-std), transform 180ms var(--ease-std);
}
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 40ms;  opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 80ms;  opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 120ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }

/* ---------- Cards Section 01 — wipe vertical haut→bas au hover ---------- */

.card-wipe {
  position: relative;
  overflow: hidden;
  transition: color var(--dur-med) var(--ease-std);
}
.card-wipe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 220ms var(--ease-std);
  z-index: 0;
}
.card-wipe:hover::before { transform: scaleY(1); }
.card-wipe > * { position: relative; z-index: 1; transition: color 180ms var(--ease-std); }
.card-wipe:hover > *,
.card-wipe:hover .t-meta { color: var(--c-bg); }

/* ---------- Examples grid — tilt 3° au hover ---------- */

.ex-card {
  transition: transform var(--dur-med) var(--ease-std);
  transform-style: preserve-3d;
  perspective: 800px;
}
.ex-card:hover {
  transform: perspective(800px) rotateX(-2deg) rotateY(3deg);
}

/* ---------- prefers-reduced-motion : non-négociable ---------- */

@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;
  }

  /* Ambient motion arrêtée */
  .ticker__track { animation: none !important; transform: translateX(0) !important; }
  .hairline--ambient { animation: none !important; opacity: 1 !important; }
  .cta-blob { animation: none !important; transform: scale(1) !important; opacity: 0.9 !important; }
  .scroll-hint { animation: none !important; transform: none !important; }

  /* Reveal instantané */
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Custom cursor désactivé */
  .cursor { display: none !important; }
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: auto !important; }

  /* Tilt hover désactivé */
  .ex-card:hover { transform: none !important; }

  /* Wipe cards instantané */
  .card-wipe::before { transition: none !important; }
}

/* ---------- Mobile : cursor toujours OS, hover instantané pour le wipe ---------- */

@media (hover: none) {
  .cursor { display: none !important; }
  body.has-custom-cursor, body.has-custom-cursor * { cursor: auto !important; }
}

/* ---------- Liquid glass lens & ink fallback ---------- */

.lg-lens {
  display: inline-block;
  vertical-align: middle;
  pointer-events: auto;
}
.lg-lens__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-bg, #ECEFF3);
  mix-blend-mode: difference;
}

@keyframes lgInkMorph {
  0%, 100% { transform: scale(1) rotate(0deg); border-radius: 42% 58% 50% 50% / 50% 40% 60% 50%; }
  33%      { transform: scale(1.02) rotate(8deg); border-radius: 55% 45% 60% 40% / 40% 55% 45% 60%; }
  66%      { transform: scale(0.98) rotate(-5deg); border-radius: 48% 52% 40% 60% / 60% 45% 55% 40%; }
}
.lg-ink-morph {
  animation: lgInkMorph 10s var(--ease-std, cubic-bezier(.2,.7,.2,1)) infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .lg-ink-morph { animation: none !important; }
}