/* ============================================================
   Altru Radiance — ba-carousel.css
   Shared before/after slider behavior. Loaded AFTER each
   page's inline <style> block so these state-driven rules
   override the older solid-gold-handle baseline via cascade.

   Covers two component flavors:
   • .ba-split  — standard, used on most pages. Clips
                  .ba-before from the right via --split.
   • .ba-slider — foundation-package science section. Clips
                  .ba-after from the left. Handle contains
                  an SVG icon (stroke hardcoded), so the
                  rest/active fade is applied via opacity on
                  the SVG itself rather than via color.

   Width/height/font-size on .ba-handle are intentionally NOT
   set here — per-page size customizations (e.g. larger mobile
   touch targets) are preserved by leaving sizing to the page.
   :is() is used so a single rule matches both wrapper scopes
   at the (0,2,0) specificity of the original page-scoped
   rules being overridden.
   ============================================================ */

/* ─── Divider — dimmed gold at rest, full gold when active. ─── */
:is(.ba-split, .ba-slider) .ba-divider {
  background: rgba(201, 168, 76, 0.6);
  transition: background 1s ease;
}
:is(.ba-split, .ba-slider):hover .ba-divider,
:is(.ba-split, .ba-slider).is-active .ba-divider {
  background: var(--gold);
  transition: background 0.25s ease;
}

/* ─── Handle — outline only at rest, 30% gold fill when active. ─── */
:is(.ba-split, .ba-slider) .ba-handle {
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: transparent; /* hides any inner text symbol (e.g. ↔) */
  box-shadow: none;
  transition: background 1s ease, border-color 1s ease, color 1s ease;
}
:is(.ba-split, .ba-slider):hover .ba-handle,
.ba-handle.is-active,
.ba-handle:focus-visible {
  background: rgba(201, 168, 76, 0.3);
  border-color: transparent;
  color: var(--black);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* SVG icon inside .ba-slider's handle.
   The SVG paths have hardcoded stroke="#06100a", so we fade them
   via opacity on the SVG itself rather than via inherited color. */
.ba-slider .ba-handle svg {
  opacity: 0;
  transition: opacity 1s ease;
}
.ba-slider:hover .ba-handle svg,
.ba-slider .ba-handle.is-active svg,
.ba-slider .ba-handle:focus-visible svg {
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* ─── Labels — fade as the slider passes over them.
   Opacity tracks --split-num (unitless mirror of --split set by
   ba-carousel.js). clamp() keeps values in [0, 1]. ─── */
.ba-label {
  transition: opacity 0.3s ease;
}
.ba-label-before {
  opacity: clamp(0, calc((var(--split-num, 50) - 18) / 12), 1);
}
.ba-label-after {
  opacity: clamp(0, calc((82 - var(--split-num, 50)) / 12), 1);
}

@media (prefers-reduced-motion: reduce) {
  :is(.ba-split, .ba-slider) .ba-handle,
  :is(.ba-split, .ba-slider) .ba-divider,
  .ba-slider .ba-handle svg,
  .ba-label,
  .ba-label-before,
  .ba-label-after {
    transition: none;
  }
}