/* ============================================
   SippyClips - Napkin / Servilleta Textures
   Purple Ink Stains & Scribbles
   ============================================ */

/* --- SVG Filters --- */
svg.texture-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Main Napkin Background --- */
body {
  background-color: #faf6f0;
  background-image:
    /* Subtle napkin texture lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(180, 160, 130, 0.015) 3px,
      rgba(180, 160, 130, 0.015) 6px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(180, 160, 130, 0.015) 3px,
      rgba(180, 160, 130, 0.015) 6px
    ),
    /* Napkin crinkle effect */
    radial-gradient(ellipse at 30% 20%, rgba(123, 47, 190, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(123, 47, 190, 0.015) 0%, transparent 40%),
    radial-gradient(ellipse at 15% 80%, rgba(255, 107, 53, 0.01) 0%, transparent 40%);
}

/* --- Hero Section Background --- */
#hero {
  background-color: #faf6f0;
  background-image:
    /* Purple ink splash top-right */
    radial-gradient(ellipse at 85% 15%, rgba(123, 47, 190, 0.06) 0%, transparent 40%),
    /* Purple mist bottom-left */
    radial-gradient(ellipse at 10% 85%, rgba(168, 85, 247, 0.05) 0%, transparent 35%),
    /* Orange hint center */
    radial-gradient(ellipse at 50% 50%, rgba(255, 107, 53, 0.02) 0%, transparent 50%);
}

/* --- Services Section --- */
#services {
  background-color: #faf6f0;
  background-image:
    /* Faint grid like napkin squares */
    linear-gradient(rgba(123, 47, 190, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 47, 190, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* --- Process Section (dark bg) --- */
#process {
  background-color: #1a1a2e;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(123, 47, 190, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(168, 85, 247, 0.08) 0%, transparent 40%);
}

/* --- Social Planner --- */
#social-planner {
  background-color: #fff;
  background-image:
    /* Lined paper look */
    linear-gradient(rgba(123, 47, 190, 0.04) 0.5px, transparent 0.5px);
  background-size: 100% 32px;
  background-position: 0 20px;
}

/* --- Contact --- */
#contact {
  background-color: #faf6f0;
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(123, 47, 190, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(168, 85, 247, 0.03) 0%, transparent 45%);
}

/* --- Proof / Testimonials --- */
#proof {
  background-color: #fff;
}

/* --- Footer --- */
footer,
.footer {
  background-color: #1a1a2e;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(123, 47, 190, 0.02) 3px,
      rgba(123, 47, 190, 0.02) 6px
    );
}

/* --- Sticky Note --- */
.sticky-note-bg {
  background: linear-gradient(135deg, #ffd93d 0%, #ffed85 40%, #ffd93d 100%);
  position: relative;
  box-shadow:
    2px 2px 8px rgba(0, 0, 0, 0.12),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.sticky-note-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background: linear-gradient(135deg, #ffd93d 45%, #e6c235 50%, #d4b02e 100%);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.08);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* --- Purple Ink Splatter Decorations --- */
.purple-splatter {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.purple-splatter::before {
  content: '';
  position: absolute;
  border-radius: 43% 57% 70% 30% / 46% 40% 60% 54%;
  background: radial-gradient(circle, rgba(123, 47, 190, 0.1) 0%, rgba(123, 47, 190, 0.04) 50%, transparent 70%);
}

.splatter-1::before {
  width: 200px;
  height: 160px;
  top: 0;
  left: 0;
}

.splatter-2::before {
  width: 150px;
  height: 120px;
  border-radius: 63% 37% 40% 60% / 56% 30% 70% 44%;
}

.splatter-3::before {
  width: 180px;
  height: 140px;
  border-radius: 33% 67% 50% 50% / 66% 50% 50% 34%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, rgba(168, 85, 247, 0.03) 50%, transparent 70%);
}

/* --- Napkin Fold Divider --- */
.napkin-fold {
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(123, 47, 190, 0.15) 15%,
    rgba(123, 47, 190, 0.25) 50%,
    rgba(123, 47, 190, 0.15) 85%,
    transparent 100%
  );
  border: none;
  margin: 0 auto;
  max-width: 50%;
  position: relative;
}

.napkin-fold::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent);
}

