/* Urban Suiting Motion v1.4.0 — premium motion only. Existing layout/design stays intact. */
html.urban-motion-js:not(.urban-motion-ready) body.home #urban-hero .urban-hero-copy,
html.urban-motion-js:not(.urban-motion-ready) body.home #urban-hero .urban-hero-image {
  visibility: hidden;
}

html.urban-motion-ready { scroll-behavior: auto; }

/* Header: restrained, one-time micro-intro. No scroll-driven header movement. */
@keyframes umHeaderIntro {
  from { opacity: 0; transform: translateY(-9px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#urban-header .header-logo { animation: umHeaderIntro .62s cubic-bezier(.22,.61,.36,1) .02s both; }
#urban-header .urban-header-note { animation: umHeaderIntro .56s cubic-bezier(.22,.61,.36,1) .10s both; }
#urban-header .urban-header-actions { animation: umHeaderIntro .56s cubic-bezier(.22,.61,.36,1) .16s both; }
#urban-header .urban-menu-widget { animation: umHeaderIntro .5s cubic-bezier(.22,.61,.36,1) .14s both; }
#urban-primary-nav .urban-primary-nav-link { animation: umHeaderIntro .48s cubic-bezier(.22,.61,.36,1) both; }
#urban-primary-nav .urban-primary-nav-link:nth-child(1) { animation-delay: .16s; }
#urban-primary-nav .urban-primary-nav-link:nth-child(2) { animation-delay: .20s; }
#urban-primary-nav .urban-primary-nav-link:nth-child(3) { animation-delay: .24s; }
#urban-primary-nav .urban-primary-nav-link:nth-child(4) { animation-delay: .28s; }
#urban-primary-nav .urban-primary-nav-link:nth-child(5) { animation-delay: .32s; }
#urban-primary-nav .urban-primary-nav-link:nth-child(6) { animation-delay: .36s; }
#urban-primary-nav .urban-primary-nav-link:nth-child(7) { animation-delay: .40s; }
#urban-menu-button i { transition: top .28s cubic-bezier(.22,.61,.36,1), transform .38s cubic-bezier(.22,.61,.36,1), opacity .2s ease !important; }
#urban-mobile-nav .urban-mobile-nav-link { will-change: transform, opacity; }


/* Scroll-reveal headings are hidden from first paint until JS has split and
   positioned their lines. This prevents a brief full-text flash before the
   reveal animation starts. If JS fails, the wp_head failsafe removes
   .urban-motion-js and the normal heading becomes visible again. */
html.urban-motion-js body.home .urban-company-heading-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body.home .urban-expertise-heading-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body.home .urban-products-heading-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body.home .urban-statement-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body.home .urban-process-heading-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body.home .urban-standards-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body.home .urban-faq-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js .urban-contact-title .elementor-heading-title:not(.um-heading-prepared) {
  visibility: hidden;
}

html.urban-motion-js body.home .elementor-heading-title.um-heading-prepared,
html.urban-motion-js .urban-contact-title .elementor-heading-title.um-heading-prepared {
  visibility: visible;
}


/* Footer motion helpers. Layout remains untouched. */
#urban-contact .urban-contact-form-panel,
#urban-footer .urban-footer-brand-wrap,
#urban-footer .urban-footer-description,
#urban-footer .urban-footer-nav,
#urban-footer .urban-footer-factory,
#urban-footer .urban-footer-bottom > .elementor-element {
  backface-visibility: hidden;
}
#urban-contact .urban-contact-form-panel { will-change: transform, opacity, clip-path; }
#urban-footer .urban-footer-link .elementor-button-text {
  display: inline-block;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
#urban-footer .urban-footer-link:hover .elementor-button-text { transform: translateX(4px); }

/* Text masks */
.um-line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: .04em;
  margin-bottom: -.04em;
}
.um-line-mask,
.um-line-inner,
.um-word,
.um-heading-line {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.um-line-inner,
.um-word,
.um-heading-line {
  display: inline-block;
  will-change: transform, opacity;
  transform-origin: 50% 100%;
}
/* Keep Elementor's natural word spacing so line wrapping stays identical. */
.um-word { margin-right: 0; }

/* GPU / perspective helpers */
#urban-hero .urban-hero-image,
#company .urban-company-visual,
#products .urban-product-photo,
#urban-purpose .urban-statement-image,
.urban-service-panel,
.urban-process-current,
.urban-product-card {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

#urban-hero .urban-hero-image,
#company .urban-company-visual,
#products .urban-product-photo,
#urban-purpose .urban-statement-image {
  overflow: hidden;
}

#urban-hero .urban-hero-image-img img,
#company .urban-company-image img,
#products .urban-product-photo-img img,
#urban-purpose .urban-statement-image-img img {
  will-change: transform;
  transform: translateZ(0);
}

/* Expertise storytelling */
.urban-service-layout.um-story-active .urban-service-item {
  opacity: .52;
  transition: opacity .34s ease, transform .34s ease;
}
.urban-service-layout.um-story-active .urban-service-item.is-active {
  opacity: 1;
  transform: translateX(12px);
}
.urban-service-layout.um-story-active .urban-service-item.is-active .urban-service-symbol {
  transform: rotate(180deg);
}
.urban-service-panel {
  will-change: transform, opacity;
}
.urban-panel-line {
  transform-origin: left center;
  will-change: transform;
}

/* Products */
.urban-product-showcase { perspective: 1200px; }
.urban-product-card {
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Process storytelling */
.urban-process-workspace.um-story-active .urban-process-tab {
  opacity: .56;
  transform: none;
  transition: opacity .34s ease;
}
.urban-process-workspace.um-story-active .urban-process-tab.is-active {
  opacity: 1;
  transform: none;
}
/* Keep the active process card locked to its exact grid cell. The previous
   translateX(10px) created a visible gap on the left and pushed the brown
   active state over the neighbouring card. Motion now stays inside the card. */
.urban-process-workspace.um-story-active .urban-process-tab .urban-process-tab-title .elementor-heading-title,
.urban-process-workspace.um-story-active .urban-process-tab .urban-process-tab-arrow {
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
}
.urban-process-workspace.um-story-active .urban-process-tab.is-active .urban-process-tab-title .elementor-heading-title {
  transform: translateX(6px);
}
.urban-process-workspace.um-story-active .urban-process-tab.is-active .urban-process-tab-arrow {
  transform: translate(2px, -2px);
}
.urban-process-current { will-change: transform, opacity; }
.urban-process-progress {
  position: relative;
  overflow: hidden;
}
.urban-process-progress .um-process-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: currentColor;
  opacity: .85;
  will-change: transform;
  pointer-events: none;
}

/* Dynamic story copy swaps keep the original Elementor widget/heading
   structure, while clipping only the moving text during a state change. */
.um-swap-mask {
  overflow: hidden;
}

/* SplitText masks inherit the site's typography; no font metrics are overridden. */
.um-heading-line {
  display: block;
  will-change: transform, opacity;
}

/* Stronger but still restrained button micro-interaction. */
.um-magnetic .elementor-button {
  transform-origin: 50% 50%;
}
.um-magnetic .elementor-button-text {
  display: inline-block;
  will-change: transform;
}
.um-arrow-button .elementor-button-text {
  transition: transform .28s ease;
}
.um-arrow-button:hover .elementor-button-text {
  transform: translate(2px, -2px) rotate(5deg);
}

/* Magnetic buttons */
.um-magnetic .elementor-button,
.um-magnetic a,
.um-magnetic button {
  will-change: transform;
}

/* Better rendering during scroll transforms */
.urban-value-item,
.urban-company-fact,
.urban-standard-card,
.urban-faq-item {
  backface-visibility: hidden;
}

@media (max-width: 1024px) {
  .urban-service-layout.um-story-active .urban-service-item,
  .urban-process-workspace.um-story-active .urban-process-tab {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.urban-motion-js body.home #urban-hero .urban-hero-copy,
  html.urban-motion-js body.home #urban-hero .urban-hero-image,
  html.urban-motion-js body.home .urban-company-heading-title .elementor-heading-title,
  html.urban-motion-js body.home .urban-expertise-heading-title .elementor-heading-title,
  html.urban-motion-js body.home .urban-products-heading-title .elementor-heading-title,
  html.urban-motion-js body.home .urban-statement-title .elementor-heading-title,
  html.urban-motion-js body.home .urban-process-heading-title .elementor-heading-title,
  html.urban-motion-js body.home .urban-standards-title .elementor-heading-title,
  html.urban-motion-js body.home .urban-faq-title .elementor-heading-title,
  html.urban-motion-js .urban-contact-title .elementor-heading-title {
    visibility: visible !important;
  }
  #urban-header .header-logo,
  #urban-header .urban-header-note,
  #urban-header .urban-header-actions,
  #urban-header .urban-menu-widget,
  #urban-primary-nav .urban-primary-nav-link {
    animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------
   Inner pages — v1.4.0 sitewide motion layer
   Company / Expertise / Products / Process / Contact /
   Request Quote / Catalogues. Design metrics are untouched.
---------------------------------------------------------- */

/* Prevent first-paint flashes on inner-page opening scenes. The JS failsafe
   removes .urban-motion-js if GSAP cannot initialise, restoring normal content. */
html.urban-motion-js body:not(.home) .urban-inner-hero-top,
html.urban-motion-js body:not(.home) .urban-inner-hero-media {
  visibility: hidden;
}

/* Primary inner-page headings are prepared before they become visible, using
   the same no-flash masked line reveal already approved on the Home page. */
html.urban-motion-js body:not(.home) .urban-inner-h2 .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body:not(.home) .urban-company-metrics-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body:not(.home) .urban-expertise-clients-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body:not(.home) .urban-products-quote-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body:not(.home) .urban-process-planning-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body:not(.home) .urban-page-form-title .elementor-heading-title:not(.um-heading-prepared),
html.urban-motion-js body:not(.home) .urban-quote-next-title .elementor-heading-title:not(.um-heading-prepared) {
  visibility: hidden;
}

html.urban-motion-js body:not(.home) .urban-inner-title .elementor-heading-title.um-heading-prepared,
html.urban-motion-js body:not(.home) .urban-inner-h2 .elementor-heading-title.um-heading-prepared,
html.urban-motion-js body:not(.home) .urban-company-metrics-title .elementor-heading-title.um-heading-prepared,
html.urban-motion-js body:not(.home) .urban-expertise-clients-title .elementor-heading-title.um-heading-prepared,
html.urban-motion-js body:not(.home) .urban-products-quote-title .elementor-heading-title.um-heading-prepared,
html.urban-motion-js body:not(.home) .urban-process-planning-title .elementor-heading-title.um-heading-prepared,
html.urban-motion-js body:not(.home) .urban-page-form-title .elementor-heading-title.um-heading-prepared,
html.urban-motion-js body:not(.home) .urban-quote-next-title .elementor-heading-title.um-heading-prepared {
  visibility: visible;
}

/* Clip/parallax targets. These rules affect rendering only, not dimensions. */
.urban-inner-hero-media,
.urban-inner-hero-image,
.urban-company-story-image,
.urban-expertise-custom-image,
.urban-process-quality-image,
.urban-products-family-media,
.urban-products-catalog-image,
.catalogue-box,
.urban-contact-map-widget,
.urban-page-form-panel,
.urban-quote-form-panel {
  backface-visibility: hidden;
}

.urban-inner-hero-image,
.urban-company-story-image,
.urban-expertise-custom-image,
.urban-process-quality-image,
.urban-products-family-media,
.urban-products-catalog-image,
.catalogue-box {
  overflow: hidden;
}

.urban-inner-hero-image img,
.urban-company-story-image img,
.urban-expertise-custom-image img,
.urban-process-quality-image img,
.urban-products-family-image img,
.urban-products-catalog-image img,
.catalogue-box img {
  will-change: transform;
  transform: translateZ(0);
}

/* 3D entrance groups keep their own stacking context and never change the grid. */
.urban-company-model-card,
.urban-company-metric,
.urban-company-responsibility-card,
.urban-expertise-cap-card,
.urban-expertise-custom-item,
.urban-expertise-client-card,
.urban-products-family-card,
.urban-products-catalog-card,
.urban-process-stage,
.urban-process-quality-item,
.urban-process-plan,
.urban-contact-page-item,
.urban-quote-check-item,
.urban-quote-next-card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Contact/quote panels move as panels; field dimensions are never animated. */
.urban-page-form-panel,
.urban-quote-form-panel { will-change: transform, opacity, clip-path; }

@media (prefers-reduced-motion: reduce) {
  html.urban-motion-js body:not(.home) .urban-inner-hero-top,
  html.urban-motion-js body:not(.home) .urban-inner-hero-media,
  html.urban-motion-js body:not(.home) .urban-inner-title .elementor-heading-title,
  html.urban-motion-js body:not(.home) .urban-inner-h2 .elementor-heading-title,
  html.urban-motion-js body:not(.home) .urban-company-metrics-title .elementor-heading-title,
  html.urban-motion-js body:not(.home) .urban-expertise-clients-title .elementor-heading-title,
  html.urban-motion-js body:not(.home) .urban-products-quote-title .elementor-heading-title,
  html.urban-motion-js body:not(.home) .urban-process-planning-title .elementor-heading-title,
  html.urban-motion-js body:not(.home) .urban-page-form-title .elementor-heading-title,
  html.urban-motion-js body:not(.home) .urban-quote-next-title .elementor-heading-title {
    visibility: visible !important;
  }
}