header .logo-motion{position:relative;display:block;flex:0 0 105px;width:105px;height:60px;overflow:hidden;isolation:isolate}
header .logo-motion img{position:absolute;inset:0;width:105px;height:60px;object-fit:contain;animation:ccs-reveal 16s ease-in-out infinite}
header .logo-globe{position:absolute;width:50px;height:50px;left:27px;top:5px;filter:drop-shadow(0 0 5px #617eb9);animation:ccs-globe 16s ease-in-out infinite}
header .logo-motion:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffff80 49%,transparent 63%);transform:translateX(-120%);animation:ccs-shine 16s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen}
.logo-pause{font-size:10px;color:#ccc;background:transparent;border:1px solid #555;border-radius:4px;padding:5px 7px;white-space:nowrap}
.logo-paused .logo-motion img,.logo-paused .logo-globe,.logo-paused .logo-motion:after{animation:none}
.logo-paused .logo-globe{opacity:0}.logo-paused .logo-motion img{opacity:1}
header .logo-motion .orbit-letter{position:absolute;left:43px;top:17px;width:20px;height:26px;text-align:center;font:900 25px/26px Arial,sans-serif;letter-spacing:-2px;color:#ff9d12;text-shadow:1px 2px 0 #6a2300;opacity:0;z-index:3;animation:ccs-orbit 16s linear infinite}
header .logo-motion .letter-one{--landing:-18px;animation-delay:0s}
header .logo-motion .letter-two{--landing:0px;animation-delay:.65s}
header .logo-motion .letter-three{--landing:18px;animation-delay:1.3s}
/* Letters pass behind the opaque globe, then grow as they cross its front. */
header .logo-globe{z-index:1}
header .logo-motion img{z-index:5}
header .logo-motion:after{z-index:6}
header .logo-bolts{position:absolute;inset:0;width:105px;height:60px;z-index:4;overflow:visible}
header .logo-bolts .bolt{fill:none;stroke:#a74316;stroke-width:2.2;stroke-linejoin:bevel;stroke-dasharray:120;stroke-dashoffset:120;opacity:0;filter:drop-shadow(0 0 2px #ec8a24);animation:ccs-bolt 16s linear infinite}
header .logo-bolts .bolt-two{animation-delay:.2s;stroke:#c45018}
@keyframes ccs-orbit{
0%{opacity:0;transform:translate(-42px,7px) scale(.9);z-index:3}
3%{opacity:1;transform:translate(-38px,-3px) scale(.8);z-index:0}
7%{transform:translate(-20px,-10px) scale(.6);z-index:0}
11%{transform:translate(12px,-11px) scale(.55);z-index:0}
15%{transform:translate(39px,-4px) scale(.75);z-index:0}
16%{transform:translate(42px,0) scale(.85);z-index:3}
20%{transform:translate(27px,11px) scale(1.05);z-index:3}
24%{transform:translate(-6px,15px) scale(1.2);z-index:3}
28%{transform:translate(-35px,8px) scale(1.05);z-index:3}
35%,47%{opacity:1;transform:translate(var(--landing),0) scale(1);z-index:3}
51%,100%{opacity:0;transform:translate(var(--landing),0) scale(1);z-index:3}}
@keyframes ccs-bolt{0%,46%{opacity:0;stroke-dashoffset:120;transform:translateX(-20px)}47%{opacity:1}49%,54%{opacity:1;stroke-dashoffset:0;transform:translateX(0)}59%,100%{opacity:0;stroke-dashoffset:0;transform:translateX(0)}}
@keyframes ccs-globe{0%,3%{opacity:1;transform:scale(.88) rotate(-18deg)}50%{opacity:1;transform:scale(1) rotate(10deg)}59%,100%{opacity:0;transform:scale(1) rotate(12deg)}}
@keyframes ccs-reveal{0%,52%{opacity:0;transform:scale(1)}60%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes ccs-shine{0%,60%{transform:translateX(-120%);opacity:0}62%{opacity:.5}68%,100%{transform:translateX(120%);opacity:0}}
.logo-paused .logo-bolts{display:none}
@media(prefers-reduced-motion:reduce){header .logo-bolts{display:none}header .logo-bolts .bolt{animation:none}}
.logo-paused .logo-motion .orbit-letter{animation:none;display:none}
@media(prefers-reduced-motion:reduce){header .logo-motion .orbit-letter{animation:none;display:none}}
@media(prefers-reduced-motion:reduce){header .logo-motion img,header .logo-globe,header .logo-motion:after{animation:none}header .logo-globe{display:none}.logo-pause{display:none}}
@media(max-width:600px){.logo-pause{font-size:9px;padding:4px}.nav{gap:10px}}

header .logo-motion .orbit-letter svg{display:block;width:100%;height:100%;overflow:visible}

/* Original logo artwork, static hero presentation. */
.hero-photo{background:linear-gradient(90deg,#111 0%,#1114 35%,#1112 100%),url("/ccs-preview/assets/servers-clean.png") center/cover no-repeat;opacity:1;display:flex;align-items:center;justify-content:center;padding:8% 5% 8% 18%}.hero-original-logo{width:100%;max-width:570px;height:auto;filter:none}@media(max-width:760px){.hero-photo{padding:20px;opacity:.18}.hero-original-logo{max-width:420px}}

/* Match the earlier hero logo placement. */
@media(min-width:761px){.hero-photo{padding:0}.hero-original-logo{position:absolute;width:62%;max-width:430px;right:7%;top:20%;}}

@media(min-width:761px) and (prefers-reduced-motion:no-preference){.hero-photo{background-attachment:scroll,fixed;background-position:left center,right center;background-size:auto,auto 110vh}.hero-original-logo{will-change:transform}}

header .logo-motion .orbit-letter{display:block}.logo-paused .logo-motion .orbit-letter{display:none}@media(prefers-reduced-motion:reduce){header .logo-motion .orbit-letter{display:none}}