/* === Fatima Pinto ripple logo - Slater CSS. Pairs with the SVG (10 paths) + JS. ===
   The JS builds the roll structure inside the SVG. Shapes use fill:currentColor and scale to fit.
   DIRECTION: by default it follows where the cursor enters the logo - in from the top rolls the
   letters DOWN, in from the bottom rolls them UP. Force a fixed direction with
   data-stagger-logos="down" or data-stagger-logos="up". The JS sets --rs-dir (+33 / -33). */
svg[data-stagger-logos] {
  --rs-dur: .55s;
  --rs-ease: cubic-bezier(.62, .05, .1, 1);
  --rs-dir: 33px;
}

svg[data-stagger-logos] .rs-l {
  transform: translateY(0);
  will-change: transform;
}

/* every letter has a copy ABOVE and BELOW (both hidden by the viewBox at rest), so it can roll
   either way and always has a copy to bring in - it can never blank out. */
svg[data-stagger-logos] .rs-l.is-anim {
  animation: rsRoll var(--rs-dur, .55s) var(--rs-ease, cubic-bezier(.62, .05, .1, 1)) var(--rs-delay, 0s) both;
}

@keyframes rsRoll {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(var(--rs-dir, 33px));
  }
}

svg[data-stagger-logos] [data-stagger-hit] {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  svg[data-stagger-logos] .rs-l.is-anim {
    animation: none;
  }
}