/* ============================================================
   Homei v2.1 — Doodles & decorative SVG flourishes.
   Optional: load AFTER homei.css when a page wants paperclips,
   tape, sparkles, or pencil dividers.
   ============================================================ */

/* ─── Paperclip — pin to the top-right of any container ─── */
.has-paperclip { position: relative; }
.has-paperclip::after {
  content: '';
  position: absolute;
  top: -8px;
  right: 26px;
  width: 22px;
  height: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 38'><path d='M11 4 Q 4 4 4 12 L 4 26 Q 4 32 11 32 Q 18 32 18 26 L 18 12' fill='none' stroke='%239c8a6b' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  transform: rotate(8deg);
  pointer-events: none;
}

/* ─── Tape strip — masking-tape look ─── */
.has-tape { position: relative; }
.has-tape::before {
  content: '';
  position: absolute;
  top: -10px;
  right: 28px;
  width: 56px;
  height: 18px;
  background: rgba(217, 165, 92, 0.42);
  border: 1px dashed rgba(120, 95, 60, 0.32);
  border-radius: 2px;
  transform: rotate(-3deg);
  pointer-events: none;
  z-index: 2;
}

/* ─── Pencil-dot divider (use between sections) ─── */
.pencil-divider {
  border: 0;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10'><path d='M5 5 Q 20 0 40 5 T 80 5 T 120 5 L 145 5' fill='none' stroke='%23c7b89a' stroke-width='2' stroke-linecap='round' stroke-dasharray='3 5'/></svg>");
  background-repeat: repeat-x;
  background-size: 150px 10px;
  margin: 18px 0;
}

/* ─── Sparkle (decorative star) ─── */
.sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M7 0 L 8.5 5.5 L 14 7 L 8.5 8.5 L 7 14 L 5.5 8.5 L 0 7 L 5.5 5.5 Z' fill='%23d9a55c'/></svg>");
  background-repeat: no-repeat;
  pointer-events: none;
}

/* ─── Wobbly underline (use under headings) ─── */
.wobbly-underline {
  position: relative;
  display: inline-block;
}
.wobbly-underline::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M2 4 Q 25 0 50 4 T 100 4 T 150 4 T 198 4' fill='none' stroke='%23c87a52' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ─── Reduce motion ─── */
@media (prefers-reduced-motion: reduce) {
  .has-paperclip::after,
  .has-tape::before,
  .sparkle,
  .wobbly-underline::after { animation: none !important; }
}