/* ============================================================
   KOKA PEARLS — Collections page ambience
   Soft sapphire-into-pearl glow + slow drifting pearls behind the title.
   Decorative only. Pointer-events disabled, text stays crisp.
   ============================================================ */

/* ---- (a) Page glow: layered radial sapphire tint fading into pearl ---- */
body[data-page="collections"] {
  position: relative;
  background-color: var(--pearl-050);
}

.coll-aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 52% at 50% -6%,
      rgba(40, 58, 134, 0.16) 0%,
      rgba(58, 79, 160, 0.08) 34%,
      rgba(197, 204, 230, 0.05) 58%,
      rgba(251, 249, 245, 0) 78%),
    radial-gradient(48% 42% at 14% 18%,
      rgba(107, 121, 190, 0.10) 0%,
      rgba(197, 204, 230, 0.04) 46%,
      rgba(251, 249, 245, 0) 72%),
    radial-gradient(46% 40% at 88% 26%,
      rgba(159, 169, 210, 0.10) 0%,
      rgba(237, 240, 248, 0.04) 48%,
      rgba(251, 249, 245, 0) 74%);
}

/* keep all real content above the ambience layers */
body[data-page="collections"] .site-header,
body[data-page="collections"] #main,
body[data-page="collections"] .site-footer {
  position: relative;
  z-index: 1;
}

/* ---- Hero containment: the page-head hosts the drifting pearls ---- */
.page-head--coll {
  position: relative;
  overflow: hidden;       /* nothing bleeds horizontally */
  isolation: isolate;
}

/* heading content must sit above the pearls */
.page-head--coll > .crumbs,
.page-head--coll > .eyebrow,
.page-head--coll > h1,
.page-head--coll > p,
.page-head--coll > .rule-diamond {
  position: relative;
  z-index: 2;
}

/* ---- (b) Drifting pearls layer (behind the text) ---- */
.coll-pearls {
  position: absolute;
  inset: -10% -4% -10% -4%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.coll-pearls .pearl {
  position: absolute;
  top: var(--py, 50%);
  left: -12%;
  width: var(--sz, 60px);
  height: var(--sz, 60px);
  border-radius: 50%;
  opacity: var(--op, 0.5);
  /* pearly sheen: bright highlight off-centre, soft champagne falloff */
  background:
    radial-gradient(circle at 34% 28%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.55) 14%,
      rgba(236, 230, 219, 0.5) 46%,
      rgba(197, 204, 230, 0.42) 74%,
      rgba(159, 169, 210, 0.32) 100%);
  box-shadow:
    inset -3px -4px 9px rgba(40, 58, 134, 0.14),
    inset 4px 5px 10px rgba(255, 255, 255, 0.55),
    0 6px 18px rgba(20, 34, 79, 0.08);
  filter: blur(0.2px);
  will-change: transform;
  animation: coll-drift var(--dur, 38s) linear infinite;
  animation-delay: var(--delay, 0s);
}

/* slow left-to-right drift with a gentle vertical bob, fade in/out at edges */
@keyframes coll-drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: var(--op, 0.5); }
  50%  { transform: translate(58vw, var(--bob, -14px)); }
  92%  { opacity: var(--op, 0.5); }
  100% { transform: translate(124vw, 0); opacity: 0; }
}

/* varied sizes / speeds / heights / delays — soft and unhurried */
.coll-pearls .pearl:nth-child(1) { --py: 16%; --sz: 78px;  --op: 0.42; --dur: 46s; --delay: -3s;  --bob: -22px; }
.coll-pearls .pearl:nth-child(2) { --py: 64%; --sz: 44px;  --op: 0.5;  --dur: 34s; --delay: -14s; --bob: 16px; }
.coll-pearls .pearl:nth-child(3) { --py: 38%; --sz: 110px; --op: 0.3;  --dur: 58s; --delay: -26s; --bob: -10px; }
.coll-pearls .pearl:nth-child(4) { --py: 80%; --sz: 30px;  --op: 0.52; --dur: 30s; --delay: -8s;  --bob: -18px; }
.coll-pearls .pearl:nth-child(5) { --py: 50%; --sz: 60px;  --op: 0.38; --dur: 50s; --delay: -38s; --bob: 12px; }
.coll-pearls .pearl:nth-child(6) { --py: 26%; --sz: 38px;  --op: 0.46; --dur: 40s; --delay: -20s; --bob: 20px; }

/* ---- Reduced motion: freeze the pearls (static, scattered), keep the glow ---- */
@media (prefers-reduced-motion: reduce) {
  .coll-pearls .pearl {
    animation: none;
    will-change: auto;
  }
  /* place the frozen pearls within view so they read as a quiet still-life */
  .coll-pearls .pearl:nth-child(1) { left: 8%;  transform: translateY(-22px); }
  .coll-pearls .pearl:nth-child(2) { left: 30%; transform: translateY(16px); }
  .coll-pearls .pearl:nth-child(3) { left: 72%; transform: translateY(-10px); }
  .coll-pearls .pearl:nth-child(4) { left: 50%; transform: translateY(-18px); }
  .coll-pearls .pearl:nth-child(5) { left: 88%; transform: translateY(12px); }
  .coll-pearls .pearl:nth-child(6) { left: 18%; transform: translateY(20px); }
}