/* ============================================================
   Colored-pencil aesthetic
   — paper grain underlay
   — turbulence/displacement filter for hand-wobbled edges
   — soft sketchy strokes on illustrations
   ============================================================ */

/* Paper grain — subtle SVG noise + cream fiber tone, layered over the pastel gradients */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image:
    /* fiber speckles */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.50  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    /* coarse paper speckle */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.74  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)'/></svg>");
  background-size: 220px 220px, 400px 400px;
}

/* very faint horizontal pencil hatch (paper toothiness) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(
    102deg,
    rgba(180, 160, 195, 0.06) 0px,
    rgba(180, 160, 195, 0.06) 1px,
    transparent 1px,
    transparent 4px
  );
}

/* ----- Wobble filter applied to illustrations ----- */
.pencil      { filter: url(#pencilWobble); }
.pencil-soft { filter: url(#pencilSoft); }

/* Cards: give them a soft hand-drawn frame using layered shadows + a rough border-image */
.wish-card,
.balloon-input-card,
.s7-body,
.prediction-card,
.fake-notif,
.modal {
  position: relative;
}

/* sketchy underline accents under stage titles */
.title { position: relative; display: inline-block; }
.title::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -8px;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M2 3 Q15 1 28 3 T55 4 T82 2 T98 4' stroke='%23DE9DA4' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  opacity: 0.55;
}

/* sketchy hand-drawn buttons — wobbled outline + slight rotation */
.btn {
  filter: url(#pencilSoft);
}
.btn--ghost {
  background: white;
  position: relative;
}
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rose);
  pointer-events: none;
  filter: url(#pencilWobble);
}

/* Wish cards — pencil border + faint hatch shading */
.wish-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,251,246,0.88)),
    repeating-linear-gradient(45deg, rgba(180,160,195,0.05) 0 2px, transparent 2px 5px);
  filter: url(#pencilSoft);
}
.wish-card.is-selected {
  background:
    linear-gradient(135deg, var(--rose) 0%, var(--peach-deep) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 5px);
}

/* Cake & balloon SVGs get the wobble */
.cake-svg, .s2-balloon, .envelope-svg, .released-balloon svg, .wheel-pointer { filter: url(#pencilWobble); }

/* candles get soft pencil strokes via outline */
.candle-stick {
  box-shadow:
    inset 0 0 0 0.5px rgba(74,63,85,0.25),
    inset -1px 0 0 rgba(74,63,85,0.12);
  filter: url(#pencilSoft);
}

/* Wheel canvas — keep performance, just add pencil border */
.wheel-canvas {
  box-shadow:
    0 20px 50px rgba(193,162,184,0.32),
    inset 0 0 0 6px var(--milk),
    inset 0 0 0 7.5px rgba(222, 157, 164, 0.45);
}
.wheel-stage::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(222, 157, 164, 0.5);
  filter: url(#pencilWobble);
  pointer-events: none;
}

/* Letter inside envelope — paper grain */
.env-letter {
  background:
    linear-gradient(180deg, var(--milk) 0%, #FDF3E5 100%),
    repeating-linear-gradient(0deg, rgba(180,160,195,0.05) 0 1px, transparent 1px 22px);
}

/* Modal — give it a sketchy double frame */
.modal {
  border: 1.5px solid rgba(222, 157, 164, 0.35);
  box-shadow:
    0 18px 50px rgba(112, 80, 130, 0.18),
    inset 0 0 0 6px var(--milk),
    inset 0 0 0 7.5px rgba(222, 157, 164, 0.25);
  filter: url(#pencilSoft);
}

/* fake notif — pencil outline */
.fake-notif {
  border: 1.5px solid rgba(166, 221, 184, 0.55);
  filter: url(#pencilSoft);
}

/* Subtitle gets a tiny squiggle on the side  */
.eyebrow {
  position: relative;
  padding: 0 14px;
}
.eyebrow::before, .eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 6'><path d='M1 3 Q5 0 9 3 T17 3' stroke='%23DE9DA4' stroke-width='1.2' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  opacity: 0.7;
}
.eyebrow::before { left: -22px; }
.eyebrow::after  { right: -22px; transform: scaleX(-1); }

/* Progress dots: hand-drawn ring */
.progress { border: 1px solid rgba(222, 157, 164, 0.3); }

/* Reduce motion / perf — disable expensive filters on small/low-power devices when reduced motion is on */
@media (prefers-reduced-motion: reduce) {
  .pencil, .pencil-soft, .cake-svg, .s2-balloon, .envelope-svg,
  .released-balloon svg, .wheel-pointer, .wish-card, .btn,
  .modal, .fake-notif, .candle-stick, .wheel-stage::before, .btn--ghost::before {
    filter: none;
  }
}