/* Product Ambient Background System
   - Background-only animation layer for Woo/Bricks product hero
   - Product image remains untouched: no filter, opacity, or transform is applied
*/

.pdp-hero {
  isolation: isolate;
}

.pdp-ambient {
  --ambient-a: #8fc7ff;
  --ambient-b: #d8dde8;
  --ambient-accent: #eef7ff;
  --ambient-opacity: 0.62;
  --ambient-scale: 1;

  position: absolute;
  inset: -16%;
  z-index: 1;
  opacity: var(--ambient-opacity);
  transform: scale(var(--ambient-scale));
  transform-origin: 48% 48%;
  pointer-events: none;
  overflow: hidden;
}

.pdp-hero-grid,
.pdp-hero-breadcrumb,
.pdp-hero-scroll {
  position: relative;
  z-index: 3;
}

.pdp-ambient__orb,
.pdp-ambient__ribbon,
.pdp-ambient__sweep,
.pdp-ambient__haze,
.pdp-ambient__stars,
.pdp-ambient__chrono,
.pdp-ambient__waves {
  position: absolute;
  pointer-events: none;
}

.pdp-ambient__orb {
  width: 46vw;
  height: 30vw;
  min-width: 360px;
  min-height: 230px;
  border-radius: 999px;
  filter: blur(58px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.pdp-ambient__orb--a {
  left: 24%;
  top: 16%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ambient-a) 40%, transparent), color-mix(in srgb, var(--ambient-a) 18%, transparent) 44%, transparent 72%);
}

.pdp-ambient__orb--b {
  right: 8%;
  bottom: 18%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ambient-b) 44%, transparent), color-mix(in srgb, var(--ambient-a) 14%, transparent) 46%, transparent 74%);
}

.pdp-ambient__ribbon {
  left: 4%;
  top: 43%;
  width: 118%;
  height: 20%;
  transform: rotate(-9deg);
  filter: blur(18px);
  opacity: 0.54;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ambient-a) 22%, transparent), color-mix(in srgb, var(--ambient-b) 24%, transparent), transparent);
  will-change: transform, opacity;
}

.pdp-ambient__sweep {
  left: 16%;
  top: 18%;
  width: 62vw;
  height: 62vw;
  min-width: 520px;
  min-height: 520px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ambient-accent) 28%, transparent);
  box-shadow:
    0 0 70px color-mix(in srgb, var(--ambient-a) 22%, transparent),
    inset 0 0 90px color-mix(in srgb, var(--ambient-b) 12%, transparent);
  opacity: 0.34;
  filter: blur(1px);
  will-change: transform, opacity;
}

.pdp-ambient__haze {
  inset: 18% 18% 13% 16%;
  filter: blur(36px);
  opacity: 0.32;
  background:
    radial-gradient(circle at 38% 48%, color-mix(in srgb, var(--ambient-a) 16%, transparent), transparent 42%),
    radial-gradient(circle at 66% 50%, color-mix(in srgb, var(--ambient-b) 18%, transparent), transparent 36%);
  will-change: transform, opacity;
}

.pdp-ambient__stars {
  inset: 0;
  opacity: 0.72;
  mix-blend-mode: screen;
}

.pdp-ambient__star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--ambient-accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--ambient-accent) 70%, transparent);
  opacity: var(--o);
  filter: blur(var(--blur));
}

.pdp-ambient__chrono {
  left: 50%;
  top: 50%;
  width: min(58vw, 760px);
  height: min(58vw, 760px);
  min-width: 440px;
  min-height: 440px;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  mix-blend-mode: screen;
}

.pdp-ambient__chrono i {
  position: absolute;
  inset: var(--inset);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ambient-accent) var(--alpha), transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ambient-a) 8%, transparent);
}

.pdp-ambient__waves {
  inset: 10% -8% 8% -8%;
  opacity: 0;
  visibility: hidden;
  mix-blend-mode: screen;
}

.pdp-ambient__waves i {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 22%;
  top: var(--y);
  border-top: 2px solid color-mix(in srgb, var(--ambient-accent) var(--alpha), transparent);
  border-radius: 50% 50% 0 0;
  filter: blur(var(--blur));
  transform: rotate(var(--r));
}

@media (max-width: 767px) {
  .pdp-ambient {
    inset: -10%;
    --ambient-opacity: 0.42;
  }

  .pdp-ambient__orb {
    min-width: 280px;
    min-height: 180px;
    filter: blur(42px);
  }

  .pdp-ambient__sweep,
  .pdp-ambient__chrono {
    min-width: 320px;
    min-height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-ambient {
    opacity: 0.24;
  }
}