/* ============================================================
   X3WEB — Scroll Reveal & Hover Animation System
   Lightweight, native CSS transitions + JS Intersection Observer
   ============================================================ */

/* ── JS detection: only hide reveal elements when JS is active ── */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal-left {
  opacity: 0;
  transform: translateX(-22px);
  transition:
    opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal-right {
  opacity: 0;
  transform: translateX(22px);
  transition:
    opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal-scale {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  transition-delay: var(--reveal-delay, 0ms);
}

/* ── Visible states ── */
.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal-left.is-visible,
.js .reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.js .reveal-scale.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Reduced motion: show everything immediately ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Hover interactions — cards
   ============================================================ */
.card,
.service-card,
.package-card,
.benefit-card,
.why-item,
.process-step,
.contact-info-card,
.team-card,
.review-card {
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.card:hover,
.service-card:hover,
.package-card:hover,
.benefit-card:hover,
.why-item:hover,
.process-step:hover,
.contact-info-card:hover,
.team-card:hover,
.review-card:hover {
  transform: translateY(-4px);
}

/* ── Card icon subtle lift on hover ── */
.card-icon {
  transition: transform 220ms ease;
}

.card:hover .card-icon,
.service-card:hover .card-icon,
.package-card:hover .card-icon,
.benefit-card:hover .card-icon,
.why-item:hover .card-icon,
.process-step:hover .card-icon,
.contact-info-card:hover .card-icon {
  transform: translateY(-2px) scale(1.03);
}

/* ── Button hover ── */
.btn {
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.btn:hover {
  transform: translateY(-2px);
}

/* ── Mobile: disable will-change to prevent scroll jitter ── */
@media (max-width: 768px) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    will-change: auto !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .js .reveal,
  .js .reveal-left,
  .js .reveal-right,
  .js .reveal-scale {
    will-change: auto !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}