/*
 * doodles.css — Ambient hand-drawn SVG decorations across all sections
 * Each section gets position: relative + overflow: hidden from its own CSS.
 * Doodles are absolute-positioned, pointer-events: none, aria-hidden.
 */

/* ── Shared base ── */
.doodle-ambient {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Routing: curved-line under headline ── */
.section-routing {
  position: relative;
}
.routing-doodle-underline {
  width: clamp(100px, 14vw, 160px);
  opacity: 0.35;
  margin: 6px auto 0;
  display: block;
}

/* ── Methodology: gold stars top-right ── */
.section-methodology {
  position: relative;
  overflow: hidden;
}
.methodology-doodle-stars {
  top: clamp(20px, 4vw, 60px);
  right: clamp(8px, 3vw, 40px);
  width: clamp(50px, 10vw, 120px);
  opacity: 0.18;
  transform: rotate(15deg);
}

/* ── Quizlet: squiggles bottom-right ── */
.section-quizlet {
  position: relative;
  overflow: hidden;
}
.quizlet-doodle-squiggles {
  bottom: clamp(24px, 5vw, 60px);
  right: clamp(8px, 3vw, 40px);
  width: clamp(60px, 12vw, 140px);
  opacity: 0.18;
  transform: rotate(-8deg);
}

/* ── Testimonials: gold stars top-left ── */
.section-testimonials {
  position: relative;
  overflow: hidden;
}
.testimonials-doodle-stars {
  top: clamp(20px, 4vw, 50px);
  left: clamp(8px, 3vw, 40px);
  width: clamp(40px, 8vw, 100px);
  opacity: 0.20;
  transform: rotate(-12deg) scaleX(-1);
}

/* ── Gift Teaser: badge top-right ── */
.section-gift {
  position: relative;
  overflow: hidden;
}
.gift-doodle-badge {
  top: clamp(16px, 3vw, 40px);
  right: clamp(8px, 3vw, 40px);
  width: clamp(40px, 8vw, 80px);
  opacity: 0.25;
}

/* ── Enterprise Teaser: wave bottom-right ── */
.section-enterprise {
  position: relative;
  overflow: hidden;
}
.enterprise-doodle-wave {
  bottom: clamp(20px, 4vw, 50px);
  right: clamp(8px, 4vw, 60px);
  width: clamp(60px, 12vw, 140px);
  opacity: 0.12;
  filter: brightness(0) invert(1);
}

/* ── Hide ambient doodles on very narrow screens ── */
@media (max-width: 480px) {
  .doodle-ambient {
    display: none;
  }
}