/* =========================================================
   BUFFALO TREE PRO — ANIMATIONS
   Driven by IntersectionObserver in assets/js/animations.js
   which toggles the .is-visible class. All keyframes respect
   prefers-reduced-motion (see base.css global override).
   ========================================================= */

[data-reveal]{
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

[data-reveal="up"]{ transform: translateY(36px); }
[data-reveal="down"]{ transform: translateY(-36px); }
[data-reveal="left"]{ transform: translateX(-36px); }
[data-reveal="right"]{ transform: translateX(36px); }
[data-reveal="scale"]{ transform: scale(0.92); }
[data-reveal="fade"]{ transform: none; }

[data-reveal].is-visible{ opacity: 1; transform: none; }

/* image mask reveal */
.btp-mask-reveal{ position: relative; overflow: hidden; }
.btp-mask-reveal::after{
  content: '';
  position: absolute; inset: 0;
  background: var(--color-bg);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 900ms var(--ease-in-out);
  z-index: 1;
}
.btp-mask-reveal.is-visible::after{ transform: scaleX(0); }

/* hover lift (generic utility) */
.btp-hover-lift{ transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btp-hover-lift:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }

/* floating drift (hero cards) */
@keyframes btp-drift{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}
.btp-float-drift{ animation: btp-drift 5.5s var(--ease-in-out) infinite; }
.btp-float-drift--delay{ animation-delay: 1.2s; }

@media (prefers-reduced-motion: reduce){
  .btp-float-drift, .btp-float-drift--delay{ animation: none; }
}

/* number counter — no layout shift, text updated purely via JS */