/* --- Paper Tear Edge --- */
.paper-tear-top {
  clip-path: polygon(
    0% 4%, 3% 1%, 6% 3%, 9% 0%, 12% 2%, 15% 4%, 18% 1%, 21% 3%,
    24% 0%, 27% 2%, 30% 4%, 33% 1%, 36% 3%, 39% 0%, 42% 2%,
    45% 4%, 48% 1%, 51% 3%, 54% 0%, 57% 2%, 60% 4%, 63% 1%,
    66% 3%, 69% 0%, 72% 2%, 75% 4%, 78% 1%, 81% 3%, 84% 0%,
    87% 2%, 90% 4%, 93% 1%, 96% 3%, 100% 0%,
    100% 100%, 0% 100%
  );
}

.paper-tear-bottom {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 96%, 97% 99%, 94% 97%, 91% 100%, 88% 98%, 85% 96%,
    82% 99%, 79% 97%, 76% 100%, 73% 98%, 70% 96%, 67% 99%,
    64% 97%, 61% 100%, 58% 98%, 55% 96%, 52% 99%, 49% 97%,
    46% 100%, 43% 98%, 40% 96%, 37% 99%, 34% 97%, 31% 100%,
    28% 98%, 25% 96%, 22% 99%, 19% 97%, 16% 100%, 13% 98%,
    10% 96%, 7% 99%, 4% 97%, 0% 100%
  );
}

/* --- Coffee Ring Stain --- */
.coffee-stain {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 30%,
    rgba(139, 90, 43, 0.06) 35%,
    rgba(139, 90, 43, 0.09) 40%,
    rgba(139, 90, 43, 0.04) 48%,
    transparent 55%
  );
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════
   DARK MODE - Section Backgrounds
   ═══════════════════════════════════════════ */
[data-theme="dark"] body {
  background-color: #0f0f1a;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(123,47,190,0.03) 3px, rgba(123,47,190,0.03) 6px),
    repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(123,47,190,0.03) 3px, rgba(123,47,190,0.03) 6px),
    radial-gradient(ellipse at 30% 20%, rgba(123,47,190,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(123,47,190,0.04) 0%, transparent 40%);
}
[data-theme="dark"] #hero {
  background-color: #0f0f1a;
  background-image:
    radial-gradient(ellipse at 85% 15%, rgba(123,47,190,0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 85%, rgba(168,85,247,0.08) 0%, transparent 35%);
}
[data-theme="dark"] #services {
  background-color: #0f0f1a;
  background-image:
    linear-gradient(rgba(123,47,190,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,47,190,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}
[data-theme="dark"] #process {
  background-color: #080812;
}
[data-theme="dark"] #social-planner {
  background-color: #12121e;
  background-image: linear-gradient(rgba(123,47,190,0.06) 0.5px, transparent 0.5px);
  background-size: 100% 32px;
}
[data-theme="dark"] #contact {
  background-color: #0f0f1a;
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(123,47,190,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(168,85,247,0.06) 0%, transparent 45%);
}
[data-theme="dark"] #proof {
  background-color: #12121e;
}
[data-theme="dark"] footer,
[data-theme="dark"] .footer {
  background-color: #080810;
}
[data-theme="dark"] .sticky-note-bg {
  background: linear-gradient(135deg, #c9a22e 0%, #ddb83a 40%, #c9a22e 100%);
  box-shadow: 2px 2px 12px rgba(0,0,0,0.4);
}

/* --- Tape Strip --- */
.tape-strip {
  position: relative;
}

.tape-strip::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 60px;
  height: 22px;
  background: rgba(255, 255, 200, 0.7);
  border: 1px solid rgba(200, 200, 150, 0.4);
  z-index: 2;
}

/* --- Paper Shadow --- */
.paper-shadow {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.06),
    0 2px 2px rgba(0, 0, 0, 0.05),
    0 4px 4px rgba(0, 0, 0, 0.04),
    0 8px 8px rgba(0, 0, 0, 0.03),
    0 16px 16px rgba(0, 0, 0, 0.02);
}