/* ===========================================================================
   css/grid/gift.css  -  styles and animations for earthgrid.com/gift
   (Viktor, 2026-11-05). grid.php links this file automatically for /gift.
   Prefix: gf-. Colors from STYLE-GUIDE.md: green #5cb85c, orange #f0932b,
   blue #4a90d9. Shapes: geodesic triangles and hexagonal nodes. Every
   animation stops when the visitor asks for reduced motion.
   Built on the same bones as css/grid/free.css so the two pages feel like
   two sides of one coin: FREE in orange and red, GIFT in green.
   =========================================================================== */

/* ---- the acronym in the hero ---- */
.gf-acro { display:flex; justify-content:center; gap:clamp(6px,2.4vw,22px); flex-wrap:wrap; margin:18px auto 8px; max-width:46em; }
.gf-acro a { display:flex; flex-direction:column; align-items:center; text-decoration:none; min-width:5.2em; }
.gf-acro b { font-size:clamp(3.2em,11vw,5.6em); line-height:1; font-weight:900; color:#5cb85c; letter-spacing:-.02em;
             text-shadow:0 0 22px rgba(92,184,92,.4); animation:gf-pop 6s ease-in-out infinite; }
.gf-acro span { margin-top:6px; font-size:.95em; letter-spacing:.12em; text-transform:uppercase; color:#e7edf4;
                opacity:0; transform:translateY(6px); animation:gf-word 6s ease-in-out infinite; }
.gf-acro a:nth-child(2) b, .gf-acro a:nth-child(2) span { animation-delay:.5s; }
.gf-acro a:nth-child(3) b, .gf-acro a:nth-child(3) span { animation-delay:1s; }
.gf-acro a:nth-child(4) b, .gf-acro a:nth-child(4) span { animation-delay:1.5s; }
@keyframes gf-pop  { 0%,100%{transform:scale(1)} 8%{transform:scale(1.12)} 16%{transform:scale(1)} }
@keyframes gf-word { 0%{opacity:0;transform:translateY(6px)} 12%,80%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(6px)} }

