/* ===========================================================================
   css/grid/sanctuary.css  -  styles and animations for earthgrid.com/sanctuary
   (Viktor, 2026-11-07). grid.php links this file automatically for /sanctuary.
   Prefix: sc-. Same bones as save.css (sv-). Green #5cb85c / #7fd17f is the
   page color (the live site), orange #f0932b for the bolted-on tools, blue
   #4a90d9 and cyan #83e6ff for structure. Every animation stops under
   reduced motion and shows its finished state.
   =========================================================================== */

/* ---- one stage per animation ---- */
.sc-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);
            box-shadow:0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); }
.sc-stage svg { display:block; width:100%; height:auto; overflow:visible; }
.sc-stage figcaption { margin-top:8px; text-align:center; font-size:.9em; color:#c9d4e0; }
.sc-t  { font:600 15px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#e7edf4; }
.sc-ts { font:500 12px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#9fb0c4; letter-spacing:.06em; }
.sc-dim { opacity:.7; }

/* 1. The card grows into a live site */
.sc-card { transform-box:fill-box; transform-origin:50% 50%; animation:sc-card 9s ease-in-out infinite; }
@keyframes sc-card { 0%,18%{opacity:1;transform:scale(1)} 32%,90%{opacity:0;transform:scale(1.6)} 100%{opacity:1;transform:scale(1)} }
.sc-site { transform-box:fill-box; transform-origin:50% 50%; opacity:0; animation:sc-site 9s ease-out infinite; }
@keyframes sc-site { 0%,20%{opacity:0;transform:scale(.45)} 36%,90%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.45)} }
.sc-addr { animation:sc-addr 9s steps(12) infinite; clip-path:inset(0 100% 0 0); }
@keyframes sc-addr { 0%,38%{clip-path:inset(0 100% 0 0)} 52%,90%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 100% 0 0)} }
.sc-live { transform-box:fill-box; transform-origin:50% 50%; animation:sc-pulse 1.8s ease-in-out infinite; }
@keyframes sc-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} }
.sc-yours { opacity:0; animation:sc-word 9s ease-in-out infinite; }
@keyframes sc-word { 0%,55%{opacity:0} 64%,90%{opacity:1} 100%{opacity:0} }

/* 2. Five tags swing out of step under the page */
.sc-tag { transform-box:view-box; animation:sc-swing 3.4s ease-in-out infinite alternate; }
.sc-tag.t1 { transform-origin:160px 110px; } .sc-tag.t2 { transform-origin:190px 110px; animation-delay:-.7s; }
.sc-tag.t3 { transform-origin:220px 110px; animation-delay:-1.4s; } .sc-tag.t4 { transform-origin:250px 110px; animation-delay:-2.1s; }
.sc-tag.t5 { transform-origin:280px 110px; animation-delay:-2.8s; }
@keyframes sc-swing { 0%{transform:rotate(-4deg)} 100%{transform:rotate(4deg)} }
.sc-bill { animation:sc-blink 2.2s ease-in-out infinite; }
@keyframes sc-blink { 0%,100%{fill:#9fb0c4} 50%{fill:#ff8a7a} }

/* 3. The mockup splits into words, look and photos, which drop into one folder */
.sc-src { animation:sc-src 9s ease-in-out infinite; }
@keyframes sc-src { 0%,10%{opacity:1} 22%,88%{opacity:.25} 100%{opacity:1} }
.sc-piece { opacity:0; animation:sc-piece 9s ease-in-out infinite; }
.sc-piece.w { --dx:130px; } .sc-piece.l { --dx:0px; animation-delay:.3s; } .sc-piece.p { --dx:-130px; animation-delay:.6s; }
@keyframes sc-piece {
  0%,8%   { opacity:0; transform:translate(var(--dx),-80px) scale(.6); }
  22%     { opacity:1; transform:translate(0,0) scale(1); }
  48%     { opacity:1; transform:translate(0,0) scale(1); }
  66%,88% { opacity:0; transform:translate(var(--dx),95px) scale(.4); }
  100%    { opacity:0; transform:translate(var(--dx),-80px) scale(.6); }
}
.sc-folder { animation:sc-folder 9s ease-in-out infinite; }
@keyframes sc-folder { 0%,58%{fill:#0b1a33} 68%,90%{fill:#13361f} 100%{fill:#0b1a33} }

/* 4. The tags fold into one triangle */
.sc-fold rect { transform-box:fill-box; transform-origin:50% 50%; animation:sc-fold 8s ease-in-out infinite; }
.sc-fold .f1 { --tx:145px; --ty:85px; } .sc-fold .f2 { --tx:-145px; --ty:85px; }
.sc-fold .f3 { --tx:165px; --ty:-45px; } .sc-fold .f4 { --tx:-165px; --ty:-45px; } .sc-fold .f5 { --tx:0px; --ty:-85px; }
.sc-fold .f2 { animation-delay:.2s } .sc-fold .f3 { animation-delay:.4s } .sc-fold .f4 { animation-delay:.6s } .sc-fold .f5 { animation-delay:.8s }
@keyframes sc-fold { 0%,15%{opacity:1;transform:none} 45%,90%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.2) rotate(60deg)} 100%{opacity:1;transform:none} }
.sc-one { transform-box:fill-box; transform-origin:50% 60%; animation:sc-one 8s ease-out infinite; }
@keyframes sc-one { 0%,35%{opacity:0;transform:scale(.3)} 52%,90%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(.3)} }
.sc-one-dot { opacity:0; animation:sc-one-dot 8s ease-in-out infinite; }
@keyframes sc-one-dot { 0%,52%{opacity:0} 60%,90%{opacity:1} 100%{opacity:0} }
.sc-one-word { opacity:0; animation:sc-word 8s ease-in-out infinite; }

/* 5. The phone: the address types in, the badge and the hidden eye appear */
.sc-type { animation:sc-type 8s steps(14) infinite; clip-path:inset(0 100% 0 0); }
@keyframes sc-type { 0%,6%{clip-path:inset(0 100% 0 0)} 36%,92%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 100% 0 0)} }
.sc-badge { opacity:0; animation:sc-badge 8s ease-out infinite; }
@keyframes sc-badge { 0%,40%{opacity:0;transform:translateY(8px)} 50%,92%{opacity:1;transform:none} 100%{opacity:0} }
.sc-hide { opacity:0; animation:sc-hide 8s ease-out infinite; }
@keyframes sc-hide { 0%,56%{opacity:0;transform:translateX(-10px)} 66%,92%{opacity:1;transform:none} 100%{opacity:0} }

