/* OKRA desktop gallery cursor light. Decorative progressive enhancement only. */
:root {
  --okra-cursor-light-size: 240px;
  --okra-cursor-light-opacity: 0.16;
  --okra-cursor-light-softness: 60%;
  --okra-ease-luxury: cubic-bezier(.16, 1, .3, 1);
}

.okra-cursor-light {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: var(--okra-cursor-light-size);
  height: var(--okra-cursor-light-size);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-120vw, -120vh, 0);
  transition: opacity 300ms var(--okra-ease-luxury);
  will-change: transform, opacity;
  contain: layout style paint;
  background:
    radial-gradient(
      circle,
      rgba(255, 251, 240, 0.34) 0%,
      rgba(255, 244, 219, 0.19) 30%,
      rgba(201, 180, 145, 0.08) var(--okra-cursor-light-softness),
      rgba(255, 255, 255, 0) 74%
    );
  mix-blend-mode: soft-light;
}

body.has-cursor-light .okra-cursor-light.is-visible {
  opacity: var(--okra-cursor-light-opacity);
}

html.cart-drawer-open .okra-cursor-light,
body.cart-drawer-open .okra-cursor-light,
body:has(.okra-cart-drawer.is-open) .okra-cursor-light,
body:has(.okra-search-modal.is-open) .okra-cursor-light,
body:has(.modal.show) .okra-cursor-light,
body:has(.offcanvas.show) .okra-cursor-light,
body:has(.pswp--open) .okra-cursor-light {
  opacity: 0;
}

.spotlight-surface {
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  --spotlight-opacity: 0;
  --spotlight-wood-opacity: 0;
}

body.has-cursor-light .spotlight-surface--chrome:not(.card-product):not(.item-scroll-target),
body.has-cursor-light .spotlight-surface--mirror:not(.card-product):not(.item-scroll-target),
body.has-cursor-light [data-spotlight-surface="chrome"],
body.has-cursor-light [data-spotlight-surface="mirror"],
body.has-cursor-light .chrome-piece,
body.has-cursor-light .mirror-piece,
body.has-cursor-light .material-sample--chrome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.has-cursor-light .spotlight-surface--chrome:not(.card-product):not(.item-scroll-target)::before,
body.has-cursor-light .spotlight-surface--mirror:not(.card-product):not(.item-scroll-target)::before,
body.has-cursor-light [data-spotlight-surface="chrome"]::before,
body.has-cursor-light [data-spotlight-surface="mirror"]::before,
body.has-cursor-light .chrome-piece::before,
body.has-cursor-light .mirror-piece::before,
body.has-cursor-light .material-sample--chrome::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--spotlight-opacity);
  transition: opacity 280ms var(--okra-ease-luxury);
  background:
    radial-gradient(
      circle at var(--spotlight-x) var(--spotlight-y),
      rgba(255, 255, 255, 0.28) 0%,
      rgba(244, 239, 228, 0.12) 18%,
      rgba(255, 255, 255, 0) 42%
    ),
    linear-gradient(
      112deg,
      rgba(255, 255, 255, 0) 28%,
      rgba(255, 255, 255, 0.13) 44%,
      rgba(255, 255, 255, 0.03) 54%,
      rgba(255, 255, 255, 0) 70%
    );
  mix-blend-mode: screen;
}

body.has-cursor-light .card-product[data-material="chrome" i] .card-product-wrapper,
body.has-cursor-light .card-product[data-selected-material-slug="chrome"] .card-product-wrapper,
body.has-cursor-light .card-product.spotlight-surface--chrome .card-product-wrapper,
body.has-cursor-light[data-theme="chrome"] .card-product .card-product-wrapper,
body.has-cursor-light.product-type-chrome .okra-related-grid-style .card-product .card-product-wrapper {
  position: relative;
  isolation: isolate;
}

body.has-cursor-light .card-product[data-material="chrome" i] .card-product-wrapper::after,
body.has-cursor-light .card-product[data-selected-material-slug="chrome"] .card-product-wrapper::after,
body.has-cursor-light .card-product.spotlight-surface--chrome .card-product-wrapper::after,
body.has-cursor-light[data-theme="chrome"] .card-product .card-product-wrapper::after,
body.has-cursor-light.product-type-chrome .okra-related-grid-style .card-product .card-product-wrapper::after {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 3;
  pointer-events: none;
  border-radius: 8px;
  opacity: var(--spotlight-opacity);
  transition: opacity 300ms var(--okra-ease-luxury);
  background:
    radial-gradient(
      circle at var(--spotlight-x) var(--spotlight-y),
      rgba(255, 255, 255, 0.22) 0%,
      rgba(239, 234, 224, 0.10) 20%,
      rgba(255, 255, 255, 0) 48%
    ),
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0.09) 47%,
      rgba(255, 255, 255, 0.025) 58%,
      rgba(255, 255, 255, 0) 74%
    );
  mix-blend-mode: screen;
}

body.has-cursor-light.product-type-chrome [data-product-gallery] .item-scroll-target,
body.has-cursor-light [data-product-gallery] .item-scroll-target.spotlight-surface--chrome,
body.has-cursor-light .okra-mobile-hero.spotlight-surface--chrome {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.has-cursor-light.product-type-chrome [data-product-gallery] .item-scroll-target::after,
body.has-cursor-light [data-product-gallery] .item-scroll-target.spotlight-surface--chrome::after,
body.has-cursor-light .okra-mobile-hero.spotlight-surface--chrome::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--spotlight-opacity);
  transition: opacity 300ms var(--okra-ease-luxury);
  background:
    radial-gradient(
      circle at var(--spotlight-x) var(--spotlight-y),
      rgba(255, 255, 255, 0.18) 0%,
      rgba(240, 236, 226, 0.08) 22%,
      rgba(255, 255, 255, 0) 52%
    ),
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.075) 48%,
      rgba(255, 255, 255, 0) 68%
    );
  mix-blend-mode: screen;
}

body.has-cursor-light .spotlight-surface--wood:not(.card-product),
body.has-cursor-light [data-spotlight-surface="wood"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.has-cursor-light .spotlight-surface--wood:not(.card-product)::after,
body.has-cursor-light [data-spotlight-surface="wood"]::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--spotlight-wood-opacity);
  transition: opacity 320ms var(--okra-ease-luxury);
  background:
    radial-gradient(
      circle at var(--spotlight-x) var(--spotlight-y),
      rgba(255, 225, 179, 0.18) 0%,
      rgba(151, 91, 48, 0.055) 28%,
      rgba(255, 255, 255, 0) 58%
    );
  mix-blend-mode: soft-light;
}

@media (min-width: 1280px) {
  :root {
    --okra-cursor-light-size: 260px;
  }
}

@media (max-width: 767px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce), (forced-colors: active) {
  .okra-cursor-light {
    display: none !important;
  }

  .spotlight-surface {
    --spotlight-opacity: 0 !important;
    --spotlight-wood-opacity: 0 !important;
  }

  body.has-cursor-light .spotlight-surface--chrome::before,
  body.has-cursor-light .spotlight-surface--mirror::before,
  body.has-cursor-light .spotlight-surface--wood::after,
  body.has-cursor-light .card-product .card-product-wrapper::after,
  body.has-cursor-light [data-product-gallery] .item-scroll-target::after {
    display: none !important;
  }
}