/* Watercolour smoke clouds — soft earthy wisps around content */

.section {
  position: relative;
}

.section::before,
.section::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  opacity: 0;
  animation: smoke-fade-in 1.2s ease-out forwards;
}

@keyframes smoke-fade-in {
  to { opacity: 1; }
}

/* ── Intro section — sage & hemp wisps (Root chakra whisper) ── */
.intro::before {
  width: clamp(250px, 50vw, 600px);
  height: clamp(200px, 40vw, 480px);
  top: -10%;
  left: -15%;
  background: radial-gradient(ellipse at 40% 50%,
    rgba(139, 168, 136, 0.3) 0%,
    rgba(139, 168, 136, 0.1) 40%,
    transparent 70%);
  filter: blur(50px);
}

.intro::after {
  width: clamp(220px, 45vw, 520px);
  height: clamp(180px, 36vw, 440px);
  bottom: -8%;
  right: -10%;
  background: radial-gradient(ellipse at 60% 50%,
    rgba(184, 92, 74, 0.12) 0%,
    rgba(184, 92, 74, 0.04) 45%,
    transparent 70%);
  filter: blur(45px);
}

/* ── Journal teaser — heart chakra whisper (sage & green) ── */
.journal-teaser::before {
  width: clamp(260px, 52vw, 620px);
  height: clamp(200px, 40vw, 500px);
  top: -12%;
  right: -12%;
  background: radial-gradient(ellipse at 55% 45%,
    rgba(107, 158, 107, 0.2) 0%,
    rgba(107, 158, 107, 0.06) 45%,
    transparent 70%);
  filter: blur(55px);
}

.journal-teaser::after {
  width: clamp(220px, 44vw, 520px);
  height: clamp(180px, 36vw, 440px);
  bottom: -10%;
  left: -12%;
  background: radial-gradient(ellipse at 40% 55%,
    rgba(139, 168, 136, 0.25) 0%,
    rgba(139, 168, 136, 0.08) 45%,
    transparent 70%);
  filter: blur(48px);
}

/* ── Oracle section — third eye chakra whisper (muted indigo & spark) ── */
.oracle::before {
  width: clamp(240px, 48vw, 580px);
  height: clamp(200px, 38vw, 480px);
  top: -8%;
  left: -10%;
  background: radial-gradient(ellipse at 35% 50%,
    rgba(139, 122, 173, 0.15) 0%,
    rgba(139, 122, 173, 0.05) 35%,
    transparent 70%);
  filter: blur(52px);
}

.oracle::after {
  width: clamp(200px, 40vw, 500px);
  height: clamp(170px, 34vw, 420px);
  bottom: -6%;
  right: -8%;
  background: radial-gradient(ellipse at 60% 45%,
    rgba(59, 94, 255, 0.1) 0%,
    rgba(181, 167, 143, 0.12) 40%,
    transparent 70%);
  filter: blur(46px);
}

/* ── Ebook section — throat chakra whisper (dusty blue & hemp) ── */
.ebook::before {
  width: clamp(260px, 54vw, 640px);
  height: clamp(210px, 42vw, 520px);
  top: -10%;
  right: -14%;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(106, 154, 181, 0.15) 0%,
    rgba(106, 154, 181, 0.05) 45%,
    transparent 70%);
  filter: blur(50px);
}

.ebook::after {
  width: clamp(230px, 46vw, 560px);
  height: clamp(190px, 38vw, 460px);
  bottom: -8%;
  left: -12%;
  background: radial-gradient(ellipse at 45% 55%,
    rgba(181, 167, 143, 0.25) 0%,
    rgba(181, 167, 143, 0.08) 45%,
    transparent 70%);
  filter: blur(48px);
}

