/*
 * Fluid Brand — Component Overrides
 *
 * Brand-specific styling that goes beyond variable overrides.
 * Decorative treatments, brushstroke layers, visual polish.
 * Only load this file when using the Fluid brand.
 */

/* ============================
   DECORATIVE LAYERS
   ============================ */

/*
 * Brushstroke layers — DEPRECATED: .brush-layer removed.
 * Use <img class="brush brush--white"> pattern instead.
 * See _base.css for .brush and .brush--white definitions.
 */


/* ============================
   CIRCLE EMPHASIS
   ============================ */

/*
 * Hand-drawn circle highlight — wraps a keyword or phrase.
 * Uses luminance mask from circle-sketch-clean.png (white on black).
 * Circle renders BEHIND text (::before + z-index: -1).
 * Protrudes slightly below the word for a natural hand-circled feel.
 *
 * Color: set --circle-color on the element (defaults to green).
 *
 * Usage:
 *   <span class="rough-circle">word</span>
 *   <span class="rough-circle" style="--circle-color: var(--brand-accent);">word</span>
 *   <span class="rough-circle" style="--circle-color: var(--brand-accent-warm);">word</span>
 */
/* Isolation on the heading so the circle ::before (z-index: -1) sits behind
   ALL heading text — not just the circled word — while staying above the slide bg. */
h1:has(.rough-circle),
h2:has(.rough-circle),
h3:has(.rough-circle) {
  isolation: isolate;
}

.rough-circle {
  position: relative;
  white-space: nowrap;
  --circle-color: var(--brand-accent-green);
}

.rough-circle::before {
  content: '';
  position: absolute;
  inset: -0.25em -0.45em -0.35em;
  background-color: var(--circle-color);
  -webkit-mask-image: url('./assets/decorative/circles/circle-sketch-clean.png');
  mask-image: url('./assets/decorative/circles/circle-sketch-clean.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  z-index: -1;
  pointer-events: none;
}

/* Variant circles — luminance masks (white on black) */
.rough-circle.v-sketch-rough::before {
  -webkit-mask-image: url('./assets/decorative/circles/circle-5.png');
  mask-image: url('./assets/decorative/circles/circle-5.png');
}

/* Variant circles — alpha masks (white/light on transparent) */
.rough-circle.v-thin::before {
  -webkit-mask-image: url('./assets/decorative/circles/circle-1.png');
  mask-image: url('./assets/decorative/circles/circle-1.png');
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.rough-circle.v-wispy::before {
  -webkit-mask-image: url('./assets/decorative/circles/circle-2.png');
  mask-image: url('./assets/decorative/circles/circle-2.png');
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.rough-circle.v-loose::before {
  -webkit-mask-image: url('./assets/decorative/circles/circle-3.png');
  mask-image: url('./assets/decorative/circles/circle-3.png');
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

.rough-circle.v-pencil::before {
  -webkit-mask-image: url('./assets/decorative/circles/circle-sketch-rough.png');
  mask-image: url('./assets/decorative/circles/circle-sketch-rough.png');
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}


/* ============================
   UNDERLINE EMPHASIS
   ============================ */

.underline-emphasis {
  position: relative;
  display: inline-block;
}

.underline-emphasis::after {
  content: '';
  position: absolute;
  bottom: -0.1em;
  left: -0.1em;
  right: -0.1em;
  height: 0.25em;
  mask-image: url('./assets/decorative/underlines/underline-1.png');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('./assets/decorative/underlines/underline-1.png');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  background: var(--slide-accent);
  opacity: 0.7;
  pointer-events: none;
}

.underline-emphasis.v2::after { mask-image: url('./assets/decorative/underlines/underline-2.png'); -webkit-mask-image: url('./assets/decorative/underlines/underline-2.png'); }
.underline-emphasis.v3::after { mask-image: url('./assets/decorative/underlines/underline-3.png'); -webkit-mask-image: url('./assets/decorative/underlines/underline-3.png'); }


/* ============================
   FOOTER (OPTIONAL)
   ============================ */

/*
 * Fluid footer bar — used on social-format slides.
 * For presentations this is optional; most slides won't use it.
 */
.fluid-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  z-index: 10;
}

.fluid-footer .footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fluid-footer .footer-left img {
  height: 18px;
}

.fluid-footer .footer-separator {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.15);
}

.fluid-footer .footer-right img {
  height: 22px;
}