/* =====================================================================
   pavsarts.css — the painterly layer (PRIMARY visual identity)
   Every section is a jewel-tone canvas with grain, blobs, and depth.
   ===================================================================== */

/* ---------- Section frame ---------- */
.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  z-index: var(--z-canvas);
}

/* Grain overlay — SVG turbulence noise, applied to every .section */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
}

.section > .container { position: relative; z-index: var(--z-content); }

/* ---------- Section jewel-tone canvases ---------- */
#hero       { background: radial-gradient(ellipse at 50% 45%, var(--jewel-hero) 0%, var(--cc-bg) 80%); }
#menu       { background: radial-gradient(ellipse at 50% 50%, var(--jewel-menu) 0%, var(--cc-bg) 80%); }
#story      { background: radial-gradient(ellipse at 50% 50%, var(--jewel-story) 0%, var(--cc-bg) 80%); }
#howitworks { background: radial-gradient(ellipse at 50% 50%, var(--jewel-howitworks) 0%, var(--cc-bg) 80%); }
#order      { background: radial-gradient(ellipse at 50% 40%, var(--jewel-order) 0%, var(--cc-bg) 80%); }
.site-footer{ background: radial-gradient(ellipse at 50% 50%, var(--jewel-footer) 0%, #000 90%); }

/* ---------- Color blobs (soft light pools) ---------- */
.blob {
  position: absolute;
  z-index: var(--z-blob);
  pointer-events: none;
  filter: blur(2px); /* slight softening, NOT a drop shadow */
}

.blob--saffron  { background: radial-gradient(ellipse 60% 40% at 30% 60%, rgba(255,107,0, 0.22) 0%, transparent 70%); inset: 0; }
.blob--haldi    { background: radial-gradient(ellipse 50% 35% at 75% 30%, rgba(255,215,0, 0.16) 0%, transparent 70%); inset: 0; }
.blob--gulabi   { background: radial-gradient(ellipse 45% 30% at 20% 80%, rgba(255,45,120,0.18) 0%, transparent 70%); inset: 0; }
.blob--mehendi  { background: radial-gradient(ellipse 55% 35% at 80% 70%, rgba(61,220,132,0.14) 0%, transparent 70%); inset: 0; }
.blob--neeli    { background: radial-gradient(ellipse 50% 35% at 70% 25%, rgba(123,92,246,0.18) 0%, transparent 70%); inset: 0; }
.blob--mirchi   { background: radial-gradient(ellipse 55% 35% at 25% 35%, rgba(255,59,48, 0.20) 0%, transparent 70%); inset: 0; }

/* ---------- Painterly card surface ---------- */
.card-painterly {
  position: relative;
  background:
    linear-gradient(155deg, rgba(255,107,0,0.04) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(0deg, rgba(255,215,0,0.025), rgba(255,215,0,0.025)),
    var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--radius);
  box-shadow: inset 0 0 40px rgba(255,107,0,0.05);
  overflow: hidden;
}

/* Inner gradient sheen at top edge (paint pooling effect) */
.card-painterly::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cc-saffron) 50%, transparent);
  opacity: 0.5;
  pointer-events: none;
}

/* Grain on cards too — quieter than sections */
.card-painterly::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Painterly variants — tinted card backgrounds */
.card-painterly--haldi   { background: linear-gradient(155deg, rgba(255,215,0,0.06) 0%, var(--cc-surface) 60%); }
.card-painterly--mehendi { background: linear-gradient(155deg, rgba(61,220,132,0.06) 0%, var(--cc-surface) 60%); }
.card-painterly--neeli   { background: linear-gradient(155deg, rgba(123,92,246,0.06) 0%, var(--cc-surface) 60%); }
.card-painterly--gulabi  { background: linear-gradient(155deg, rgba(255,45,120,0.05) 0%, var(--cc-surface) 60%); }

/* ---------- Section heading layout ---------- */
.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.section-header__lede {
  max-width: 56ch;
  color: var(--cc-text-muted);
  font-size: 1.05rem;
}