/* ===================================================================
   ANIMATIONS-PRO.CSS
   Site-wide professional scroll-reveal + hover/interaction animations.
   Works with animations-pro.js (IntersectionObserver adds .in-view).
   Safe, additive file — does not override existing layout/colors.
=================================================================== */

/* Respect users who prefer reduced motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-fade, .reveal-left, .reveal-right, .reveal-zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Scroll reveal base states ---------- */
.reveal-up, .reveal-fade, .reveal-left, .reveal-right, .reveal-zoom {
  opacity: 0;
  transition: opacity .8s cubic-bezier(0.16,1,0.3,1),
              transform .8s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
.reveal-up    { transform: translateY(32px); }
.reveal-fade  { transform: translateY(0); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-zoom  { transform: scale(.92); }

.reveal-up.in-view,
.reveal-fade.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-zoom.in-view {
  opacity: 1;
  transform: none;
}

/* Section headings: subtle underline "draw-in" once revealed */
.reveal-heading { position: relative; }
.reveal-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: #F59E0B;
  transition: width .7s cubic-bezier(0.16,1,0.3,1) .15s;
  border-radius: 2px;
}
.reveal-heading.in-view::after { width: 60px; }

/* ---------- Card / tile hover polish ---------- */
.card,
.gr-card,
.gallery-item,
.wc-item,
.mw-item,
.in-item,
.faq-item {
  transition: transform .35s cubic-bezier(0.16,1,0.3,1),
              box-shadow .35s cubic-bezier(0.16,1,0.3,1);
}
.card:hover,
.gr-card:hover,
.gallery-item:hover,
.wc-item:hover,
.mw-item:hover,
.in-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
}

/* Image zoom-on-hover inside cards/gallery (clip to rounded corners) */
.card, .gallery-item { overflow: hidden; }
.card img, .gallery-item img, .staff-img {
  transition: transform .6s cubic-bezier(0.16,1,0.3,1);
}
.card:hover img,
.gallery-item:hover img,
.gallery-item:hover .staff-img {
  transform: scale(1.08);
}

/* ---------- Buttons: smooth premium hover ---------- */
.btn,
.theme-accent-btn,
.cta-btn,
.faq-view-all-btn {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, filter .25s ease;
}
.btn:hover,
.theme-accent-btn:hover,
.cta-btn:hover,
.faq-view-all-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 22px rgba(245, 158, 11, 0.28);
  filter: brightness(1.03);
}
.btn:active,
.theme-accent-btn:active,
.cta-btn:active,
.faq-view-all-btn:active {
  transform: translateY(0) scale(0.99);
}

/* ---------- Small pill / chip hover (NCR locations, materials icons) ---------- */
.ncr-pill {
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.ncr-pill:hover {
  transform: translateY(-3px) scale(1.05);
}

.mw-item i, .in-item i, .wc-item i {
  transition: transform .35s cubic-bezier(0.16,1,0.3,1);
}
.mw-item:hover i, .in-item:hover i, .wc-item:hover i {
  transform: scale(1.15) rotate(-4deg);
}

/* ---------- Work process steps: sequential pop ---------- */
.wp-step {
  transition: transform .3s ease;
}
.wp-circle {
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .35s ease;
}
.wp-step:hover .wp-circle {
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.18);
}

/* ---------- Stagger delays (applied via JS inline style, capped) ---------- */
/* JS sets `transition-delay` inline per item — no CSS changes needed here. */

/* ---------- Star rating micro pop on view (Google reviews box) ---------- */
.gr-rating-box .gr-stars {
  display: inline-block;
}
.gr-rating-box.in-view .gr-stars {
  animation: starPop .6s cubic-bezier(0.34,1.56,0.64,1) .2s both;
}
@keyframes starPop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}