/**
 * BongoHive Reveal Animations
 *
 * Shared CSS for scroll-triggered reveal animations on widget elements.
 * Elements opt in with the `data-bh-reveal` attribute; the JS layer
 * adds the `.is-visible` class when the element enters the viewport.
 *
 * Implemented with keyframe animations (not transitions) so they don't
 * compete with widgets' own `transition: ...` rules (hover lifts, etc).
 *
 * Per-element tuning via inline CSS custom properties:
 *   --bh-reveal-duration  (default 700ms)
 *   --bh-reveal-delay     (default 0ms — stagger)
 *
 * @package BongoHive
 */

[data-bh-reveal] {
  --bh-reveal-duration: 700ms;
  --bh-reveal-delay: 0ms;
  --bh-reveal-easing: cubic-bezier(0.2, 0.8, 0.2, 1);

  opacity: 0;
}

[data-bh-reveal="fade-up"]    { transform: translate3d(0, 24px, 0); }
[data-bh-reveal="fade-down"]  { transform: translate3d(0, -24px, 0); }
[data-bh-reveal="slide-left"] { transform: translate3d(-32px, 0, 0); }
[data-bh-reveal="slide-right"]{ transform: translate3d(32px, 0, 0); }
[data-bh-reveal="scale-in"]   { transform: scale(0.94); }
[data-bh-reveal="zoom-in"]    { transform: scale(0.85); }
[data-bh-reveal="fade-in"]    { transform: none; }

[data-bh-reveal].is-visible {
  animation-duration: var(--bh-reveal-duration);
  animation-delay: var(--bh-reveal-delay);
  animation-timing-function: var(--bh-reveal-easing);
  animation-fill-mode: both;
}

[data-bh-reveal="fade-up"].is-visible     { animation-name: bh-reveal-fade-up; }
[data-bh-reveal="fade-down"].is-visible   { animation-name: bh-reveal-fade-down; }
[data-bh-reveal="slide-left"].is-visible  { animation-name: bh-reveal-slide-left; }
[data-bh-reveal="slide-right"].is-visible { animation-name: bh-reveal-slide-right; }
[data-bh-reveal="scale-in"].is-visible    { animation-name: bh-reveal-scale-in; }
[data-bh-reveal="zoom-in"].is-visible     { animation-name: bh-reveal-zoom-in; }
[data-bh-reveal="fade-in"].is-visible     { animation-name: bh-reveal-fade-in; }

@keyframes bh-reveal-fade-up {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes bh-reveal-fade-down {
  from { opacity: 0; transform: translate3d(0, -24px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes bh-reveal-slide-left {
  from { opacity: 0; transform: translate3d(-32px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes bh-reveal-slide-right {
  from { opacity: 0; transform: translate3d(32px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes bh-reveal-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes bh-reveal-zoom-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: none; }
}

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

/* ==========================================================================
   Accessibility — honour reduced-motion users
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-bh-reveal] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Elementor editor — preview the final state so authors can see content
   while editing without needing to scroll-trigger the IntersectionObserver.
   ========================================================================== */

.elementor-editor-active [data-bh-reveal],
.elementor-editor-preview [data-bh-reveal] {
  opacity: 1;
  transform: none;
}