/* CloudPro logo animation — looping nav lockup.
   Sequence (repeats every 3.6s): cloud draws -> "Cloud" -> arrow + head -> "Pro" -> D-I-G-I-T-A-L -> hold -> repeat. */
@keyframes cp-loop-cloud { 0%,0.0% { stroke-dashoffset: 200 } 22.8%,100% { stroke-dashoffset: 0 } }
@keyframes cp-loop-trend { 0%,27.8% { stroke-dashoffset: 200 } 42.2%,100% { stroke-dashoffset: 0 } }
@keyframes cp-loop-head { 0%,41.1% { opacity: 0; transform: translate(-3px, 3px) } 48.3%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-w1 { 0%,17.8% { opacity: 0; transform: translateX(-6px) } 28.3%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-w2 { 0%,45.0% { opacity: 0; transform: translateX(-6px) } 55.6%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-d1 { 0%,55.0% { opacity: 0; transform: translateX(-6px) } 61.1%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-d2 { 0%,56.9% { opacity: 0; transform: translateX(-6px) } 63.1%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-d3 { 0%,58.9% { opacity: 0; transform: translateX(-6px) } 65.0%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-d4 { 0%,60.8% { opacity: 0; transform: translateX(-6px) } 66.9%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-d5 { 0%,62.8% { opacity: 0; transform: translateX(-6px) } 68.9%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-d6 { 0%,64.7% { opacity: 0; transform: translateX(-6px) } 70.8%,100% { opacity: 1; transform: none } }
@keyframes cp-loop-d7 { 0%,66.7% { opacity: 0; transform: translateX(-6px) } 72.8%,100% { opacity: 1; transform: none } }

.cp-cloud { stroke-dasharray: 200; animation: cp-loop-cloud 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-trend { stroke-dasharray: 200; animation: cp-loop-trend 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-head  { animation: cp-loop-head 3.6s cubic-bezier(.3,1.4,.4,1) infinite }
.cp-w1    { animation: cp-loop-w1 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-w2    { animation: cp-loop-w2 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-d1    { animation: cp-loop-d1 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-d2    { animation: cp-loop-d2 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-d3    { animation: cp-loop-d3 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-d4    { animation: cp-loop-d4 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-d5    { animation: cp-loop-d5 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-d6    { animation: cp-loop-d6 3.6s cubic-bezier(.2,.7,.1,1) infinite }
.cp-d7    { animation: cp-loop-d7 3.6s cubic-bezier(.2,.7,.1,1) infinite }

/* Loading state — cloud stroke chases itself (unrelated to the nav loop above) */
@keyframes cp-draw { from { stroke-dashoffset: 200 } to { stroke-dashoffset: 0 } }
.cp-loading { stroke-dasharray: 44 200; animation: cp-draw 1.4s linear infinite }

@media (prefers-reduced-motion: reduce) {
  .cp-cloud, .cp-trend, .cp-head, .cp-w1, .cp-w2, .cp-d, .cp-d1, .cp-d2, .cp-d3, .cp-d4, .cp-d5, .cp-d6, .cp-d7, .cp-loading {
    animation: none; stroke-dashoffset: 0; opacity: 1;
  }
}