/* ===========================================================================
   css/grid/free.css  -  styles and animations for earthgrid.com/free
   (Viktor, 2026-10-23). grid.php links this file automatically for /free.
   Prefix: fr-. Colors from STYLE-GUIDE.md: green #5cb85c, orange #f0932b,
   blue #4a90d9. Shapes: triangles. Every animation stops when the visitor
   asks for reduced motion.
   =========================================================================== */

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

/* ---- one stage per animation ---- */
.fr-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); }
.fr-stage svg { display:block; width:100%; height:auto; overflow:visible; }
.fr-stage figcaption { margin-top:8px; text-align:center; font-size:.9em; color:#c9d4e0; }
.fr-letter { display:inline-flex; align-items:center; justify-content:center; width:1.7em; height:1.7em; margin-right:.35em;
             border-radius:10px; background:#f0932b; color:#111; font-weight:900; }
.fr-t { font:600 15px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#e7edf4; }
.fr-ts { font:500 12px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#9fb0c4; letter-spacing:.06em; }
.fr-big { font:900 30px/1 -apple-system,Segoe UI,Roboto,sans-serif; }

/* F: the price moves into the future */
.fr-f-tag { animation:fr-f-move 7s ease-in-out infinite; }
.fr-f-zero { animation:fr-f-zero 7s ease-in-out infinite; }
.fr-f-bill { opacity:0; animation:fr-f-bill 7s ease-in-out infinite; }
@keyframes fr-f-move { 0%,12%{transform:translateX(0)} 62%,88%{transform:translateX(330px)} 100%{transform:translateX(0)} }
@keyframes fr-f-zero { 0%,40%{opacity:1} 52%,90%{opacity:0} 100%{opacity:1} }
@keyframes fr-f-bill { 0%,44%{opacity:0;transform:scale(.6)} 60%,88%{opacity:1;transform:scale(1.15)} 100%{opacity:0} }

/* R: attention and data flow one way */
.fr-r-dot { animation:fr-r-flow 3.2s linear infinite; opacity:0; }
.fr-r-dot:nth-of-type(2){animation-delay:.4s} .fr-r-dot:nth-of-type(3){animation-delay:.8s}
.fr-r-dot:nth-of-type(4){animation-delay:1.2s} .fr-r-dot:nth-of-type(5){animation-delay:1.6s}
.fr-r-dot:nth-of-type(6){animation-delay:2s} .fr-r-dot:nth-of-type(7){animation-delay:2.4s}
@keyframes fr-r-flow { 0%{transform:translateX(0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translateX(190px);opacity:0} }
.fr-r-fill { transform-box:fill-box; transform-origin:50% 100%; animation:fr-r-fill 6.4s ease-in-out infinite; }
@keyframes fr-r-fill { 0%{transform:scaleY(.1)} 90%{transform:scaleY(1)} 100%{transform:scaleY(.1)} }
.fr-r-out { animation:fr-r-out 3.2s linear infinite; opacity:0; }
@keyframes fr-r-out { 0%,30%{transform:translateX(0);opacity:0} 40%{opacity:1} 100%{transform:translateX(90px);opacity:0} }

/* E1: the lock closes around your list */
.fr-e1-chain-l { animation:fr-e1-l 6s ease-in-out infinite; }
.fr-e1-chain-r { animation:fr-e1-r 6s ease-in-out infinite; }
.fr-e1-shackle { animation:fr-e1-lock 6s ease-in-out infinite; }
@keyframes fr-e1-l { 0%,10%{transform:translateX(-120px);opacity:0} 40%,85%{transform:none;opacity:1} 100%{transform:translateX(-120px);opacity:0} }
@keyframes fr-e1-r { 0%,10%{transform:translateX(120px);opacity:0} 40%,85%{transform:none;opacity:1} 100%{transform:translateX(120px);opacity:0} }
@keyframes fr-e1-lock { 0%,45%{transform:translateY(-14px)} 55%,85%{transform:none} 100%{transform:translateY(-14px)} }

/* E2: the community scatters */
.fr-e2 circle { animation:fr-e2 8s ease-in-out infinite; }
@keyframes fr-e2 { 0%,18%{transform:none;opacity:1} 60%,78%{transform:translate(var(--dx),var(--dy));opacity:.18} 100%{transform:none;opacity:1} }

/* Fair exchange: the scale settles level */
.fr-beam { transform-origin:200px 60px; animation:fr-beam 6s ease-in-out infinite; }
@keyframes fr-beam { 0%{transform:rotate(-9deg)} 25%{transform:rotate(7deg)} 45%{transform:rotate(-3deg)} 60%,100%{transform:rotate(0)} }
.fr-pan-l { animation:fr-pan-l 6s ease-in-out infinite; } .fr-pan-r { animation:fr-pan-r 6s ease-in-out infinite; }
@keyframes fr-pan-l { 0%{transform:translateY(22px)} 25%{transform:translateY(-17px)} 45%{transform:translateY(7px)} 60%,100%{transform:none} }
@keyframes fr-pan-r { 0%{transform:translateY(-22px)} 25%{transform:translateY(17px)} 45%{transform:translateY(-7px)} 60%,100%{transform:none} }
.fr-whole { opacity:0; animation:fr-whole 6s ease-in-out infinite; }
@keyframes fr-whole { 0%,58%{opacity:0} 66%,100%{opacity:1} }

/* Three times: now, 30 days, 6 months */
.fr-tt { opacity:.25; animation:fr-tt 6s ease-in-out infinite; }
.fr-tt.t2 { animation-delay:1s } .fr-tt.t3 { animation-delay:2s }
@keyframes fr-tt { 0%,8%{opacity:.25} 18%,80%{opacity:1} 100%{opacity:.25} }

/* Time and value: hours stay hours, the work keeps growing */
.fr-hand { transform-origin:70px 70px; animation:fr-hand 4s linear infinite; }
@keyframes fr-hand { to { transform:rotate(360deg); } }
.fr-grow { opacity:0; animation:fr-grow 8s ease-out infinite; }
.fr-grow.g2 { animation-delay:1s } .fr-grow.g3 { animation-delay:2s } .fr-grow.g4 { animation-delay:3s } .fr-grow.g5 { animation-delay:4s } .fr-grow.g6 { animation-delay:5s }
@keyframes fr-grow { 0%{opacity:0;transform:translateY(10px)} 10%,85%{opacity:1;transform:none} 100%{opacity:0} }

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

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

@media (max-width:640px) { .fr-vs { grid-template-columns:1fr; } .fr-stage { padding:10px 6px 8px; } }
@media (max-width:520px) { .fr-acro { flex-wrap:nowrap; gap:4px; } .fr-acro a { min-width:0; flex:1 1 0; } .fr-acro b { font-size:3em; } .fr-acro span { font-size:.6em; letter-spacing:.03em; } }
@media (prefers-reduced-motion: reduce) {
  .fr-acro b, .fr-acro span, .fr-stage * { animation:none !important; }
  .fr-acro span, .fr-f-bill, .fr-r-dot, .fr-r-out, .fr-whole, .fr-grow { opacity:1 !important; }
  .fr-f-zero { opacity:0 !important; } .fr-f-tag { transform:translateX(330px) !important; }
}