/**
 * DBB Customer Service & Support
 * Two-Way Continuous Scroll-Triggered Animation System
 * Elements smoothly fade + slide in when entering viewport,
 * and fade + slide out when leaving viewport in either direction.
 */

.scroll-reveal {
  will-change: opacity, transform;
}

/* -------------------------------------------------------------
   DEFAULT / BELOW VIEWPORT (User scrolling down -> slides UP into view)
   ------------------------------------------------------------- */
.scroll-reveal[data-anim="fade-up"].is-below {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal[data-anim="fade-down"].is-below {
  opacity: 0;
  transform: translate3d(0, -50px, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal[data-anim="fade-left"].is-below {
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal[data-anim="fade-right"].is-below {
  opacity: 0;
  transform: translate3d(50px, 0, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal[data-anim="fade"].is-below {
  opacity: 0;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

/* Fallback if data-anim is not specified or defaults to fade-up */
.scroll-reveal:not([data-anim]).is-below {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

/* -------------------------------------------------------------
   IN-VIEWPORT STATE (Active, smoothly animated into view)
   ------------------------------------------------------------- */
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Preserve component hover states when visible */
.service-card.scroll-reveal.is-visible:hover,
.location-card.scroll-reveal.is-visible:hover,
.career-card.scroll-reveal.is-visible:hover,
.concern-card.scroll-reveal.is-visible:hover,
.t-card.scroll-reveal.is-visible:hover {
  transform: translateY(-4px);
}

/* -------------------------------------------------------------
   ABOVE VIEWPORT (User scrolled past -> slides UP and fades OUT;
   User scrolling UP -> enters from top, sliding DOWN and fading IN)
   ------------------------------------------------------------- */
.scroll-reveal[data-anim="fade-up"].is-above {
  opacity: 0;
  transform: translate3d(0, -50px, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal[data-anim="fade-down"].is-above {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal[data-anim="fade-left"].is-above {
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal[data-anim="fade-right"].is-above {
  opacity: 0;
  transform: translate3d(50px, 0, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal[data-anim="fade"].is-above {
  opacity: 0;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

.scroll-reveal:not([data-anim]).is-above {
  opacity: 0;
  transform: translate3d(0, -50px, 0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: 0s !important;
}

/* -------------------------------------------------------------
   MOBILE VIEWPORTS (Reduced movement distance 30-38px, duration 1.1s)
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .scroll-reveal[data-anim="fade-up"].is-below,
  .scroll-reveal:not([data-anim]).is-below {
    transform: translate3d(0, 35px, 0);
  }

  .scroll-reveal[data-anim="fade-down"].is-below {
    transform: translate3d(0, -35px, 0);
  }

  .scroll-reveal[data-anim="fade-left"].is-below {
    transform: translate3d(-35px, 0, 0);
  }

  .scroll-reveal[data-anim="fade-right"].is-below {
    transform: translate3d(35px, 0, 0);
  }

  .scroll-reveal[data-anim="fade-up"].is-above,
  .scroll-reveal:not([data-anim]).is-above {
    transform: translate3d(0, -35px, 0);
  }

  .scroll-reveal[data-anim="fade-down"].is-above {
    transform: translate3d(0, 35px, 0);
  }

  .scroll-reveal[data-anim="fade-left"].is-above {
    transform: translate3d(-35px, 0, 0);
  }

  .scroll-reveal[data-anim="fade-right"].is-above {
    transform: translate3d(35px, 0, 0);
  }

  .scroll-reveal.is-visible {
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    /* Scale down stagger delays on mobile for snappy responsiveness */
    transition-delay: calc(var(--reveal-delay, 0ms) * 0.5) !important;
  }
}

/* -------------------------------------------------------------
   ACCESSIBILITY: PREFERS REDUCED MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}