/* DigiDonate v3 — homepage hero visual: the gift path (Match → Give → Show).

   Same visual language as the root site's donation trace: a dark dotted card, a thick pipe with a
   marching dotted current, a white orb with a lilac glow and a comet trail, halo rings on the nodes.

   The money only ever rides the straight pipe from the business to the charity. DigiDonate sits
   above, off the pipe, and only touches the business (Match) and the charity's update (Show) with
   thin dashed information lines in a different style. Its node dims while the gift moves.

   One 12 s loop; every keyframe below is a % of it (1 s = 8.33%).
     Match  0.3–3.9 s   info pulse DigiDonate → business, caption
     Give   4.0–7.8 s   DGR check on the charity, then the orb rides business → charity
     Show   7.9–11.6 s  the charity's update rises, info pulse charity → DigiDonate
   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-home { position: relative; width: 100%; }
.hv-home-card { position: relative; overflow: hidden; padding: 22px 24px 24px; border-radius: 26px;
  background-color: #15121D;
  background-image: radial-gradient(ellipse 70% 46% at 50% 24%, 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-home-card svg { display: block; }

/* top row: Example only + Draft */
.hv-home-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hv-home-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; }

/* Match → Give → Show track with a highlight that slides from step to step */
.hv-home-steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
  align-items: center; margin-top: 18px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.03); border: 1px solid #272233; }
.hv-home-hl { display: none; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 36px) / 3); border-radius: 999px;
  background: linear-gradient(180deg, #7B3BEA 0%, #6C2BD9 100%);
  box-shadow: 0 8px 22px -8px rgba(108,43,217,.95), inset 0 1px 0 rgba(255,255,255,.18); }
