/* Arabic homepage phase: intentionally scoped to one page and one language. */
body.oc-home-motion-ar {
  --oc-home-gold: #b88435;
  --oc-home-gold-soft: rgba(184,132,53,.16);
  --oc-home-ease: cubic-bezier(.22,.75,.24,1);
}

body.oc-home-motion-ar .oc-home-reveal {
  opacity: 0;
  transform: translate3d(0,22px,0);
  transition: opacity .62s var(--oc-home-ease), transform .62s var(--oc-home-ease);
  transition-delay: var(--oc-home-delay, 0ms);
}

body.oc-home-motion-ar .oc-home-reveal.oc-home-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}

body.oc-home-motion-ar .oc-home-card-reveal {
  opacity: 0;
  transform: translate3d(0,16px,0) scale(.985);
  transition: opacity .54s var(--oc-home-ease), transform .54s var(--oc-home-ease), box-shadow .28s ease, border-color .28s ease;
  transition-delay: var(--oc-home-delay, 0ms);
}

body.oc-home-motion-ar .oc-home-card-reveal.oc-home-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

body.oc-home-motion-ar .title-wrapper .title,
body.oc-home-motion-ar .wd-title-container .title {
  position: relative;
}

body.oc-home-motion-ar .title-wrapper .title::after,
body.oc-home-motion-ar .wd-title-container .title::after {
  content: "";
  display: block;
  width: clamp(38px,5vw,66px);
  height: 2px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,var(--oc-home-gold),transparent);
  transform: scaleX(.25);
  opacity: .3;
  transition: transform .68s var(--oc-home-ease), opacity .68s ease;
}

body.oc-home-motion-ar .oc-home-visible .title-wrapper .title::after,
body.oc-home-motion-ar .oc-home-visible .wd-title-container .title::after {
  transform: scaleX(1);
  opacity: .85;
}

body.oc-home-motion-ar .wd-product,
body.oc-home-motion-ar .category-grid-item,
body.oc-home-motion-ar .info-box-wrapper,
body.oc-home-motion-ar .promo-banner {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

@media (hover:hover) and (pointer:fine) {
  body.oc-home-motion-ar .wd-product:hover,
  body.oc-home-motion-ar .category-grid-item:hover,
  body.oc-home-motion-ar .info-box-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 34px rgba(62,38,20,.10);
  }

  body.oc-home-motion-ar .promo-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(62,38,20,.12);
  }

  body.oc-home-motion-ar .promo-banner img,
  body.oc-home-motion-ar .wd-product .product-image-link img,
  body.oc-home-motion-ar .category-image img {
    transition: transform .48s var(--oc-home-ease);
  }

  body.oc-home-motion-ar .promo-banner:hover img,
  body.oc-home-motion-ar .wd-product:hover .product-image-link img,
  body.oc-home-motion-ar .category-grid-item:hover .category-image img {
    transform: scale(1.025);
  }
}

body.oc-home-motion-ar .btn,
body.oc-home-motion-ar button,
body.oc-home-motion-ar [role="button"] {
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}

body.oc-home-motion-ar .btn:active,
body.oc-home-motion-ar button:active,
body.oc-home-motion-ar [role="button"]:active {
  transform: scale(.975);
}

@media (max-width:767px) {
  body.oc-home-motion-ar .oc-home-reveal {
    transform: translate3d(0,15px,0);
    transition-duration: .52s;
  }
  body.oc-home-motion-ar .oc-home-card-reveal {
    transform: translate3d(0,11px,0) scale(.992);
    transition-duration: .46s;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.oc-home-motion-ar .oc-home-reveal,
  body.oc-home-motion-ar .oc-home-card-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.oc-home-motion-ar .title-wrapper .title::after,
  body.oc-home-motion-ar .wd-title-container .title::after,
  body.oc-home-motion-ar .wd-product,
  body.oc-home-motion-ar .category-grid-item,
  body.oc-home-motion-ar .info-box-wrapper,
  body.oc-home-motion-ar .promo-banner,
  body.oc-home-motion-ar img,
  body.oc-home-motion-ar .btn,
  body.oc-home-motion-ar button,
  body.oc-home-motion-ar [role="button"] {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}