/* Interactive depth for the three-card craft collage. */
.ds-hero-art.is-hero-interactive,
.ds-hero-art.is-hero-interactive.ds-reveal,
.ds-hero-art.is-hero-interactive.ds-reveal.is-visible {
  transform: translate3d(var(--ds-hero-move-x, 0), var(--ds-hero-move-y, 0), 0)
    rotateX(var(--ds-hero-rotate-x, 0deg))
    rotateY(var(--ds-hero-rotate-y, 0deg)) !important;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: box-shadow 450ms ease !important;
  will-change: transform;
}

.ds-hero-art.is-hero-interactive .ds-hero-art__frame {
  transform: translate3d(var(--ds-hero-layer-x, -9.217px), var(--ds-hero-layer-y, 10.01px), 100px) !important;
  transform-style: preserve-3d;
  transition: transform 180ms linear;
  will-change: transform;
}

.ds-hero-art.is-hero-interactive .ds-hero-badge {
  transform: translate3d(var(--ds-hero-layer-x, -13.46px), var(--ds-hero-layer-y, 14.63px), 150px) !important;
  transition: transform 180ms linear;
  will-change: transform;
}

.ds-hero-art.is-hero-interactive::after {
  opacity: 1;
  transform: translate3d(var(--ds-hero-glow-x, -6.376px), var(--ds-hero-glow-y, 6.93px), 30px);
  transition: transform 180ms linear, opacity 350ms ease;
}

.ds-hero-art.is-hero-engaged::after {
  opacity: 0.82;
}

.ds-hero-art.is-hero-interactive .ds-hero-art__frame img {
  transition: transform 700ms ease, box-shadow 450ms ease;
}

.ds-hero-art.is-hero-engaged .ds-hero-art__frame img {
  box-shadow: 0 2rem 4.25rem rgba(0, 0, 0, 0.84);
}

@media (prefers-reduced-motion: reduce) {
  .ds-hero-art.is-hero-interactive,
  .ds-hero-art.is-hero-interactive .ds-hero-art__frame,
  .ds-hero-art.is-hero-interactive .ds-hero-badge,
  .ds-hero-art.is-hero-interactive::after {
    transition: none !important;
    will-change: auto;
  }
}

/* The desktop depth effect leaves the image rotated after touch devices
 * flatten the surrounding frame. Keep the mobile artwork square to its box. */