.hv-home-step { position: relative; display: flex; align-items: center; justify-content: center; height: 32px;
  border-radius: 999px; background: rgba(108,43,217,.3); font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: #FFFFFF; }
.hv-home-chev { position: relative; width: 12px; height: 12px; justify-self: center; fill: none; stroke: #7C7790;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* the diagram: SVG lines underneath, HTML nodes on top (so the orb slips under them at each end) */
.hv-home-map { position: relative; aspect-ratio: 400 / 168; margin-top: 20px; }
.hv-home-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hv-home-iline, .hv-home-ihi { fill: none; stroke-width: 1.5; stroke-dasharray: 5 6; }
.hv-home-iline { stroke: #5A5370; }
.hv-home-ihi { stroke: #AE8AEA; opacity: .85; }
.hv-home-pipe { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 10; stroke-linecap: round; }
.hv-home-cur { opacity: .6; }
.hv-home-cur path { fill: none; stroke: #AE8AEA; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 11; }
.hv-home-trail { fill: none; stroke: #AE8AEA; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 662 1000; stroke-dashoffset: 0; opacity: .6; }
.hv-home-orb circle { fill: #FFFFFF; filter: drop-shadow(0 0 7px #AE8AEA) drop-shadow(0 0 16px #6C2BD9); }
.hv-home-orb circle { transform: translateX(196px); }
.hv-home-ip { opacity: 0; }
/* an information signal is a short streak that lies along its dashed line: never round, so it can't read as the money */
.hv-home-ip rect { fill: #E9DEFB; filter: drop-shadow(0 0 3px #AE8AEA) drop-shadow(0 0 7px rgba(108,43,217,.9)); offset-rotate: auto; }
.hv-home-ip.is-b rect { offset-path: path("M200,28 C112,28 52,56 52,136"); }
.hv-home-ip.is-c rect { offset-path: path("M348,136 C348,56 288,28 200,28"); }

/* DigiDonate node (off the pipe) */
.hv-home-dd { position: absolute; left: 50%; top: 16.667%; transform: translate(-50%, -50%); display: flex; align-items: center;
  gap: 9px; height: 40px; padding: 0 16px 0 5px; border-radius: 999px; background: #1E1929; border: 1px solid #3A3350;
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.95); font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: #FFFFFF; white-space: nowrap; }
.hv-home-dd-ic { position: relative; width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #7B3BEA 0%, #5A21BD 100%); }
.hv-home-dd-t { position: relative; }
.hv-home-dd-ic svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* business + charity nodes */
.hv-home-node { position: absolute; top: 80.95%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid #3A3350;
  background: radial-gradient(circle at 50% 32%, #2C2342 0%, #17131F 72%);
  box-shadow: 0 0 0 7px rgba(174,138,234,.08), 0 0 30px rgba(174,138,234,.16), 0 16px 30px -14px rgba(0,0,0,.95); }
.hv-home-node.is-biz { left: 13%; }
.hv-home-node.is-cha { left: 87%; }
.hv-home-node > svg { position: relative; width: 23px; height: 23px; fill: none; stroke: #FFFFFF; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.hv-home-lit, .hv-home-ring, .hv-home-scan { position: absolute; inset: -1.5px; border-radius: 999px; pointer-events: none; }
.hv-home-lit { border: 2px solid #AE8AEA; box-shadow: 0 0 22px rgba(174,138,234,.5), 0 0 0 6px rgba(108,43,217,.16); }
.hv-home-ring { border: 1.5px solid #AE8AEA; opacity: 0; }
.hv-home-scan { inset: -8px; border: 2px solid transparent; border-top-color: #AE8AEA; border-right-color: rgba(174,138,234,.35); opacity: 0; }
.hv-home-mag { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 999px; display: flex;
  align-items: center; justify-content: center; background: #6C2BD9; border: 2px solid #15121D;
  box-shadow: 0 0 14px rgba(108,43,217,.8); }
.hv-home-mag svg { width: 12px; height: 12px; fill: none; stroke: #FFFFFF; stroke-width: 2.8; stroke-linecap: round; }
.hv-home-dd .hv-home-lit { inset: -1px; }
.hv-home-dd .hv-home-ring { inset: -1px; }

/* labels under the pipe: business · the pipe's own line · charity */
.hv-home-labels { display: grid; grid-template-columns: 26% minmax(0, 1fr) 26%; align-items: start; margin-top: 10px; text-align: center; }
.hv-home-lab { font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: 14.5px; font-weight: 700;
  line-height: 1.18; letter-spacing: -0.01em; color: #FFFFFF; max-width: 6.4em; margin: 0 auto; }
.hv-home-pl { padding: 1px 8px 0; font-size: 13px; font-weight: 600; line-height: 1.38; color: #CDB6F4; text-wrap: balance; }

/* per-step captions and the charity's update (stacked in the still frame; one at a time when animated) */
.hv-home-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 18px; }
.hv-home-cap { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px 6px 7px; border-radius: 999px;
  background: rgba(174,138,234,.1); border: 1px solid rgba(174,138,234,.32); color: #FFFFFF; font-size: 13px; font-weight: 600;
  line-height: 1.3; }
.hv-home-cap.is-match { align-self: flex-start; }
.hv-home-cap.is-give { align-self: flex-end; }
.hv-home-cap i { width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #6C2BD9; }
.hv-home-cap svg { width: 13px; height: 13px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hv-home-upd { position: relative; 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: 87% 0; }
.hv-home-upd::before { content: ""; position: absolute; top: -5px; left: calc(87% - 6px); width: 12px; height: 12px; border-radius: 2px;
  background: #FFFFFF; transform: rotate(45deg); }
.hv-home-upd-h { position: relative; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; line-height: 1.35; color: #6C2BD9; }
.hv-home-upd-h i { width: 20px; height: 20px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #F5F0FC; }
.hv-home-upd-h svg { width: 12px; height: 12px; fill: none; stroke: #6C2BD9; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hv-home-upd-b { position: relative; overflow: hidden; margin-top: 7px; }
.hv-home-upd-b p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: #141219; }
.hv-home-wipe { display: none; position: absolute; top: 0; bottom: 0; left: -40px; right: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0, #FFFFFF 40px); }

/* ---------- the loop ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hv-home { --hv-home-t: 12s; }
  .hv-home-card * { animation-duration: var(--hv-home-t); animation-timing-function: linear; animation-iteration-count: infinite; }

  .hv-home-hl { display: block; animation-name: hv-home-hl; }
  .hv-home-step { background: none; animation-name: hv-home-s1; }
  .hv-home-step.is-give { animation-name: hv-home-s2; }
  .hv-home-step.is-show { animation-name: hv-home-s3; }
  .hv-home-chev { stroke: #4A4360; }

  .hv-home-ihi { opacity: 0; animation-name: hv-home-ihi-b; }
  .hv-home-ihi.is-c { animation-name: hv-home-ihi-c; }
  .hv-home-cur { opacity: .4; animation-name: hv-home-cur; }
  .hv-home-cur path { animation: hv-home-march 1.5s linear infinite; }
  .hv-home-trail { stroke-dasharray: 220 1000; stroke-dashoffset: 220; opacity: 1; animation-name: hv-home-trail; }
  .hv-home-trail-g { opacity: 0; animation-name: hv-home-trail-g; }
  .hv-home-orb { opacity: 0; animation-name: hv-home-orb-g; }
  .hv-home-orb circle { transform: translateX(0); animation-name: hv-home-orb; }

  /* dim the pill's contents, not the pill: its background stays opaque so the dashed lines never show through it */
  .hv-home-dd-ic, .hv-home-dd-t { animation-name: hv-home-dd; }
  .hv-home-dd .hv-home-lit { opacity: 0; animation-name: hv-home-dd-lit; }
  .hv-home-dd .hv-home-ring { animation-name: hv-home-dd-ring; }

  .hv-home-node.is-biz .hv-home-lit { opacity: 0; animation-name: hv-home-b-lit; }
  .hv-home-node.is-biz .hv-home-ring { animation-name: hv-home-b-ring; }
  .hv-home-node.is-cha { animation-name: hv-home-c-bump; }
  .hv-home-node.is-cha .hv-home-lit { opacity: 0; animation-name: hv-home-c-lit; }
  .hv-home-node.is-cha .hv-home-ring { animation-name: hv-home-c-ring; }
  .hv-home-scan { animation-name: hv-home-scan; }
  .hv-home-mag { opacity: 0; animation-name: hv-home-mag; }
  .hv-home-pl { animation-name: hv-home-pl; }

  .hv-home-foot { display: grid; gap: 0; }
  .hv-home-foot > * { grid-area: 1 / 1; }
  .hv-home-cap { opacity: 0; }
  .hv-home-cap.is-match { align-self: center; justify-self: start; animation-name: hv-home-cap-m; }
  .hv-home-cap.is-give { align-self: center; justify-self: end; animation-name: hv-home-cap-g; }
  .hv-home-upd { opacity: 0; animation-name: hv-home-upd; }
  .hv-home-upd-h { animation-name: hv-home-upd-h; }
  .hv-home-wipe { display: block; animation-name: hv-home-wipe; }
}
/* the little information pulses ride the dashed lines with offset-path; without support they stay hidden */
@supports (offset-path: path("M0,0 L1,1")) {
  @media (prefers-reduced-motion: no-preference) {
    .hv-home-ip.is-b { animation-name: hv-home-ip-b; }
    .hv-home-ip.is-c { animation-name: hv-home-ip-c; }
    .hv-home-ip.is-b rect { animation-name: hv-home-ride-b; }
    .hv-home-ip.is-c rect { animation-name: hv-home-ride-c; }
  }
}

/* Match → Give → Show highlight */
@keyframes hv-home-hl {
  0% { opacity: 0; transform: translateX(0); }
  2.5% { opacity: 1; }
  30.5% { transform: translateX(0); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  34% { transform: translateX(calc(100% + 14px)); }
  63% { transform: translateX(calc(100% + 14px)); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  66.5% { transform: translateX(calc(200% + 28px)); }
  95% { opacity: 1; }
  98.5%, 100% { opacity: 0; transform: translateX(calc(200% + 28px)); }
}
@keyframes hv-home-s1 { 0% { opacity: .45; } 2.5%, 30.5% { opacity: 1; } 33%, 100% { opacity: .45; } }
@keyframes hv-home-s2 { 0%, 31% { opacity: .45; } 34%, 63% { opacity: 1; } 65.5%, 100% { opacity: .45; } }
@keyframes hv-home-s3 { 0%, 64% { opacity: .45; } 67%, 95% { opacity: 1; } 98%, 100% { opacity: .45; } }

/* information lines (dashed, never the money) */
@keyframes hv-home-ihi-b { 0%, 3% { opacity: 0; } 5%, 16% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes hv-home-ihi-c { 0%, 75% { opacity: 0; } 77%, 89% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes hv-home-ip-b { 0%, 4.5% { opacity: 0; } 6%, 14.5% { opacity: 1; } 15.5%, 100% { opacity: 0; } }
@keyframes hv-home-ip-c { 0%, 76.5% { opacity: 0; } 78%, 86% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes hv-home-ride-b { 0%, 5% { offset-distance: 0%; animation-timing-function: cubic-bezier(.45,0,.55,1); } 15.5%, 100% { offset-distance: 100%; } }
@keyframes hv-home-ride-c { 0%, 77% { offset-distance: 0%; animation-timing-function: cubic-bezier(.45,0,.55,1); } 87%, 100% { offset-distance: 100%; } }

/* the money: business → charity, straight down the pipe */
@keyframes hv-home-march { to { stroke-dashoffset: -13; } }
@keyframes hv-home-cur { 0%, 39% { opacity: .4; } 42%, 56% { opacity: 1; } 60%, 100% { opacity: .4; } }
@keyframes hv-home-orb { 0%, 42% { transform: translateX(0); animation-timing-function: cubic-bezier(.45,0,.55,1); } 55%, 100% { transform: translateX(296px); } }
@keyframes hv-home-orb-g { 0%, 42% { opacity: 0; } 43%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes hv-home-trail { 0%, 42% { stroke-dashoffset: 220; animation-timing-function: cubic-bezier(.45,0,.55,1); } 55%, 100% { stroke-dashoffset: -780; } }
@keyframes hv-home-trail-g { 0%, 42% { opacity: 0; } 43%, 55% { opacity: .9; } 57.5%, 100% { opacity: 0; } }
@keyframes hv-home-pl { 0%, 38% { opacity: .8; } 41%, 58% { opacity: 1; } 61%, 100% { opacity: .8; } }

/* DigiDonate node: lit when it sends the match and when the update is reported; dimmed while the gift moves */
@keyframes hv-home-dd { 0%, 33% { opacity: 1; } 36.5%, 63% { opacity: .42; } 67%, 100% { opacity: 1; } }
@keyframes hv-home-dd-lit { 0%, 2% { opacity: 0; } 4%, 11% { opacity: 1; } 16%, 86.5% { opacity: 0; } 88.5%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes hv-home-dd-ring {
  0%, 4% { opacity: 0; transform: scale(1); } 4.5% { opacity: .8; transform: scale(1); } 12% { opacity: 0; transform: scale(1.22, 1.6); }
  86.5% { opacity: 0; transform: scale(1); } 87% { opacity: .8; transform: scale(1); } 94.5%, 100% { opacity: 0; transform: scale(1.22, 1.6); }
}

/* business node */
@keyframes hv-home-b-lit { 0%, 15% { opacity: 0; } 16.5%, 47% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes hv-home-b-ring {
  0%, 15.5% { opacity: 0; transform: scale(.9); } 16% { opacity: .85; transform: scale(.9); } 24% { opacity: 0; transform: scale(1.9); }
  41.5% { opacity: 0; transform: scale(.9); } 42% { opacity: .85; transform: scale(.9); } 50%, 100% { opacity: 0; transform: scale(1.9); }
}

/* charity node: matched (soft), DGR check, the gift lands, then it reports */
@keyframes hv-home-c-lit { 0%, 17% { opacity: 0; } 20%, 28% { opacity: .5; } 31%, 54.5% { opacity: 0; } 56%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes hv-home-c-ring { 0%, 54.5% { opacity: 0; transform: scale(.9); } 55% { opacity: .85; transform: scale(.9); } 63%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes hv-home-c-bump { 0%, 54.5% { transform: scale(1); } 56% { transform: scale(1.1); } 59%, 100% { transform: scale(1); } }
@keyframes hv-home-scan { 0%, 34.5% { opacity: 0; transform: rotate(0deg); } 36%, 46% { opacity: 1; } 48%, 100% { opacity: 0; transform: rotate(540deg); } }
@keyframes hv-home-mag {
  0%, 35% { opacity: 0; transform: scale(.3); } 37% { opacity: 1; transform: scale(1.15); } 38.5% { transform: scale(1); }
  61% { opacity: 1; transform: scale(1); } 63%, 100% { opacity: 0; transform: scale(.6); }
}

/* captions + the update card */
@keyframes hv-home-cap-m { 0%, 15.5% { opacity: 0; transform: translateY(8px); } 18.5%, 31% { opacity: 1; transform: none; } 33.5%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hv-home-cap-g { 0%, 35.5% { opacity: 0; transform: translateY(8px); } 38.5%, 60.5% { opacity: 1; transform: none; } 63.5%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes hv-home-upd {
  0%, 66.5% { opacity: 0; transform: translateY(18px) scale(.97); }
  70% { opacity: 1; transform: none; animation-timing-function: linear; }
  95% { opacity: 1; transform: none; }
  98.5%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes hv-home-upd-h { 0%, 68.5% { opacity: 0; } 71.5%, 100% { opacity: 1; } }
@keyframes hv-home-wipe { 0%, 71.5% { transform: translateX(0); animation-timing-function: cubic-bezier(.3,0,.4,1); } 81%, 100% { transform: translateX(105%); } }

/* ---------- smaller screens ---------- */
@media (max-width: 700px) {
  .hv-home-card { padding: 18px 16px 18px; border-radius: 22px; }
  .hv-home-top { gap: 6px; }
  .hv-home-eg, .hv-home .dp-draft { padding: 0 8px; font-size: 11px; letter-spacing: .04em; }
  .hv-home-steps { margin-top: 16px; }
  .hv-home-step { font-size: 14px; }
  .hv-home-map { margin-top: 16px; }
  .hv-home-dd { height: 34px; gap: 7px; padding: 0 13px 0 4px; font-size: 14px; }
  .hv-home-dd-ic { width: 26px; height: 26px; }
  .hv-home-dd-ic svg { width: 14px; height: 14px; }
  .hv-home-node { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .hv-home-node > svg { width: 20px; height: 20px; }
  .hv-home-mag { width: 22px; height: 22px; top: -7px; right: -7px; }
  .hv-home-lab { font-size: 13.5px; }
  .hv-home-pl { font-size: 12.5px; padding: 1px 4px 0; }
  .hv-home-cap { font-size: 12.5px; }
  .hv-home-upd { padding: 12px 14px 13px; }
  .hv-home-upd-b p { font-size: 13.5px; }
}
@media (max-width: 380px) {
  .hv-home-card { padding: 16px 12px 16px; }
  .hv-home-step { font-size: 13px; }
  .hv-home-dd { height: 30px; padding: 0 11px 0 3px; font-size: 13px; }
  .hv-home-dd-ic { width: 23px; height: 23px; }
  .hv-home-node { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .hv-home-node > svg { width: 18px; height: 18px; }
  .hv-home-mag { width: 20px; height: 20px; top: -6px; right: -6px; }
  .hv-home-mag svg { width: 10px; height: 10px; }
  .hv-home-lab { font-size: 12.5px; }
  .hv-home-pl { font-size: 11.5px; padding: 1px 2px 0; }
  .hv-home-cap { font-size: 12px; padding-right: 12px; border-radius: 16px; }
  .hv-home-upd-h { font-size: 11.5px; }
  .hv-home-upd-b p { font-size: 13px; }
}