/* Premium motion layer. GSAP drives movement; CSS keeps the layout resilient. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 280ms;
  --motion-normal: 720ms;
  --motion-slow: 1050ms;
}

.hero-wave {
  background-image: url("images/optimized/waves.webp");
}

html.motion-pending .topbar,
html.motion-pending .hero-title-line,
html.motion-pending .hero-series,
html.motion-pending .hero-offer,
html.motion-pending .hero-kicker,
html.motion-pending .round-dark,
html.motion-pending .hero-art,
html.motion-pending .hero-person,
html.motion-pending .hero-mini-card,
html.motion-pending .hero-thumb,
html.motion-pending .hero-wave,
html.motion-pending .info-breadcrumbs,
html.motion-pending .info-hero-copy > *,
html.motion-pending .info-hero-image,
html.motion-pending .contact-intro > *,
html.motion-pending .contact-intro-bottom > *,
html.motion-pending .catalog-hero > *,
html.motion-pending .catalog-category-hero > *,
html.motion-pending .product-detail > * {
  opacity: 0;
}

.hero-title-line,
.motion-line {
  display: block;
}

.motion-line {
  overflow: visible;
  will-change: transform, opacity;
}

.workwear-editorial {
  isolation: isolate;
  will-change: transform;
}

@media (min-width: 768px) {
  html.motion-enhanced .workwear-editorial[data-motion-signature] {
    opacity: 0;
    visibility: hidden;
  }
}

.workwear-media {
  will-change: clip-path;
  transform: translateZ(0);
}

.workwear-media > img {
  will-change: transform;
}

.editorial-caption {
  z-index: 2;
}

.ppe-visual,
.info-hero-image,
.tailoring-feature,
.contact-photo {
  overflow: hidden;
}

.product-card,
.ppe-product,
.catalog-product-card,
.hero-mini-card {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease);
}

.product-photo img,
.catalog-product-image img,
.ppe-product img {
  transition: transform var(--motion-normal) var(--motion-ease);
}

.reviews {
  --review-line: 0;
}

.reviews::before {
  transform: scaleX(var(--review-line));
  transform-origin: left center;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover,
  .ppe-product:hover,
  .catalog-product-card:hover,
  .hero-mini-card:hover {
    transform: translateY(-5px);
  }

  .catalog-product-card:hover {
    box-shadow: 0 18px 48px rgba(17, 20, 18, .08);
  }

  .product-card:hover .product-photo img,
  .catalog-product-card:hover .catalog-product-image img {
    transform: scale(1.035);
  }
}

.hero-main-cta,
.selection-button,
.info-button,
.product-request-button,
.catalog-product-request {
  will-change: transform;
}

.hero-main-cta:active,
.selection-button:active,
.info-button:active,
.product-request-button:active,
.catalog-product-request:active {
  scale: .98;
}

@media (max-width: 767px) {
  .hero-wave {
    background-image: url("images/optimized/waves-mobile.webp");
  }

  .motion-line {
    display: initial;
    will-change: auto;
  }

  .workwear-editorial,
  .workwear-media,
  .workwear-media > img {
    will-change: auto;
  }

  .product-card,
  .ppe-product,
  .catalog-product-card,
  .hero-mini-card {
    transition-duration: 220ms;
  }
}

html.reduced-motion *,
html.reduced-motion *::before,
html.reduced-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
  transition-delay: 0ms !important;
}