/**
 * Scroll-reveal animations (assets/js/scroll-animations.js)
 *
 * Usage:
 *   .tidal-animate              — single element floats up on scroll
 *   .tidal-animate-stagger      — direct children stagger in sequence
 *
 * Modifiers (combine on the same element):
 *   .tidal-animate--fade        — fade only, no movement
 *   .tidal-animate--left        — enter from the left
 *   .tidal-animate--right       — enter from the right
 *   .tidal-animate--down        — enter from above
 *   .tidal-animate--scale       — subtle scale up
 *   .tidal-animate--slow        — longer duration
 *   .tidal-animate--fast        — shorter duration
 *
 * Stagger spacing:
 *   .tidal-animate-stagger--wide — more delay between children
 */

:root {
  --tidal-animate-distance: 1.25rem;
  --tidal-animate-duration: 0.65s;
  --tidal-animate-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tidal-animate-stagger: 70ms;
}

.tidal-animate,
.tidal-animate-stagger > * {
  opacity: 0;
  transform: translate3d(0, var(--tidal-animate-distance), 0);
  transition:
    opacity var(--tidal-animate-duration) var(--tidal-animate-ease),
    transform var(--tidal-animate-duration) var(--tidal-animate-ease);
  will-change: opacity, transform;
}

.tidal-animate.is-inview,
.tidal-animate-stagger.is-inview > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.tidal-animate--fade,
.tidal-animate-stagger--fade > * {
  transform: none;
}

.tidal-animate--fade.is-inview,
.tidal-animate-stagger--fade.is-inview > * {
  transform: none;
}

.tidal-animate--left,
.tidal-animate-stagger--left > * {
  transform: translate3d(calc(var(--tidal-animate-distance) * -1), 0, 0);
}

.tidal-animate--right,
.tidal-animate-stagger--right > * {
  transform: translate3d(var(--tidal-animate-distance), 0, 0);
}

.tidal-animate--down,
.tidal-animate-stagger--down > * {
  transform: translate3d(0, calc(var(--tidal-animate-distance) * -1), 0);
}

.tidal-animate--scale,
.tidal-animate-stagger--scale > * {
  transform: translate3d(0, var(--tidal-animate-distance), 0) scale(0.97);
}

.tidal-animate--scale.is-inview,
.tidal-animate-stagger--scale.is-inview > * {
  transform: translate3d(0, 0, 0) scale(1);
}

.tidal-animate--slow {
  --tidal-animate-duration: 0.9s;
}

.tidal-animate--fast {
  --tidal-animate-duration: 0.45s;
}

.tidal-animate-stagger--wide {
  --tidal-animate-stagger: 110ms;
}

.tidal-animate-stagger.is-inview > *:nth-child(1) {
  transition-delay: calc(var(--tidal-animate-stagger) * 0);
}

.tidal-animate-stagger.is-inview > *:nth-child(2) {
  transition-delay: calc(var(--tidal-animate-stagger) * 1);
}

.tidal-animate-stagger.is-inview > *:nth-child(3) {
  transition-delay: calc(var(--tidal-animate-stagger) * 2);
}

.tidal-animate-stagger.is-inview > *:nth-child(4) {
  transition-delay: calc(var(--tidal-animate-stagger) * 3);
}

.tidal-animate-stagger.is-inview > *:nth-child(5) {
  transition-delay: calc(var(--tidal-animate-stagger) * 4);
}

.tidal-animate-stagger.is-inview > *:nth-child(6) {
  transition-delay: calc(var(--tidal-animate-stagger) * 5);
}

.tidal-animate-stagger.is-inview > *:nth-child(7) {
  transition-delay: calc(var(--tidal-animate-stagger) * 6);
}

.tidal-animate-stagger.is-inview > *:nth-child(8) {
  transition-delay: calc(var(--tidal-animate-stagger) * 7);
}

.tidal-animate-stagger.is-inview > *:nth-child(9) {
  transition-delay: calc(var(--tidal-animate-stagger) * 8);
}

.tidal-animate-stagger.is-inview > *:nth-child(10) {
  transition-delay: calc(var(--tidal-animate-stagger) * 9);
}

.tidal-animate-stagger.is-inview > *:nth-child(11) {
  transition-delay: calc(var(--tidal-animate-stagger) * 10);
}

.tidal-animate-stagger.is-inview > *:nth-child(12) {
  transition-delay: calc(var(--tidal-animate-stagger) * 11);
}

.tidal-animate-stagger:not(.is-inview) > * {
  transition-delay: 0ms;
}

.tidal-animate-stagger > [data-animate-skip] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

.tidal-animate.is-inview,
.tidal-animate-stagger.is-inview > * {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tidal-animate,
  .tidal-animate-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}