/* DigiDonate v3 — How it works hero visual: the Match → Give → Show orbit.
   Same language as the root .dx-orbit: a ring with lit nodes, a glowing orb with a
   tapering comet trail, a slowly counter-rotating dotted outer ring, and the centre
   cycling the step. One 12 s loop, 4 s per step: the orb docks in a node (the node
   lights, a halo pulses out), the centre shows that step with a small scene, then the
   orb launches along the ring to the next node.
   The orb here marks the step, not money. The only money in the visual is the Give
   scene, where a coin rides straight from the business tile into the charity's heart.
   Every class and keyframe is prefixed hv-how-. CSS + inline SVG only, no JS. */

.hv-how { position: relative; width: 100%; max-width: 480px; }
.hv-how-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.hv-how-eg { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
             border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); color: #D7D2E2;
             font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; font-size: 11px; font-weight: 700;
             letter-spacing: .1em; line-height: 1; text-transform: uppercase; white-space: nowrap; }

@media (max-width: 359px) {
  /* keep the two tags on one row on the narrowest phones */
  .hv-how-tags { gap: 6px; }
  .hv-how-eg, .hv-how-tags .dp-draft { letter-spacing: 0; padding: 0 7px; }
}

.hv-how-orbit { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.hv-how-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* soft purple glow behind the centre, breathing */
.hv-how-glow { position: absolute; left: 50%; top: 50%; width: 64%; height: 64%; margin: -32% 0 0 -32%; border-radius: 999px;
               background: radial-gradient(circle, rgba(108,43,217,.34) 0%, rgba(108,43,217,.12) 42%, rgba(11,10,15,0) 70%);
               animation: hv-how-breathe 6s ease-in-out infinite; }
@keyframes hv-how-breathe { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.05); opacity: 1; } }

/* ---------- the ring ---------- */
.hv-how-dots { transform-origin: 240px 240px; animation: hv-how-unspin 60s linear infinite; }
@keyframes hv-how-unspin { to { transform: rotate(-360deg); } }

