/**
 * LGP Motion — visual polish for Framer-like interaction.
 * Does NOT hide Elementor widgets (opacity tricks stay in JS onEnter only).
 */

html.lgp-motion-on {
  scroll-behavior: auto;
}

/* Card / media planes */
html.lgp-motion-on .work-card,
html.lgp-motion-on .highlight-card,
html.lgp-motion-on .tech-card,
html.lgp-motion-on .channel-card,
html.lgp-motion-on .value-card,
html.lgp-motion-on .towards-card,
html.lgp-motion-on .gallery-item,
html.lgp-motion-on .rail-card,
html.lgp-motion-on .service-select-card {
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

html.lgp-motion-on .work-card:hover,
html.lgp-motion-on .highlight-card:hover,
html.lgp-motion-on .tech-card:hover,
html.lgp-motion-on .towards-card:hover,
html.lgp-motion-on .channel-card:hover {
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.09);
}

html.lgp-motion-on .hero__image-container,
html.lgp-motion-on .about-hero-image,
html.lgp-motion-on .contact-hero-image-box,
html.lgp-motion-on .svc-media__frame,
html.lgp-motion-on .work-card__image,
html.lgp-motion-on .gallery-item,
html.lgp-motion-on .towards-card {
  overflow: hidden;
  perspective: 800px;
}

html.lgp-motion-on .hero__image-container img,
html.lgp-motion-on .about-hero-image img,
html.lgp-motion-on .contact-hero-image-box img,
html.lgp-motion-on .svc-media__frame img,
html.lgp-motion-on .work-card img,
html.lgp-motion-on .gallery-item img,
html.lgp-motion-on .towards-card img {
  transform-origin: center center;
  will-change: transform;
}

/* Word split titles */
html.lgp-motion-on .lgp-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Interactive buttons feel snappier */
html.lgp-motion-on .filter-btn,
html.lgp-motion-on .share-btn,
html.lgp-motion-on .story-tab-btn {
  will-change: transform;
}

/* Before/after must stay layout-stable (no hover transform fights). */
html.lgp-motion-on .before-after-container,
html.lgp-motion-on .before-after-container img,
html.lgp-motion-on .ba-resize,
html.lgp-motion-on .ba-handle {
  will-change: auto;
}

html.lgp-motion-on .before-after-container.is-dragging {
  cursor: ew-resize;
}

@media (prefers-reduced-motion: reduce) {
  html.lgp-motion-on .work-card,
  html.lgp-motion-on .highlight-card,
  html.lgp-motion-on .tech-card,
  html.lgp-motion-on .lgp-word,
  html.lgp-motion-on .hero__image-container img {
    will-change: auto;
    transition: none;
  }
}