/* ===========================================================================
   css/grid/save.css  -  styles and animations for earthgrid.com/save
   (Viktor, 2026-11-07). grid.php links this file automatically for /save.
   Prefix: sv-. Colors from STYLE-GUIDE.md: blue #4a90d9 for the page,
   orange #f0932b and red #ff8a7a for entropy and free, green #5cb85c and
   #7fd17f for syntropy and gift. Same bones as free.css and gift.css, so the
   three pages read as one set. Every animation stops under reduced motion
   and shows its finished state.
   =========================================================================== */

/* ---- one stage per animation ---- */
.sv-stage { max-width:34em; margin:14px auto 6px; padding:14px 12px 10px; border-radius:16px;
            background:rgba(8,14,26,.55); border:1px solid rgba(255,255,255,.14); }
.sv-stage.sv-wide { max-width:46em; }
.sv-stage svg { display:block; width:100%; height:auto; overflow:visible; }
.sv-stage figcaption { margin-top:8px; text-align:center; font-size:.9em; color:#c9d4e0; }
.sv-t  { font:600 15px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#e7edf4; }
.sv-ts { font:500 12px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#9fb0c4; letter-spacing:.06em; }
.sv-dim { opacity:.7; }

/* 1. Save ourselves: the people light up one by one, the earth holds */
.sv-people circle { opacity:.3; animation:sv-person 9s ease-in-out infinite; }
.sv-people .p2 { animation-delay:.6s } .sv-people .p3 { animation-delay:1.2s } .sv-people .p4 { animation-delay:1.8s }
.sv-people .p5 { animation-delay:2.4s } .sv-people .p6 { animation-delay:3s } .sv-people .p7 { animation-delay:3.6s } .sv-people .p8 { animation-delay:4.2s }
@keyframes sv-person { 0%{opacity:.3;fill:#9fb0c4} 12%,80%{opacity:1;fill:#7fd17f} 100%{opacity:.3;fill:#9fb0c4} }
.sv-earth-word { opacity:0; animation:sv-fadein 9s ease-in-out infinite; }
@keyframes sv-fadein { 0%,55%{opacity:0} 66%,90%{opacity:1} 100%{opacity:0} }

/* 2. Entropy versus syntropy: the left dome loses struts, the right dome gains them */
/* The entropy dome is already broken when you arrive: gaps, loose struts,
   debris on the ground. Over the loop more struts drop away. */
.sv-decay path { animation:sv-decay 10s ease-in infinite; }
.sv-decay .e2 { animation-delay:.5s } .sv-decay .e3 { animation-delay:1s } .sv-decay .e4 { animation-delay:1.5s }
.sv-decay .e5 { animation-delay:2.2s } .sv-decay .e6 { animation-delay:2.7s } .sv-decay .e7 { animation-delay:3.2s } .sv-decay .e8 { animation-delay:3.9s }
@keyframes sv-decay { 0%,10%{opacity:1;transform:none} 40%,88%{opacity:.15;transform:translateY(14px) rotate(3deg)} 100%{opacity:1;transform:none} }
.sv-debris path { transform-box:fill-box; transform-origin:50% 50%; animation:sv-debris 10s ease-in infinite; }
.sv-debris .r2 { animation-delay:.7s } .sv-debris .r3 { animation-delay:1.4s }
@keyframes sv-debris { 0%,20%{transform:none} 45%,88%{transform:translateY(22px) rotate(28deg)} 100%{transform:none} }
.sv-pour { animation:sv-pour 1.2s linear infinite; }
@keyframes sv-pour { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-14} }
.sv-build path { stroke-dasharray:420; stroke-dashoffset:420; animation:sv-strut 10s ease-out infinite; }
.sv-build .b2 { animation-delay:.5s } .sv-build .b3 { animation-delay:1s } .sv-build .b4 { animation-delay:1.5s }
.sv-build .b5 { animation-delay:2.2s } .sv-build .b6 { animation-delay:2.7s } .sv-build .b7 { animation-delay:3.2s } .sv-build .b8 { animation-delay:3.9s }
@keyframes sv-strut { 0%{stroke-dashoffset:420;opacity:.4} 25%,88%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:420;opacity:.4} }

/* 3. Gift versus free: the free triangle loops back, the gift triangle passes on */
.sv-boomer { offset-path:path("M70 70 C 200 70, 260 20, 300 70 C 260 120, 200 100, 72 86"); animation:sv-boomer 6s ease-in-out infinite; }
@keyframes sv-boomer { 0%,8%{offset-distance:0%;opacity:1} 80%{offset-distance:100%;opacity:1} 88%,100%{offset-distance:100%;opacity:0} }
.sv-bill { opacity:0; animation:sv-bill 6s ease-in-out infinite; }
@keyframes sv-bill { 0%,70%{opacity:0} 80%,96%{opacity:1} 100%{opacity:0} }
.sv-fwd { animation:sv-fwd 6s ease-in-out infinite; }
@keyframes sv-fwd { 0%,8%{transform:translateX(0);opacity:1} 36%,44%{transform:translateX(150px)} 72%,84%{transform:translateX(300px);opacity:1} 92%{opacity:0;transform:translateX(300px)} 100%{opacity:0;transform:translateX(0)} }

/* 4. The marketing machine: the feed scrolls forever, attention drains, then the switch flips */
.sv-feed { animation:sv-feed 4s linear infinite; }
@keyframes sv-feed { 0%{transform:translateY(0)} 100%{transform:translateY(-84px)} }
.sv-drain polygon { opacity:0; animation:sv-drain 3.6s linear infinite; }
.sv-drain .b { animation-delay:1.2s } .sv-drain .c { animation-delay:2.4s }
@keyframes sv-drain { 0%{transform:translateX(0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translateX(150px);opacity:0} }
.sv-knob { animation:sv-knob 8s ease-in-out infinite; }
@keyframes sv-knob { 0%,70%{transform:translateX(0);fill:#7fd17f} 78%,100%{transform:translateX(-36px);fill:#ff8a7a} }

/* 5. The numbers: bars fill from the left, one after another */
.sv-bar .f { transform-origin:20px 0; transform:scaleX(0); animation:sv-fill 9s ease-out infinite; }
.sv-bar.r2 .f { animation-delay:.6s } .sv-bar.r3 .f { animation-delay:1.2s } .sv-bar.r4 .f { animation-delay:1.8s }
@keyframes sv-fill { 0%{transform:scaleX(0)} 25%,88%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
.sv-bar text:last-child { opacity:0; animation:sv-pct 9s ease-out infinite; }
.sv-bar.r2 text:last-child { animation-delay:.6s } .sv-bar.r3 text:last-child { animation-delay:1.2s } .sv-bar.r4 text:last-child { animation-delay:1.8s }
@keyframes sv-pct { 0%,20%{opacity:0} 28%,88%{opacity:1} 100%{opacity:0} }

/* 6. Immunity: envelopes fall faster and faster, the person goes grey */
.sv-mail g { opacity:0; animation:sv-mail 8s ease-in infinite; }
.sv-mail .m2 { animation-delay:1.4s } .sv-mail .m3 { animation-delay:2.5s } .sv-mail .m4 { animation-delay:3.3s } .sv-mail .m5 { animation-delay:3.9s }
@keyframes sv-mail { 0%{transform:translateY(0);opacity:0} 5%{opacity:1} 22%{transform:translateY(118px);opacity:1} 30%,100%{transform:translateY(126px);opacity:0} }
.sv-numb { animation:sv-numb 8s ease-in-out infinite; }
@keyframes sv-numb { 0%,10%{stroke:#4a90d9;fill:#0b1a33} 60%,90%{stroke:#55606e;fill:#2a313b} 100%{stroke:#4a90d9;fill:#0b1a33} }
.sv-immune-word { opacity:0; animation:sv-immune 8s ease-in-out infinite; }
@keyframes sv-immune { 0%,55%{opacity:0} 65%,90%{opacity:1} 100%{opacity:0} }

/* 7. The destructive principle: old triangles dissolve, a new one grows */
.sv-old polygon { animation:sv-old 9s ease-in-out infinite; }
.sv-old .o2 { animation-delay:.4s } .sv-old .o3 { animation-delay:.8s } .sv-old .o4 { animation-delay:1.2s } .sv-old .o5 { animation-delay:1.6s }
@keyframes sv-old { 0%,15%{opacity:1} 40%,90%{opacity:0} 100%{opacity:1} }
.sv-new { transform-box:fill-box; transform-origin:50% 100%; animation:sv-new 9s ease-out infinite; }
@keyframes sv-new { 0%,40%{opacity:0;transform:scale(.2)} 60%,88%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.2)} }
.sv-new2 { animation:sv-new2 9s ease-out infinite; }
@keyframes sv-new2 { 0%,55%{opacity:0} 68%,88%{opacity:1} 100%{opacity:0} }
.sv-clear-word { opacity:0; animation:sv-new2 9s ease-out infinite; }

/* 8. Four events: nodes appear, lines join them, the fourth closes the shape */
.sv-four circle { opacity:0; animation:sv-node 8s ease-out infinite; }
.sv-four .n2 { animation-delay:.8s } .sv-four .n3 { animation-delay:1.6s } .sv-four .n4 { animation-delay:2.6s }
@keyframes sv-node { 0%{opacity:0;r:2} 8%,88%{opacity:1;r:9} 100%{opacity:0;r:2} }
.sv-tet line { stroke-dasharray:260; stroke-dashoffset:260; animation:sv-line 8s ease-out infinite; }
.sv-tet .l1 { animation-delay:1s } .sv-tet .l2 { animation-delay:1.8s } .sv-tet .l3 { animation-delay:2s }
.sv-tet .l4, .sv-tet .l5, .sv-tet .l6 { animation-delay:2.8s; stroke:#7fd17f; }
@keyframes sv-line { 0%{stroke-dashoffset:260} 15%,88%{stroke-dashoffset:0} 100%{stroke-dashoffset:260} }

/* 9. For nonprofits: the .org node pulses and small nodes gather to it */
.sv-orgnode { animation:sv-pulse 3s ease-in-out infinite; }
@keyframes sv-pulse { 0%,100%{stroke-width:3} 50%{stroke-width:6} }
.sv-gather circle { animation:sv-gather 6s ease-in-out infinite; }
.sv-gather .g2 { animation-delay:.5s } .sv-gather .g3 { animation-delay:1s } .sv-gather .g4 { animation-delay:1.5s }
.sv-gather .g1 { --gx:40px; --gy:-10px } .sv-gather .g2 { --gx:-40px; --gy:-10px } .sv-gather .g3 { --gx:30px; --gy:30px } .sv-gather .g4 { --gx:-30px; --gy:30px }
@keyframes sv-gather { 0%,10%{transform:none;opacity:.5} 60%,90%{transform:translate(var(--gx),var(--gy));opacity:1} 100%{transform:none;opacity:.5} }

/* 10. Thirty years: the years light in turn */
.sv-years g { opacity:.35; animation:sv-year 10s ease-in-out infinite; }
.sv-years .y2 { animation-delay:1s } .sv-years .y3 { animation-delay:2s } .sv-years .y4 { animation-delay:3s } .sv-years .y5 { animation-delay:4s } .sv-years .y6 { animation-delay:5s }
@keyframes sv-year { 0%{opacity:.35} 10%,88%{opacity:1} 100%{opacity:.35} }

/* two columns: entropy versus syntropy, gift versus free */
.sv-vs { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:44em; margin:12px auto; }
.sv-vs > div { border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); }
.sv-vs h4 { margin:0 0 6px; font-size:1.05em; }
.sv-vs ul { margin:0; padding:0; list-style:none; }
.sv-vs li { position:relative; padding-left:18px; margin:5px 0; line-height:1.4; }
.sv-vs li::before { content:""; position:absolute; left:0; top:.45em; width:10px; height:9px; clip-path:polygon(0 0,100% 50%,0 100%); }
.sv-vs .bad h4 { color:#ff8a7a } .sv-vs .bad li::before { background:#ff8a7a }
.sv-vs .good h4 { color:#7fd17f } .sv-vs .good li::before { background:#5cb85c }

/* the data table */
/* the data table sits on its own dark panel so it reads over the photo */
.sv-data { width:100%; max-width:52em; margin:14px auto; border-collapse:separate; border-spacing:0; font-size:1em; line-height:1.45;
           background:rgba(8,14,26,.72); border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden; color:#e7edf4; }
.sv-data th, .sv-data td { text-align:left; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.12); vertical-align:top; }
.sv-data tr:last-child td { border-bottom:0; }
.sv-data th { font-size:.78em; letter-spacing:.08em; text-transform:uppercase; color:#9fb0c4; background:rgba(255,255,255,.04); }
.sv-data td:nth-child(3) { color:#9fb0c4; font-size:.88em; }
.sv-data b { color:#ffb199; }

.sv-src { max-width:46em; margin:8px auto 0; padding:0 0 0 18px; font-size:.85em; color:#aab8c8; line-height:1.45; }
.sv-src li { margin:4px 0; } .sv-src a { color:#cfe3fb; }

@media (max-width:640px) {
  .sv-vs { grid-template-columns:1fr; } .sv-stage { padding:10px 6px 8px; }
  .sv-data, .sv-data thead, .sv-data tbody, .sv-data tr, .sv-data td { display:block; }
  .sv-data thead { display:none; } .sv-data td { border:0; padding:3px 14px; }
  .sv-data tr { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.14); }
  .sv-data tr:last-child { border-bottom:0; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-stage * { animation:none !important; }
  .sv-people circle, .sv-earth-word, .sv-bill, .sv-bar text:last-child, .sv-immune-word, .sv-new, .sv-new2, .sv-clear-word,
  .sv-four circle, .sv-gather circle, .sv-years g, .sv-drain polygon { opacity:1 !important; }
  .sv-people circle { fill:#7fd17f !important; }
  .sv-decay path, .sv-old polygon { opacity:0 !important; }
  .sv-build path, .sv-tet line { stroke-dashoffset:0 !important; opacity:1 !important; }
  .sv-boomer { offset-distance:100%; } .sv-fwd { transform:translateX(300px) !important; }
  .sv-bar .f { transform:scaleX(1) !important; }
  .sv-knob { transform:translateX(-36px) !important; fill:#ff8a7a !important; }
  .sv-numb { stroke:#55606e !important; fill:#2a313b !important; }
  .sv-new { transform:scale(1) !important; }
}