/* ================================
   CENABIS STATEMENT ANIMATION
   Text marker/highlighter effect - fills from left to right on scroll
   Multi-line support with box-decoration-break
   ================================ */

/* Text marker effect - background only behind the text itself */
.cenabis-statement .dsn-heading-title.bg-subtitle.background-theme {
  background-color: transparent !important;
  background-image: linear-gradient(to right, var(--theme-color, #ffb549), var(--theme-color, #ffb549)) !important;
  background-size: 0% 100% !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  
  /* Text marker styling - inline display for tight fit around text */
  display: inline !important;
  padding: 0 0.15em !important; /* Minimal horizontal padding, no vertical */
  
  /* No rounded corners */
  border-radius: 0 !important;
  
  /* Multi-line support - each line gets its own background */
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
  
  /* Line-height matching text */
  line-height: 1.5 !important;
  
  /* Transition for animation */
  transition: background-size 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Animated state - background fills to 100% */
.cenabis-statement.is-visible .dsn-heading-title.bg-subtitle.background-theme {
  background-size: 100% 100% !important;
}