/* ── Newsletter section — crown chakra whisper (soft violet & linen) ── */
.newsletter-section::before {
  width: clamp(240px, 48vw, 580px);
  height: clamp(190px, 38vw, 470px);
  top: -12%;
  left: -10%;
  background: radial-gradient(ellipse at 40% 45%,
    rgba(184, 160, 200, 0.12) 0%,
    rgba(184, 160, 200, 0.04) 45%,
    transparent 70%);
  filter: blur(54px);
}

.newsletter-section::after {
  width: clamp(220px, 44vw, 530px);
  height: clamp(180px, 36vw, 430px);
  bottom: -10%;
  right: -12%;
  background: radial-gradient(ellipse at 55% 50%,
    rgba(232, 221, 208, 0.35) 0%,
    rgba(232, 221, 208, 0.1) 45%,
    transparent 70%);
  filter: blur(50px);
}

/* ── Social section — hemp & terracotta wisps ── */
.social::before {
  width: clamp(220px, 44vw, 530px);
  height: clamp(180px, 36vw, 440px);
  top: -8%;
  right: -10%;
  background: radial-gradient(ellipse at 55% 45%,
    rgba(198, 123, 92, 0.12) 0%,
    rgba(181, 167, 143, 0.15) 40%,
    transparent 70%);
  filter: blur(46px);
}

.social::after {
  width: clamp(200px, 40vw, 500px);
  height: clamp(170px, 34vw, 420px);
  bottom: -6%;
  left: -8%;
  background: radial-gradient(ellipse at 40% 55%,
    rgba(139, 168, 136, 0.2) 0%,
    rgba(139, 168, 136, 0.06) 45%,
    transparent 70%);
  filter: blur(44px);
}

/* ── Generic fallback for pages with different section classes ── */
.path-section::before,
.gifts-section::before,
.connect-section::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  width: clamp(240px, 48vw, 580px);
  height: clamp(200px, 40vw, 480px);
  top: -10%;
  filter: blur(50px);
}

.path-section:nth-of-type(odd)::before {
  left: -12%;
  background: radial-gradient(ellipse at 40% 50%,
    rgba(181, 167, 143, 0.25) 0%, transparent 70%);
}

.path-section:nth-of-type(even)::before {
  right: -12%;
  background: radial-gradient(ellipse at 60% 50%,
    rgba(198, 123, 92, 0.12) 0%, transparent 70%);
}

.path-section::after,
.gifts-section::after,
.connect-section::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  width: clamp(220px, 44vw, 530px);
  height: clamp(180px, 36vw, 440px);
  bottom: -8%;
  filter: blur(48px);
}

.path-section:nth-of-type(odd)::after {
  right: -10%;
  background: radial-gradient(ellipse at 60% 50%,
    rgba(232, 221, 208, 0.3) 0%, transparent 70%);
}

.path-section:nth-of-type(even)::after {
  left: -10%;
  background: radial-gradient(ellipse at 40% 50%,
    rgba(139, 168, 136, 0.2) 0%, transparent 70%);
}

/* ── The Garden section keeps its lush botanical wisps ── */
.garden-section::before,
.garden-hero::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  width: clamp(260px, 52vw, 620px);
  height: clamp(210px, 42vw, 520px);
  top: -10%;
  left: -12%;
  background: radial-gradient(ellipse at 40% 50%,
    rgba(139, 168, 136, 0.45) 0%,
    rgba(201, 134, 134, 0.2) 40%,
    transparent 70%);
  filter: blur(50px);
  opacity: 0;
  animation: smoke-fade-in 1.2s ease-out forwards;
}

.garden-section::after,
.garden-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  width: clamp(240px, 48vw, 580px);
  height: clamp(200px, 40vw, 480px);
  bottom: -8%;
  right: -10%;
  background: radial-gradient(ellipse at 60% 50%,
    rgba(176, 156, 196, 0.3) 0%,
    rgba(232, 168, 50, 0.15) 40%,
    transparent 70%);
  filter: blur(48px);
  opacity: 0;
  animation: smoke-fade-in 1.2s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .section::before,
  .section::after {
    animation: none;
    opacity: 1;
  }
}