/* Text entry kit: heading wipe, badge bar, rolling counter.
   From the Ventrix Framer template as rebuilt for SJMC (Oct 2026). See README.md. */

:root {
  --te-bar1: #45cedb;      /* first bar: the accent colour */
  --te-bar2: #0a3c83;      /* second bar: usually the section background or heading colour */
  --te-badge-bg: #0a3c83;  /* badge bar */
  --te-badge-ink: #0a3c83; /* badge text before the bar arrives */
  --te-badge-ink-in: #45cedb; /* badge text once the bar is in */
}

/* ---- heading wipe: <h2 data-wipe>Line one<br>Line two</h2> */
[data-wipe] { display: flex; flex-direction: column; align-items: flex-start; }
.te-line { position: relative; display: block; max-width: 100%; overflow: hidden; padding-bottom: .1771em; }
.te-text { position: relative; z-index: 1; display: block; }
.te-line i { position: absolute; inset: 0; transform: translateX(-100%); }
/* the bar, and riding along just to its right, the cover that still hides the
   rest of the line. One transform moves both, so they stay in step. */
.te-line .te-b1 { z-index: 2; background: var(--te-bar1); }
.te-line .te-b1::after {
  content: ""; position: absolute; left: 100%; top: 0; width: 400%; height: 100%;
  background: var(--te-bar2);
}
.te-nofx .te-line i { display: none; }

/* ---- badge: <span data-badge>Line one<br>Line two</span> */
[data-badge] { display: inline-flex; flex-direction: column; align-items: flex-start; }
.te-bl { position: relative; display: block; padding: 0 12px; overflow: clip; }
.te-bl i { position: absolute; top: 0; left: -10px; width: 1px; height: 100%; background: var(--te-badge-bg); transition: left .38s cubic-bezier(.44, 0, .56, 1), width .38s cubic-bezier(.44, 0, .56, 1); }
.te-bl b { position: relative; z-index: 1; display: block; font-weight: inherit; white-space: pre; color: var(--te-badge-ink); transition: color .38s cubic-bezier(.44, 0, .56, 1); }
[data-badge].te-in .te-bl i { left: 0; width: 100%; }
[data-badge].te-in .te-bl b { color: var(--te-badge-ink-in); }

/* ---- rolling counter: <span data-count="442" data-suffix="+"></span> */
[data-count] { display: inline-flex; align-items: flex-start; line-height: 1; }
.te-dg { display: block; height: 1em; overflow: hidden; }
.te-col { display: flex; flex-direction: column; transition: transform 1.15s cubic-bezier(.76, 0, .24, 1); }
.te-col span { display: block; height: 1em; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .te-line i { display: none; }
  .te-bl i, .te-bl b, .te-col { transition: none; }
}