/* ============================================ Watercolor Filter CSS — Botanical Decorations SVG feTurbulence + feDisplacementMap filters that transform photos into watercolor art ============================================ */ /* ── Inline SVG Filters (no external file needed) ─── */ .watercolor-filter { filter: url(#watercolor-blur); } /* Watercolor blur + paper texture */ .watercolor-soft { filter: url(#watercolor-soft); } /* Extra soft wash effect */ .watercolor-wash { filter: url(#watercolor-wash); } /* Edge-aware watercolor (preserves some detail) */ .watercolor-detail { filter: url(#watercolor-detail); } /* ── Decorative Image Classes ─────────────────────── */ /* Make images look like watercolor paintings */ .img-watercolor { filter: url(#watercolor-soft) saturate(1.1) brightness(1.02); } /* ── Drop Shadow for layering ─────────────────────── */ .watercolor-shadow { filter: drop-shadow(2px 4px 6px rgba(60, 50, 40, 0.12)); } /* ── Hover: slight grow + shadow ────────────────── */ .deco-watercolor { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease; } .deco-watercolor:hover { transform: scale(1.03) translateY(-2px); filter: drop-shadow(3px 6px 8px rgba(60, 50, 40, 0.15)); } /* ── Inline SVG Filter Definitions ─────────────────── */ /* Place this in your HTML or as a hidden SVG block */ /* */