/* 6. The address changes, the files stay */
.sc-from { animation:sc-from 8s ease-in-out infinite; }
@keyframes sc-from { 0%,30%{opacity:1} 42%,88%{opacity:0} 100%{opacity:1} }
.sc-to { opacity:0; animation:sc-to 8s ease-in-out infinite; }
@keyframes sc-to { 0%,38%{opacity:0} 50%,88%{opacity:1} 100%{opacity:0} }
.sc-keep { stroke-dasharray:60; stroke-dashoffset:60; animation:sc-keep 8s ease-out infinite; }
@keyframes sc-keep { 0%,52%{stroke-dashoffset:60} 64%,88%{stroke-dashoffset:0} 100%{stroke-dashoffset:60} }

/* 7. A plain section becomes a working module */
.sc-arrow { stroke-dasharray:90; stroke-dashoffset:90; animation:sc-arrow 7s ease-out infinite; }
@keyframes sc-arrow { 0%,14%{stroke-dashoffset:90} 32%,90%{stroke-dashoffset:0} 100%{stroke-dashoffset:90} }
.sc-mod { opacity:0; animation:sc-mod 7s ease-out infinite; }
@keyframes sc-mod { 0%,30%{opacity:0;transform:translateX(-14px)} 44%,90%{opacity:1;transform:none} 100%{opacity:0} }
.sc-press { transform-box:fill-box; transform-origin:50% 50%; animation:sc-press 7s ease-in-out infinite; }
@keyframes sc-press { 0%,60%{transform:scale(1)} 64%{transform:scale(.88)} 70%,100%{transform:scale(1)} }

/* ---- the replacement list with status chips ---- */
.sc-stack { list-style:none; margin:14px auto; padding:0; max-width:34em; }
.sc-stack li { position:relative; margin:0 0 8px; padding:10px 12px 10px 104px; border-radius:12px;
               background:rgba(8,14,26,.5); border:1px solid rgba(255,255,255,.1); line-height:1.45;
               opacity:0; transform:translateY(8px); animation:sc-row .6s ease-out forwards; }
.sc-stack li:nth-child(2){animation-delay:.12s} .sc-stack li:nth-child(3){animation-delay:.24s}
.sc-stack li:nth-child(4){animation-delay:.36s} .sc-stack li:nth-child(5){animation-delay:.48s}
.sc-stack li:nth-child(6){animation-delay:.6s}  .sc-stack li:nth-child(7){animation-delay:.72s}
@keyframes sc-row { to { opacity:1; transform:none; } }
.sc-stack b { color:#fff; }
.sc-chip { position:absolute; left:12px; top:11px; width:80px; text-align:center; font-size:.72em; font-weight:700;
           letter-spacing:.06em; text-transform:uppercase; padding:3px 0; border-radius:999px; }
.sc-chip.on    { background:rgba(92,184,92,.18); color:#7fd17f; border:1px solid rgba(127,209,127,.5); }
.sc-chip.build { background:rgba(240,147,43,.15); color:#ffc27a; border:1px solid rgba(240,147,43,.5); }

/* ---- the demo address ---- */
.sc-code { display:inline-block; margin-top:4px; padding:3px 10px; border-radius:8px; max-width:100%;
           overflow-wrap:anywhere; background:rgba(6,19,31,.8); border:1px solid #243a58;
           color:#83e6ff; font:500 .88em/1.4 ui-monospace,Consolas,monospace; }

/* phones: the chip sits above the text instead of beside it */
@media (max-width:480px) {
  .sc-stack li { padding:34px 12px 10px; }
  .sc-chip { top:9px; }
}

/* ---- reduced motion: every figure shown finished ---- */
@media (prefers-reduced-motion: reduce) {
  .sc-stage *, .sc-stack li { animation:none !important; }
  .sc-card, .sc-fold rect, .sc-from { opacity:0 !important; }
  .sc-site, .sc-yours, .sc-one, .sc-one-dot, .sc-one-word, .sc-badge, .sc-hide, .sc-to, .sc-mod,
  .sc-stack li { opacity:1 !important; transform:none !important; }
  .sc-addr, .sc-type { clip-path:none !important; }
  .sc-piece { opacity:0 !important; } .sc-src { opacity:.25 !important; }
  .sc-folder { fill:#13361f !important; }
  .sc-keep, .sc-arrow { stroke-dashoffset:0 !important; }
}