/* ==========================================================================
   Sillage — Utilities & motion
   ========================================================================== */

@layer utilities {
  /* ---- Scroll reveal (only when JS is available) ----------------------- */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
      opacity 800ms var(--ease-out),
      transform 800ms var(--ease-out);
  }

  /* Stagger: data-reveal-delay="80" (ms) */
  .js [data-reveal-delay="80"] {
    transition-delay: 80ms;
  }

  .js [data-reveal-delay="100"] {
    transition-delay: 100ms;
  }

  .js [data-reveal-delay="120"] {
    transition-delay: 120ms;
  }

  .js [data-reveal-delay="160"] {
    transition-delay: 160ms;
  }

  .js [data-reveal-delay="200"] {
    transition-delay: 200ms;
  }

  .js [data-reveal-delay="240"] {
    transition-delay: 240ms;
  }

  .js [data-reveal-delay="300"] {
    transition-delay: 300ms;
  }

  .js [data-reveal="fade"] {
    transform: none;
  }

  .js [data-reveal="scale"] {
    transform: scale(0.96);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* Highlighter draws itself once its heading is revealed */
  .js .mark {
    transition: background-size 900ms var(--ease-out) 250ms;
  }

  .js [data-reveal] .mark,
  .js .mark[data-reveal] {
    background-size: 0% 0.36em;
  }

  .js .theme-ink [data-reveal] .mark,
  .js .theme-cobalt [data-reveal] .mark {
    background-size: 0% 100%;
  }

  .js [data-reveal].is-visible .mark,
  .js .mark[data-reveal].is-visible {
    background-size: 100% 0.36em;
  }

  .js .theme-ink [data-reveal].is-visible .mark,
  .js .theme-cobalt [data-reveal].is-visible .mark {
    background-size: 100% 100%;
  }

  /* ---- V1 · Variantes d'apparition au scroll ---------------------------
     data-reveal="left" | "right" | "rise" | "zoom" | "clip"
     data-reveal-stagger="…" sur une liste : chaque enfant apparaît à son tour
     (voir assets/js/animations.js). */
  .js [data-reveal="left"] {
    transform: translateX(-32px);
  }

  .js [data-reveal="right"] {
    transform: translateX(32px);
  }

  .js [data-reveal="rise"] {
    transform: translateY(40px);
  }

  .js [data-reveal="zoom"] {
    transform: scale(0.92);
  }

  /* Rideau : un volet couleur de page se retire vers le bas et dévoile le
     visuel. L'élément lui-même reste visible, pour que l'observateur de
     défilement le détecte (un clip-path l'en empêcherait). */
  .js [data-reveal="clip"] {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal="clip"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--color-bg);
    transform-origin: bottom;
    transition: transform 950ms var(--ease-in-out);
    transition-delay: inherit;
    pointer-events: none;
  }

  .js [data-reveal="clip"].is-visible::after {
    transform: scaleY(0);
  }

  /* Le filet de l'eyebrow se trace avec son titre */
  .js [data-reveal] .eyebrow__index::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--ease-out) 150ms;
  }

  .js [data-reveal].is-visible .eyebrow__index::after {
    transform: none;
  }

  /* Barre de progression de lecture, sous l'en-tête */
  .scroll-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    pointer-events: none;
  }

  /* ---- Text ------------------------------------------------------------ */
  .u-center {
    text-align: center;
  }

  .u-muted {
    color: var(--color-muted);
  }

  .u-heading {
    color: var(--color-heading);
  }

  .u-nowrap {
    white-space: nowrap;
  }

  .u-mono {
    font-family: var(--font-mono);
  }

  .u-measure {
    max-width: 62ch;
  }

  /* ---- Spacing ----------------------------------------------------------- */
  .u-mt-0 {
    margin-top: 0;
  }

  .u-mt-4 {
    margin-top: var(--space-4);
  }

  .u-mt-5 {
    margin-top: var(--space-5);
  }

  .u-mt-6 {
    margin-top: var(--space-6);
  }

  .u-mt-7 {
    margin-top: var(--space-7);
  }

  .u-mt-8 {
    margin-top: var(--space-8);
  }

  .u-mb-0 {
    margin-bottom: 0;
  }

  /* ---- Layout helpers ---------------------------------------------------- */
  .u-full {
    width: 100%;
  }

  .u-justify-center {
    justify-content: center;
  }

  @media (max-width: 767.98px) {
    .u-hide-mobile {
      display: none !important;
    }
  }

  @media (min-width: 768px) {
    .u-hide-desktop {
      display: none !important;
    }
  }
}

/* ==========================================================================
   Reduced motion: keep everything visible and still
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js [data-reveal="clip"]::after {
    display: none;
  }

  [data-parallax] {
    translate: none !important;
  }

  .marquee__track {
    animation: none !important;
    flex-wrap: wrap;
    width: auto;
  }

  .marquee__list[aria-hidden="true"] {
    display: none;
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .status-dot::after {
    display: none;
  }
}