@media (hover: none), (pointer: coarse) {
  .ds-hero-art,
  .ds-hero-art.is-hero-interactive,
  .ds-hero-art.is-hero-interactive.ds-reveal,
  .ds-hero-art.is-hero-interactive.ds-reveal.is-visible,
  .ds-hero-art.is-hero-interactive .ds-hero-art__frame {
    transform: none !important;
  }

  .ds-hero-art::before,
  .ds-hero-art.is-hero-interactive .ds-hero-art__frame img {
    transform: none !important;
  }

  .ds-hero-art.is-hero-interactive .ds-hero-art__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.ds-craft-gallery {
  --ds-craft-pointer-x: 50%;
  --ds-craft-pointer-y: 50%;
  position: relative;
  isolation: isolate;
  cursor: default;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.ds-craft-gallery::after {
  position: absolute;
  top: var(--ds-craft-pointer-y);
  left: var(--ds-craft-pointer-x);
  z-index: 0;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.035);
  content: "";
  filter: blur(54px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: top 700ms cubic-bezier(0.22, 1, 0.36, 1), left 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ds-craft-gallery img {
  backface-visibility: hidden;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: box-shadow 450ms ease, filter 450ms ease;
  transform-origin: 50% 50%;
  user-select: none;
}

.ds-craft-gallery.is-interactive img {
  will-change: transform;
}

.ds-craft-gallery.is-engaged img {
  box-shadow: 0 1.625rem 3.75rem rgba(0, 0, 0, 0.53);
  filter: saturate(1.01) brightness(1.006);
}

/* CSS fallback: the collage still reacts if the shared JavaScript is cached
 * or another storefront script stops before the parallax initializer. */
@media (hover: hover) {
  .ds-craft-gallery:not(.is-interactive) img {
    transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 450ms ease, filter 450ms ease;
  }

  .ds-craft-gallery:not(.is-interactive):hover > img:nth-of-type(1) {
    transform: translate3d(3px, -3px, 40px) rotate(-5.5deg) rotateY(-0.5deg);
  }

  .ds-craft-gallery:not(.is-interactive):hover > img:nth-of-type(2) {
    transform: translate3d(-4px, 4px, 10px) rotate(9.5deg) rotateY(0.65deg);
  }

  .ds-craft-gallery:not(.is-interactive):hover > img:nth-of-type(3) {
    transform: translate3d(2px, -2px, 60px) rotate(3.5deg) rotateY(-0.5deg);
  }
}

.ds-craft-gallery > img:nth-of-type(1) {
  z-index: 30;
}

.ds-craft-gallery > img:nth-of-type(2) {
  z-index: 20;
}

.ds-craft-gallery > img:nth-of-type(3) {
  z-index: 40;
}

.ds-craft-copy .ds-button,
.ds-craft-copy .ds-button:hover,
.ds-craft-copy .ds-button:focus-visible {
  color: #000 !important;
}

@media (prefers-reduced-motion: reduce) {
  .ds-craft-gallery::after {
    transition: none !important;
  }

  .ds-craft-gallery img {
    transition: none !important;
    will-change: auto !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .ds-craft-gallery img {
    will-change: auto;
  }
}

/* Keep the three cards visually connected on the narrower collage canvas. */


/* Between tablet and full desktop the gallery stays 500px tall while its
 * width contracts. Lower the portrait card so all three layers still meet. */


@media (min-width: 850px) {
  .ds-footer-grid {
    transform: translateY(10px);
  }
}

/* Desktop craft section: keep the divider closer to the copy and collage. */
@media (min-width: 1200px) {
  body.home .ds-section--craft {
    min-height: 34rem;
  }

  body.home .ds-section--craft .ds-craft-grid {
    height: 31.25rem;
  }
}

/* The final home section already has a bottom border. */
body.home .ds-site-footer::before {
  display: none;
  content: none;
}

/* Keep every home-page heading on the same vertical rhythm after a divider. */
body.home {
  --ds-home-heading-rule-gap: 3rem;
}

body.home main > :is(
  .ds-section--latest,
  .ds-section--collections,
  .ds-section--craft,
  .ds-section--themes,
  .ds-section--reviews,
  .ds-faq-section,
  .ds-difference
) {
  padding-top: 0 !important;
}

/* Keep the collection cards closer to the following craft section without
 * crowding the divider or changing the card geometry. */
@media (min-width: 850px) {
  body.home .ds-section--collections {
    padding-bottom: 5.5rem !important;
  }

  body.home .ds-section--themes {
    padding-bottom: 4.5rem !important;
  }
}

body.home .ds-section--latest > .ds-container:first-child,
body.home .ds-section--collections .ds-section-head,
body.home .ds-section--themes .ds-section-head,
body.home .ds-faq-intro,
body.home .ds-difference > .ds-container > .ds-section-head {
  padding-top: var(--ds-home-heading-rule-gap);
}

body.home .ds-section--craft .ds-craft-copy {
  align-self: start;
  margin-top: var(--ds-home-heading-rule-gap);
  padding-top: 0 !important;
}

body.home .ds-section--reviews .ds-reviews {
  padding-top: var(--ds-home-heading-rule-gap);
}

/* WP Rocket inserts a noscript sibling after every lazy-loaded image. Select
 * by image type so those siblings cannot shift the collage card numbering. */
.ds-section--craft .ds-craft-gallery > img:nth-of-type(1) {
  top: 5%;
  right: 10%;
  bottom: auto;
  left: auto;
  width: 45%;
  aspect-ratio: 3 / 4;
}

.ds-section--craft .ds-craft-gallery > img:nth-of-type(2) {
  top: 35%;
  right: auto;
  bottom: auto;
  left: 5%;
  width: 35%;
  aspect-ratio: 1;
}

.ds-section--craft .ds-craft-gallery > img:nth-of-type(3) {
  top: auto;
  right: 5%;
  bottom: 10%;
  left: auto;
  width: 45%;
  aspect-ratio: 4 / 3;
}

@media (min-width: 768px) {
  .ds-section--craft .ds-craft-gallery > img:nth-of-type(1) {
    top: 10%;
    right: 20%;
    width: min(45%, 20rem);
  }

  .ds-section--craft .ds-craft-gallery > img:nth-of-type(2) {
    top: 40%;
    left: 10%;
    width: min(35%, 17.5rem);
  }

  .ds-section--craft .ds-craft-gallery > img:nth-of-type(3) {
    right: 10%;
    bottom: 15%;
    width: min(45%, 21.25rem);
  }
}

/* Match the reference site's card-based collage. Keeping positioning on the
 * wrappers prevents lazy-load noscript nodes from changing layer order. */
.ds-section--craft .ds-craft-gallery {
  min-height: 25rem;
}

.ds-section--craft .ds-craft-gallery__item {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.5);
  backface-visibility: hidden;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: transform 220ms linear, box-shadow 450ms ease, filter 450ms ease;
  will-change: transform;
}

.ds-section--craft .ds-craft-gallery__item > img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  transform: none;
  transition: none;
  will-change: auto;
}

.ds-section--craft .ds-craft-gallery__item--one {
  top: 5%;
  right: 10%;
  width: 45%;
  aspect-ratio: 3 / 4;
  z-index: 30;
  transform: rotate(-6deg);
}

.ds-section--craft .ds-craft-gallery__item--two {
  top: 35%;
  left: 5%;
  width: 35%;
  aspect-ratio: 1;
  z-index: 20;
  transform: rotate(10deg);
}

.ds-section--craft .ds-craft-gallery__item--two > img {
  transform: scale(1.1);
}

.ds-section--craft .ds-craft-gallery__item--three {
  right: 5%;
  bottom: 10%;
  width: 45%;
  aspect-ratio: 4 / 3;
  z-index: 40;
  transform: rotate(4deg);
}

@media (prefers-reduced-motion: no-preference) {
  .ds-section--craft .ds-craft-gallery:not(.is-interactive) .ds-craft-gallery__item--one {
    animation: ds-craft-float-one 8.5s ease-in-out infinite alternate;
  }

  .ds-section--craft .ds-craft-gallery:not(.is-interactive) .ds-craft-gallery__item--two {
    animation: ds-craft-float-two 9.25s ease-in-out -2.4s infinite alternate;
  }

  .ds-section--craft .ds-craft-gallery:not(.is-interactive) .ds-craft-gallery__item--three {
    animation: ds-craft-float-three 7.75s ease-in-out -4.1s infinite alternate;
  }
}

@keyframes ds-craft-float-one {
  from { transform: translate3d(-3px, 5px, 40px) rotate(-6.45deg); }
  to { transform: translate3d(4px, -8px, 40px) rotate(-5.45deg); }
}

@keyframes ds-craft-float-two {
  from { transform: translate3d(5px, -4px, 10px) rotate(9.55deg); }
  to { transform: translate3d(-5px, 7px, 10px) rotate(10.45deg); }
}

@keyframes ds-craft-float-three {
  from { transform: translate3d(-5px, 7px, 60px) rotate(3.35deg); }
  to { transform: translate3d(6px, -9px, 60px) rotate(4.65deg); }
}

@media (min-width: 768px) {
  .ds-section--craft .ds-craft-gallery {
    min-height: 31.25rem;
  }

  .ds-section--craft .ds-craft-gallery__item--one {
    top: 10%;
    right: 20%;
    width: min(45%, 20rem);
  }

  .ds-section--craft .ds-craft-gallery__item--two {
    top: 40%;
    left: 10%;
    width: min(35%, 17.5rem);
  }

  .ds-section--craft .ds-craft-gallery__item--three {
    right: 10%;
    bottom: 15%;
    width: min(45%, 21.25rem);
  }
}

.ds-craft-gallery.is-engaged .ds-craft-gallery__item {
  box-shadow: 0 1.625rem 3.75rem rgba(0, 0, 0, 0.53);
  filter: saturate(1.01) brightness(1.006);
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .ds-section--craft .ds-craft-gallery__item {
    transition: none;
    will-change: auto;
  }
}


/* DATKEY homepage latest CTA divider spacing */
body.home .ds-section--latest .ds-products-footer {
  position: relative;
  top: -3rem;
  margin-bottom: 0;
}

body.home .ds-section--latest .ds-products-footer .ds-button {
  top: 0 !important;
}