/* 
   brush-styles.css
   Sumi-e Ink Brush & Calligraphic Texture System for Gutenberg Blocks
*/

/* ==========================================================================
   1. CSS MASK STYLES (Dynamic Color System)
   Uses SVG as a mask so that any theme background color (primary, secondary, accent)
   automatically adopts the ink brush texture!
   ========================================================================== */

/* Ink Brush Card Mask (Cards, Pillars, Feature Containers - Custom Color Ready) */
.mask-ink-brush-card,
.is-style-ink-brush-card {
  background-color: var(--wp--preset--color--secondary, #E8F0ED); /* Default Custom/Accent Wash */
  -webkit-mask-image: url('../svg/ink-brush-card.svg');
  mask-image: url('../svg/ink-brush-card.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform 0.3s ease, -webkit-mask-size 0.3s ease, background-color 0.3s ease;
}

/* Inherit any Gutenberg custom color cleanly */
.mask-ink-brush-card[style*="background-color"],
.is-style-ink-brush-card[style*="background-color"],
.mask-ink-brush-card.has-background,
.is-style-ink-brush-card.has-background {
  -webkit-mask-image: url('../svg/ink-brush-card.svg') !important;
  mask-image: url('../svg/ink-brush-card.svg') !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

/* Ink Brush Banner Mask (Full-width / Wide-width Section Backgrounds) */
.mask-ink-brush-banner,
.is-style-ink-brush-banner {
  -webkit-mask-image: url('../svg/ink-brush-banner.svg');
  mask-image: url('../svg/ink-brush-banner.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Ink Brush Circle / Focus Mask (Badges, Avatars, Numbered Steps) */
.mask-ink-brush-circle,
.is-style-ink-brush-circle-mask {
  -webkit-mask-image: url('../svg/ink-brush-circle.svg');
  mask-image: url('../svg/ink-brush-circle.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* ==========================================================================
   2. BACKGROUND IMAGE STYLES (Direct Vector Overlays & Textures)
   Uses background-image for elements where natural SVG transparency is desired
   ========================================================================== */

/* Ink Brush Card Background (Supports Custom Color) */
.bg-ink-brush-card {
  background-color: var(--ink-card-bg, var(--wp--preset--color--secondary, #E8F0ED)) !important;
  -webkit-mask-image: url('../svg/ink-brush-card.svg') !important;
  mask-image: url('../svg/ink-brush-card.svg') !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* Ink Brush Banner Background */
.bg-ink-brush-banner {
  background-image: url('../svg/ink-brush-banner.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Ink Brush Circle Background (Direct Background & Block Style) */
.bg-ink-brush-circle,
.is-style-ink-brush-circle {
  background-image: url('../svg/ink-brush-circle.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* Watermark / Floating Background variations for Cards & Columns */
.bg-ink-brush-circle-tr {
  position: relative;
}
.bg-ink-brush-circle-tr::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 220px;
  height: 220px;
  background-image: url('../svg/ink-brush-circle.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

.bg-ink-brush-circle-center {
  position: relative;
}
.bg-ink-brush-circle-center::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  background-image: url('../svg/ink-brush-circle.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Atmospheric Splatter Overlay (Light Green Semi-transparent) */
.bg-ink-splatter,
.ink-splatter {
  position: relative;
}
.bg-ink-splatter::after,
.ink-splatter::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 160px;
  background-color: var(--wp--preset--color--primary, #799881);
  -webkit-mask-image: url('../svg/ink-splatter.svg');
  mask-image: url('../svg/ink-splatter.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.25; /* Soft translucent light green splatter */
  pointer-events: none;
  z-index: 1;
}

.bg-ink-splatter-bl::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 140px;
  height: 140px;
  background-color: var(--wp--preset--color--primary, #799881);
  -webkit-mask-image: url('../svg/ink-splatter.svg');
  mask-image: url('../svg/ink-splatter.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transform: rotate(180deg);
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
}


/* ==========================================================================
   3. TYPOGRAPHY & HEADING HIGHLIGHTS
   ========================================================================== */

/* Calligraphic Underline for Headings & Keywords (Light Green) */
.ink-brush-underline,
.is-style-ink-brush-underline {
  position: relative;
  display: inline-block;
  z-index: 1;
}
.ink-brush-underline::after,
.is-style-ink-brush-underline::after {
  content: "";
  position: absolute;
  left: -3%;
  bottom: -4px;
  width: 106%;
  height: 16px;
  background-color: var(--wp--preset--color--primary, #799881);
  -webkit-mask-image: url('../svg/ink-brush-underline.svg');
  mask-image: url('../svg/ink-brush-underline.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.5; /* Soft light green translucent wash */
  z-index: -1;
  pointer-events: none;
}

/* ==========================================================================
   4. YELLOW INK DECORATION (Oriental Cloud / Landscape Brush Background)
   ========================================================================== */

/* Yellow Ink Decoration as direct background */
.bg-ink-yellow-deco,
.is-style-ink-yellow-deco {
  background-image: url('../svg/ink-decoration-yellow.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Yellow Ink Decoration as top-right floating atmospheric corner art */
.bg-ink-yellow-deco-tr {
  position: relative;
}
.bg-ink-yellow-deco-tr::after {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 280px;
  height: 120px;
  background-image: url('../svg/ink-decoration-yellow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* Yellow Ink Decoration as bottom-left floating corner art */
.bg-ink-yellow-deco-bl {
  position: relative;
}
.bg-ink-yellow-deco-bl::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 280px;
  height: 120px;
  background-image: url('../svg/ink-decoration-yellow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   5. GREEN INK DECORATION (Graphic 107 - Dark Green Corner Background Art)
   ========================================================================== */

/* Dark Green Decorative Art - Bottom-Left Corner Overlay (Primary Usage) */
.bg-ink-green-deco-bl,
.is-style-ink-green-deco-bl {
  position: relative;
}

.bg-ink-green-deco-bl::before,
.is-style-ink-green-deco-bl::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(200px, 26vw, 360px);
  height: clamp(85px, 12vw, 160px);
  background-image: url('../svg/graphic_107.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* Dark Green Decorative Art - Direct Background Mode */
.bg-ink-green-deco,
.is-style-ink-green-deco {
  background-image: url('../svg/graphic_107.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
}

/* Dark Green Decorative Art - Top-Right Corner Overlay variation */
.bg-ink-green-deco-tr {
  position: relative;
}

.bg-ink-green-deco-tr::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(200px, 26vw, 360px);
  height: clamp(85px, 12vw, 160px);
  background-image: url('../svg/graphic_107.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right top;
  transform: rotate(180deg);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   6. INK DIALOGUE / FRAME DECORATION (Calligraphic Double Card Box)
   ========================================================================== */

/* Ink Dialogue Box - Direct Background & Gutenberg Block Style */
.bg-ink-dialogue-box,
.is-style-ink-dialogue-box {
  background-image: url('../svg/ink-dialogue-box.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Ink Dialogue Box - Bottom-Left Corner Overlay */
.bg-ink-dialogue-box-bl,
.is-style-ink-dialogue-box-bl {
  position: relative;
}

.bg-ink-dialogue-box-bl::before,
.is-style-ink-dialogue-box-bl::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(180px, 24vw, 320px);
  height: clamp(140px, 18vw, 240px);
  background-image: url('../svg/ink-dialogue-box.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

/* Ink Dialogue Box - Top-Right Corner Overlay */
.bg-ink-dialogue-box-tr,
.is-style-ink-dialogue-box-tr {
  position: relative;
}

.bg-ink-dialogue-box-tr::after,
.is-style-ink-dialogue-box-tr::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(180px, 24vw, 320px);
  height: clamp(140px, 18vw, 240px);
  background-image: url('../svg/ink-dialogue-box.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right top;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}