/* Homepage motion below the scroll story (index.html, es/index.html).
   Builds on the reveal pattern in sais-ds.css: body.js-reveal hides .reveal
   elements until the page script adds .in as they scroll into view. */

/* Logo wall: tiles slide in from the left, one after another. The logo
   moves, not its cell, so the wall's grid never shows as a solid block. */
body.js-reveal .logowall__row.reveal { opacity: 1; transform: none; transition: background-color var(--duration-fast) var(--ease) }
body.js-reveal .logowall__row.reveal .logowall__tile {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .6s var(--ease) calc(var(--i, 0) * 45ms),
              transform .6s var(--ease) calc(var(--i, 0) * 45ms);
}
body.js-reveal .logowall__row.reveal.in .logowall__tile { opacity: 1; transform: none }

/* What we build: each card's icon draws its strokes once the card is in. */
body.js-reveal .sais-card.reveal .sais-card__icon svg { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 1s var(--ease) .2s }
body.js-reveal .sais-card.reveal.in .sais-card__icon svg { stroke-dashoffset: 0 }

/* Proof of work: shots settle from a slight zoom, in sequence. */
body.js-reveal .proofshot.reveal { transition-delay: calc(var(--i, 0) * 90ms) }
body.js-reveal .proofshot.reveal img { transform: scale(1.06); transition: transform 1.1s var(--ease) calc(var(--i, 0) * 90ms) }
body.js-reveal .proofshot.reveal.in img { transform: none }
body.js-reveal .proofshot.reveal.in:hover img { transform: scale(1.015) }

@media (prefers-reduced-motion: reduce) {
  body.js-reveal .logowall__row.reveal .logowall__tile,
  body.js-reveal .proofshot.reveal img { transform: none; transition: none }
  body.js-reveal .sais-card.reveal .sais-card__icon svg { stroke-dasharray: none; stroke-dashoffset: 0; transition: none }
}