/* DigiDonate v3 — For charities hero visual: gifts arrive directly, then the monthly update.

   Same visual language as the root site's donation trace and hero cards: a dark dotted card, thick
   pipes with a marching dotted current, a white orb with a lilac glow and a tapering comet trail,
   halo rings on the nodes, a white toast that pops (dx-ch-toast) and a white card that types itself in.

   The money only ever rides each business's own pipe straight into the charity. There is no
   DigiDonate node in this visual, so nothing sits between a business and the charity.

   One 12 s loop; every keyframe below is a % of it (1 s = 8.33%).
     0.6–2.2 s   Example business: its orb rides into Example charity, the charity pulses,
                 "Confirm each payment…" pops, the "No fees…" chip catches the light
     3.0–4.6 s   a business supporter: the same (its animations run 2.4 s behind)
     5.9–9.7 s   the update card rises and writes itself: header, the $5,000 line, the $1,000 line
     11.3–11.8 s hold ends, the card fades, repeat
   The base rules are the complete still frame (used under prefers-reduced-motion); the hidden starting
   states and the animation itself only apply under prefers-reduced-motion: no-preference.
   Only transform, opacity, offset-distance and stroke-dashoffset are animated. */

.hv-ch { position: relative; width: 100%; }
.hv-ch *, .hv-ch *::before, .hv-ch *::after { box-sizing: border-box; }
.hv-ch-card { position: relative; overflow: hidden; padding: 22px 24px 24px; border-radius: 26px;
  background-color: #15121D;
  background-image: radial-gradient(ellipse 72% 40% at 50% 40%, rgba(108,43,217,.2) 0%, rgba(21,18,29,0) 100%),
                    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px;
  border: 1px solid #272233; box-shadow: 0 44px 100px -44px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; color: #FFFFFF; }
.hv-ch-card svg { display: block; }

/* top row: Example only + Draft */
.hv-ch-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hv-ch-eg { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  border: 1px solid #3A3350; background: rgba(255,255,255,.03); color: #B5B0C2; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; line-height: 1; text-transform: uppercase; white-space: nowrap; }

/* the line the diagram illustrates */
.hv-ch-cap { margin: 16px auto 0; text-align: center; font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px; font-weight: 700; line-height: 1.28; letter-spacing: -0.01em; color: #FFFFFF; text-wrap: balance; }

/* the diagram: SVG pipes underneath, HTML nodes on top (the orbs slip under the nodes at each end).
   The business pills are centred on the SVG's top edge, the charity pill on its bottom edge, so the
   pipes' ends always sit under them whatever the width. */
.hv-ch-map { position: relative; margin-top: 16px; padding-top: 24px; }
.hv-ch-map > svg { width: 100%; height: auto; aspect-ratio: 400 / 124; overflow: visible; }
.hv-ch-pipe { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 9; stroke-linecap: round; }
.hv-ch-cur { opacity: .55; }
.hv-ch-cur path { fill: none; stroke: #AE8AEA; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 11; }
.hv-ch-tr { opacity: 0; }
.hv-ch-tr path { fill: none; stroke-linecap: round; }
.hv-ch-t1 { stroke: #8F63E8; stroke-width: 2; opacity: .6; stroke-dasharray: 150 1000; stroke-dashoffset: 150; }
.hv-ch-t2 { stroke: #AE8AEA; stroke-width: 3.4; opacity: .8; stroke-dasharray: 80 1000; stroke-dashoffset: 80; }
.hv-ch-t3 { stroke: #DCCBF8; stroke-width: 5; stroke-dasharray: 34 1000; stroke-dashoffset: 34; }
.hv-ch-orb { fill: #FFFFFF; opacity: 0; offset-rotate: 0deg; filter: drop-shadow(0 0 7px #AE8AEA) drop-shadow(0 0 16px #6C2BD9); }
.hv-ch-orb.is-a { offset-path: path("M80,0 C80,74 170,50 170,124"); }
.hv-ch-orb.is-b { offset-path: path("M320,0 C320,74 230,50 230,124"); }

/* business pills */
.hv-ch-biz { position: absolute; top: 24px; z-index: 1; display: flex; align-items: center; gap: 9px; max-width: 47%;
  padding: 5px 13px 5px 5px; border-radius: 999px; background: #1E1929; border: 1.5px solid #3A3350; transform: translateY(-50%);
  box-shadow: 0 0 0 6px rgba(174,138,234,.06), 0 0 26px rgba(174,138,234,.12), 0 16px 30px -14px rgba(0,0,0,.95); }
.hv-ch-biz.is-a { left: 0; }
.hv-ch-biz.is-a .hv-ch-biz-t { width: min-content; }
.hv-ch-biz.is-b .hv-ch-biz-t { max-width: 6.6em; }
.hv-ch-biz.is-b { right: 0; }
.hv-ch-biz-ic { position: relative; width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; border: 1px solid #4A3F66; background: radial-gradient(circle at 50% 32%, #33284D 0%, #1A1524 76%); }
.hv-ch-biz-ic svg { position: relative; width: 17px; height: 17px; fill: none; stroke: #FFFFFF; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.hv-ch-biz-t { min-width: 0; max-width: 5.5em; font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: 14px; font-weight: 700;
  line-height: 1.15; letter-spacing: -0.01em; color: #FFFFFF; }
.hv-ch-lit, .hv-ch-ring { position: absolute; inset: -1.5px; border-radius: 999px; pointer-events: none; }
.hv-ch-lit { border: 2px solid #AE8AEA; box-shadow: 0 0 22px rgba(174,138,234,.5), 0 0 0 5px rgba(108,43,217,.16); opacity: 0; }
.hv-ch-ring { border: 1.5px solid #AE8AEA; opacity: 0; }

/* the charity: a pill node whose centre sits on the pipes' ends, with its chip on it */
.hv-ch-cha { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-top: -23px; }
.hv-ch-node { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 6px;
  border-radius: 999px; background: #1E1929; border: 1.5px solid #4A3F66;
  box-shadow: 0 0 0 7px rgba(174,138,234,.07), 0 0 34px rgba(174,138,234,.2), 0 18px 34px -16px rgba(0,0,0,.95);
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  color: #FFFFFF; white-space: nowrap; }
.hv-ch-node .hv-ch-lit, .hv-ch-node .hv-ch-ring { inset: -1.5px; }
.hv-ch-node-ic { position: relative; width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; background: linear-gradient(180deg, #7B3BEA 0%, #5A21BD 100%); box-shadow: 0 0 16px rgba(108,43,217,.7); }
.hv-ch-node-ic svg { width: 17px; height: 17px; fill: none; stroke: #FFFFFF; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.hv-ch-chip { position: relative; overflow: hidden; display: inline-flex; align-items: center; height: 24px; margin-top: 9px; padding: 0 11px;
  border-radius: 999px; background: #241C38; border: 1px solid rgba(174,138,234,.45); color: #E6DAFB;
  font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.hv-ch-chip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%); }

/* the toast and the charity's update (stacked in the still frame; one at a time when animated) */
.hv-ch-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
.hv-ch-toasts { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hv-ch-toast { position: relative; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 15px 8px 8px; border-radius: 14px;
  background: #FFFFFF; color: #141219; box-shadow: 0 24px 50px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(174,138,234,.25);
  font-size: 12.5px; font-weight: 700; line-height: 1.35; text-wrap: balance; transform-origin: 50% 0; }
.hv-ch-toast.is-b { display: none; }
.hv-ch-toast i { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: #6C2BD9; }
.hv-ch-toast svg { width: 15px; height: 15px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hv-ch-upd { position: relative; width: 100%; background: #FFFFFF; color: #141219; border-radius: 16px; padding: 13px 16px 14px;
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(174,138,234,.25); transform-origin: 50% 0; }
.hv-ch-toast.is-a::before, .hv-ch-upd::before { content: ""; position: absolute; top: -5px; left: calc(50% - 6px); width: 12px; height: 12px;
  border-radius: 2px; background: #FFFFFF; transform: rotate(45deg); }
.hv-ch-upd-h { position: relative; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.35; color: #6C2BD9; }
.hv-ch-upd-h i { width: 20px; height: 20px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #F5F0FC; }
.hv-ch-upd-h svg { width: 12px; height: 12px; fill: none; stroke: #6C2BD9; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hv-ch-l { margin: 8px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: #141219; }
.hv-ch-l.is-2 { position: relative; margin-top: 9px; padding-top: 9px; }
.hv-ch-l.is-2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #EEE9F5; transform-origin: 0 50%; }
.hv-ch-l span { display: inline-block; }

/* ---------- the loop ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hv-ch { --hv-ch-t: 12s; --hv-ch-b: 2.4s; }

  /* business side: the pill lights, its icon bumps and sends a ring, its pipe's current brightens */
  .hv-ch-biz-t { opacity: .7; animation: hv-ch-lab var(--hv-ch-t) linear infinite; }
  .hv-ch-biz .hv-ch-lit { animation: hv-ch-blit var(--hv-ch-t) linear infinite; }
  .hv-ch-biz-ic { animation: hv-ch-bump var(--hv-ch-t) linear infinite; }
  .hv-ch-biz-ic .hv-ch-ring { animation: hv-ch-bring var(--hv-ch-t) linear infinite; }
  .hv-ch-biz.is-b .hv-ch-biz-t, .hv-ch-biz.is-b .hv-ch-lit, .hv-ch-biz.is-b .hv-ch-biz-ic, .hv-ch-biz.is-b .hv-ch-ring { animation-delay: var(--hv-ch-b); }

  .hv-ch-cur { opacity: .35; animation: hv-ch-cur var(--hv-ch-t) linear infinite; }
  .hv-ch-cur.is-b { animation-delay: var(--hv-ch-b); }
  .hv-ch-cur path { animation: hv-ch-march 1.5s linear infinite; }

  /* charity side: a pulse on each arrival, lit while its update is written */
  .hv-ch-node { animation: hv-ch-cbump var(--hv-ch-t) linear infinite; }
  .hv-ch-node .hv-ch-lit { animation: hv-ch-clit var(--hv-ch-t) linear infinite; }
  .hv-ch-node .hv-ch-ring { animation: hv-ch-cring var(--hv-ch-t) linear infinite; }
  .hv-ch-chip::after { animation: hv-ch-shine var(--hv-ch-t) linear infinite; }

  /* the foot: one toast per arrival, then the update takes their place */
  .hv-ch-foot { display: grid; gap: 0; }
  .hv-ch-foot > * { grid-area: 1 / 1; }
  .hv-ch-toasts { align-self: start; }
  .hv-ch-toast { opacity: 0; animation: hv-ch-toast-a var(--hv-ch-t) linear infinite; }
  .hv-ch-toast.is-b { display: flex; animation-name: hv-ch-toast-b; }
  .hv-ch-upd { opacity: 0; animation: hv-ch-upd var(--hv-ch-t) linear infinite; }
  .hv-ch-upd-h { opacity: 0; animation: hv-ch-upd-h var(--hv-ch-t) linear infinite; }
  .hv-ch-l.is-2::before { transform: scaleX(0); animation: hv-ch-rule var(--hv-ch-t) linear infinite; }
  .hv-ch-l span { opacity: 0; animation: hv-ch-word var(--hv-ch-t) linear infinite backwards; }
  .hv-ch-l.is-1 span { animation-delay: calc(var(--i) * .1s + 6.75s); }
  .hv-ch-l.is-2 span { animation-delay: calc(var(--i) * .1s + 8.1s); }
}
/* the still frame: the update sits under the toast, so only the toast points up at the charity */
@media (prefers-reduced-motion: reduce) {
  .hv-ch-upd::before { display: none; }
}
/* the orbs and their trails ride the pipes with offset-path; without support they stay hidden */
@supports (offset-path: path("M0,0 L1,1")) {
  @media (prefers-reduced-motion: no-preference) {
    .hv-ch-orb { animation: hv-ch-ride var(--hv-ch-t) linear infinite, hv-ch-orbo var(--hv-ch-t) linear infinite; }
    .hv-ch-tr { animation: hv-ch-tro var(--hv-ch-t) linear infinite; }
    .hv-ch-t1 { animation: hv-ch-t1 var(--hv-ch-t) linear infinite; }
    .hv-ch-t2 { animation: hv-ch-t2 var(--hv-ch-t) linear infinite; }
    .hv-ch-t3 { animation: hv-ch-t3 var(--hv-ch-t) linear infinite; }
    .hv-ch-orb.is-b, .hv-ch-tr.is-b, .hv-ch-tr.is-b path { animation-delay: var(--hv-ch-b); }
  }
}

/* the money: each business → the charity, along its own pipe (0.6–2.2 s; the supporter 2.4 s later) */
@keyframes hv-ch-ride { 0%, 5% { offset-distance: 0%; animation-timing-function: cubic-bezier(.45,0,.55,1); } 18.33%, 100% { offset-distance: 100%; } }
@keyframes hv-ch-orbo { 0%, 5.4% { opacity: 0; } 6.6% { opacity: 1; } 16.8% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes hv-ch-t1 { 0%, 5% { stroke-dashoffset: 150; animation-timing-function: cubic-bezier(.45,0,.55,1); } 18.33%, 100% { stroke-dashoffset: -850; } }
@keyframes hv-ch-t2 { 0%, 5% { stroke-dashoffset: 80; animation-timing-function: cubic-bezier(.45,0,.55,1); } 18.33%, 100% { stroke-dashoffset: -920; } }
@keyframes hv-ch-t3 { 0%, 5% { stroke-dashoffset: 34; animation-timing-function: cubic-bezier(.45,0,.55,1); } 18.33%, 100% { stroke-dashoffset: -966; } }
@keyframes hv-ch-tro { 0%, 5% { opacity: 0; } 6% { opacity: 1; } 17.6% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes hv-ch-march { to { stroke-dashoffset: -13; } }
@keyframes hv-ch-cur { 0%, 4.5% { opacity: .35; } 6.5%, 18.5% { opacity: 1; } 23%, 100% { opacity: .35; } }

/* the sending business */
@keyframes hv-ch-lab { 0%, 3.5% { opacity: .7; } 5%, 19% { opacity: 1; } 23%, 100% { opacity: .7; } }
@keyframes hv-ch-blit { 0%, 3.5% { opacity: 0; } 5%, 16% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes hv-ch-bring { 0%, 4.6% { opacity: 0; transform: scale(.9); } 5% { opacity: .85; transform: scale(.9); } 13%, 100% { opacity: 0; transform: scale(2); } }
@keyframes hv-ch-bump { 0%, 4.4% { transform: scale(1); } 5.4% { transform: scale(1.12); } 7.6%, 100% { transform: scale(1); } }

/* the charity: arrivals at 2.2 s and 4.6 s, then lit while its update is written */
@keyframes hv-ch-cbump {
  0%, 18.2% { transform: scale(1); } 19.3% { transform: scale(1.06); } 22%, 38.2% { transform: scale(1); }
  39.3% { transform: scale(1.06); } 42%, 100% { transform: scale(1); }
}
@keyframes hv-ch-clit {
  0%, 18.1% { opacity: 0; } 19.2% { opacity: 1; } 28%, 38.1% { opacity: 0; } 39.2% { opacity: 1; }
  47% { opacity: .5; } 92% { opacity: .5; } 97%, 100% { opacity: 0; }
}
@keyframes hv-ch-cring {
  0%, 18.2% { opacity: 0; transform: scale(1); } 18.5% { opacity: .9; transform: scale(1); } 26% { opacity: 0; transform: scale(1.16, 1.75); }
  38.2% { opacity: 0; transform: scale(1); } 38.5% { opacity: .9; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(1.16, 1.75); }
}
@keyframes hv-ch-shine {
  0%, 18.6% { opacity: 0; transform: translateX(-110%); } 19.2% { opacity: 1; } 25% { opacity: 1; transform: translateX(240%); }
  25.1%, 38.6% { opacity: 0; transform: translateX(-110%); } 39.2% { opacity: 1; } 45% { opacity: 1; transform: translateX(240%); }
  45.1%, 100% { opacity: 0; transform: translateX(240%); }
}

/* "Confirm each payment…" pops on each arrival (2.3 s, 4.7 s); both clear as the update rises */
@keyframes hv-ch-toast-a {
  0%, 18.8% { opacity: 0; transform: translateY(-8px) scale(.6); animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
  22.5% { opacity: 1; transform: none; }
  46.5% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  49%, 100% { opacity: 0; transform: translateY(-6px) scale(.97); }
}
@keyframes hv-ch-toast-b {
  0%, 38.8% { opacity: 0; transform: translateY(-8px) scale(.6); animation-timing-function: cubic-bezier(.3,1.6,.5,1); }
  42.5% { opacity: 1; transform: none; }
  46.5% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  49%, 100% { opacity: 0; transform: translateY(-6px) scale(.97); }
}
/* the update rises at 5.9 s, its header at 6.1 s, then each word at its own delay (line 2 and its rule at 8.1 s) */
@keyframes hv-ch-upd {
  0%, 49% { opacity: 0; transform: translateY(16px) scale(.97); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  53.5% { opacity: 1; transform: none; }
  94% { opacity: 1; transform: none; animation-timing-function: ease-in; }
  98%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes hv-ch-upd-h { 0%, 50.5% { opacity: 0; transform: translateX(-6px); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes hv-ch-rule { 0%, 66.5% { transform: scaleX(0); animation-timing-function: cubic-bezier(.2,.7,.2,1); } 70%, 100% { transform: scaleX(1); } }
/* each word: shown at its own delay and kept for 6 s (until the card has faded), then reset unseen */
@keyframes hv-ch-word {
  0% { opacity: 0; transform: translateY(.35em); animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  2.6% { opacity: 1; transform: none; }
  50% { opacity: 1; transform: none; }
  50.5%, 100% { opacity: 0; transform: translateY(.35em); }
}

/* ---------- smaller screens ---------- */
@media (max-width: 700px) {
  .hv-ch-card { padding: 18px 16px 18px; border-radius: 22px; }
  .hv-ch-top { gap: 6px; }
  .hv-ch-eg, .hv-ch .dp-draft { padding: 0 8px; letter-spacing: .04em; }
  .hv-ch-cap { margin-top: 14px; font-size: 15px; max-width: 18em; text-wrap: balance; }
  .hv-ch-biz { gap: 7px; padding: 4px 12px 4px 4px; }
  .hv-ch-biz-ic { width: 30px; height: 30px; }
  .hv-ch-biz-ic svg { width: 16px; height: 16px; }
  .hv-ch-biz-t { font-size: 13.5px; }
  .hv-ch-cha { margin-top: -21px; }
  .hv-ch-node { height: 42px; gap: 9px; padding: 0 17px 0 5px; font-size: 15px; }
  .hv-ch-node-ic { width: 31px; height: 31px; }
  .hv-ch-node-ic svg { width: 16px; height: 16px; }
  .hv-ch-chip { font-size: 11px; padding: 0 10px; }
  .hv-ch-toast { font-size: 12.5px; }
  .hv-ch-upd { padding: 12px 14px 13px; }
  .hv-ch-l { font-size: 13.5px; }
}
@media (max-width: 440px) {
  /* the toast wraps here: keep it hugging its two lines instead of stretching */
  .hv-ch-toast span { max-width: 12.6em; }
}
@media (max-width: 380px) {
  .hv-ch-card { padding: 16px 12px 16px; }
  /* keep the two tags on one row on the narrowest phones */
  .hv-ch-top { gap: 5px; }
  .hv-ch-eg, .hv-ch .dp-draft { letter-spacing: 0; padding: 0 7px; }
  .hv-ch-cap { font-size: 14.5px; }
  .hv-ch-biz { gap: 6px; padding: 4px 10px 4px 4px; }
  .hv-ch-biz-ic { width: 28px; height: 28px; }
  .hv-ch-biz-t { font-size: 12.5px; }
  .hv-ch-cha { margin-top: -20px; }
  .hv-ch-node { height: 40px; gap: 8px; padding: 0 15px 0 5px; font-size: 14.5px; }
  .hv-ch-node-ic { width: 29px; height: 29px; }
  .hv-ch-chip { letter-spacing: -0.01em; padding: 0 9px; }
  .hv-ch-toast { font-size: 12px; padding-right: 12px; }
  .hv-ch-upd-h { font-size: 11.5px; }
  .hv-ch-l { font-size: 13px; }
}