/**
 * Scroll Reveal Effect Styles
 * Uses CSS animation-timeline: view() for modern browsers
 * Falls back to Intersection Observer for older browsers
 */

/* Modern browsers with animation-timeline support */
@supports (animation-timeline: view()) {
  [data-scroll-reveal="true"] img,
  [data-scroll-reveal="true"] video {
    /* Default values - will be overridden by inline styles from JS */
    --reveal-inset: 20%;
    --reveal-radius: 30px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: var(--reveal-radius, 30px);
    animation: rounded-mask-reveal linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 50%;
  }
}

/* Animation keyframes using CSS custom properties */
@keyframes rounded-mask-reveal {
  from {
    clip-path: inset(
      var(--reveal-inset, 20%) var(--reveal-inset, 20%) var(--reveal-inset, 20%)
        var(--reveal-inset, 20%) round var(--reveal-radius, 30px)
    );
  }
  to {
    clip-path: inset(5% 5% 5% 5% round var(--reveal-radius, 30px));
  }
}

/* Fallback for browsers without animation-timeline support */
@supports not (animation-timeline: view()) {
  [data-scroll-reveal="true"] img,
  [data-scroll-reveal="true"] video {
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 30px;
    clip-path: inset(20% 20% 20% 20% round 30px);
    transition: clip-path 0.6s ease-out;
  }

  [data-scroll-reveal="true"][data-scroll-reveal-active="true"] img,
  [data-scroll-reveal="true"][data-scroll-reveal-active="true"] video {
    clip-path: inset(0% 0% 0% 0% round 30px);
  }
}