.hv-how-node .hv-how-base { fill: #15121D; stroke: #3A3350; stroke-width: 1.5; }
.hv-how-node text { font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: 20px; font-weight: 800;
                    text-anchor: middle; dominant-baseline: central; }
.hv-how-node .hv-how-num { fill: #7C7790; }
.hv-how-lit { opacity: 0; transform-box: fill-box; transform-origin: center;
              animation: hv-how-lit 12s linear infinite; animation-delay: var(--d, 0s); }
.hv-how-lit .hv-how-core-c { fill: #6C2BD9; stroke: #AE8AEA; stroke-width: 1.5;
                             filter: drop-shadow(0 0 8px rgba(108,43,217,.95)) drop-shadow(0 0 20px rgba(108,43,217,.6)); }
.hv-how-lit text { fill: #FFFFFF; }
.hv-how-halo { fill: #AE8AEA; opacity: .2; transform-box: fill-box; transform-origin: center;
               animation: hv-how-halo 2.2s ease-in-out infinite; }
@keyframes hv-how-halo { 0%, 100% { transform: scale(1); opacity: .2; } 50% { transform: scale(1.14); opacity: .1; } }
@keyframes hv-how-lit {
  0%        { opacity: 0; transform: scale(.82); animation-timing-function: cubic-bezier(.3,1.5,.5,1); }
  3%        { opacity: 1; transform: scale(1.1); animation-timing-function: ease-out; }
  7%, 24%   { opacity: 1; transform: scale(1); }
  28%, 100% { opacity: 0; transform: scale(1); }
}
.hv-how-pulse { fill: none; stroke: #AE8AEA; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center;
                animation: hv-how-pulse 12s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-pulse {
  0%        { opacity: .95; transform: scale(1); }
  10%       { opacity: 0; transform: scale(2.2); }
  11%       { opacity: 0; transform: scale(1); }
  12%       { opacity: .5; transform: scale(1); }
  21%, 100% { opacity: 0; transform: scale(2); }
}

/* the orb turns round the ring: it docks for 2.9 s, then travels for 1.1 s, so the
   turns run 2.9-4 s, 6.9-8 s and 10.9-12 s. */
.hv-how-spin { transform-origin: 240px 240px; animation: hv-how-spin 12s linear infinite; }
@keyframes hv-how-spin {
  0%, 24.17%      { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.5,0,.5,1); }
  33.33%, 57.5%   { transform: rotate(120deg); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  66.67%, 90.83%  { transform: rotate(240deg); animation-timing-function: cubic-bezier(.5,0,.5,1); }
  100%            { transform: rotate(360deg); }
}
/* its tapering comet trail: on each arc (pathLength 120 = 120 degrees) three dashes of
   46, 26 and 11 degrees ride with their heads on the orb (same easing as the turn), so the
   trail grows out of the node it leaves and never reaches behind it; on arrival the dashes
   drain into the next node. Thin and long at the back, thick and bright at the head. */
.hv-how-tails { filter: drop-shadow(0 0 5px rgba(108,43,217,.95)); }
.hv-how-tl { fill: none; stroke-linecap: round; animation: 12s linear infinite; animation-delay: var(--d, 0s); }
.hv-how-tl.is-a { stroke: #6C2BD9; stroke-width: 2; stroke-dasharray: 46 400; stroke-dashoffset: 48; animation-name: hv-how-tl-a; }
.hv-how-tl.is-b { stroke: #AE8AEA; stroke-width: 3.6; stroke-dasharray: 26 400; stroke-dashoffset: 28; animation-name: hv-how-tl-b; }
.hv-how-tl.is-c { stroke: #EFE6FF; stroke-width: 5.6; stroke-dasharray: 11 400; stroke-dashoffset: 13; animation-name: hv-how-tl-c; }
@keyframes hv-how-tl-a {
  0%, 24.17%  { stroke-dashoffset: 48;   animation-timing-function: cubic-bezier(.5,0,.5,1); }
  33.33%      { stroke-dashoffset: -72;  animation-timing-function: linear; }
  36.2%, 100% { stroke-dashoffset: -122; }
}
@keyframes hv-how-tl-b {
  0%, 24.17%  { stroke-dashoffset: 28;   animation-timing-function: cubic-bezier(.5,0,.5,1); }
  33.33%      { stroke-dashoffset: -92;  animation-timing-function: linear; }
  35%, 100%   { stroke-dashoffset: -122; }
}
@keyframes hv-how-tl-c {
  0%, 24.17%  { stroke-dashoffset: 13;   animation-timing-function: cubic-bezier(.5,0,.5,1); }
  33.33%      { stroke-dashoffset: -107; animation-timing-function: linear; }
  34.2%, 100% { stroke-dashoffset: -122; }
}
.hv-how-orb { fill: #FFFFFF; opacity: 0; transform-box: fill-box; transform-origin: center;
              filter: drop-shadow(0 0 7px #AE8AEA) drop-shadow(0 0 16px #6C2BD9);
              animation: hv-how-orb 4s linear infinite; }
@keyframes hv-how-orb {
  0%, 70.5% { opacity: 0; transform: scale(.4); }
  75%, 95%  { opacity: 1; transform: scale(1); }
  100%      { opacity: 0; transform: scale(.4); }
}

/* ---------- step labels on the ring (HTML so they stay readable on phones) ---------- */
.hv-how-lab { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center;
              height: max(21px, 5.6cqw); padding: 0 max(9px, 2.5cqw); border-radius: 999px;
              background: #15121D; border: 1px solid #2A2438; color: #E9E4F3; isolation: isolate;
              font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; font-size: max(11px, 2.9cqw); font-weight: 700;
              letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.hv-how-lab::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
                      background: #6C2BD9; border: 1px solid #AE8AEA; box-shadow: 0 6px 22px -6px #6C2BD9; opacity: 0;
                      animation: hv-how-lab 12s linear infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-lab { 0% { opacity: 0; } 3%, 24% { opacity: 1; } 28%, 100% { opacity: 0; } }
.hv-how-lab.is-1 { left: 50%; top: 4.4%; }
.hv-how-lab.is-2 { left: 81.75%; top: 77%; }
.hv-how-lab.is-3 { left: 18.25%; top: 77%; }

/* ---------- the centre: one panel per step, stacked in one grid cell ---------- */
.hv-how-core { position: absolute; left: 20%; right: 20%; top: 19%; bottom: 21%; display: grid; place-items: center;
               text-align: center; pointer-events: none; }
.hv-how-step, .hv-how-static { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; }
.hv-how-step { opacity: 0; animation: hv-how-step 12s cubic-bezier(.2,.7,.2,1) infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-step {
  0%        { opacity: 0; transform: translateY(10px); }
  4%, 27.5% { opacity: 1; transform: none; }
  30.5%, 100% { opacity: 0; transform: translateY(-8px); }
}
.hv-how-ico { display: block; width: 35cqw; height: 14cqw; overflow: visible; }
.hv-how-name { display: block; margin-top: 2.2cqw; font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
               font-size: max(22px, 8.2cqw); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: #FFFFFF; }
.hv-how-cap { display: block; max-width: 53cqw; margin-top: 1.8cqw; font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
              font-size: max(11.5px, 3.15cqw); font-weight: 500; line-height: 1.45; color: #C9C3D6; text-wrap: balance; }
.hv-how-static { display: none; max-width: 50cqw; font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
                 font-size: max(20px, 6.4cqw); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: #FFFFFF; text-wrap: balance; }

/* scene 1 · Match: a magnifier sweeps three cards and settles; the middle one lights with a heart */
.hv-how-m-mag { transform-box: view-box; transform-origin: 60px 22px; filter: drop-shadow(0 0 6px rgba(108,43,217,.9));
                animation: hv-how-m-mag 12s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-m-mag {
  0%        { opacity: 0; transform: translateX(-26px); }
  2.5%      { opacity: 1; transform: translateX(-26px); }
  8.5%      { opacity: 1; transform: translateX(26px); }
  13%       { opacity: 1; transform: translateX(0); }
  16%, 100% { opacity: 0; transform: translateX(0) scale(1.3); }
}
.hv-how-m-hit { opacity: 0; transform-box: fill-box; transform-origin: center;
                animation: hv-how-m-hit 12s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-m-hit {
  0%, 12.5% { opacity: 0; transform: scale(.9); }
  14.5%     { opacity: 1; transform: scale(1.12); }
  17%, 29%  { opacity: 1; transform: scale(1); }
  31%, 100% { opacity: 0; transform: scale(1); }
}

/* scene 2 · Give: a coin rides straight from the business tile into the charity's heart, twice */
.hv-how-g-flow { stroke-dasharray: 2 6; animation: hv-how-g-flow 1.2s linear infinite; }
@keyframes hv-how-g-flow { to { stroke-dashoffset: -8; } }
.hv-how-g-coin { filter: drop-shadow(0 0 4px #AE8AEA) drop-shadow(0 0 9px #6C2BD9);
                 animation: hv-how-g-coin 12s linear infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-g-coin {
  0%, 3%        { transform: translateX(0);    animation-timing-function: cubic-bezier(.45,0,.7,1); }
  11%           { transform: translateX(80px); }
  11.01%, 15%   { transform: translateX(0);    animation-timing-function: cubic-bezier(.45,0,.7,1); }
  23%, 100%     { transform: translateX(80px); }
}
.hv-how-g-tr { stroke-dasharray: 35 200; stroke-dashoffset: 35; animation: hv-how-g-tr 12s linear infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-g-tr {
  0%, 3%        { stroke-dashoffset: 35;   animation-timing-function: cubic-bezier(.45,0,.7,1); }
  11%           { stroke-dashoffset: -65; }
  12.5%         { stroke-dashoffset: -100; }
  12.51%, 15%   { stroke-dashoffset: 35;   animation-timing-function: cubic-bezier(.45,0,.7,1); }
  23%           { stroke-dashoffset: -65; }
  24.5%, 100%   { stroke-dashoffset: -100; }
}
.hv-how-g-ring { opacity: 0; transform-box: fill-box; transform-origin: center;
                 animation: hv-how-g-ring 12s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-g-ring {
  0%, 10.8%   { opacity: 0;  transform: scale(1); }
  11%         { opacity: .9; transform: scale(1); }
  17%, 22.8%  { opacity: 0;  transform: scale(1.75); }
  23%         { opacity: .9; transform: scale(1); }
  29%, 100%   { opacity: 0;  transform: scale(1.75); }
}
.hv-how-g-heart { transform-box: fill-box; transform-origin: center; animation: hv-how-g-beat 12s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-g-beat {
  0%, 10.8%, 14%, 22.8%, 26%, 100% { transform: scale(1); }
  12%, 24% { transform: scale(1.14); }
}

/* scene 3 · Show: the charity's own words write themselves into a speech bubble */
.hv-how-s-who { transform-box: fill-box; transform-origin: center; animation: hv-how-s-who 12s cubic-bezier(.3,1.5,.5,1) infinite; animation-delay: var(--d, 0s); }
@keyframes hv-how-s-who { 0% { transform: scale(.5); } 4%, 100% { transform: scale(1); } }
.hv-how-s-ln { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: 12s ease-in-out infinite; animation-delay: var(--d, 0s); }
.hv-how-s-ln.is-1 { animation-name: hv-how-s-l1; }
.hv-how-s-ln.is-2 { animation-name: hv-how-s-l2; }
.hv-how-s-ln.is-3 { animation-name: hv-how-s-l3; }
@keyframes hv-how-s-l1 { 0%, 2%  { stroke-dashoffset: 100; } 8%, 30%  { stroke-dashoffset: 0; } 31%, 100% { stroke-dashoffset: 100; } }
@keyframes hv-how-s-l2 { 0%, 7%  { stroke-dashoffset: 100; } 13%, 30% { stroke-dashoffset: 0; } 31%, 100% { stroke-dashoffset: 100; } }
@keyframes hv-how-s-l3 { 0%, 12% { stroke-dashoffset: 100; } 18%, 30% { stroke-dashoffset: 0; } 31%, 100% { stroke-dashoffset: 100; } }

/* ---------- reduced motion: one clean, complete, still frame ---------- */
@media (prefers-reduced-motion: reduce) {
  .hv-how *, .hv-how *::before, .hv-how *::after { animation: none !important; }
  .hv-how-spin, .hv-how-tails, .hv-how-step, .hv-how-pulse { display: none; }
  .hv-how-lit, .hv-how-lab::before { opacity: 1; }
  .hv-how-static { display: block; }
}