/* ===========================================================================
   css/grid/savedeep.css  -  styles and animations for earthgrid.com/savedeep
   (Viktor, 2026-11-07). grid.php links this file automatically for /savedeep.
   Prefix: sd-. Same bones and colors as save.css: blue page, orange and red
   for entropy, green for syntropy. Every animation stops under reduced
   motion and shows its finished state.
   =========================================================================== */

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

/* 1. The browser: layers stack up, then cracks spread */
.sd-layers g { opacity:0; animation:sd-layer 10s ease-out infinite; }
.sd-layers .y2 { animation-delay:1s } .sd-layers .y3 { animation-delay:2s } .sd-layers .y4 { animation-delay:3s }
@keyframes sd-layer { 0%{opacity:0;transform:translateY(10px)} 8%,88%{opacity:1;transform:none} 100%{opacity:0} }
.sd-cracks path { stroke-dasharray:120; stroke-dashoffset:120; animation:sd-crack 10s ease-out infinite; }
.sd-cracks .c1 { animation-delay:4.2s } .sd-cracks .c2 { animation-delay:4.8s } .sd-cracks .c3 { animation-delay:5.4s }
@keyframes sd-crack { 0%{stroke-dashoffset:120} 10%,88%{stroke-dashoffset:0} 100%{stroke-dashoffset:120} }

