/* Waterproofing Depot central motion system.
   Content remains visible unless JavaScript explicitly enables motion. */
:root {
  --motion-duration: 700ms;
  --motion-hover-duration: 320ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html.motion-enabled { overflow-x: clip; }

.motion-enabled body {
  animation: wdp-page-enter 420ms var(--motion-ease) both;
}

@keyframes wdp-page-enter {
  from { opacity: 0.92; }
  to { opacity: 1; }
}

.reveal {
  opacity: 1;
  transform: none;
}

.motion-enabled .reveal {
  will-change: opacity, transform;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-enabled .reveal:not(.is-visible) { opacity: 0; }
.motion-enabled .reveal-up:not(.is-visible) { transform: translate3d(0, 28px, 0); }
.motion-enabled .reveal-left:not(.is-visible) { transform: translate3d(-34px, 0, 0); }
.motion-enabled .reveal-right:not(.is-visible) { transform: translate3d(34px, 0, 0); }
.motion-enabled .reveal-scale:not(.is-visible) { transform: scale(0.965); }
.motion-enabled .reveal.is-visible { opacity: 1; transform: none; }

/* Sticky-header elevation without changing header geometry. */
.header-section {
  transition: background-color 320ms ease, box-shadow 320ms ease, backdrop-filter 320ms ease;
}
.header-section.is-motion-scrolled {
  box-shadow: 0 10px 30px rgba(0, 37, 68, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.motion-scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Navigation and interactive controls. */
.header-section .main-menu > li > a {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: color 300ms ease, background-size 300ms var(--motion-ease);
}
.header-section .main-menu > li > a:hover,
.header-section .main-menu > li > a:focus-visible {
  background-size: 100% 2px;
}
.header-bar span { transition: transform 300ms ease, opacity 300ms ease; }

.btn-one,
.btn-two,
.btn-one-light,
.header-quote-btn,
.product__cart,
.product__cart--add,
.cart-drawer__actions a,
#quotation-submit {
  transition:
    transform var(--motion-hover-duration) var(--motion-ease),
    box-shadow var(--motion-hover-duration) ease,
    background-color var(--motion-hover-duration) ease,
    border-color var(--motion-hover-duration) ease,
    color var(--motion-hover-duration) ease !important;
}
.btn-one:hover,
.btn-two:hover,
.btn-one-light:hover,
.header-quote-btn:hover,
.product__cart:hover,
.product__cart--add:hover,
.cart-drawer__actions a:hover,
#quotation-submit:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 12px 26px rgba(0, 37, 68, 0.2);
}
.btn-one i,
.btn-two i,
.btn-one-light i,
.header-quote-btn i,
.product__cart i,
.product__cart--add i {
  transition: transform var(--motion-hover-duration) var(--motion-ease);
}
.btn-one:hover i,
.btn-two:hover i,
.btn-one-light:hover i,
.header-quote-btn:hover i,
.product__cart:hover i,
.product__cart--add:hover i { transform: translate3d(3px, 0, 0); }

/* Cards and contained images. */
.product__item,
.product-card-static,
.about-purpose-card,
.about-product-card,
.service__item,
.blog__item-left,
.blog__item-right,
.testimonial__item,
.wdp-checkout-card,
.wdp-cart-card,
.policy-card,
.policy-nav,
.contact .content,
.contact .form-area,
.about-benefits-grid > div {
  transition:
    transform var(--motion-hover-duration) var(--motion-ease),
    box-shadow var(--motion-hover-duration) ease,
    border-color var(--motion-hover-duration) ease,
    background-color var(--motion-hover-duration) ease;
}
.product__item:hover,
.product-card-static:hover,
.about-purpose-card:hover,
.about-product-card:hover,
.service__item:hover,
.blog__item-left:hover,
.blog__item-right:hover,
.wdp-checkout-card:hover,
.wdp-cart-card:hover,
.about-benefits-grid > div:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 20px 42px rgba(0, 37, 68, 0.22);
}
.about-benefits-grid > div {
  position: relative;
  z-index: 0;
  transform-origin: center;
}
.about-benefits-grid > div:hover {
  z-index: 2;
  transform: translate3d(0, -6px, 0) scale(1.045);
  border-color: rgba(255, 217, 61, 0.6);
  background-color: rgba(0, 37, 68, 0.92);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32);
}
.about-benefits-grid > div i {
  transition: transform var(--motion-hover-duration) var(--motion-ease);
}
.about-benefits-grid > div:hover i { transform: scale(1.12); }
.product__image,
.about-product-card__image,
.blog__image,
.image.img,
.about-page-image { overflow: hidden; }
.product__image img,
.about-product-card__image img,
.blog__image img,
.about-page-image img,
.shop-single-slide img {
  transition: transform 650ms var(--motion-ease);
}
.product__item:hover .product__image img,
.product-card-static:hover .product__image img,
.about-product-card:hover img,
.blog__item-left:hover img,
.blog__item-right:hover img,
.about-page-image:hover img,
.shop-single-slide:hover img { transform: scale(1.035); }

