/*
 * Pulaudomain homepage asset layer.
 * Visual assets only: the original markup, copy, layout, routes, and controls stay intact.
 */

/* Keep the off-canvas drawer from widening the closed mobile page. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

/* Replace only the pixels inside the original 460x320 SVG hero slot. */
.pd-herobig .pd-hero-palm { display: none; }
.pd-herobig .pd-island {
  background: url("/assets/pulaudomain-hero-v3.webp?v=20260809-v3") center / contain no-repeat;
  filter: saturate(.88) contrast(.96) drop-shadow(0 18px 22px rgba(8, 61, 69, .14));
}
.pd-herobig .pd-island > * { opacity: 0; }

/* Marketplace artwork sits behind the existing domain cards without taking space. */
.pd-section:has(.pd-gridx),
.pd-gridx {
  position: relative;
  isolation: isolate;
}
.pd-section:has(.pd-gridx)::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: 16px;
  width: 210px;
  height: 150px;
  background: url("/assets/pulaudomain-marketplace-v3.webp?v=20260809-v3") center / contain no-repeat;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
.pd-section:has(.pd-gridx) > * { position: relative; z-index: 1; }

/* Buyer and seller artwork stays contained inside the existing cards. */
.pd-rolecard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pd-rolecard::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 150px;
  height: 130px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .22;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 0;
}
.pd-rolecard:first-child::after { background-image: url("/assets/pulaudomain-buyer-v3.webp?v=20260809-v3"); }
.pd-rolecard:last-child::after { background-image: url("/assets/pulaudomain-seller-v3.webp?v=20260809-v3"); }
.pd-rolecard:hover::after { opacity: .30; transform: translateY(-4px); }
.pd-rolecard > * { position: relative; z-index: 1; }

/* Trust and pricing visuals reinforce the existing three-step section. */
.pd-section.pd-soft {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.pd-section.pd-soft::after {
  content: "";
  position: absolute;
  right: 3%;
  top: 18px;
  width: 230px;
  height: 170px;
  background: url("/assets/pulaudomain-trust-v3.webp?v=20260809-v3") left center / 52% auto no-repeat,
              url("/assets/pulaudomain-pricing-v3.webp?v=20260809-v3") right center / 52% auto no-repeat;
  opacity: .13;
  pointer-events: none;
  z-index: 0;
}
.pd-section.pd-soft > * { position: relative; z-index: 1; }

/* Increase carousel hit area without changing the visible dot or spacing. */
.pd-hdot { position: relative; }
.pd-hdot::before {
  content: "";
  position: absolute;
  inset: -10px;
}

@media (max-width: 760px) {
  .pd-section:has(.pd-gridx)::after {
    right: 8px;
    bottom: 10px;
    width: 145px;
    height: 110px;
    opacity: .10;
  }
  .pd-rolecard::after {
    right: 4px;
    bottom: 4px;
    width: 112px;
    height: 100px;
    opacity: .18;
  }
  .pd-section.pd-soft::after {
    right: -4px;
    width: 155px;
    height: 115px;
    opacity: .09;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-rolecard::after { transition: none; }
}