/* CargOps splash / loading animation (Lineage mark) — 4.4s loop, no JS.
   Drop-in successor to kodgo-splash.css. Markup:
   <div class="cs-splash">
     <div class="cs-mark"><svg viewBox="-8 -8 65.6 72.2384" role="img" aria-label="CargOps">
       <path class="cs-ping" d="HEX"/>
       <g class="cs-pulse">
         <path class="cs-hex" d="HEX"/>
         <path class="cs-lane cs-outer" pathLength="1" d="OUTER"/>
         <path class="cs-lane cs-inner" pathLength="1" d="INNER"/>
         <circle class="cs-dot" r="1.75"/>
       </g>
     </svg></div>
     <div class="cs-loader"><span></span></div>
   </div>
   HEX   = M23.11 55.78L1.69 43.41A3.39 3.39 0 0 1 0 40.48V15.75a3.39 3.39 0 0 1 1.69-2.94L23.11.45a3.39 3.39 0 0 1 3.39 0l21.41 12.37a3.39 3.39 0 0 1 1.69 2.94v24.72a3.39 3.39 0 0 1-1.69 2.94L26.5 55.78a3.39 3.39 0 0 1-3.39 0z
   OUTER = M24.8 14.524L16.962 19.049L16.962 37.151L24.8 41.676
   INNER = M24.8 23.575L28.719 21.312L32.638 23.575L32.638 19.049L28.719 16.787L20.881 21.312L20.881 34.888L28.719 39.413L32.638 37.151L32.638 32.625L28.719 34.888L24.8 32.625
   Modifiers: --dark  --app (in-app palette)  --no-loader  --hide (fade out when ready)  --inline  --still  --enter  --contained */
.cs-splash{--cs-bg:#f5ead8;--cs-hex:#201e1d;--cs-g:#f5ead8;--cs-track:#ebdcc2;--cs-accent:#c67139;--cs-sage:#7a8a5e;--cs-dur:4.4s;
  position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(40px,8vh,96px);
  background:var(--cs-bg);transition:opacity .45s cubic-bezier(.33,1,.68,1),visibility .45s}
.cs-splash--dark{--cs-bg:#201e1d;--cs-hex:#f5ead8;--cs-g:#201e1d;--cs-track:#3a3633}
.cs-splash--app{--cs-bg:#eeefec;--cs-hex:#14181b;--cs-g:#f9f9f7;--cs-track:#e3e5e1;--cs-accent:#e2622a;--cs-sage:#2f6b4f}
.cs-splash--hide{opacity:0;visibility:hidden;pointer-events:none}
.cs-splash *{animation-duration:var(--cs-dur);animation-iteration-count:infinite;animation-fill-mode:both}
.cs-mark{width:clamp(120px,19vw,372px);aspect-ratio:65.6/72.2384;animation-name:cs-life}
.cs-mark svg{width:100%;height:100%;overflow:visible;display:block}
.cs-mark svg *{transform-box:view-box;transform-origin:24.8px 28.1px}
.cs-pulse{animation-name:cs-pulse}
.cs-hex{fill:var(--cs-hex);animation-name:cs-pop}
.cs-ping{fill:none;stroke:var(--cs-sage);stroke-width:.8;animation-name:cs-ping}
.cs-lane{fill:none;stroke:var(--cs-g);stroke-width:2.06;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2}
.cs-outer{animation-name:cs-outer}
.cs-inner{animation-name:cs-inner}
.cs-dot{fill:var(--cs-accent);offset-path:path("M24.8 23.575L28.719 21.312L32.638 23.575L32.638 19.049L28.719 16.787L20.881 21.312L20.881 34.888L28.719 39.413L32.638 37.151L32.638 32.625L28.719 34.888L24.8 32.625");offset-rotate:0deg;transform-origin:0 0!important;animation-name:cs-dot,cs-dotscale}
.cs-loader{width:clamp(160px,16vw,300px);height:14px;border-radius:999px;background:var(--cs-track);overflow:hidden;animation-name:cs-loader}
.cs-loader>span{display:block;height:100%;border-radius:999px;background:var(--cs-accent);transform-origin:left;animation-name:cs-progress}
.cs-splash--no-loader .cs-loader{display:none}
@keyframes cs-life{0%,85%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.33,1,.68,1)}97%,100%{opacity:0;transform:scale(.9)}}
@keyframes cs-pop{0%{opacity:0;transform:scale(.5);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}11%,100%{opacity:1;transform:scale(1)}}
@keyframes cs-outer{0%,9%{stroke-dashoffset:1.02;animation-timing-function:cubic-bezier(.65,0,.35,1)}32%,100%{stroke-dashoffset:0}}
@keyframes cs-inner{0%,15%{stroke-dashoffset:1.02;animation-timing-function:cubic-bezier(.65,0,.35,1)}44%,100%{stroke-dashoffset:0}}
@keyframes cs-dot{0%,15%{offset-distance:0%;animation-timing-function:cubic-bezier(.65,0,.35,1)}44%,100%{offset-distance:100%}}
@keyframes cs-dotscale{0%,14%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}19%,43%{transform:scale(1);animation-timing-function:cubic-bezier(.32,0,.67,0)}49%,100%{transform:scale(0)}}
@keyframes cs-pulse{0%,45%{transform:scale(1);animation-timing-function:ease-in-out}50%{transform:scale(1.045);animation-timing-function:ease-in-out}56%,100%{transform:scale(1)}}
@keyframes cs-ping{0%,47%{opacity:0;transform:scale(1)}47.5%{opacity:.9;animation-timing-function:cubic-bezier(.33,1,.68,1)}72%,100%{opacity:0;transform:scale(1.42)}}
@keyframes cs-loader{0%,6.82%{opacity:0;transform:translateY(12px);animation-timing-function:cubic-bezier(.33,1,.68,1)}18.18%,81.82%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.33,1,.68,1)}93.18%,100%{opacity:0;transform:none}}
@keyframes cs-progress{0%,9.09%{transform:scaleX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}81.82%,100%{transform:scaleX(1)}}
/* Inline mark (login card), frozen settled frame, overlay fade-in, contained preview */
.cs-splash--inline{position:relative;inset:auto;z-index:auto;display:block;background:transparent;transition:none}
.cs-splash--inline .cs-mark{width:100%}
.cs-splash--still *{animation-delay:calc(var(--cs-dur) * -.78)!important;animation-play-state:paused!important}
.cs-splash--enter{animation:cs-enter .45s cubic-bezier(.33,1,.68,1) both}
.cs-splash--contained{position:absolute;z-index:5}
.cs-splash--contained .cs-mark{width:200px}
@keyframes cs-enter{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cs-splash *{animation:none!important}.cs-dot,.cs-ping{display:none}}