/* ============================================================
   Extra crayon-drawn flourishes
   — floating hearts background
   — tap-burst hearts
   — washi tape on key cards
   — doodle accents (stars, squiggles)
   — stronger crayon shading
   ============================================================ */

/* ---------- Floating hearts background ---------- */
.hearts-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.heart-float {
  position: absolute;
  width: var(--size, 28px);
  height: var(--size, 28px);
  opacity: 0;
  animation:
    heart-drift var(--dur, 22s) ease-in-out var(--delay, 0s) infinite,
    heart-fade-in 1.6s ease-out var(--delay, 0s) forwards;
  transform: translate(0, 0) rotate(var(--rot, 0deg));
  filter: url(#pencilSoft);
  will-change: transform, opacity;
}

@keyframes heart-fade-in {
  to { opacity: var(--max-op, 0.55); }
}

@keyframes heart-drift {
  0%   { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); }
  25%  { transform: translate(calc(var(--dx, 30px)), calc(var(--dy, -25px))) rotate(calc(var(--rot, 0deg) + 8deg)) scale(1.08); }
  50%  { transform: translate(calc(var(--dx, 30px) * -0.6), calc(var(--dy, -25px) * 1.4)) rotate(calc(var(--rot, 0deg) - 6deg)) scale(0.92); }
  75%  { transform: translate(calc(var(--dx, 30px) * 0.4), calc(var(--dy, -25px) * 0.7)) rotate(calc(var(--rot, 0deg) + 4deg)) scale(1.04); }
  100% { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); }
}

/* ---------- Tap burst hearts ---------- */
.tap-burst-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.tap-heart {
  position: absolute;
  width: 22px;
  height: 22px;
  --tx: 0px;
  --ty: -90px;
  --tr: 0deg;
  animation: tap-heart-fly 1100ms ease-out forwards;
  filter: url(#pencilSoft);
  will-change: transform, opacity;
}

@keyframes tap-heart-fly {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.15) rotate(calc(var(--tr) * 0.2)); opacity: 1; }
  100% {
    transform:
      translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
      scale(0.65)
      rotate(var(--tr));
    opacity: 0;
  }
}

/* ---------- Washi tape — diagonal pastel strips on cards ---------- */
.washi {
  position: absolute;
  width: 76px;
  height: 22px;
  pointer-events: none;
  z-index: 3;
  filter: url(#pencilSoft);
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.35) 0 6px,
      rgba(255,255,255,0.0) 6px 12px),
    var(--washi-color, #F2C2C7);
  opacity: 0.78;
  box-shadow:
    0 2px 4px rgba(74,63,85,0.08);
  /* torn edges */
  -webkit-mask-image: radial-gradient(circle at 4px 0,  transparent 2.5px, black 3px),
                      radial-gradient(circle at 4px 22px, transparent 2.5px, black 3px),
                      linear-gradient(black, black);
  -webkit-mask-composite: source-in;
}

/* offset overrides */
.washi--tl { top: -12px; left: 14%;  transform: rotate(-8deg); --washi-color: #F2C2C7; }
.washi--tr { top: -12px; right: 14%; transform: rotate(7deg);  --washi-color: #CDB4F0; }
.washi--bl { bottom: -10px; left: 18%; transform: rotate(6deg); --washi-color: #A6DDB8; }
.washi--br { bottom: -10px; right: 18%; transform: rotate(-9deg); --washi-color: #FBC4A3; }

/* keep wash strips edged with a 'tape' shadow */
.washi::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0) 50%, rgba(0,0,0,0.06));
  pointer-events: none;
}

/* ---------- Doodle accents (sprinkled small drawings) ---------- */
.doodle {
  position: absolute;
  pointer-events: none;
  filter: url(#pencilWobble);
  opacity: 0.75;
  z-index: 1;
}
.doodle svg { display: block; width: 100%; height: 100%; }

/* ---------- Stronger 'colored pencil' shading on illustrations ---------- */
/* a soft cross-hatch overlay we can apply to fills */
.crayon-hatch::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(58deg,  rgba(74,63,85,0.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-32deg, rgba(74,63,85,0.14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(12deg,  rgba(222,157,164,0.10) 0 1px, transparent 1px 6px);
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Apply soft hatch shading directly to wish cards (already position:relative) */
.wish-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background:
    repeating-linear-gradient(58deg,  rgba(74,63,85,0.20) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-32deg, rgba(74,63,85,0.12) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply;
  border-radius: inherit;
}
.wish-card.is-selected::after {
  opacity: 0.28;
  background:
    repeating-linear-gradient(58deg,  rgba(255,255,255,0.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-32deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

/* ---------- Title stronger crayon underline ---------- */
.title::after {
  height: 8px !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M2 4 Q10 1 18 4 T34 5 T52 3 T70 5 T88 3 T98 5' stroke='%23DE9DA4' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='0.85'/><path d='M4 6 Q14 4 24 6 T46 5 T68 6 T96 5' stroke='%23CDB4F0' stroke-width='1' fill='none' stroke-linecap='round' opacity='0.5'/></svg>") center/100% 100% no-repeat !important;
  opacity: 0.85 !important;
  filter: url(#pencilWobble);
}

/* ---------- Reduce motion: kill float + bursts ---------- */
@media (prefers-reduced-motion: reduce) {
  .heart-float { animation: heart-fade-in 1.6s ease-out forwards; }
  .tap-heart { animation: none; opacity: 0; }
}