:root {
  --luxury-gold-rgb: 190, 157, 88;
}

.luxury-gallery-3d {
  --luxury-rx: 0deg;
  --luxury-ry: 0deg;
  --luxury-image-x: 0px;
  --luxury-image-y: 0px;
  --luxury-light-x: 50%;
  --luxury-light-y: 50%;
  --luxury-shadow-x: 0px;
  --luxury-shadow-y: 16px;
  --luxury-shadow-alpha: 0.08;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  transition: translate 620ms cubic-bezier(0.16, 1, 0.3, 1), scale 620ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
}

.luxury-gallery-3d.luxury-tilt-card {
  transform: perspective(1400px) rotateX(var(--luxury-rx)) rotateY(var(--luxury-ry));
  transition: transform 110ms linear, translate 620ms cubic-bezier(0.16, 1, 0.3, 1), scale 620ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 620ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
}

.luxury-gallery-3d .luxury-gallery-light {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 11rem at var(--luxury-light-x) var(--luxury-light-y), rgba(255, 246, 211, 0.2) 0, rgba(var(--luxury-gold-rgb), 0.09) 24%, rgba(var(--luxury-gold-rgb), 0) 66%);
  box-shadow: inset 0 0 0 1px rgba(var(--luxury-gold-rgb), 0);
  transition: opacity 380ms ease, box-shadow 380ms ease;
}

.luxury-gallery-3d > img,
.luxury-gallery-3d > picture,
.luxury-gallery-3d .tile-image img,
.luxury-gallery-3d .product-image img,
.luxury-gallery-3d .lightbox-trigger img {
  will-change: transform;
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 450ms ease;
}

.luxury-gallery-3d .photo-tile-copy,
.luxury-gallery-3d .product-card-copy,
.luxury-gallery-3d .ball-teaser-copy,
.luxury-gallery-3d .other-link-content {
  position: relative;
  z-index: 5;
  transform: translateZ(0);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .luxury-gallery-3d:is(:hover, :focus-within) {
    z-index: 20;
    translate: 0 -7px;
    scale: 1.012;
    box-shadow: var(--luxury-shadow-x) var(--luxury-shadow-y) 42px rgba(32, 23, 11, var(--luxury-shadow-alpha)), 0 7px 20px rgba(var(--luxury-gold-rgb), 0.08);
  }

  .luxury-gallery-3d:is(:hover, :focus-within) .luxury-gallery-light {
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(var(--luxury-gold-rgb), 0.34);
  }

  .luxury-gallery-3d:is(:hover, :focus-within) > img,
  .luxury-gallery-3d:is(:hover, :focus-within) > picture,
  .luxury-gallery-3d:is(:hover, :focus-within) .tile-image img,
  .luxury-gallery-3d:is(:hover, :focus-within) .product-image img,
  .luxury-gallery-3d:is(:hover, :focus-within) .lightbox-trigger img {
    filter: contrast(1.018) saturate(1.025);
    transform: translate3d(var(--luxury-image-x), var(--luxury-image-y), 22px) scale(1.042);
  }

  .luxury-gallery-3d:is(:hover, :focus-within) .photo-tile-copy,
  .luxury-gallery-3d:is(:hover, :focus-within) .product-card-copy,
  .luxury-gallery-3d:is(:hover, :focus-within) .ball-teaser-copy,
  .luxury-gallery-3d:is(:hover, :focus-within) .other-link-content {
    transform: translate3d(calc(var(--luxury-image-x) * -0.18), calc(var(--luxury-image-y) * -0.18), 30px);
  }
}

@media (hover: none), (pointer: coarse) {
  .luxury-gallery-3d {
    transition: translate 430ms cubic-bezier(0.16, 1, 0.3, 1), scale 430ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms ease;
  }

  .luxury-gallery-3d.luxury-scroll-reveal {
    opacity: 0.88;
    translate: 0 8px;
  }

  .luxury-gallery-3d.luxury-scroll-reveal.luxury-in-view {
    opacity: 1;
    translate: 0 0;
  }

  .luxury-gallery-3d.luxury-touch-active {
    z-index: 12;
    translate: 0 -3px;
    scale: 1.012;
    box-shadow: 0 13px 28px rgba(35, 25, 12, 0.13);
  }

  .luxury-gallery-3d.luxury-touch-active .luxury-gallery-light {
    opacity: 0.72;
    box-shadow: inset 0 0 0 1px rgba(var(--luxury-gold-rgb), 0.3);
  }

  .luxury-gallery-3d.luxury-in-view > img,
  .luxury-gallery-3d.luxury-in-view .tile-image img,
  .luxury-gallery-3d.luxury-in-view .product-image img,
  .luxury-gallery-3d.luxury-in-view .lightbox-trigger img {
    transform: translate3d(0, -1.5px, 0) scale(1.008);
  }
}

@media (prefers-reduced-motion: reduce) {
  .luxury-gallery-3d,
  .luxury-gallery-3d *,
  .luxury-gallery-3d::before,
  .luxury-gallery-3d::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }

  .luxury-gallery-3d .luxury-gallery-light {
    display: none;
  }
}