/**
 * Webvio scroll animations — CSS keyframes (reliable on page load + scroll).
 */

@keyframes webvio-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes webvio-slide-up {
  from {
    opacity: 0;
    transform: translate3d(0, var(--wv-anim-distance, 36px), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes webvio-slide-down {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--wv-anim-distance, 36px) * -1), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes webvio-slide-left {
  from {
    opacity: 0;
    transform: translate3d(var(--wv-anim-distance, 36px), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes webvio-slide-right {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--wv-anim-distance, 36px) * -1), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes webvio-scale-up {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--wv-anim-distance, 36px) * 0.6), 0) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hide until JS prepares targets — mirrored in wp_head critical CSS */
.webvio-has-scroll-anim[data-wv-anim]:not(.webvio-anim-ready) {
  opacity: 0;
}

.webvio-anim-target.webvio-anim-before {
  opacity: 0;
}

/* Case studies GSAP sections — hide until script inits */
.webvio-case-studies--animated:not(.webvio-case-anim-ready) .webvio-case-studies__header > *,
.webvio-case-studies--animated:not(.webvio-case-anim-ready) .webvio-case-card__visual,
.webvio-case-studies--animated:not(.webvio-case-anim-ready) .webvio-case-card__content > * {
  opacity: 0;
}

/* Run animation when played — type lives on each target */
.webvio-anim-target.webvio-anim-after[data-wv-anim-type="fade_in"] {
  animation: webvio-fade-in var(--wv-anim-duration, 700ms) var(--wv-anim-ease, cubic-bezier(0.165, 0.84, 0.44, 1)) var(--wv-anim-delay, 0ms) both;
}

.webvio-anim-target.webvio-anim-after[data-wv-anim-type="slide_up"],
.webvio-anim-target.webvio-anim-after[data-wv-anim-type="stagger_up"] {
  animation: webvio-slide-up var(--wv-anim-duration, 700ms) var(--wv-anim-ease, cubic-bezier(0.165, 0.84, 0.44, 1)) var(--wv-anim-delay, 0ms) both;
}

.webvio-anim-target.webvio-anim-after[data-wv-anim-type="slide_down"] {
  animation: webvio-slide-down var(--wv-anim-duration, 700ms) var(--wv-anim-ease, cubic-bezier(0.165, 0.84, 0.44, 1)) var(--wv-anim-delay, 0ms) both;
}

.webvio-anim-target.webvio-anim-after[data-wv-anim-type="slide_left"] {
  animation: webvio-slide-left var(--wv-anim-duration, 700ms) var(--wv-anim-ease, cubic-bezier(0.165, 0.84, 0.44, 1)) var(--wv-anim-delay, 0ms) both;
}

.webvio-anim-target.webvio-anim-after[data-wv-anim-type="slide_right"] {
  animation: webvio-slide-right var(--wv-anim-duration, 700ms) var(--wv-anim-ease, cubic-bezier(0.165, 0.84, 0.44, 1)) var(--wv-anim-delay, 0ms) both;
}

.webvio-anim-target.webvio-anim-after[data-wv-anim-type="scale_up"] {
  animation: webvio-scale-up var(--wv-anim-duration, 700ms) var(--wv-anim-ease, cubic-bezier(0.165, 0.84, 0.44, 1)) var(--wv-anim-delay, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
  .webvio-has-scroll-anim[data-wv-anim],
  .webvio-anim-target,
  .webvio-case-studies--animated .webvio-case-studies__header > *,
  .webvio-case-studies--animated .webvio-case-card__visual,
  .webvio-case-studies--animated .webvio-case-card__content > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}