/* ========================================================================== ATLAS - css/loadanims.css - per-tool loading animations (pairs js/loadanims.js) Everything namespaced under .atl-la: zero collision with site.css. Self-contained --la-* tokens on the root class; --la-accent is set inline per mount (tool hex). Background stays transparent (aurora shows through). Fourteen visuals are faithful ports of the live app loaders (app.js loadAnim + base.css .la-*): same geometry and timing, keyframes renamed into the atlla_* namespace, app tokens remapped onto --la-* equivalents, app drop-shadow filters dropped (PERF LAW) and var()-in-presentation- attribute bugs fixed by moving paint to classed CSS rules. PERF LAW: safe inside the scrolling #app; no backdrop or filter effects anywhere in this file; transform/opacity/stroke keyframes only. Reduced motion: all animation assignments live inside @media (prefers-reduced-motion:no-preference); the base styles below each section ARE the composed resting frame. html[data-anim="off"] also pauses. ========================================================================== */ .atl-la{ --la-accent:#5B7CFA; --la-ok:#3FBFA5; --la-warn:#F0883E; --la-danger:#E5556E; --la-media:#C77DFF; --la-ink:#0d0d10; --la-s1:#16171d; --la-s2:#1d1f27; --la-hair:rgba(255,255,255,.09); --la-hair2:rgba(255,255,255,.17); --la-tx:#f0f1fa; --la-txm:rgba(240,241,250,.60); --la-txf:rgba(240,241,250,.38); --la-cat1:#E5556E; --la-cat2:#5B7CFA; --la-cat3:#C77DFF; --la-cat4:#F0883E; --la-cat5:#3FBFA5; --la-cat6:#8b93a6; --la-font:"Aeonik","Helvetica Neue",Arial,sans-serif; --la-mono:"IBMPlexMono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --la-ease:cubic-bezier(.22,1,.36,1); position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:16px;text-align:center;width:100%; padding:30px 24px; font-family:var(--la-font);color:var(--la-tx); background:transparent; } .atl-la:not(.atl-la--compact){min-height:clamp(300px,44vh,380px)} .atl-la--compact{gap:0;padding:0} /* optional modifier for mounts inside light (#EFF0F2) sections */ .atl-la--light{ --la-ink:#EFF0F2; --la-s1:#ffffff; --la-s2:#f3f4f8; --la-hair:rgba(13,13,16,.10); --la-hair2:rgba(13,13,16,.22); --la-tx:#111318; --la-txm:rgba(17,19,24,.62); --la-txf:rgba(17,19,24,.40); } .atl-la .la-visual{width:100%;max-width:360px;margin:0 auto;display:flex;align-items:center;justify-content:center} .atl-la--compact .la-visual{max-width:230px} .atl-la .la-v{display:block;width:100%;height:auto;overflow:visible} .atl-la text{font-family:var(--la-mono);fill:var(--la-txf)} .atl-la .la-title{font-family:var(--la-mono);font-size:15px;font-weight:500;letter-spacing:.01em;color:var(--la-tx);margin:0} .atl-la .la-sub{font-size:12.5px;line-height:1.55;color:var(--la-txm);max-width:440px;margin:0} .atl-la .la-hint{display:inline-flex;align-items:center;gap:9px;font-family:var(--la-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--la-txf);margin:0} .atl-la .la-hint::before{content:"working"} .atl-la .la-prog{position:relative;width:160px;height:2px;border-radius:2px;background:color-mix(in oklab,var(--la-accent) 16%,transparent);overflow:hidden} .atl-la .la-prog::after{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:2px;background:var(--la-accent);opacity:.85} @media (prefers-reduced-motion:no-preference){ .atl-la .la-prog::after{animation:atlla_prog 1.5s var(--la-ease) infinite} } @keyframes atlla_prog{0%{transform:translateX(-110%)}60%{transform:translateX(360%)}100%{transform:translateX(360%)}} /* site-wide animation kill switch (glass.js sets data-anim on ) */ html[data-anim="off"] .atl-la *{animation-play-state:paused !important} /* ========================================================================== 01 fast_sorter - card deck flicking into keep/clear lanes (T 3.9s) (site design: the app opens Fast Sorter instantly) ========================================================================== */ .atl-la .la-fst-lane{fill:color-mix(in oklab,var(--la-accent) 5%,transparent);stroke:var(--la-hair2);stroke-width:1} .atl-la .la-fst-label{font-size:10px;letter-spacing:.18em} .atl-la .la-fst-slab{fill:var(--la-s1);stroke:var(--la-hair);stroke-width:1} .atl-la .la-fst-card rect{fill:var(--la-s2);stroke:var(--la-hair2);stroke-width:1.5} .atl-la .la-fst-card line{stroke:var(--la-txf);stroke-width:1.5;stroke-linecap:round} .atl-la .la-fst-card{transform-box:fill-box;transform-origin:center} .atl-la .la-fst-tick{fill:none;stroke:var(--la-ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transform-box:fill-box;transform-origin:center} .atl-la .la-fst-cross{fill:none;stroke:var(--la-accent);stroke-width:2;stroke-linecap:round;opacity:.5;transform-box:fill-box;transform-origin:center} @media (prefers-reduced-motion:no-preference){ .atl-la .la-fst-card--a{animation:atlla_fst_l 3.9s var(--la-ease) infinite} .atl-la .la-fst-card--b{animation:atlla_fst_r 3.9s var(--la-ease) infinite;animation-delay:-2.6s} .atl-la .la-fst-card--c{animation:atlla_fst_l 3.9s var(--la-ease) infinite;animation-delay:-1.3s} .atl-la .la-fst-tick{animation:atlla_fst_tick 3.9s var(--la-ease) infinite} .atl-la .la-fst-cross{animation:atlla_fst_cross 3.9s var(--la-ease) infinite} } @keyframes atlla_fst_l{ 0%{transform:translate(0,0) rotate(0deg);opacity:1} 10%{transform:translate(0,-8px) rotate(-2deg);opacity:1} 24%{transform:translate(-106px,-4px) rotate(-8deg);opacity:1} 28%{transform:translate(-110px,2px) rotate(-5deg);opacity:0} 56%{transform:translate(0,12px) rotate(0deg);opacity:0} 84%{transform:translate(0,6px) rotate(0deg);opacity:0} 94%{transform:translate(0,0) rotate(0deg);opacity:1} 100%{transform:translate(0,0) rotate(0deg);opacity:1}} @keyframes atlla_fst_r{ 0%{transform:translate(0,0) rotate(0deg);opacity:1} 10%{transform:translate(0,-8px) rotate(2deg);opacity:1} 24%{transform:translate(106px,-4px) rotate(8deg);opacity:1} 28%{transform:translate(110px,2px) rotate(5deg);opacity:0} 56%{transform:translate(0,12px) rotate(0deg);opacity:0} 84%{transform:translate(0,6px) rotate(0deg);opacity:0} 94%{transform:translate(0,0) rotate(0deg);opacity:1} 100%{transform:translate(0,0) rotate(0deg);opacity:1}} @keyframes atlla_fst_tick{ 0%,22%{opacity:.5;transform:scale(1)} 28%{opacity:1;transform:scale(1.22)} 36%{opacity:.5;transform:scale(1)} 90%{opacity:.5;transform:scale(1)} 95%{opacity:1;transform:scale(1.22)} 100%{opacity:.5;transform:scale(1)}} @keyframes atlla_fst_cross{ 0%,56%{opacity:.5;transform:scale(1)} 61%{opacity:1;transform:scale(1.22)} 69%{opacity:.5;transform:scale(1)} 100%{opacity:.5;transform:scale(1)}} /* ========================================================================== 02 crossfire - ownership-trace beams (ported) (T 4s / rings 5.2s) ========================================================================== */ .atl-la .la-cfx-ring{fill:none;stroke:color-mix(in oklab,var(--la-accent) 45%,transparent);stroke-width:1;opacity:.5} .atl-la .la-cfx-ring--2{opacity:.32} .atl-la .la-cfx-ring--3{opacity:.2} .atl-la .la-cfx-rings{transform-box:view-box;transform-origin:180px 150px} .atl-la .la-cfx-beam{stroke:var(--la-accent);stroke-width:1.5;stroke-linecap:round;opacity:.45} .atl-la .la-cfx-node{fill:var(--la-ink);stroke:var(--la-accent);stroke-width:1.5;opacity:.7;transform-box:fill-box;transform-origin:center} .atl-la .la-cfx-halo{fill:none;stroke:color-mix(in oklab,var(--la-accent) 45%,transparent);stroke-width:1;opacity:.6;transform-box:fill-box;transform-origin:center} .atl-la .la-cfx-hub{fill:color-mix(in oklab,var(--la-accent) 14%,transparent);stroke:var(--la-accent);stroke-width:1.5} .atl-la .la-cfx-core{fill:var(--la-accent);transform-box:fill-box;transform-origin:center} @media (prefers-reduced-motion:no-preference){ .atl-la .la-cfx-rings{animation:atlla_cfx_sweep 5.2s linear infinite} .atl-la .la-cfx-ring{animation:atlla_cfx_pulse 2.6s ease-in-out infinite} .atl-la .la-cfx-ring--2{animation-delay:.35s} .atl-la .la-cfx-ring--3{animation-delay:.7s} .atl-la .la-cfx-beam{stroke-dasharray:300;animation:atlla_cfx_trace 4s var(--la-ease) infinite} .atl-la .la-cfx-beam--2{animation-delay:.45s} .atl-la .la-cfx-beam--3{animation-delay:.9s} .atl-la .la-cfx-beam--4{animation-delay:1.35s} .atl-la .la-cfx-beam--5{animation-delay:1.8s} .atl-la .la-cfx-node{animation:atlla_cfx_land 4s var(--la-ease) infinite} .atl-la .la-cfx-node--2{animation-delay:.45s} .atl-la .la-cfx-node--3{animation-delay:.9s} .atl-la .la-cfx-node--4{animation-delay:1.35s} .atl-la .la-cfx-node--5{animation-delay:1.8s} .atl-la .la-cfx-halo{animation:atlla_cfx_emit 2s ease-in-out infinite} .atl-la .la-cfx-core{animation:atlla_cfx_emit 2s ease-in-out infinite} } @keyframes atlla_cfx_sweep{to{transform:rotate(360deg)}} @keyframes atlla_cfx_pulse{0%,100%{opacity:.18}50%{opacity:.55}} @keyframes atlla_cfx_trace{0%{stroke-dashoffset:300;opacity:0}10%{opacity:1}30%{stroke-dashoffset:0;opacity:1}55%{opacity:.7}100%{stroke-dashoffset:0;opacity:.28}} @keyframes atlla_cfx_land{0%,24%{transform:scale(.6);opacity:.35}32%{transform:scale(1.35);opacity:1}45%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:.6}} @keyframes atlla_cfx_emit{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}} /* ========================================================================== 03 vault - CSS-3D circular vault door (ported from app la-vlt loading state: wheel turn 5s, seam glow 2.4s, door closed, bolts thrown). Metallic tones fixed like the app's; seam glow follows --la-accent. ========================================================================== */ .atl-la .la-vlt{display:flex;justify-content:center;width:100%} .atl-la .la-vlt-stage{position:relative;width:320px;height:320px;perspective:1300px;perspective-origin:60% 45%;display:grid;place-items:center} .atl-la--compact .la-vlt-stage{transform:scale(.62);margin:-62px} .atl-la .la-vlt-frame{position:relative;width:266px;height:266px;border-radius:50%;transform-style:preserve-3d; background:radial-gradient(circle at 50% 44%,#0f1218,#050609);border:2px solid #2a313c; box-shadow:inset 0 0 52px rgba(0,0,0,.82),inset 0 0 0 9px #0a0d12,inset 0 0 0 10px rgba(180,200,255,.06),0 26px 64px -22px rgba(0,0,0,.92)} .atl-la .la-vlt-door{position:absolute;inset:11px;transform-style:preserve-3d;transform-origin:left center} .atl-la .la-vlt-rim{position:absolute;inset:0;border-radius:50%;transform:translateZ(var(--z,0px));background:radial-gradient(circle at 50% 50%,#2a313d,#0f131a 78%)} .atl-la .la-vlt-face{position:absolute;inset:0;border-radius:50%;transform:translateZ(22px); background:radial-gradient(circle at 35% 28%,#3a4453,#1c222d 56%,#0f131a);border:1px solid #434d5d; box-shadow:inset 0 0 36px rgba(0,0,0,.6),inset 5px 3px 12px rgba(255,255,255,.06)} .atl-la .la-vlt-bevel{position:absolute;inset:15px;border-radius:50%;border:2px solid rgba(180,200,255,.09);box-shadow:inset 0 0 0 7px rgba(0,0,0,.22),inset 0 0 26px rgba(0,0,0,.55)} .atl-la .la-vlt-bolt{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%; background:radial-gradient(circle at 38% 34%,#6c7686,#2b313c);box-shadow:0 0 0 3px #161b23,inset 0 0 3px rgba(0,0,0,.5); transform:rotate(var(--a,0deg)) translateY(-98px)} .atl-la .la-vlt-seam{position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px color-mix(in oklab,var(--la-accent) 8%,transparent)} .atl-la .la-vlt-glow{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 14px 1px color-mix(in oklab,var(--la-accent) 42%,transparent)} .atl-la .la-vlt-wheel{position:absolute;left:50%;top:50%;width:122px;height:122px;margin:-61px 0 0 -61px;border-radius:50%; background:radial-gradient(circle at 40% 34%,#3a4350,#191e28);border:4px solid #525c6b;box-shadow:inset 0 0 18px rgba(0,0,0,.65),0 3px 9px rgba(0,0,0,.5)} .atl-la .la-vlt-spoke{position:absolute;left:50%;top:50%;width:6px;height:114px;margin:-57px 0 0 -3px;border-radius:5px;background:linear-gradient(#656f7f,#262c37)} .atl-la .la-vlt-spoke:nth-child(2){transform:rotate(60deg)} .atl-la .la-vlt-spoke:nth-child(3){transform:rotate(120deg)} .atl-la .la-vlt-grip{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%; background:radial-gradient(circle at 38% 34%,#5b6573,#222733);box-shadow:inset 0 0 3px rgba(0,0,0,.5);transform:rotate(var(--a,0deg)) translateY(-55px)} .atl-la .la-vlt-hub{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:radial-gradient(circle at 40% 34%,#3c4452,#13171e);border:1px solid #4c5666} .atl-la .la-vlt-knob{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%; background:radial-gradient(circle at 38% 34%,#727c8c,#2b313c);box-shadow:0 0 0 4px #1b212a,inset 0 0 4px rgba(0,0,0,.5)} @media (prefers-reduced-motion:no-preference){ .atl-la .la-vlt-wheel{animation:atlla_vlt_turn 5s linear infinite} .atl-la .la-vlt-glow{animation:atlla_vlt_glow 2.4s ease-in-out infinite} } @keyframes atlla_vlt_turn{to{transform:rotate(360deg)}} @keyframes atlla_vlt_glow{0%,100%{opacity:0}50%{opacity:1}} /* ========================================================================== 04 smart_cleanup - sweep stage into risk bins (ported) (T 3.2s) ========================================================================== */ .atl-la .la-clu-stage{fill:var(--la-s1);stroke:var(--la-hair);stroke-width:1} .atl-la .la-clu-fleck{opacity:.85} .atl-la .la-clu-fleck--ok{fill:var(--la-accent)} .atl-la .la-clu-fleck--warn{fill:var(--la-warn)} .atl-la .la-clu-fleck--bad{fill:var(--la-danger)} .atl-la .la-clu-beam rect{fill:color-mix(in oklab,var(--la-accent) 16%,transparent)} .atl-la .la-clu-beam line{stroke:color-mix(in oklab,var(--la-accent) 70%,transparent);stroke-width:1.5} .atl-la .la-clu-col{fill:var(--la-s1);stroke:var(--la-hair);stroke-width:1} .atl-la .la-clu-fill{transform-box:fill-box;transform-origin:bottom} .atl-la .la-clu-fill--safe{fill:color-mix(in oklab,var(--la-accent) 78%,transparent)} .atl-la .la-clu-fill--caution{fill:color-mix(in oklab,var(--la-warn) 78%,transparent)} .atl-la .la-clu-fill--expert{fill:color-mix(in oklab,var(--la-danger) 78%,transparent)} .atl-la .la-clu-tag{font-size:9.5px;letter-spacing:.08em} .atl-la .la-clu-tag--safe{fill:var(--la-accent)} .atl-la .la-clu-tag--caution{fill:var(--la-warn)} .atl-la .la-clu-tag--expert{fill:var(--la-danger)} @media (prefers-reduced-motion:no-preference){ .atl-la .la-clu-beam{animation:atlla_clu_sweep 3.2s var(--la-ease) infinite} .atl-la .la-clu-fleck{animation:atlla_clu_gather 3.2s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 3.2s)} .atl-la .la-clu-fill{animation:atlla_clu_stack 3.2s var(--la-ease) infinite} .atl-la .la-clu-fill--caution{animation-delay:.26s} .atl-la .la-clu-fill--expert{animation-delay:.52s} } @keyframes atlla_clu_sweep{ 0%{transform:translateX(0);opacity:1} 72%{transform:translateX(316px);opacity:1} 72.01%{transform:translateX(316px);opacity:0} 100%{transform:translateX(316px);opacity:0}} @keyframes atlla_clu_gather{ 0%{transform:translate(0,0);opacity:0} 10%{opacity:.9} 60%{transform:translate(var(--dx,-40px),var(--dy,20px));opacity:.9} 72%{transform:translate(var(--dx,-40px),var(--dy,20px)) scale(.4);opacity:0} 100%{transform:translate(var(--dx,-40px),var(--dy,20px)) scale(.4);opacity:0}} @keyframes atlla_clu_stack{0%,40%{transform:scaleY(.08)}78%,100%{transform:scaleY(1)}} /* ========================================================================== 05 categories - treemap tiling build (ported; also the "dashboard" id's disk-map visual) (T 3.6s) ========================================================================== */ .atl-la .la-cat-plot{fill:color-mix(in oklab,var(--la-s1) 80%,transparent);stroke:var(--la-hair2);stroke-width:1} .atl-la .la-cat-cell{stroke:var(--la-ink);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:.92} .atl-la .la-cat-cell--1{fill:color-mix(in oklab,var(--la-cat1) 70%,var(--la-s1))} .atl-la .la-cat-cell--2{fill:color-mix(in oklab,var(--la-cat2) 70%,var(--la-s1))} .atl-la .la-cat-cell--3{fill:color-mix(in oklab,var(--la-cat3) 70%,var(--la-s1))} .atl-la .la-cat-cell--4{fill:color-mix(in oklab,var(--la-cat4) 70%,var(--la-s1))} .atl-la .la-cat-cell--5{fill:color-mix(in oklab,var(--la-cat5) 70%,var(--la-s1))} .atl-la .la-cat-cell--6{fill:color-mix(in oklab,var(--la-cat6) 70%,var(--la-s1))} .atl-la .la-cat-split{stroke:var(--la-accent);stroke-width:1.5;stroke-dasharray:4 5;opacity:0} .atl-la .la-cat-corners path{fill:none;stroke:var(--la-accent);stroke-width:1.5;opacity:.5} @media (prefers-reduced-motion:no-preference){ .atl-la .la-cat-cell{animation:atlla_cat_tile 3.6s var(--la-ease) infinite both} .atl-la .la-cat-cell--2{animation-delay:.28s} .atl-la .la-cat-cell--3{animation-delay:.52s} .atl-la .la-cat-cell--4{animation-delay:.76s} .atl-la .la-cat-cell--5{animation-delay:1s} .atl-la .la-cat-cell--6{animation-delay:1.24s} .atl-la .la-cat-split{animation:atlla_cat_split 3.6s var(--la-ease) infinite both} .atl-la .la-cat-plot{animation:atlla_cat_breathe 3.6s var(--la-ease) infinite both} } @keyframes atlla_cat_tile{0%{opacity:0;transform:scale(.4)}18%{opacity:.95;transform:scale(1.03)}30%,86%{opacity:.92;transform:scale(1)}100%{opacity:.92;transform:scale(1)}} @keyframes atlla_cat_split{0%,4%{opacity:0;transform:translateX(0)}10%{opacity:.85}46%{opacity:.7;transform:translateX(304px)}60%,100%{opacity:0;transform:translateX(304px)}} @keyframes atlla_cat_breathe{0%,100%{opacity:1}50%{opacity:.7}} /* ========================================================================== 06 biggest_files - ranked category bars under a descending scan line (ported from app la-bg loading state: grow 3s / .1s stagger, scan 2.1s). Resting frame = bars at their ranked --s widths (the app's loaded pose). ========================================================================== */ .atl-la .la-big-eyebrow{font-size:9px;letter-spacing:.28em;fill:var(--la-txf)} .atl-la .la-big-meta{font-size:11px;fill:var(--la-txf)} .atl-la .la-big-rk{font-size:12px;fill:var(--la-txf)} .atl-la .la-big-name{font-family:var(--la-font);font-size:12px;fill:var(--la-txm)} .atl-la .la-big-track{fill:var(--la-s2)} .atl-la .la-big-fill{fill:var(--c,var(--la-accent));transform-box:fill-box;transform-origin:left center;transform:scaleX(var(--s,1))} .atl-la .la-big-size{font-size:12.5px;font-weight:600;fill:var(--la-tx)} .atl-la .la-big-scan{stroke:var(--la-accent);stroke-width:2;stroke-linecap:round;opacity:0} .atl-la .la-big-path{font-size:11px;fill:var(--la-txm)} .atl-la .la-big-ar{fill:var(--la-accent)} @media (prefers-reduced-motion:no-preference){ .atl-la .la-big-fill{animation:atlla_big_grow 3s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 3s)} .atl-la .la-big-scan{animation:atlla_big_scan 2.1s var(--la-ease) infinite} } @keyframes atlla_big_grow{ 0%{transform:scaleX(.14);opacity:.5} 14%{opacity:1} 40%{transform:scaleX(.85)} 54%{transform:scaleX(.7)} 86%{opacity:1} 100%{transform:scaleX(.14);opacity:.5}} @keyframes atlla_big_scan{ 0%{transform:translateY(0);opacity:0} 10%{opacity:.9} 90%{opacity:.9} 100%{transform:translateY(208px);opacity:0}} /* ========================================================================== 07 duplicates - twin fingerprint lock (ported) (T 3.6s) ========================================================================== */ .atl-la .la-dup-lane{fill:color-mix(in oklab,var(--la-accent) 6%,transparent);stroke:var(--la-hair2);stroke-width:1} .atl-la .la-dup-file path{fill:var(--la-s2);stroke:var(--la-hair2);stroke-width:1.5;stroke-linejoin:round} .atl-la .la-dup-fold{fill:none;stroke:var(--la-hair2);stroke-width:1.5} .atl-la .la-dup-hex text{fill:var(--la-txf);font-size:12px} .atl-la .la-dup-cell{fill:var(--la-accent);opacity:.16} .atl-la .la-dup-lock{stroke:var(--la-accent);stroke-width:2.5;stroke-linecap:round;opacity:0} .atl-la .la-dup-match{fill:var(--la-accent);font-size:11px;letter-spacing:.22em;opacity:.85} @media (prefers-reduced-motion:no-preference){ .atl-la .la-dup-file{animation:atlla_dup_breathe 3.4s var(--la-ease) infinite} .atl-la .la-dup-file--r{animation:atlla_dup_breathe_r 3.4s var(--la-ease) infinite;animation-delay:.25s} .atl-la .la-dup-hex--l text{animation:atlla_dup_flow_l 3.6s linear infinite} .atl-la .la-dup-hex--r text{animation:atlla_dup_flow_r 3.6s linear infinite} .atl-la .la-dup-hex text:nth-child(2){animation-delay:.5s} .atl-la .la-dup-hex text:nth-child(3){animation-delay:1s} .atl-la .la-dup-hex text:nth-child(4){animation-delay:1.5s} .atl-la .la-dup-hex text:nth-child(5){animation-delay:2s} .atl-la .la-dup-hex text:nth-child(6){animation-delay:2.5s} .atl-la .la-dup-cell{animation:atlla_dup_lockcell 3.6s var(--la-ease) infinite} .atl-la .la-dup-cell:nth-child(2){animation-delay:.12s} .atl-la .la-dup-cell:nth-child(3){animation-delay:.24s} .atl-la .la-dup-cell:nth-child(4){animation-delay:.36s} .atl-la .la-dup-cell:nth-child(5){animation-delay:.48s} .atl-la .la-dup-cell:nth-child(6){animation-delay:.6s} .atl-la .la-dup-cell:nth-child(7){animation-delay:.72s} .atl-la .la-dup-cell:nth-child(8){animation-delay:.84s} .atl-la .la-dup-cell:nth-child(9){animation-delay:.96s} .atl-la .la-dup-cell:nth-child(10){animation-delay:1.08s} .atl-la .la-dup-cell:nth-child(11){animation-delay:1.2s} .atl-la .la-dup-cell:nth-child(12){animation-delay:1.32s} .atl-la .la-dup-cell:nth-child(13){animation-delay:1.44s} .atl-la .la-dup-cell:nth-child(14){animation-delay:1.56s} .atl-la .la-dup-lock{animation:atlla_dup_lock 3.6s var(--la-ease) infinite} .atl-la .la-dup-match{animation:atlla_dup_confirm 3.6s var(--la-ease) infinite} } @keyframes atlla_dup_breathe{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(7px)}} @keyframes atlla_dup_breathe_r{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(-7px)}} @keyframes atlla_dup_flow_l{0%{opacity:0;transform:translateX(0)}12%{opacity:.85}40%{opacity:0;transform:translateX(34px)}100%{opacity:0;transform:translateX(34px)}} @keyframes atlla_dup_flow_r{0%{opacity:0;transform:translateX(0)}12%{opacity:.85}40%{opacity:0;transform:translateX(-34px)}100%{opacity:0;transform:translateX(-34px)}} @keyframes atlla_dup_lockcell{0%,38%{opacity:.16}50%{opacity:1}80%{opacity:1}100%{opacity:.16}} @keyframes atlla_dup_lock{0%,70%{opacity:0;stroke-dasharray:0 60}82%{opacity:1;stroke-dasharray:60 0}96%{opacity:1}100%{opacity:0}} @keyframes atlla_dup_confirm{0%,72%{opacity:.2}84%{opacity:1}96%{opacity:1}100%{opacity:.2}} /* ========================================================================== 08 ghost_files - severance graph (ported) (T 3.2s) Node position lives on a wrapper ; the drift animation runs on the inner .la-gho-node so CSS transforms never clobber the translate. ========================================================================== */ .atl-la .la-gho-ring{fill:none;stroke:var(--la-hair2);stroke-width:1} .atl-la .la-gho-ring--2{stroke:var(--la-hair)} .atl-la .la-gho-edge{stroke:var(--la-danger);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:5 6;opacity:.55} .atl-la .la-gho-orphan{fill:var(--la-danger);opacity:.16} .atl-la .la-gho-halo{fill:color-mix(in oklab,var(--la-danger) 14%,transparent)} .atl-la .la-gho-disc{fill:var(--la-s1);stroke:var(--la-danger);stroke-width:1.8} .atl-la .la-gho-x{stroke:var(--la-danger);stroke-width:1.6;stroke-linecap:round;fill:none} .atl-la .la-gho-node{opacity:.9;transform-box:fill-box;transform-origin:center} .atl-la .la-gho-hubhalo{fill:color-mix(in oklab,var(--la-accent) 16%,transparent);transform-box:fill-box;transform-origin:center} .atl-la .la-gho-hub{fill:var(--la-s1);stroke:var(--la-accent);stroke-width:2} .atl-la .la-gho-hubtx{fill:var(--la-accent);font-size:8px;letter-spacing:.14em} @media (prefers-reduced-motion:no-preference){ .atl-la .la-gho-edge{animation:atlla_gho_sever 3.2s var(--la-ease) infinite} .atl-la .la-gho-edge--2{animation-delay:.5s} .atl-la .la-gho-edge--3{animation-delay:1s} .atl-la .la-gho-edge--4{animation-delay:1.5s} .atl-la .la-gho-node{animation:atlla_gho_adrift 3.2s var(--la-ease) infinite} .atl-la .la-gho-node--2{animation-delay:.5s} .atl-la .la-gho-node--3{animation-delay:1s} .atl-la .la-gho-node--4{animation-delay:1.5s} .atl-la .la-gho-orphan{animation:atlla_gho_flicker 2.6s ease-in-out infinite} .atl-la .la-gho-orphan--b{animation-delay:.7s} .atl-la .la-gho-orphan--c{animation-delay:1.3s} .atl-la .la-gho-orphan--d{animation-delay:1.9s} .atl-la .la-gho-orphan--e{animation-delay:.4s} .atl-la .la-gho-hubhalo{animation:atlla_gho_pulse 2.8s ease-in-out infinite} } @keyframes atlla_gho_sever{ 0%{opacity:.55;stroke-dashoffset:0} 55%{opacity:.5;stroke-dashoffset:-44} 72%{opacity:0;stroke-dashoffset:-66} 100%{opacity:.55;stroke-dashoffset:0}} @keyframes atlla_gho_adrift{ 0%{opacity:.9;transform:translate(0,0)} 60%{opacity:.62;transform:translate(0,0)} 74%{opacity:.34;transform:translate(3px,-3px) scale(.96)} 100%{opacity:.9;transform:translate(0,0)}} @keyframes atlla_gho_flicker{0%,100%{opacity:.1}45%{opacity:.1}55%{opacity:.5}70%{opacity:.22}} @keyframes atlla_gho_pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.12)}} /* ========================================================================== 09 clean_uninstall - residue sonar (ported from app la-cu loading state: sonar 2.7s x3, thread draw + node light 2.7s, .18s stagger via --d). Resting frame = threads drawn, nodes lit (the app's reduced-motion pose). ========================================================================== */ .atl-la .la-cun-sonar{fill:none;stroke:var(--la-accent);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center} .atl-la .la-cun-thread{stroke:var(--la-accent);stroke-width:1.4;fill:none;stroke-dasharray:240;stroke-dashoffset:0;opacity:.85} .atl-la .la-cun-node{fill:var(--la-ink);stroke:var(--la-accent);stroke-width:1.6;opacity:1} .atl-la .la-cun-nlabel{font-size:8.5px;fill:var(--la-txf);letter-spacing:.03em} .atl-la .la-cun-app{fill:color-mix(in oklab,var(--la-accent) 15%,var(--la-ink));stroke:var(--la-accent);stroke-width:2} .atl-la .la-cun-glyph{fill:none;stroke:var(--la-accent);stroke-width:1.8;stroke-linecap:round} .atl-la .la-cun-applabel{font-size:8px;letter-spacing:.18em;fill:var(--la-accent)} @media (prefers-reduced-motion:no-preference){ .atl-la .la-cun-sonar{animation:atlla_cun_sonar 2.7s ease-out infinite;animation-delay:calc(var(--d,0)*1s - 5.4s)} .atl-la .la-cun-thread{animation:atlla_cun_thread 2.7s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 2.7s)} .atl-la .la-cun-node{animation:atlla_cun_node 2.7s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 2.7s)} } @keyframes atlla_cun_sonar{0%{transform:scale(.32);opacity:.75}100%{transform:scale(2.3);opacity:0}} @keyframes atlla_cun_thread{ 0%,26%{stroke-dashoffset:240;opacity:.2} 54%{stroke-dashoffset:0;opacity:.9} 86%{stroke-dashoffset:0;opacity:.85} 100%{stroke-dashoffset:0;opacity:.2}} @keyframes atlla_cun_node{0%,38%{opacity:.28}56%{opacity:1}100%{opacity:.28}} /* ========================================================================== 10 recycle_bin - deleted file-cards read by a beam and dropped into the bin; the recycle mark settles into focus (ported, T 4.4s, .5s stagger) ========================================================================== */ .atl-la .la-rcb-g1{stop-color:var(--la-s2)} .atl-la .la-rcb-g2{stop-color:var(--la-s1)} .atl-la .la-rcb-rule{stroke:var(--la-hair);stroke-width:1;stroke-dasharray:2 5;opacity:.7} .atl-la .la-rcb-card{transform-box:fill-box;transform-origin:center} .atl-la .la-rcb-card rect{stroke:var(--la-hair2)} .atl-la .la-rcb-fold{fill:none;stroke:var(--la-hair2);stroke-width:1.4} .atl-la .la-rcb-read{fill:var(--la-txf);font-size:10px;letter-spacing:.02em} .atl-la .la-rcb-bin-body{fill:color-mix(in oklab,var(--la-accent) 6%,var(--la-s1));stroke:var(--la-accent);stroke-width:1.8;stroke-linejoin:round;opacity:.85} .atl-la .la-rcb-bin-lid{fill:none;stroke:var(--la-accent);stroke-width:1.8;stroke-linecap:round} .atl-la .la-rcb-bin-grip{fill:color-mix(in oklab,var(--la-accent) 6%,var(--la-s1));stroke:var(--la-accent);stroke-width:1.8} .atl-la .la-rcb-bin-rib{stroke:var(--la-accent);stroke-width:1.2;opacity:.4} .atl-la .la-rcb-mark{opacity:0;transform-box:fill-box;transform-origin:center} .atl-la .la-rcb-mark path{fill:none;stroke:var(--la-accent);stroke-width:2;stroke-linecap:round} .atl-la .la-rcb-beam{stroke:var(--la-accent);stroke-width:1.4;opacity:.6} .atl-la .la-rcb-tally{fill:var(--la-accent);font-size:11px;letter-spacing:.2em;opacity:.85} @media (prefers-reduced-motion:no-preference){ .atl-la .la-rcb-card{animation:atlla_rcb_drop 4.4s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 4.4s)} .atl-la .la-rcb-card .la-rcb-read{animation:atlla_rcb_read 4.4s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 4.4s)} .atl-la .la-rcb-beam{animation:atlla_rcb_sweep 4.4s var(--la-ease) infinite} .atl-la .la-rcb-mark{animation:atlla_rcb_mark 4.4s var(--la-ease) infinite} .atl-la .la-rcb-tally{animation:atlla_rcb_tally 4.4s var(--la-ease) infinite} } /* a card reads at its row, then drops/fades toward the bin; calm settle */ @keyframes atlla_rcb_drop{ 0%{opacity:0;transform:translate(-12px,-6px) scale(.96)} 10%{opacity:1;transform:translate(0,0) scale(1)} 46%{opacity:1;transform:translate(0,0) scale(1)} 62%{opacity:.9;transform:translate(96px,46px) scale(.82)} 74%{opacity:0;transform:translate(150px,70px) scale(.5)} 100%{opacity:0;transform:translate(150px,70px) scale(.5)}} /* readout brightens as the beam passes, then fades with the card */ @keyframes atlla_rcb_read{ 0%,8%{opacity:0} 16%{opacity:1} 46%{opacity:1} 60%{opacity:0} 100%{opacity:0}} /* horizontal beam sweeps down the stack, reading each card row in turn */ @keyframes atlla_rcb_sweep{ 0%{transform:translateY(0);opacity:0} 6%{opacity:.6} 46%{transform:translateY(92px);opacity:.6} 56%{opacity:0} 100%{transform:translateY(92px);opacity:0}} /* the recycle mark resolves into focus on the settle */ @keyframes atlla_rcb_mark{ 0%,64%{opacity:0;transform:scale(.7)} 78%{opacity:.9;transform:scale(1.06)} 90%{opacity:.85;transform:scale(1)} 100%{opacity:0;transform:scale(1)}} @keyframes atlla_rcb_tally{ 0%,66%{opacity:.25} 80%{opacity:.95} 94%{opacity:.85} 100%{opacity:.25}} /* ========================================================================== 11 recovery - reclaimable-space gauge (ported from app la-rec loading state: orbit comet 2s linear, 16 pings 2s / .125s stagger), rebuilt as SVG (the app's conic gradients become stroked rings and a dashed arc). ========================================================================== */ .atl-la .la-rcv-track{fill:none;stroke:var(--la-s2);stroke-width:36} .atl-la .la-rcv-ticks{fill:none;stroke:var(--la-hair2);stroke-width:10;stroke-dasharray:1.16 8.79;opacity:.8} .atl-la .la-rcv-orbit{transform-box:view-box;transform-origin:180px 132px} .atl-la .la-rcv-tail{fill:none;stroke:var(--la-accent);stroke-width:3;stroke-linecap:round;opacity:.5;stroke-dasharray:169 384;stroke-dashoffset:-245.7} .atl-la .la-rcv-head{fill:var(--la-accent)} .atl-la .la-rcv-ping{fill:var(--la-accent);opacity:.16;transform-box:view-box;transform-origin:180px 132px;transform:rotate(var(--a,0deg)) translateY(-88px)} .atl-la .la-rcv-hub{stroke:var(--la-hair);stroke-width:1} .atl-la .la-rcv-h1{stop-color:var(--la-s2)} .atl-la .la-rcv-h2{stop-color:var(--la-s1)} .atl-la .la-rcv-still{font-size:14px;letter-spacing:.04em;fill:var(--la-accent)} .atl-la .la-rcv-cap{font-size:8px;letter-spacing:.24em;fill:var(--la-txf)} .atl-la .la-rcv-tier{opacity:.4} .atl-la .la-rcv-dot--safe{fill:var(--la-accent)} .atl-la .la-rcv-dot--caution{fill:var(--la-warn)} .atl-la .la-rcv-dot--expert{fill:var(--la-danger)} .atl-la .la-rcv-lbl{font-size:11.5px;fill:var(--la-txm)} .atl-la .la-rcv-val{font-size:11.5px;font-weight:600;fill:var(--la-tx)} .atl-la .la-rcv-path{font-size:11px;fill:var(--la-txm)} .atl-la .la-rcv-ar{fill:var(--la-accent)} @media (prefers-reduced-motion:no-preference){ .atl-la .la-rcv-orbit{animation:atlla_rcv_orbit 2s linear infinite} .atl-la .la-rcv-ping{animation:atlla_rcv_ping 2s linear infinite;animation-delay:calc(var(--d,0)*1s - 4s)} } @keyframes atlla_rcv_orbit{to{transform:rotate(360deg)}} @keyframes atlla_rcv_ping{ 0%,100%{opacity:.12;transform:rotate(var(--a,0deg)) translateY(-88px) scale(.7)} 7%{opacity:1;transform:rotate(var(--a,0deg)) translateY(-88px) scale(1.7)} 20%{opacity:.14;transform:rotate(var(--a,0deg)) translateY(-88px) scale(.95)}} /* ========================================================================== 12 restore_points - timeline draw with scrubbing playhead and rising blocks (ported from app la-rs loading state, T 2.8s, chips .3s stagger) ========================================================================== */ .atl-la .la-rsp-spine{stroke:var(--la-hair2);stroke-width:2;stroke-dasharray:320;stroke-dashoffset:0} .atl-la .la-rsp-tick{stroke:var(--la-hair2);stroke-width:1.4} .atl-la .la-rsp-dot{fill:var(--la-ink);stroke:var(--la-accent);stroke-width:1.6;opacity:.42} .atl-la .la-rsp-date{font-size:8px;fill:var(--la-txf);letter-spacing:.02em;text-anchor:middle} .atl-la .la-rsp-chip{fill:color-mix(in oklab,var(--la-accent) 72%,#ffffff 6%);opacity:.55} .atl-la .la-rsp-head polygon{fill:var(--la-accent)} .atl-la .la-rsp-head line{stroke:var(--la-accent);stroke-width:1.6} @media (prefers-reduced-motion:no-preference){ .atl-la .la-rsp-spine{animation:atlla_rsp_draw 2.8s var(--la-ease) infinite} .atl-la .la-rsp-head{animation:atlla_rsp_scrub 2.8s var(--la-ease) infinite} .atl-la .la-rsp-chip{animation:atlla_rsp_rise 2.8s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 2.8s)} } @keyframes atlla_rsp_draw{0%{stroke-dashoffset:320}42%{stroke-dashoffset:0}100%{stroke-dashoffset:0}} @keyframes atlla_rsp_scrub{0%{transform:translateX(0)}50%{transform:translateX(276px)}100%{transform:translateX(0)}} @keyframes atlla_rsp_rise{ 0%,28%{opacity:0;transform:translateY(0)} 52%{opacity:1;transform:translateY(-40px)} 82%{opacity:.85;transform:translateY(-40px)} 100%{opacity:0;transform:translateY(-46px)}} /* ========================================================================== 13 windows_optimizer - gauge sweep, segment lights (T 5.2s) (site design: the app opens the optimizer instantly) ========================================================================== */ .atl-la .la-wop-arc{fill:none;stroke:var(--la-hair2);stroke-width:1.4} .atl-la .la-wop-base{stroke:var(--la-hair);stroke-width:1} .atl-la .la-wop-seg{stroke:var(--la-accent);stroke-width:2.4;stroke-linecap:round;opacity:.85} .atl-la .la-wop-needle{transform-box:view-box;transform-origin:180px 214px;transform:rotate(58deg)} .atl-la .la-wop-needle line{stroke:var(--la-accent);stroke-width:2.4;stroke-linecap:round} .atl-la .la-wop-pivot{fill:var(--la-s1);stroke:var(--la-accent);stroke-width:1.6} .atl-la .la-wop-pivotdot{fill:var(--la-accent)} @media (prefers-reduced-motion:no-preference){ .atl-la .la-wop-needle{animation:atlla_wop_needle 5.2s var(--la-ease) infinite} .atl-la .la-wop-seg{animation:atlla_wop_seg 5.2s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 5.2s)} } @keyframes atlla_wop_needle{ 0%{transform:rotate(-75deg)} 40%{transform:rotate(70deg)} 48%{transform:rotate(58deg)} 56%{transform:rotate(63deg)} 78%{transform:rotate(63deg)} 100%{transform:rotate(-75deg)}} @keyframes atlla_wop_seg{ 0%{opacity:.18} 4%{opacity:1} 60%{opacity:1} 78%{opacity:.18} 100%{opacity:.18}} /* ========================================================================== 14 similar_images - perceptual-hash tile match (ported) (T 3.4s) ========================================================================== */ .atl-la .la-sim-s1{stop-color:var(--la-accent);stop-opacity:.55} .atl-la .la-sim-s2{stop-color:var(--la-accent);stop-opacity:.12} .atl-la .la-sim-tile{stroke:var(--la-hair2);transform-box:fill-box;transform-origin:center} .atl-la .la-sim-tile--a,.atl-la .la-sim-tile--c{stroke:var(--la-accent);stroke-opacity:.7} .atl-la .la-sim-link{fill:none;stroke:var(--la-accent);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:0;opacity:.85} .atl-la .la-sim-pip{fill:var(--la-accent);opacity:.9;transform-box:fill-box;transform-origin:center} .atl-la .la-sim-scan{stroke:var(--la-accent);stroke-width:1.4;opacity:.6} @media (prefers-reduced-motion:no-preference){ .atl-la .la-sim-scan{animation:atlla_sim_sweep 3.4s var(--la-ease) infinite} .atl-la .la-sim-tile--a,.atl-la .la-sim-tile--c{animation:atlla_sim_match 3.4s var(--la-ease) infinite} .atl-la .la-sim-tile--b,.atl-la .la-sim-tile--d{animation:atlla_sim_match 3.4s var(--la-ease) infinite;animation-delay:.18s} .atl-la .la-sim-link{animation:atlla_sim_link 3.4s var(--la-ease) infinite} .atl-la .la-sim-link--2{animation-delay:1.7s} .atl-la .la-sim-pip--1{animation:atlla_sim_pip 3.4s var(--la-ease) infinite} .atl-la .la-sim-pip--2{animation:atlla_sim_pip 3.4s var(--la-ease) infinite;animation-delay:1.7s} } @keyframes atlla_sim_sweep{ 0%{transform:translateX(0);opacity:0} 8%{opacity:.7} 92%{opacity:.7} 100%{transform:translateX(304px);opacity:0}} @keyframes atlla_sim_match{ 0%,30%{stroke-opacity:.25} 44%,74%{stroke-opacity:1} 100%{stroke-opacity:.25}} @keyframes atlla_sim_link{ 0%{stroke-dashoffset:40;opacity:0} 46%{stroke-dashoffset:40;opacity:0} 60%{stroke-dashoffset:0;opacity:.95} 84%{stroke-dashoffset:0;opacity:.95} 100%{stroke-dashoffset:0;opacity:0}} @keyframes atlla_sim_pip{ 0%,52%{transform:scale(.4);opacity:0} 64%{transform:scale(1.6);opacity:1} 100%{transform:scale(.9);opacity:0}} /* ========================================================================== 15 cloud_reclaim - scan line sweeps the cloud, file chips fall out, the reclaimable segment pulses on the quota bar (ported from app la-cc, T 2.6s; the app's width animation becomes scaleX to stay transform-only) ========================================================================== */ .atl-la .la-cld{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;max-width:320px;margin:0 auto} .atl-la .la-cld-svg{max-width:236px} .atl-la .la-cld-cloud{fill:color-mix(in oklab,var(--la-accent) 17%,var(--la-ink))} .atl-la .la-cld-sweep{stroke:var(--la-accent);stroke-width:2;opacity:0} .atl-la .la-cld-chip{opacity:0} .atl-la .la-cld-chip rect{fill:color-mix(in oklab,var(--la-accent) 78%,#ffffff 6%)} .atl-la .la-cld-chip line{stroke:var(--la-ink);stroke-width:1.4;stroke-linecap:round} .atl-la .la-cld-quota{width:100%;display:flex;flex-direction:column;gap:9px} .atl-la .la-cld-qhead{display:flex;justify-content:space-between;font-family:var(--la-mono);font-size:10px;letter-spacing:.04em;color:var(--la-txf)} .atl-la .la-cld-bar{position:relative;height:14px;border-radius:7px;background:var(--la-s2);overflow:hidden} .atl-la .la-cld-used{position:absolute;left:0;top:0;bottom:0;width:71.5%;background:color-mix(in oklab,var(--la-accent) 38%,var(--la-s2))} .atl-la .la-cld-recl{position:absolute;left:71.5%;top:0;bottom:0;width:18.75%;background:var(--la-accent);box-shadow:0 0 12px color-mix(in oklab,var(--la-accent) 65%,transparent);transform:scaleX(0);transform-origin:left center} .atl-la .la-cld-legend{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;font-family:var(--la-mono);font-size:10.5px;color:var(--la-txm)} .atl-la .la-cld-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle} .atl-la .la-cld-iuse{background:color-mix(in oklab,var(--la-accent) 38%,var(--la-s2))} .atl-la .la-cld-irecl{background:var(--la-accent);box-shadow:0 0 7px color-mix(in oklab,var(--la-accent) 60%,transparent)} .atl-la .la-cld-ifree{background:var(--la-s2);border:1px solid var(--la-hair2)} @media (prefers-reduced-motion:no-preference){ .atl-la .la-cld-chip{animation:atlla_cld_fall 2.6s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 5.2s)} .atl-la .la-cld-sweep{animation:atlla_cld_sweep 2.6s ease-in-out infinite} .atl-la .la-cld-recl{animation:atlla_cld_recl 2.6s var(--la-ease) infinite} } @keyframes atlla_cld_fall{ 0%{opacity:0;transform:translateY(-4px)} 20%{opacity:1} 78%{opacity:.85;transform:translateY(42px)} 100%{opacity:0;transform:translateY(54px)}} @keyframes atlla_cld_sweep{ 0%{transform:translateY(-22px);opacity:0} 30%{opacity:.8} 70%{opacity:.8} 100%{transform:translateY(24px);opacity:0}} @keyframes atlla_cld_recl{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(0)}} /* ========================================================================== 16 download_cleanup - chute splitting keep/redundant (T 4.4s) (site design: the app opens Download Cleanup instantly) ========================================================================== */ .atl-la .la-dlc-chute{fill:none;stroke:var(--la-hair2);stroke-width:1.6;stroke-linecap:round} .atl-la .la-dlc-wedge{fill:var(--la-s2);stroke:var(--la-hair2);stroke-width:1.4;stroke-linejoin:round} .atl-la .la-dlc-tray{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.5} .atl-la .la-dlc-tray--keep{stroke:var(--la-accent)} .atl-la .la-dlc-tray--red{stroke:var(--la-danger)} .atl-la .la-dlc-label{font-size:9.5px;letter-spacing:.14em;fill:var(--la-accent)} .atl-la .la-dlc-label--red{fill:var(--la-danger)} .atl-la .la-dlc-item{fill:color-mix(in oklab,var(--la-accent) 24%,transparent);stroke:var(--la-accent);stroke-width:1.4;opacity:.35} @media (prefers-reduced-motion:no-preference){ .atl-la .la-dlc-item{animation:atlla_dlc_item 4.4s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 4.4s)} .atl-la .la-dlc-tray--keep{animation:atlla_dlc_traykeep 4.4s var(--la-ease) infinite} .atl-la .la-dlc-tray--red{animation:atlla_dlc_trayred 4.4s var(--la-ease) infinite} } @keyframes atlla_dlc_item{ 0%{transform:translate(0,0);opacity:0} 6%{transform:translate(0,18px);opacity:1} 32%{transform:translate(0,102px);opacity:1} 40%{transform:translate(calc(var(--sx,0px)*.3),132px);opacity:1} 58%{transform:translate(var(--sx,0px),194px);opacity:1} 64%{transform:translate(var(--sx,0px),190px);opacity:1} 70%{transform:translate(var(--sx,0px),194px);opacity:1} 82%{transform:translate(var(--sx,0px),194px);opacity:0} 90%{transform:translate(0,0);opacity:0} 100%{transform:translate(0,0);opacity:0}} @keyframes atlla_dlc_traykeep{ 0%,29%{opacity:.5} 33%{opacity:1} 41%{opacity:.5} 54%{opacity:.5} 58%{opacity:1} 66%{opacity:.5} 100%{opacity:.5}} @keyframes atlla_dlc_trayred{ 0%,4%{opacity:.5} 8%{opacity:1} 16%{opacity:.5} 79%{opacity:.5} 83%{opacity:1} 91%{opacity:.5} 100%{opacity:.5}} /* ========================================================================== 17 workbench - panels docking into a workspace (T 5s) (site design: the app opens the Workbench instantly) ========================================================================== */ .atl-la .la-wkb-frame{fill:none;stroke:var(--la-hair);stroke-width:1;stroke-dasharray:4 6} .atl-la .la-wkb-cnr path{fill:none;stroke:var(--la-accent);stroke-width:1.5;opacity:.35} .atl-la .la-wkb-panel{transform-box:fill-box;transform-origin:center} .atl-la .la-wkb-panel rect{fill:var(--la-s2);stroke:var(--la-hair2);stroke-width:1.5} .atl-la .la-wkb-panel line{stroke:var(--la-accent);stroke-width:1.6;stroke-linecap:round;opacity:.8} .atl-la .la-wkb-sweep{stroke:var(--la-accent);stroke-width:1.4;stroke-linecap:round;opacity:0} @media (prefers-reduced-motion:no-preference){ .atl-la .la-wkb-panel{animation:atlla_wkb_dock 5s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 5s)} .atl-la .la-wkb-sweep{animation:atlla_wkb_sweep 5s var(--la-ease) infinite} .atl-la .la-wkb-cnr path{animation:atlla_wkb_cnr 5s var(--la-ease) infinite} } @keyframes atlla_wkb_dock{ 0%{transform:translate(var(--ox,0px),var(--oy,0px)) scale(.96);opacity:0} 8%{opacity:1} 20%{transform:translate(0,0) scale(1.01)} 26%{transform:translate(0,0) scale(1)} 80%{transform:translate(0,0) scale(1);opacity:1} 90%{transform:translate(0,0) scale(.985);opacity:0} 100%{transform:translate(var(--ox,0px),var(--oy,0px)) scale(.96);opacity:0}} @keyframes atlla_wkb_sweep{ 0%,40%{transform:translateX(0);opacity:0} 46%{opacity:.6} 62%{transform:translateX(220px);opacity:.6} 66%{transform:translateX(220px);opacity:0} 68%{transform:translateX(0);opacity:0} 100%{transform:translateX(0);opacity:0}} @keyframes atlla_wkb_cnr{ 0%,30%{opacity:.35} 36%{opacity:.9} 48%{opacity:.35} 100%{opacity:.35}} /* ========================================================================== 18 oldest_files - core sample: a carriage drills the strata column while chips surface; last-opened readout beside it (ported from app la-old loading state: dig 3s there-and-back, chips 3s / .5s stagger). Resting frame = carriage settled at the bottom, chips visible. ========================================================================== */ .atl-la .la-old-year{font-size:10px;fill:var(--la-txf)} .atl-la .la-old-g1{stop-color:var(--la-s2)} .atl-la .la-old-g2{stop-color:color-mix(in oklab,var(--la-accent) 14%,var(--la-ink))} .atl-la .la-old-g3{stop-color:color-mix(in oklab,var(--la-accent) 22%,var(--la-ink))} .atl-la .la-old-core{stroke:var(--la-hair2);stroke-width:1} .atl-la .la-old-stratum{stroke:color-mix(in oklab,var(--la-accent) 10%,transparent);stroke-width:1} .atl-la .la-old-chip{fill:color-mix(in oklab,var(--la-accent) 78%,#ffffff 4%);opacity:.9} .atl-la .la-old-carriage{transform:translateY(228px)} .atl-la .la-old-carriage rect{fill:color-mix(in oklab,var(--la-accent) 12%,transparent);stroke:var(--la-accent);stroke-width:1.5} .atl-la .la-old-carriage line{stroke:var(--la-accent);stroke-width:2;stroke-linecap:round;opacity:.7} .atl-la .la-old-eyebrow{font-size:9px;letter-spacing:.28em;fill:var(--la-txf)} .atl-la .la-old-date{font-size:30px;font-weight:600;fill:var(--la-tx)} .atl-la .la-old-age{font-size:12px;fill:var(--la-txm)} .atl-la .la-old-path{font-size:11px;fill:var(--la-txm)} .atl-la .la-old-ar{fill:var(--la-accent)} @media (prefers-reduced-motion:no-preference){ .atl-la .la-old-carriage{animation:atlla_old_dig 3s var(--la-ease) infinite} .atl-la .la-old-chip{animation:atlla_old_chip 3s var(--la-ease) infinite;animation-delay:calc(var(--d,0)*1s - 3s)} } @keyframes atlla_old_dig{0%{transform:translateY(0)}50%{transform:translateY(228px)}100%{transform:translateY(0)}} @keyframes atlla_old_chip{ 0%,8%{opacity:0;transform:translateY(-4px)} 16%{opacity:1;transform:translateY(0)} 70%{opacity:.85} 100%{opacity:0}} /* ========================================================================== fallback - generic forensic scan (ported global-scan) (T 5.2s) ========================================================================== */ .atl-la .la-gsc-frame{fill:color-mix(in oklab,var(--la-accent) 5%,var(--la-s1));stroke:var(--la-hair);stroke-width:1} .atl-la .la-gsc-cnr path{fill:none;stroke:var(--la-accent);stroke-width:1.5;opacity:.55} .atl-la .la-gsc-eyebrow{font-size:9px;letter-spacing:.34em;fill:var(--la-txm);opacity:.6} .atl-la .la-gsc-cell{fill:color-mix(in oklab,var(--la-accent) 22%,transparent);stroke:var(--la-hair);stroke-width:1;opacity:.35} .atl-la .la-gsc-beam rect{fill:color-mix(in oklab,var(--la-accent) 14%,transparent)} .atl-la .la-gsc-beam line{stroke:var(--la-accent);stroke-width:2;stroke-linecap:round} .atl-la .la-gsc-beam{opacity:.6} .atl-la .la-gsc-base{stroke:color-mix(in oklab,var(--la-accent) 40%,transparent);stroke-width:1;opacity:.5} @media (prefers-reduced-motion:no-preference){ .atl-la .la-gsc-beam{animation:atlla_gsc_sweep 5.2s var(--la-ease) infinite} .atl-la .la-gsc-cell{animation:atlla_gsc_blip 5.2s linear infinite;animation-delay:calc(var(--i,0)*.72s - 5.2s)} .atl-la .la-gsc-eyebrow{animation:atlla_gsc_pulse 2.6s var(--la-ease) infinite} } @keyframes atlla_gsc_sweep{ 0%{transform:translateX(0);opacity:0} 6%{opacity:.6} 94%{opacity:.6} 100%{transform:translateX(212px);opacity:0}} @keyframes atlla_gsc_blip{ 0%,100%{opacity:.35} 3%{opacity:1} 14%{opacity:.35}} @keyframes atlla_gsc_pulse{0%,100%{opacity:.5}50%{opacity:.9}}