/*
 * Real owner feedback 2026-08-11, found while applying this shape to
 * Michelle's real site: the SVG-as-background-image + fill="currentColor"
 * technique this file used to rely on does NOT resolve currentColor from
 * the host element's `color` in Chromium - background-image is an opaque
 * external resource, not an inline SVG, so `currentColor` inside it falls
 * back to the SVG spec default (black), confirmed by screenshot (every
 * variant rendered solid black regardless of --lib-wave-divider-fill).
 * Switched to the same mask-image technique patterns/organic-blob already
 * uses and had verified working: the SVG only supplies the shape (alpha),
 * `background-color` supplies the real, themeable fill.
 */
/* Semantic Retrofit Group A Batch 5, 2026-09-08: default fill migrated
   to --lib-surface-brand-primary (real Color Role Contract role, same
   value as --lib-color-primary, correct for a background/fill
   intentionally tinted with brand identity). Real consumers (hero-split,
   hero-immersive) both already override this fill to --lib-color-deep
   for their own dark section-transition context -- confirming this
   value is genuinely contextual/overridable, not a fixed identity, so
   the override var stays first-class; only the DEFAULT changed. */
.lib-wave-divider {
  position: relative;
  display: block;
  height: var(--lib-treatment-wave-height);
  background-color: var(--lib-wave-divider-fill, var(--lib-surface-brand-primary));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.lib-wave-divider--01 {
  /* gentle */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C45.0%20C%2090.0%2C45.0%2090.0%2C54.9%20180.0%2C54.9%20C%20270.0%2C54.9%20270.0%2C59.0%20360.0%2C59.0%20C%20450.0%2C59.0%20450.0%2C54.9%20540.0%2C54.9%20C%20630.0%2C54.9%20630.0%2C45.0%20720.0%2C45.0%20C%20810.0%2C45.0%20810.0%2C35.1%20900.0%2C35.1%20C%20990.0%2C35.1%20990.0%2C31.0%201080.0%2C31.0%20C%201170.0%2C31.0%201170.0%2C35.1%201260.0%2C35.1%20C%201350.0%2C35.1%201350.0%2C45.0%201440.0%2C45.0%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C45.0%20C%2090.0%2C45.0%2090.0%2C54.9%20180.0%2C54.9%20C%20270.0%2C54.9%20270.0%2C59.0%20360.0%2C59.0%20C%20450.0%2C59.0%20450.0%2C54.9%20540.0%2C54.9%20C%20630.0%2C54.9%20630.0%2C45.0%20720.0%2C45.0%20C%20810.0%2C45.0%20810.0%2C35.1%20900.0%2C35.1%20C%20990.0%2C35.1%20990.0%2C31.0%201080.0%2C31.0%20C%201170.0%2C31.0%201170.0%2C35.1%201260.0%2C35.1%20C%201350.0%2C35.1%201350.0%2C45.0%201440.0%2C45.0%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
}

.lib-wave-divider--02 {
  /* dramatic */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C57.5%20C%2090.0%2C57.5%2090.0%2C76.2%20180.0%2C76.2%20C%20270.0%2C76.2%20270.0%2C69.2%20360.0%2C69.2%20C%20450.0%2C69.2%20450.0%2C42.3%20540.0%2C42.3%20C%20630.0%2C42.3%20630.0%2C17.6%20720.0%2C17.6%20C%20810.0%2C17.6%20810.0%2C15.5%20900.0%2C15.5%20C%20990.0%2C15.5%20990.0%2C37.8%201080.0%2C37.8%20C%201170.0%2C37.8%201170.0%2C66.0%201260.0%2C66.0%20C%201350.0%2C66.0%201350.0%2C76.9%201440.0%2C76.9%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C57.5%20C%2090.0%2C57.5%2090.0%2C76.2%20180.0%2C76.2%20C%20270.0%2C76.2%20270.0%2C69.2%20360.0%2C69.2%20C%20450.0%2C69.2%20450.0%2C42.3%20540.0%2C42.3%20C%20630.0%2C42.3%20630.0%2C17.6%20720.0%2C17.6%20C%20810.0%2C17.6%20810.0%2C15.5%20900.0%2C15.5%20C%20990.0%2C15.5%20990.0%2C37.8%201080.0%2C37.8%20C%201170.0%2C37.8%201170.0%2C66.0%201260.0%2C66.0%20C%201350.0%2C66.0%201350.0%2C76.9%201440.0%2C76.9%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
}

.lib-wave-divider--03 {
  /* double */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C45.0%20C%2090.0%2C45.0%2090.0%2C63.0%20180.0%2C63.0%20C%20270.0%2C63.0%20270.0%2C45.0%20360.0%2C45.0%20C%20450.0%2C45.0%20450.0%2C27.0%20540.0%2C27.0%20C%20630.0%2C27.0%20630.0%2C45.0%20720.0%2C45.0%20C%20810.0%2C45.0%20810.0%2C63.0%20900.0%2C63.0%20C%20990.0%2C63.0%20990.0%2C45.0%201080.0%2C45.0%20C%201170.0%2C45.0%201170.0%2C27.0%201260.0%2C27.0%20C%201350.0%2C27.0%201350.0%2C45.0%201440.0%2C45.0%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C45.0%20C%2090.0%2C45.0%2090.0%2C63.0%20180.0%2C63.0%20C%20270.0%2C63.0%20270.0%2C45.0%20360.0%2C45.0%20C%20450.0%2C45.0%20450.0%2C27.0%20540.0%2C27.0%20C%20630.0%2C27.0%20630.0%2C45.0%20720.0%2C45.0%20C%20810.0%2C45.0%20810.0%2C63.0%20900.0%2C63.0%20C%20990.0%2C63.0%20990.0%2C45.0%201080.0%2C45.0%20C%201170.0%2C45.0%201170.0%2C27.0%201260.0%2C27.0%20C%201350.0%2C27.0%201350.0%2C45.0%201440.0%2C45.0%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
}

.lib-wave-divider--04 {
  /* asymmetric */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C68.2%20C%2090.0%2C68.2%2090.0%2C70.7%20180.0%2C70.7%20C%20270.0%2C70.7%20270.0%2C63.4%20360.0%2C63.4%20C%20450.0%2C63.4%20450.0%2C49.1%20540.0%2C49.1%20C%20630.0%2C49.1%20630.0%2C33.2%20720.0%2C33.2%20C%20810.0%2C33.2%20810.0%2C21.8%20900.0%2C21.8%20C%20990.0%2C21.8%20990.0%2C19.3%201080.0%2C19.3%20C%201170.0%2C19.3%201170.0%2C26.6%201260.0%2C26.6%20C%201350.0%2C26.6%201350.0%2C40.9%201440.0%2C40.9%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C68.2%20C%2090.0%2C68.2%2090.0%2C70.7%20180.0%2C70.7%20C%20270.0%2C70.7%20270.0%2C63.4%20360.0%2C63.4%20C%20450.0%2C63.4%20450.0%2C49.1%20540.0%2C49.1%20C%20630.0%2C49.1%20630.0%2C33.2%20720.0%2C33.2%20C%20810.0%2C33.2%20810.0%2C21.8%20900.0%2C21.8%20C%20990.0%2C21.8%20990.0%2C19.3%201080.0%2C19.3%20C%201170.0%2C19.3%201170.0%2C26.6%201260.0%2C26.6%20C%201350.0%2C26.6%201350.0%2C40.9%201440.0%2C40.9%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
}

.lib-wave-divider--05 {
  /* subtle */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C45.0%20C%2090.0%2C45.0%2090.0%2C50.7%20180.0%2C50.7%20C%20270.0%2C50.7%20270.0%2C53.0%20360.0%2C53.0%20C%20450.0%2C53.0%20450.0%2C50.7%20540.0%2C50.7%20C%20630.0%2C50.7%20630.0%2C45.0%20720.0%2C45.0%20C%20810.0%2C45.0%20810.0%2C39.3%20900.0%2C39.3%20C%20990.0%2C39.3%20990.0%2C37.0%201080.0%2C37.0%20C%201170.0%2C37.0%201170.0%2C39.3%201260.0%2C39.3%20C%201350.0%2C39.3%201350.0%2C45.0%201440.0%2C45.0%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C45.0%20C%2090.0%2C45.0%2090.0%2C50.7%20180.0%2C50.7%20C%20270.0%2C50.7%20270.0%2C53.0%20360.0%2C53.0%20C%20450.0%2C53.0%20450.0%2C50.7%20540.0%2C50.7%20C%20630.0%2C50.7%20630.0%2C45.0%20720.0%2C45.0%20C%20810.0%2C45.0%20810.0%2C39.3%20900.0%2C39.3%20C%20990.0%2C39.3%20990.0%2C37.0%201080.0%2C37.0%20C%201170.0%2C37.0%201170.0%2C39.3%201260.0%2C39.3%20C%201350.0%2C39.3%201350.0%2C45.0%201440.0%2C45.0%20L1440%2C90%20L0%2C90%20Z%22/%3E%3C/svg%3E");
}

/* Section boundary (2026-10-09): the wave only reads as a continuous
   transition when the area behind it is the PREVIOUS section's surface and
   the wave fill is the NEXT section's surface. Scoped classes, no inline
   style (Design Guardian). Purpose stays as documented: right before a
   section that turns to a solid dark background. */
.lib-section-boundary { display: block; line-height: 0; }
.lib-section-boundary--from-surface { background-color: var(--lib-surface-page); }
.lib-section-boundary--from-panel { background-color: var(--lib-surface-section); }
.lib-wave-divider--to-deep { --lib-wave-divider-fill: var(--lib-color-deep); }
.lib-wave-divider--to-card-dark { --lib-wave-divider-fill: var(--lib-color-surface-card-dark); }