/* PB Reveal on Scroll - frontend styles */

/* Base state */
[data-animate="reveal"] {
  opacity: 0;
  transform: translate3d(var(--pb-reveal-dx, 0), var(--pb-reveal-dy, 0), 0);
  transition-property: opacity, transform;
  transition-duration: var(--pb-reveal-duration, 800ms);
  transition-timing-function: var(--pb-reveal-ease, cubic-bezier(.2,.6,.2,1));
  transition-delay: var(--pb-reveal-delay, 100ms);
  will-change: opacity, transform;
}

/* In view */
[data-animate="reveal"].is-inview {
  opacity: 1;
  transform: none;
}

/* Variants choose direction via CSS vars */
[data-animate-variant="up"] {
  --pb-reveal-dx: 0;
  --pb-reveal-dy: var(--pb-reveal-distance, 16px); /* start below, move up into place */
}

[data-animate-variant="down"] {
  --pb-reveal-dx: 0;
  --pb-reveal-dy: calc(var(--pb-reveal-distance, 16px) * -1); /* start above, move down */
}

[data-animate-variant="left"] {
  --pb-reveal-dx: var(--pb-reveal-distance, 16px); /* start right, move left into place */
  --pb-reveal-dy: 0;
}

[data-animate-variant="right"] {
  --pb-reveal-dx: calc(var(--pb-reveal-distance, 16px) * -1); /* start left, move right */
  --pb-reveal-dy: 0;
}

/* Distance scales */
[data-animate-distance="s"] { --pb-reveal-distance: 10px; }
[data-animate-distance="m"] { --pb-reveal-distance: 16px; }
[data-animate-distance="l"] { --pb-reveal-distance: 24px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate="reveal"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}