/* Forms and selectors. */
input,
select,
textarea,
.nice-select,
.product-colour-dropdown__toggle {
  transition: border-color 280ms ease, box-shadow 280ms ease, background-color 280ms ease;
}
input:focus,
select:focus,
textarea:focus,
.nice-select:focus,
.product-colour-dropdown__toggle:focus-visible {
  border-color: #FFD93D !important;
  box-shadow: 0 0 0 4px rgba(255, 217, 61, 0.18) !important;
  outline: none;
}
.product-colour-swatch,
.shop-single .nav-link,
.cart-quantity button {
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, transform 280ms ease;
}
.product-colour-swatch:hover,
.cart-quantity button:hover { transform: translate3d(0, -1px, 0); }

/* Accordions retain their natural content height. */
.accordion-collapse { transition: height 360ms var(--motion-ease); }
.accordion-button,
.accordion-button::after,
[data-bs-toggle="collapse"] i {
  transition: transform 320ms var(--motion-ease), color 320ms ease, background-color 320ms ease;
}
.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); }
[data-bs-toggle="collapse"][aria-expanded="true"] i { transform: rotate(180deg); }

/* Footer interaction polish. */
.footer__item a,
.footer-area .social-icon a {
  transition: color 280ms ease, transform 280ms var(--motion-ease), background-color 280ms ease;
}
.footer__item li a:hover { transform: translate3d(4px, 0, 0); }
.footer-area .social-icon a:hover { transform: translate3d(0, -4px, 0); }

@media (max-width: 767px) {
  .motion-enabled .reveal-left:not(.is-visible),
  .motion-enabled .reveal-right:not(.is-visible) {
    transform: translate3d(0, 24px, 0);
  }
  .product__item:hover,
  .product-card-static:hover,
  .about-purpose-card:hover,
  .about-product-card:hover,
  .service__item:hover,
  .blog__item-left:hover,
  .blog__item-right:hover,
  .wdp-checkout-card:hover,
  .wdp-cart-card:hover { transform: translate3d(0, -3px, 0); }
  .about-benefits-grid > div:hover { transform: translate3d(0, -3px, 0) scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .motion-enabled .reveal,
  .motion-enabled .reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* About benefit cards: zoom out on hover */
.about-benefits-grid > div {
    scale: 1;
    transform-origin: center;
    transition:
        scale 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease !important;
    cursor: pointer;
}

.about-benefits-grid > div:hover {
    scale: 1.1;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Icon animation */
.about-benefits-grid > div i {
    scale: 1;
    transition: scale 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-benefits-grid > div:hover i {
    scale: 0.85;
}

/* Application guide: use the same card lift and icon response as the global site. */
.application-guide-card {
    transform: translate3d(0, 0, 0);
    transition:
        transform var(--motion-hover-duration) var(--motion-ease),
        box-shadow var(--motion-hover-duration) ease,
        border-color var(--motion-hover-duration) ease !important;
}

.application-guide-card:hover {
    transform: translate3d(0, -3px, 0);
    border-color: rgba(144, 213, 255, 0.55);
    box-shadow: 0 24px 54px rgba(0, 37, 68, 0.3);
}

.application-guide-card__heading > a i {
    transform: translate3d(0, 0, 0);
    transition: transform var(--motion-hover-duration) var(--motion-ease);
}

.application-guide-card__heading > a:hover i,
.application-guide-card__heading > a:focus-visible i {
    transform: translate3d(4px, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .application-guide-card,
    .application-guide-card__heading > a i {
        transition-duration: 0.01ms !important;
    }

    .application-guide-card:hover,
    .application-guide-card__heading > a:hover i,
    .application-guide-card__heading > a:focus-visible i {
        transform: none;
    }
}