/**
 * PetFlower moodboard flourishes — grain, sparkles, botanical accents.
 * Brand palette only: cream / sand / olive / peach / ember / ink.
 */
:root {
  --accent-hand: "Caveat", "Segoe Script", cursive;
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Film/paper grain */
.pf-grain,
body.pf-mood::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: var(--grain);
  background-size: 180px 180px;
}
body.pf-mode-lk.pf-mood::before,
html[data-pf-build*="ink"] body.pf-mood::before,
html[data-pf-build*="mood"] body.pf-mood::before {
  opacity: 0.07;
  mix-blend-mode: soft-light;
}
html[data-theme="light"] body.pf-mood::before,
html[data-theme="light"] .pf-grain {
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* Four-point sparkle */
.spark {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  vertical-align: middle;
  background: currentColor;
  clip-path: polygon(
    50% 0%,
    58% 38%,
    100% 50%,
    58% 62%,
    50% 100%,
    42% 62%,
    0% 50%,
    42% 38%
  );
  opacity: 0.85;
  transform-origin: center;
}
.spark--float {
  animation: sparkPulse 3.2s ease-in-out infinite;
}
.spark--float:nth-child(2) { animation-delay: 0.7s; }
.spark--float:nth-child(3) { animation-delay: 1.4s; }
@keyframes sparkPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(12deg); }
}

.hand {
  font-family: var(--accent-hand);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

/* Wavy botanical section rule */
.wave-rule {
  display: block;
  width: min(12rem, 40vw);
  height: 1.1rem;
  margin: 0.85rem 0 0;
  color: var(--olive, #9FAF64);
  opacity: 0.85;
}
.wave-rule svg { width: 100%; height: 100%; display: block; }

/* Soft gingham wash */
.gingham {
  background-color: color-mix(in srgb, var(--sand, #FCECC3) 70%, #fff);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--olive, #9FAF64) 14%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--olive, #9FAF64) 14%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Scallop / sticker card edge */
.sticker {
  position: relative;
  border-radius: 1.35rem;
  box-shadow:
    0 18px 40px -28px rgba(47, 42, 34, 0.4),
    0 0 0 1px color-mix(in srgb, var(--line, #E4D7B6) 80%, transparent);
}
.sticker::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 55%, transparent);
}

/* Leafy fill for display words */
.leaf-fill {
  display: inline;
  background:
    linear-gradient(125deg, #6F8040 0%, #9FAF64 38%, #C5D48A 62%, #FFD283 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Solid accent in dark mode — gradient + text-clip often renders as an empty bar */
html[data-theme="dark"] .leaf-fill {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #D8E6A8;
  -webkit-text-fill-color: currentColor;
}

/* Botanical corner flourish */
.botany-corner {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  pointer-events: none;
  opacity: 0.55;
  color: var(--olive, #9FAF64);
}
.botany-corner--tl { top: 0.6rem; left: 0.6rem; }
.botany-corner--br { right: 0.6rem; bottom: 0.6rem; transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .spark--float { animation: none; opacity: 0.7; }
}