:root {
  --cl-bg: rgba(255, 255, 255, 0.85);
  --cl-backdrop: blur(16px);
  --cl-hex-stroke: #e2e8f0;
  --cl-dot-color: #0f172a;
  --cl-dot-glow: #0891b2;
  --cl-line-color: #0f172a;
  --cl-text-tagline: #0f172a;
  --cl-comet-color: #0891b2;
  --cl-comet-opacity: 0.9;
  --cl-glow-strength: 8px;
  --cl-track: rgba(15, 23, 42, 0.08);
  --cl-z-index: 999999;
}

[data-theme="dark"] {
  --cl-bg: rgba(9, 12, 18, 0.85);
  --cl-hex-stroke: #1e2733;
  --cl-dot-color: #22d3ee;
  --cl-dot-glow: #818cf8;
  --cl-line-color: #22d3ee;
  --cl-text-tagline: #22d3ee;
  --cl-comet-color: #22d3ee;
  --cl-comet-opacity: 1;
  --cl-glow-strength: 12px;
  --cl-track: rgba(34, 211, 238, 0.12);
}

#cirrus-loader {
  position: fixed;
  inset: 0;
  z-index: var(--cl-z-index);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--cl-bg);
  backdrop-filter: var(--cl-backdrop);
  -webkit-backdrop-filter: var(--cl-backdrop);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

#cirrus-loader.cl-hidden {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

.cl-logo-wrap { width: 140px; max-width: 45vw; }
.cl-logo-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }

.cl-hex {
  fill: none;
  stroke: var(--cl-hex-stroke);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cl-connector {
  stroke: var(--cl-line-color);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

.cl-dot { fill: var(--cl-dot-color); }
.cl-dot-glow { fill: var(--cl-dot-glow); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }

/* Draw-in animation */
.cl-hex-draw {
  animation-timing-function: cubic-bezier(0.65,0,0.35,1);
  animation-duration: 0.55s;
  animation-fill-mode: forwards;
}
#cl-hex1.cl-hex-draw { stroke-dasharray: 318; stroke-dashoffset: 318; animation-name: cl-drawHex1; animation-delay: 0s; }
#cl-hex2.cl-hex-draw { stroke-dasharray: 323; stroke-dashoffset: 323; animation-name: cl-drawHex2; animation-delay: 0.08s; }
#cl-hex3.cl-hex-draw { stroke-dasharray: 355; stroke-dashoffset: 355; animation-name: cl-drawHex3; animation-delay: 0.16s; }

@keyframes cl-drawHex1 { from { stroke-dashoffset: 318; } to { stroke-dashoffset: 0; } }
@keyframes cl-drawHex2 { from { stroke-dashoffset: 323; } to { stroke-dashoffset: 0; } }
@keyframes cl-drawHex3 { from { stroke-dashoffset: 355; } to { stroke-dashoffset: 0; } }

.cl-conn-draw {
  stroke-dasharray: 55;
  stroke-dashoffset: 55;
  animation: cl-drawConn 0.32s cubic-bezier(0.65,0,0.35,1) forwards;
}
#cl-conn1 { animation-delay: 0.5s; }
#cl-conn2 { animation-delay: 0.58s; }
#cl-conn3 { animation-delay: 0.66s; }
@keyframes cl-drawConn {
  from { stroke-dashoffset: 55; }
  to   { stroke-dashoffset: 0; }
}

.cl-dot-pop {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: cl-dotPop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
#cl-dotT  { animation-delay: 0.42s; }
#cl-dotB  { animation-delay: 0.5s; }
#cl-dotRt { animation-delay: 0.58s; }
@keyframes cl-dotPop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* Loop animation */
.cl-comet {
  fill: none;
  stroke: var(--cl-comet-color);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 4px var(--cl-comet-color));
}
#cirrus-loader.cl-loop-on .cl-comet {
  animation: cl-cometFade 0.4s ease-out both, cl-cometTravel var(--dur, 1.7s) linear infinite;
}
#cl-hex1Comet { stroke-dasharray: 70 640; animation-delay: 0s, 0.4s;  --dur: 1.7s; }
#cl-hex2Comet { stroke-dasharray: 71 646; animation-delay: 0.1s, 0.5s; --dur: 1.9s; }
#cl-hex3Comet { stroke-dasharray: 78 708; animation-delay: 0.2s, 0.6s; --dur: 2.1s; }

@keyframes cl-cometFade { from { opacity: 0; } to { opacity: var(--cl-comet-opacity); } }
@keyframes cl-cometTravel {
  from { stroke-dashoffset: 900; }
  to   { stroke-dashoffset: -260; }
}

.cl-pulse {
  fill: var(--cl-comet-color);
  opacity: 0;
  filter: drop-shadow(0 0 var(--cl-glow-strength) var(--cl-comet-color));
  offset-path: path('M 176.00 122.75 L 204.35 150.00 L 176.00 177.25 Z');
}
#cirrus-loader.cl-loop-on .cl-pulse {
  animation: cl-pulseFade 0.4s ease-out 0.55s both, cl-pulseTravel 1.9s cubic-bezier(0.4, 0, 0.2, 1) 0.55s infinite;
}
@keyframes cl-pulseFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cl-pulseTravel { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }

#cirrus-loader.cl-loop-on .cl-dot-glow {
  animation: cl-dotBreathe 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
#cl-dotTGlow  { animation-delay: 0s; }
#cl-dotBGlow  { animation-delay: 0.4s; }
#cl-dotRtGlow { animation-delay: 0.8s; }
@keyframes cl-dotBreathe {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.5); }
}

/* Finishing snap flash */
#cirrus-loader.cl-finishing .cl-dot,
#cirrus-loader.cl-finishing .cl-connector {
  animation: cl-flash 0.35s ease-out;
}
@keyframes cl-flash {
  0%   { filter: drop-shadow(0 0 0 transparent); }
  45%  { filter: drop-shadow(0 0 12px var(--cl-dot-glow)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

/* Label & progress */
.cl-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--cl-text-tagline);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-sans);
}
.cl-label .cl-dots span {
  opacity: 0;
  animation: cl-ellipsis 1.4s infinite;
}
.cl-label .cl-dots span:nth-child(1) { animation-delay: 0s; }
.cl-label .cl-dots span:nth-child(2) { animation-delay: 0.2s; }
.cl-label .cl-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cl-ellipsis {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 1; }
}

.cl-progress-track {
  width: 140px;
  height: 3px;
  border-radius: 3px;
  background: var(--cl-track);
  overflow: hidden;
  position: relative;
}
.cl-progress-bar {
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 30%;
  border-radius: 3px;
  background: var(--cl-comet-color);
  box-shadow: 0 0 8px var(--cl-comet-color);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#cirrus-loader:not(.cl-determinate) .cl-progress-bar {
  animation: cl-sweep 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cl-sweep {
  0%   { left: -35%; width: 35%; }
  50%  { left: 45%;  width: 45%; }
  100% { left: 100%; width: 20%; }
}
#cirrus-loader.cl-finishing .cl-progress-bar {
  width: 100% !important;
  left: 0 !important;
  animation: none !important;
  transition: width 0.3s ease, left 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  #cirrus-loader * { animation: none !important; transition: none !important; }
  .cl-hex-draw, .cl-conn-draw { stroke-dashoffset: 0 !important; }
  .cl-dot-pop, .cl-comet, .cl-pulse { opacity: 1 !important; transform: none !important; }
  #cirrus-loader:not(.cl-determinate) .cl-progress-bar { width: 100%; left: 0; }
}