/* Equal 1600px groups make a continuous rightward loop at every supported width. */
.ticker{display:block;padding:0;overflow:hidden}
.ticker-track{display:flex;width:max-content;animation:brand-flow 24s linear infinite}
.ticker-group{display:flex;flex:0 0 1600px;width:1600px;height:80px;align-items:center}
.ticker-word{display:flex;flex:0 0 80px;width:80px;min-width:0;justify-content:center;align-items:center;font-size:25px;font-weight:800;letter-spacing:-1.8px;line-height:1;perspective:300px}
.wordmark{display:inline-block;transform-origin:50% 80%;animation-delay:var(--phase)!important}
.wordmark-plus{display:inline-block;transform-origin:50% 52%;margin-left:1px;animation:plus-click 3.6s cubic-bezier(.4,0,.2,1) infinite;animation-delay:var(--phase)}
.effect-0 .wordmark{animation:brand-bounce 2.8s ease-in-out infinite}
.effect-1 .wordmark{animation:brand-tumble 4.2s cubic-bezier(.65,0,.35,1) infinite}
.effect-2 .wordmark{animation:brand-spring 3.2s ease-in-out infinite}
.effect-3 .wordmark{animation:brand-flip 4.8s cubic-bezier(.45,0,.2,1) infinite}
.effect-4 .wordmark{animation:brand-outline 3.8s ease-in-out infinite}
.effect-5 .wordmark{animation:brand-swing 3.4s ease-in-out infinite}
.ticker:hover .ticker-track,.ticker:hover .wordmark,.ticker:hover .wordmark-plus{animation-play-state:paused}
@keyframes brand-flow{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes brand-bounce{0%,48%,100%{transform:translateY(0) scale(1)}58%{transform:translateY(3px) scale(1.15,.8)}72%{transform:translateY(-13px) scale(.95,1.1)}86%{transform:translateY(2px) scale(1.1,.9)}}
@keyframes brand-tumble{0%,45%{transform:rotate(0)}78%,100%{transform:rotate(360deg)}}
@keyframes brand-spring{0%,40%,100%{transform:scale(1)}56%{transform:scale(1.3,.75)}72%{transform:scale(.8,1.3)}86%{transform:scale(1.12,.95)}}
@keyframes brand-flip{0%,48%{transform:rotateY(0)}80%,100%{transform:rotateY(360deg)}}
@keyframes brand-outline{0%,35%,100%{color:#111;-webkit-text-stroke:0;transform:translateY(0);text-shadow:0 0 transparent}52%,70%{color:white;-webkit-text-stroke:1px #111;transform:translateY(-4px);text-shadow:3px 3px #ccc}85%{color:#111;-webkit-text-stroke:0;transform:translateY(1px);text-shadow:0 0 transparent}}
@keyframes brand-swing{0%,42%,100%{transform:rotate(0)}56%{transform:rotate(-18deg) translateY(-5px)}72%{transform:rotate(16deg)}86%{transform:rotate(-7deg)}}
@keyframes plus-click{0%,45%{transform:rotate(0)}65%,100%{transform:rotate(180deg)}}
/* Two inclined rings precess around a shared center; the core gently rocks. */
.hero-art{perspective:850px}
.orbit{width:92%;height:80%;transform-origin:center;border-color:#aaa}
.orbit-one{animation:orbit-precession-one 16s linear infinite}
.orbit-two{width:82%;height:92%;border-color:#c0c0c0;animation:orbit-precession-two 22s linear infinite}
.orbit::before,.orbit::after{content:'';position:absolute;border-radius:50%;width:7px;height:7px;background:#111;top:50%;left:-4px;box-shadow:0 0 0 4px #fff}
.orbit::after{left:auto;right:-3px;width:5px;height:5px;background:#fff;border:1px solid #111}
.orbit-two::before{background:white;border:1px solid #111;width:9px;height:9px;left:-5px}
.plus-sculpture{animation:core-rock 8s ease-in-out infinite}
.crosshair{animation:compass-turn 8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes orbit-precession-one{from{transform:rotate(-30deg) rotateX(32deg) rotateZ(0)}to{transform:rotate(330deg) rotateX(32deg) rotateZ(-360deg)}}
@keyframes orbit-precession-two{from{transform:rotate(45deg) rotateY(40deg) rotateZ(0)}to{transform:rotate(-315deg) rotateY(40deg) rotateZ(360deg)}}
@keyframes core-rock{0%,100%{transform:translateY(0) rotate(-15deg) scale(1)}25%{transform:translateY(-9px) rotate(-5deg) scale(1.025)}50%{transform:translateY(0) rotate(5deg) scale(1)}75%{transform:translateY(7px) rotate(-8deg) scale(.98)}}
@keyframes compass-turn{0%,35%{transform:rotate(0)}65%,100%{transform:rotate(180deg)}}
@media(max-width:650px){.ticker-group{height:70px}.ticker-word{font-size:23px}}
@media(prefers-reduced-motion:reduce){.ticker-track,.wordmark,.wordmark-plus,.orbit,.plus-sculpture,.crosshair{animation:none!important}.orbit-one{transform:rotate(-30deg) rotateX(32deg)}.orbit-two{transform:rotate(45deg) rotateY(40deg)}}