/* Handmade Soaps — a wash of suds pops away on entry */

.suds-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.95), transparent 42%),
    radial-gradient(circle at 74% 62%, rgba(255,255,255,.75), transparent 46%),
    linear-gradient(180deg, #FBF9FD 0%, #F2EDF8 55%, #E8E0F3 100%);
  pointer-events: none;
  animation: sudsFadeOut .9s ease-in 2.2s forwards;
}

/* fizzy foam texture filling the gaps between the big bubbles */
.suds-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 5px, transparent 6px),
    radial-gradient(circle, rgba(255,255,255,.55) 0 3px, transparent 4px);
  background-size: 52px 52px, 34px 34px;
  background-position: 0 0, 17px 22px;
  mix-blend-mode: screen;
}

.suds-field { position: relative; width: 100%; height: 100%; }

.suds-field span {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 24%, #ffffff 0%, #ffffff 18%, rgba(255,255,255,.55) 34%, rgba(233,224,244,.55) 58%, rgba(201,184,222,.5) 80%, rgba(174,156,204,.45) 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset -10px -10px 16px rgba(140, 118, 172, .28),
    inset 6px 6px 10px rgba(255,255,255,.9),
    0 3px 8px rgba(110, 90, 140, .18);
  animation: sudsPop 1.1s cubic-bezier(.34,1.4,.64,1) forwards;
  opacity: 1;
}

/* a bright specular highlight, like light catching a real bubble */
.suds-field span::before {
  content: "";
  position: absolute;
  top: 16%;
  left: 20%;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  filter: blur(1.5px);
}

/* a faint rainbow film at the rim, like real soap suds catch light */
.suds-field span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, rgba(255,255,255,0) 0deg, rgba(201,184,222,.35) 60deg, rgba(255,255,255,0) 130deg, rgba(180,215,200,.3) 220deg, rgba(255,255,255,0) 300deg);
  mix-blend-mode: overlay;
  opacity: .8;
}

/* --- rows (top position) --- */
.suds-field span:nth-child(-n+6) { top: 2%; }
.suds-field span:nth-child(n+7):nth-child(-n+12) { top: 21%; }
.suds-field span:nth-child(n+13):nth-child(-n+18) { top: 40%; }
.suds-field span:nth-child(n+19):nth-child(-n+24) { top: 60%; }
.suds-field span:nth-child(n+25):nth-child(-n+30) { top: 80%; }

/* --- columns (left position), cycles of 6 --- */
.suds-field span:nth-child(6n+1) { left: 1%; }
.suds-field span:nth-child(6n+2) { left: 18%; }
.suds-field span:nth-child(6n+3) { left: 36%; }
.suds-field span:nth-child(6n+4) { left: 54%; }
.suds-field span:nth-child(6n+5) { left: 72%; }
.suds-field span:nth-child(6n+6) { left: 89%; }

/* --- sizes --- */
.suds-field span:nth-child(odd) { width: 130px; height: 130px; }
.suds-field span:nth-child(even) { width: 95px; height: 95px; }
.suds-field span:nth-child(3n) { width: 160px; height: 160px; }

/* --- staggered pop delays, row by row --- */
.suds-field span:nth-child(-n+6) { animation-delay: .1s; }
.suds-field span:nth-child(n+7):nth-child(-n+12) { animation-delay: .35s; }
.suds-field span:nth-child(n+13):nth-child(-n+18) { animation-delay: .6s; }
.suds-field span:nth-child(n+19):nth-child(-n+24) { animation-delay: .85s; }
.suds-field span:nth-child(n+25):nth-child(-n+30) { animation-delay: 1.1s; }

@keyframes sudsPop {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes sudsFadeOut {
  to { opacity: 0; visibility: hidden; }
}

.soaps-page .site-header,
.soaps-page main,
.soaps-page .site-footer {
  position: relative;
  z-index: 10;
}

.shop-hero .hero-sub { max-width: 60ch; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .suds-overlay { animation: none; opacity: 0; visibility: hidden; }
  .suds-field span { animation: none; opacity: 0; }
}