/* ---- one stage per animation ---- */
.gf-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); }
.gf-stage.gf-wide { max-width:46em; }
.gf-stage svg { display:block; width:100%; height:auto; overflow:visible; }
.gf-stage figcaption { margin-top:8px; text-align:center; font-size:.9em; color:#c9d4e0; }
.gf-t  { font:600 15px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#e7edf4; }
.gf-ts { font:500 12px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#9fb0c4; letter-spacing:.06em; }
.gf-huge { font:900 56px/1 -apple-system,Segoe UI,Roboto,sans-serif; }

/* The pendulum: one swing of 10 seconds. 0 to 35% the swing from ME to WE,
   35 to 60% FREE falls apart, 55 to 80% GIFT assembles, then a hold, then reset. */
.gf-pend { animation:gf-swing 10s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes gf-swing { 0%,6%{transform:rotate(-36deg)} 38%{transform:rotate(34deg)} 54%{transform:rotate(-8deg)} 66%{transform:rotate(4deg)} 76%,92%{transform:rotate(0)} 100%{transform:rotate(-36deg)} }
.gf-fall { transform-box:fill-box; transform-origin:50% 50%; animation:gf-fall 10s ease-in infinite; }
.gf-fall.f2 { animation-delay:.15s } .gf-fall.f3 { animation-delay:.3s } .gf-fall.f4 { animation-delay:.45s }
@keyframes gf-fall { 0%,34%{transform:none;opacity:1} 58%,90%{transform:translate(-6px,60px) rotate(-24deg);opacity:0} 100%{transform:none;opacity:1} }
.gf-fade { animation:gf-fade 10s ease-in-out infinite; }
@keyframes gf-fade { 0%,34%{opacity:1} 50%,90%{opacity:0} 100%{opacity:1} }
.gf-rise { transform-box:fill-box; transform-origin:50% 50%; opacity:0; animation:gf-rise 10s cubic-bezier(.2,.9,.3,1) infinite; }
.gf-rise.g1 { --rx:-40px; --ry:-70px; } .gf-rise.g2 { --rx:20px; --ry:60px; animation-delay:.12s }
.gf-rise.g3 { --rx:50px; --ry:-40px; animation-delay:.24s } .gf-rise.g4 { --rx:-20px; --ry:80px; animation-delay:.36s }
@keyframes gf-rise { 0%,52%{opacity:0;transform:translate(var(--rx),var(--ry)) rotate(18deg)} 70%,92%{opacity:1;transform:none} 100%{opacity:0;transform:translate(var(--rx),var(--ry)) rotate(18deg)} }
.gf-show { opacity:0; animation:gf-show 10s ease-in-out infinite; }
@keyframes gf-show { 0%,64%{opacity:0} 74%,92%{opacity:1} 100%{opacity:0} }

/* G: the geodesic globe, nodes light in turn around the world */
.gf-geo { animation:gf-geo 12s ease-in-out infinite; }
@keyframes gf-geo { 0%,100%{opacity:.8} 50%{opacity:1} }
.gf-node circle { opacity:.35; animation:gf-node 4.8s linear infinite; }
.gf-node .n2 { animation-delay:.6s } .gf-node .n3 { animation-delay:1.2s } .gf-node .n4 { animation-delay:1.8s }
.gf-node .n5 { animation-delay:2.4s } .gf-node .n6 { animation-delay:3s } .gf-node .n7 { animation-delay:3.6s } .gf-node .n8 { animation-delay:4.2s }
.gf-node .n9 { opacity:1; animation:gf-core 2.4s ease-in-out infinite; }
@keyframes gf-node { 0%{opacity:.35;r:5} 8%{opacity:1;r:8} 24%{opacity:.35;r:5} 100%{opacity:.35;r:5} }
@keyframes gf-core { 0%,100%{opacity:.7} 50%{opacity:1} }

/* I: information flows both ways at once */
.gf-i-go { animation:gf-i-go 3.6s linear infinite; opacity:0; }
.gf-i-go.b { animation-delay:1.2s } .gf-i-go.c { animation-delay:2.4s }
@keyframes gf-i-go { 0%{transform:translateX(0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translateX(236px);opacity:0} }
.gf-i-back { animation:gf-i-back 3.6s linear infinite; opacity:0; }
.gf-i-back.b { animation-delay:1.2s } .gf-i-back.c { animation-delay:2.4s }
@keyframes gf-i-back { 0%{transform:translateX(0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translateX(-236px);opacity:0} }

/* F: the coin drops first, the documents land second, the beam settles level */
.gf-coin { transform-box:fill-box; transform-origin:50% 50%; animation:gf-coin 8s ease-in infinite; }
@keyframes gf-coin { 0%,8%{transform:translateY(-70px);opacity:0} 18%,100%{transform:none;opacity:1} }
.gf-docs rect { transform-box:fill-box; transform-origin:50% 50%; opacity:0; animation:gf-doc 8s ease-out infinite; }
.gf-docs .d2 { animation-delay:.25s } .gf-docs .d3 { animation-delay:.5s }
@keyframes gf-doc { 0%,38%{transform:translateY(-60px);opacity:0} 48%,100%{transform:none;opacity:1} }
.gf-beam { transform-origin:200px 80px; animation:gf-beam 8s ease-in-out infinite; }
@keyframes gf-beam { 0%,16%{transform:rotate(0)} 24%{transform:rotate(9deg)} 46%{transform:rotate(7deg)} 56%{transform:rotate(-5deg)} 66%{transform:rotate(2deg)} 74%,100%{transform:rotate(0)} }
.gf-pan-l { animation:gf-pan-l 8s ease-in-out infinite; } .gf-pan-r { animation:gf-pan-r 8s ease-in-out infinite; }
@keyframes gf-pan-l { 0%,16%{transform:none} 24%{transform:translateY(22px)} 46%{transform:translateY(17px)} 56%{transform:translateY(-12px)} 66%{transform:translateY(5px)} 74%,100%{transform:none} }
@keyframes gf-pan-r { 0%,16%{transform:none} 24%{transform:translateY(-22px)} 46%{transform:translateY(-17px)} 56%{transform:translateY(12px)} 66%{transform:translateY(-5px)} 74%,100%{transform:none} }
.gf-whole { opacity:0; animation:gf-whole 8s ease-in-out infinite; }
@keyframes gf-whole { 0%,74%{opacity:0} 82%,100%{opacity:1} }

/* T: the ledger fills one line at a time */
.gf-row { opacity:0; animation:gf-row 9s ease-out infinite; }
.gf-row.r2 { animation-delay:1.2s } .gf-row.r3 { animation-delay:2.4s } .gf-row.r4 { animation-delay:3.8s }
@keyframes gf-row { 0%{opacity:0;transform:translateY(6px)} 10%,80%{opacity:1;transform:none} 100%{opacity:0} }

/* Pay it forward: the triangle passes node to node and never comes back */
.gf-pass { animation:gf-pass 8s ease-in-out infinite; }
@keyframes gf-pass { 0%,8%{transform:translateX(0);opacity:1} 22%,28%{transform:translateX(140px)} 42%,48%{transform:translateX(280px)} 62%,68%{transform:translateX(420px)} 82%,90%{transform:translateX(560px);opacity:1} 96%{opacity:0;transform:translateX(560px)} 100%{opacity:0;transform:translateX(0)} }

/* Syntropy: the dome builds itself, strut by strut, then glows as a whole */
.gf-dome path { stroke-dasharray:420; stroke-dashoffset:420; animation:gf-strut 10s ease-out infinite; }
.gf-dome .s2 { animation-delay:.5s } .gf-dome .s3 { animation-delay:1s } .gf-dome .s4 { animation-delay:1.5s }
.gf-dome .s5 { animation-delay:2.2s } .gf-dome .s6 { animation-delay:2.7s } .gf-dome .s7 { animation-delay:3.2s }
.gf-dome .s8 { animation-delay:3.9s } .gf-dome .s9 { animation-delay:4.3s }
@keyframes gf-strut { 0%{stroke-dashoffset:420;opacity:.4} 25%,88%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:420;opacity:.4} }
.gf-dome-n circle { opacity:0; animation:gf-dome-n 10s ease-out infinite; }
@keyframes gf-dome-n { 0%,46%{opacity:0} 56%,88%{opacity:1} 100%{opacity:0} }
.gf-syn-word { opacity:0; animation:gf-syn 10s ease-in-out infinite; }
@keyframes gf-syn { 0%,56%{opacity:0} 66%,88%{opacity:1} 100%{opacity:0} }

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

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

@media (max-width:640px) { .gf-vs { grid-template-columns:1fr; } .gf-stage { padding:10px 6px 8px; } }
@media (max-width:520px) { .gf-acro { flex-wrap:nowrap; gap:4px; } .gf-acro a { min-width:0; flex:1 1 0; } .gf-acro b { font-size:3em; } .gf-acro span { font-size:.6em; letter-spacing:.03em; } }
@media (prefers-reduced-motion: reduce) {
  .gf-acro b, .gf-acro span, .gf-stage * { animation:none !important; }
  .gf-acro span, .gf-rise, .gf-show, .gf-i-go, .gf-i-back, .gf-docs rect, .gf-whole, .gf-row, .gf-dome-n circle, .gf-syn-word { opacity:1 !important; }
  .gf-fall, .gf-fade { opacity:0 !important; }
  .gf-pend { transform:rotate(0) !important; }
  .gf-coin { transform:none !important; }
  .gf-dome path { stroke-dashoffset:0 !important; opacity:1 !important; }
  .gf-pass { transform:translateX(560px) !important; }
}