/**
 * Reels page — scroll / load reveals (pairs with js/reels-page-reveal.js).
 */
html.reels-page-reveal-init {
  --reels-reveal-ease: var(--ease-smooth-opacity, cubic-bezier(0.33, 1, 0.68, 1));
  --reels-reveal-ease-soft: var(--ease-smooth-transform, cubic-bezier(0.22, 1, 0.42, 1));
  --reels-reveal-dur-in: 0.92s;
  --reels-reveal-dur-out: 0.72s;
}

html.reels-page-reveal-init .reels-main .framer-reveal-prep:not(.framer-reveal-visible) {
  opacity: 0;
  transform: translate3d(0, 1.35rem, 0);
  will-change: opacity, transform;
  transition:
    opacity var(--reels-reveal-dur-out) var(--reels-reveal-ease),
    transform calc(var(--reels-reveal-dur-out) + 0.06s) var(--reels-reveal-ease-soft);
  transition-delay: 0ms;
}

html.reels-page-reveal-init .reels-main .framer-reveal-prep.framer-reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
  transition:
    opacity var(--reels-reveal-dur-in) var(--reels-reveal-ease),
    transform calc(var(--reels-reveal-dur-in) + 0.08s) var(--reels-reveal-ease-soft);
  transition-delay: var(--framer-d, 0ms);
}

/* Video tiles: no interaction until visible */
html.reels-page-reveal-init .reels-media-cell.framer-reveal-prep:not(.framer-reveal-visible) {
  opacity: 0 !important;
  transform: translate3d(0, 1.5rem, 0) !important;
  pointer-events: none !important;
  transition:
    opacity var(--reels-reveal-dur-out) var(--reels-reveal-ease) !important,
    transform calc(var(--reels-reveal-dur-out) + 0.06s) var(--reels-reveal-ease-soft) !important;
  transition-delay: 0ms !important;
}

html.reels-page-reveal-init .reels-media-cell.framer-reveal-prep.framer-reveal-visible {
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition:
    opacity var(--reels-reveal-dur-in) var(--reels-reveal-ease) !important,
    transform calc(var(--reels-reveal-dur-in) + 0.08s) var(--reels-reveal-ease-soft) !important;
  transition-delay: var(--framer-d, 0ms) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.reels-page-reveal-init .reels-main .framer-reveal-prep,
  html.reels-page-reveal-init .reels-media-cell.framer-reveal-prep {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    will-change: auto !important;
  }
}