/* 2. The hub: spokes light in turn and packets move both ways */
.sd-spokes line { animation:sd-spoke 6s ease-in-out infinite; }
.sd-spokes .s2 { animation-delay:1s } .sd-spokes .s3 { animation-delay:2s } .sd-spokes .s4 { animation-delay:3s } .sd-spokes .s5 { animation-delay:4s } .sd-spokes .s6 { animation-delay:5s }
@keyframes sd-spoke { 0%,100%{stroke:#243a58} 8%,20%{stroke:#7fd17f} }
.sd-ends circle { animation:sd-end 6s ease-in-out infinite; }
.sd-ends .e2 { animation-delay:1s } .sd-ends .e3 { animation-delay:2s } .sd-ends .e4 { animation-delay:3s } .sd-ends .e5 { animation-delay:4s } .sd-ends .e6 { animation-delay:5s }
@keyframes sd-end { 0%,100%{stroke:#83e6ff} 8%,20%{stroke:#7fd17f;stroke-width:4} }
.sd-pk .k1 { offset-path:path("M350 150 L120 70"); animation:sd-pk 3s linear infinite; }
.sd-pk .k2 { offset-path:path("M580 230 L350 150"); animation:sd-pk 3s linear infinite 1s; }
.sd-pk .k3 { offset-path:path("M350 150 L350 40"); animation:sd-pk 3s linear infinite 2s; }
@keyframes sd-pk { 0%{offset-distance:0%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{offset-distance:100%;opacity:0} }

/* 3. The wall: inside lights up in order, the door opens on request and closes */
.sd-inside circle { opacity:.35; animation:sd-in 8s ease-in-out infinite; }
.sd-inside .i2 { animation-delay:.4s } .sd-inside .i3 { animation-delay:.8s } .sd-inside .i4 { animation-delay:1.2s } .sd-inside .i5 { animation-delay:1.6s } .sd-inside .i6 { animation-delay:2s }
@keyframes sd-in { 0%{opacity:.35} 10%,85%{opacity:1} 100%{opacity:.35} }
.sd-door { animation:sd-door 8s ease-in-out infinite; }
@keyframes sd-door { 0%,45%{transform:rotate(0)} 55%,70%{transform:rotate(-70deg)} 80%,100%{transform:rotate(0)} }
.sd-outside circle { animation:sd-out 8s ease-in-out infinite; }
@keyframes sd-out { 0%,45%{opacity:.5} 55%,70%{opacity:1;fill:#83e6ff} 80%,100%{opacity:.5} }

/* 4. The data: files stack, feed the chip, the chip is swapped */
.sd-files g { opacity:0; animation:sd-file 10s ease-out infinite; }
.sd-files .f2 { animation-delay:.5s } .sd-files .f3 { animation-delay:1s } .sd-files .f4 { animation-delay:1.5s } .sd-files .f5 { animation-delay:2s }
@keyframes sd-file { 0%{opacity:0;transform:translateY(10px)} 8%,90%{opacity:1;transform:none} 100%{opacity:0} }
.sd-feed polygon { opacity:0; animation:sd-feedin 3s linear infinite; }
.sd-feed .b { animation-delay:1s } .sd-feed .c { animation-delay:2s }
@keyframes sd-feedin { 0%{transform:translateX(0);opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{transform:translateX(56px);opacity:0} }
.sd-chip { animation:sd-chip 10s ease-in-out infinite; transform-origin:370px 148px; }
@keyframes sd-chip { 0%,50%{opacity:1;transform:none} 55%{opacity:0;transform:translateY(-40px)} 58%{opacity:0;transform:translateY(40px)} 64%,100%{opacity:1;transform:none} }

/* 5. The ladder: steps rise, the crowd gathers on one, the gate glows, the marker climbs */
.sd-steps rect { opacity:0; animation:sd-step 10s ease-out infinite; }
.sd-steps .t2 { animation-delay:.4s } .sd-steps .t3 { animation-delay:.8s } .sd-steps .t4 { animation-delay:1.2s } .sd-steps .t5 { animation-delay:1.6s } .sd-steps .t6 { animation-delay:2s }
@keyframes sd-step { 0%{opacity:0;transform:translateY(12px)} 8%,90%{opacity:1;transform:none} 100%{opacity:0} }
.sd-crowd circle { opacity:0; animation:sd-crowd 10s ease-out infinite 2.4s; }
@keyframes sd-crowd { 0%{opacity:0} 6%,90%{opacity:1} 100%{opacity:0} }
.sd-gate { animation:sd-gate 10s ease-in-out infinite; }
@keyframes sd-gate { 0%,30%{opacity:.4} 36%,90%{opacity:1} 100%{opacity:.4} }
.sd-you { opacity:0; animation:sd-you 10s ease-out infinite 3.2s; }
@keyframes sd-you { 0%{opacity:0;transform:translateY(20px)} 8%,90%{opacity:1;transform:none} 100%{opacity:0} }
.sd-build { animation:sd-blink 2.4s ease-in-out infinite; }
@keyframes sd-blink { 0%,100%{opacity:.5} 50%{opacity:1} }

/* 6. Operators: the bad loop spins up and heats, the good loop turns steady */
.sd-loop-bad { transform-origin:110px 100px; animation:sd-bad 6s linear infinite; }
@keyframes sd-bad { 0%{transform:rotate(0);stroke:#ff8a7a} 100%{transform:rotate(1080deg);stroke:#ff3b2f} }
.sd-loop-good { transform-origin:330px 100px; animation:sd-good 6s linear infinite; }
@keyframes sd-good { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* 7. Eighty twenty: the dome lights strut by strut, one triangle stays dark */
.sd-dome path { stroke-dasharray:420; stroke-dashoffset:420; animation:sd-strut 10s ease-out infinite; }
.sd-dome .d2 { animation-delay:.5s } .sd-dome .d3 { animation-delay:1s } .sd-dome .d4 { animation-delay:1.5s }
.sd-dome .d5 { animation-delay:2.2s } .sd-dome .d6 { animation-delay:2.7s } .sd-dome .d7 { animation-delay:3.2s } .sd-dome .d8 { animation-delay:3.9s }
.sd-dome .dk { stroke-dashoffset:0; animation:none; }
@keyframes sd-strut { 0%{stroke-dashoffset:420;opacity:.4} 25%,88%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:420;opacity:.4} }

/* 8. Finishing: the leaky tank never rises, the valve closes, the sealed tank fills */
.sd-lvl-bad { animation:sd-lvlbad 8s ease-in-out infinite; }
@keyframes sd-lvlbad { 0%,100%{height:28px;y:70px} 50%{height:34px;y:64px} }
.sd-valve { animation:sd-valve 8s ease-in-out infinite; }
@keyframes sd-valve { 0%,55%{transform:rotate(0)} 65%,100%{transform:rotate(90deg)} }
.sd-lvl-good { animation:sd-lvlgood 8s ease-out infinite; }
@keyframes sd-lvlgood { 0%,10%{height:0;y:208px} 90%,100%{height:66px;y:142px} }

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

.sd-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; }
.sd-data th, .sd-data td { text-align:left; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.12); vertical-align:top; }
.sd-data tr:last-child td { border-bottom:0; }
.sd-data th { font-size:.78em; letter-spacing:.08em; text-transform:uppercase; color:#9fb0c4; background:rgba(255,255,255,.04); }
.sd-data td.ok { color:#7fd17f; font-weight:600; } .sd-data td.mid { color:#ffb199; }

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

@media (max-width:640px) {
  .sd-vs { grid-template-columns:1fr; } .sd-stage { padding:10px 6px 8px; }
  .sd-data, .sd-data thead, .sd-data tbody, .sd-data tr, .sd-data td { display:block; }
  .sd-data thead { display:none; } .sd-data td { border:0; padding:3px 0; }
  .sd-data tr { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.14); }
}
@media (prefers-reduced-motion: reduce) {
  .sd-stage * { animation:none !important; }
  .sd-layers g, .sd-files g, .sd-steps rect, .sd-crowd circle, .sd-you, .sd-inside circle, .sd-feed polygon { opacity:1 !important; transform:none !important; }
  .sd-cracks path, .sd-dome path { stroke-dashoffset:0 !important; opacity:1 !important; }
  .sd-pk polygon { opacity:0 !important; }
  .sd-valve { transform:rotate(90deg) !important; }
  .sd-lvl-good { height:66px !important; y:142px !important; }
}