/* dmint-loader.css — the ONE dmint loading indicator (full-screen boot + inline coin spinner). Reuses the exact coin motion + colors from dmint-coin-loader.svg / dmint-loader.html. Linked in so the boot overlay paints fully styled (no flash). */ :root{ --dl-ink:#0A0F0D; --dl-mint:#2FD996; --dl-chalk:#F4F7F5; --dl-dim:#5A6B62; } /* ---------- shared coin motion ---------- */ .dl-ring{ transform-box:fill-box; transform-origin:center; animation:dl-spin 9s linear infinite; } .dl-arc { transform-box:fill-box; transform-origin:center; animation:dl-spin 1.3s cubic-bezier(.6,.2,.3,1) infinite; } .dl-disc{ transform-box:fill-box; transform-origin:center; animation:dl-breathe 2.4s ease-in-out infinite, dl-stamp .7s cubic-bezier(.2,.9,.2,1) both; } .dl-glow{ transform-box:fill-box; transform-origin:center; animation:dl-glow 2.4s ease-in-out infinite; } @keyframes dl-spin { to{ transform:rotate(360deg); } } @keyframes dl-breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.045);} } @keyframes dl-glow { 0%,100%{ opacity:.55;} 50%{ opacity:1;} } @keyframes dl-stamp { 0%{ transform:scale(.55); opacity:0;} 60%{ transform:scale(1.06);} 100%{ transform:scale(1); opacity:1;} } /* ---------- full-screen boot overlay ---------- */ #dmint-loader{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; background: radial-gradient(50% 42% at 50% 42%, rgba(47,217,150,.14), transparent 62%), radial-gradient(90% 70% at 50% 55%, transparent 55%, rgba(0,0,0,.55)), var(--dl-ink); font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif; transition:opacity .55s cubic-bezier(.32,.72,0,1), visibility .55s; } #dmint-loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; } #dmint-loader .coin{ width:120px; height:120px; } #dmint-loader .wm{ display:flex; align-items:baseline; font-weight:700; font-size:32px; letter-spacing:-.045em; color:var(--dl-chalk); opacity:0; animation:dl-rise .7s cubic-bezier(.32,.72,0,1) .3s forwards; } #dmint-loader .wm .dot{ color:var(--dl-mint); } #dmint-loader .bar{ width:150px; height:2px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.06); opacity:0; animation:dl-rise .7s cubic-bezier(.32,.72,0,1) .45s forwards; } #dmint-loader .bar i{ display:block; height:100%; width:40%; border-radius:2px; background:var(--dl-mint); box-shadow:0 0 12px rgba(47,217,150,.6); animation:dl-slide 1.25s cubic-bezier(.6,.2,.3,1) infinite; } @keyframes dl-rise { from{ opacity:0; transform:translateY(10px); filter:blur(6px);} to{ opacity:1; transform:none; filter:none;} } @keyframes dl-slide{ 0%{ transform:translateX(-140%);} 100%{ transform:translateX(370%);} } /* ---------- inline coin spinner (buttons, sections, fetches) ---------- */ .dmint-spinner{ display:inline-block; vertical-align:middle; line-height:0; color:var(--dl-mint); } .dmint-spinner svg{ display:block; width:100%; height:100%; } /* the inline coin uses currentColor so it can invert on mint buttons, etc. */ /* ---------- accessibility ---------- */ @media (prefers-reduced-motion: reduce){ .dl-ring,.dl-arc,.dl-disc,.dl-glow,#dmint-loader .bar i{ animation:none; } #dmint-loader .wm,#dmint-loader .bar{ animation:none; opacity:1; } }