/**
 * Custom Scroll Animations Utility
 * 
 * Elegant, hardware-accelerated scroll animations with cubic-bezier easing.
 * Classes:
 *   - Direction: .reveal-up, .reveal-down, .reveal-left, .reveal-right, .reveal-zoom, .reveal-fade
 *   - Delay (Optional): .delay-1 (0.1s), .delay-2 (0.2s), .delay-3 (0.3s)... (Default: 0.15s)
 *   - Duration (Optional): .duration-fast (0.5s), .duration-slow (1.4s)
 * 
 * @package Flatsome Child
 */

/* ============================================================
   1. Base Properties (Initial State: Hidden & Shifted)
   ============================================================ */
[class*="reveal-"] {
  opacity: 0;
  will-change: transform, opacity;
  transition-property: transform, opacity !important;
  transition-duration: 0.9s !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  /* Default delay if none is passed: 0.15s */
  transition-delay: var(--reveal-delay, 0.3s) !important;
}

/* Directions */
.reveal-up {
  transform: translate3d(0, 45px, 0);
}

.reveal-down {
  transform: translate3d(0, -45px, 0);
}

.reveal-left {
  transform: translate3d(-55px, 0, 0);
}

.reveal-right {
  transform: translate3d(55px, 0, 0);
}

.reveal-zoom {
  transform: scale(0.92);
}

.reveal-fade {
  transform: translate3d(0, 0, 0);
}

/* ============================================================
   2. Revealed State (Triggered when entering viewport)
   ============================================================ */
/* During entrance animation, prevent accidental mouse hover from interrupting or freezing mid-flight */
[class*="reveal-"]:not(.reveal-done) {
  pointer-events: none !important;
}

[class*="reveal-"].is-revealed {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Once entrance completes, restore full interactivity and allow smooth hover */
[class*="reveal-"].reveal-done {
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) scale(1);
}

[class*="reveal-"].reveal-done:hover,
.dich-vu-card.reveal-done:hover,
.duan-tb-card.reveal-done:hover {
  transform: translateY(-6px) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

/* ============================================================
   3. Optional Delay Classes (if user passes delay)
   ============================================================ */
.no-delay {
  --reveal-delay: 0s !important;
}

.delay-1,
.delay-100 {
  --reveal-delay: 0.1s !important;
}

.delay-2,
.delay-200 {
  --reveal-delay: 0.2s !important;
}

.delay-3,
.delay-300 {
  --reveal-delay: 0.3s !important;
}

.delay-4,
.delay-400 {
  --reveal-delay: 0.4s !important;
}

.delay-5,
.delay-500 {
  --reveal-delay: 0.5s !important;
}

.delay-6,
.delay-600 {
  --reveal-delay: 0.6s !important;
}

.delay-8,
.delay-800 {
  --reveal-delay: 0.8s !important;
}

.delay-10,
.delay-1000 {
  --reveal-delay: 1.0s !important;
}

/* ============================================================
   4. Optional Duration Overrides
   ============================================================ */
.duration-fast {
  transition-duration: 0.5s !important;
}

.duration-slow {
  transition-duration: 1.4s !important;
}

/* ============================================================
   5. Fallbacks & UX Builder Safety
   ============================================================ */
/* Always display elements inside UX Builder editor iframe so user can edit */
html.ux-builder-active [class*="reveal-"],
body.ux-builder-active [class*="reveal-"],
.ux-builder-iframe [class*="reveal-"],
body.ux-builder-iframe [class*="reveal-"],
[ng-app="uxBuilder"] [class*="reveal-"],
.uxb-container [class*="reveal-"],
.uxb-preview [class*="reveal-"],
.uxb-wrapper [class*="reveal-"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  pointer-events: auto !important;
}

/* If JavaScript is disabled on browser */
.no-js [class*="reveal-"] {
  opacity: 1 !important;
  transform: none !important;
}

/* Accessibility: User prefers reduced motion in OS */
@media (prefers-reduced-motion: reduce) {
  [class*="reveal-"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}