/* ============================================
   ANIMATIONS — Subtle, editorial
   ============================================ */

/* Scroll reveal — opacity + translate only.
   Hidden states are gated on `html.js-ready` so that if JS fails to
   initialize, content stays visible instead of being permanently hidden.
   No clip-path: it caused images to stay invisible on cold loads. */

.js-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.40s; }

/* Image reveal — soft fade only (no clipping). */
.js-ready .reveal-image {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}

.js-ready .reveal-image.is-visible {
  opacity: 1;
}

/* Line draw (for horizontal rules) */
.js-ready .reveal-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}

.js-ready .reveal-line.is-visible {
  transform: scaleX(1);
}

/* --- Case reveals --- */
.js-ready .ed-case.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 1s var(--ease-out),
              transform 1s var(--ease-out);
}

.js-ready .ed-case.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Title rises first */
.js-ready .ed-case.reveal [class$="__title"] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s 0.15s var(--ease-out),
              transform 1s 0.15s var(--ease-out);
}

.js-ready .ed-case.reveal.is-visible [class$="__title"] {
  opacity: 1;
  transform: translateY(0);
}

/* Supporting content a beat later */
.js-ready .ed-case.reveal .label,
.js-ready .ed-case.reveal .link-arrow,
.js-ready .ed-case.reveal [class$="__text"],
.js-ready .ed-case.reveal [class$="__desc"],
.js-ready .ed-case.reveal [class$="__foot"] p,
.js-ready .ed-case.reveal [class$="__right"] p {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s 0.4s var(--ease-out),
              transform 0.9s 0.4s var(--ease-out);
}

.js-ready .ed-case.reveal.is-visible .label,
.js-ready .ed-case.reveal.is-visible .link-arrow,
.js-ready .ed-case.reveal.is-visible [class$="__text"],
.js-ready .ed-case.reveal.is-visible [class$="__desc"],
.js-ready .ed-case.reveal.is-visible [class$="__foot"] p,
.js-ready .ed-case.reveal.is-visible [class$="__right"] p {
  opacity: 1;
  transform: translateY(0);
}