/* Zenthesys HERO MOTION SYSTEM v1.1.0 · Source: Applied AI 2026-10-29 */
:root{--zen-navy:#111B29;--zen-slate:#344650;--zen-clay:#D06954;--zen-sage:#5D7D77;--zen-tech:#277081;--zen-sand:#D8C8B0;--zen-cream:#F4F1EA;--zen-white:#FAFAF7}
.zen-hero-surface{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 83% 43%,rgba(39,112,129,.13),transparent 44%),var(--zen-navy)!important}
.zen-hero-surface::before{content:""!important;position:absolute!important;inset:0!important;background-image:linear-gradient(rgba(216,200,176,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(216,200,176,.025) 1px,transparent 1px)!important;background-size:64px 64px!important;mask-image:linear-gradient(90deg,transparent,#000 65%)!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 65%)!important;opacity:1!important;pointer-events:none!important;z-index:0!important;border:0!important}
.zen-hero-surface>.container{position:relative;z-index:1}
.zen-hero-visual{position:relative;min-width:0;width:100%;max-width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.zen-hero-visual svg{width:100%;height:auto;max-width:760px;display:block;overflow:visible;filter:drop-shadow(0 16px 38px rgba(0,0,0,.15))}
.zen-hero-caption{font-size:.74rem;letter-spacing:.075em;text-transform:uppercase;text-align:center;color:#B3C2C0!important;margin:-8px auto 0!important;line-height:1.55}
.zen-system-ring{transform-box:fill-box;transform-origin:center;animation:zen-orbit 30s linear infinite}
.zen-system-ring.zen-counter{animation:zen-orbit-rev 38s linear infinite}
.zen-system-breathe{animation:zen-breathe 5s ease-in-out infinite}
.zen-system-glow{animation:zen-glow 7s ease-in-out infinite}
.zen-data-route{fill:none;stroke-linecap:round;stroke-width:1.5;opacity:.85}
@keyframes zen-orbit{to{transform:rotate(360deg)}}
@keyframes zen-orbit-rev{to{transform:rotate(-360deg)}}
@keyframes zen-breathe{0%,100%{opacity:.78}50%{opacity:1}}
@keyframes zen-glow{0%,100%{opacity:.25}50%{opacity:.65}}
/* Fail closed: CSS rings do not animate until the JavaScript controller opts in.
   With JavaScript disabled, the complete diagram remains legible and static. */
.zen-motion-graphic .zen-system-ring,.zen-motion-graphic .zen-system-breathe,.zen-motion-graphic .zen-system-glow,
.zen-motion-graphic .system-ring,.zen-motion-graphic .system-breathe,.zen-motion-graphic .system-glow{animation-play-state:paused!important}
.zen-motion-graphic.zen-motion-running .zen-system-ring,.zen-motion-graphic.zen-motion-running .zen-system-breathe,.zen-motion-graphic.zen-motion-running .zen-system-glow,
.zen-motion-graphic.zen-motion-running .system-ring,.zen-motion-graphic.zen-motion-running .system-breathe,.zen-motion-graphic.zen-motion-running .system-glow{animation-play-state:running!important}
.zen-motion-graphic .signal-packets>circle{opacity:0}
.zen-motion-graphic.zen-motion-running .signal-packets>circle{opacity:1}
.zen-motion-paused .zen-system-ring,.zen-motion-paused .zen-system-breathe,.zen-motion-paused .zen-system-glow,.zen-motion-paused .system-ring,.zen-motion-paused .system-breathe,.zen-motion-paused .system-glow{animation-play-state:paused!important}
.zen-motion-static .zen-system-ring,.zen-motion-static .zen-system-breathe,.zen-motion-static .zen-system-glow,.zen-motion-static .system-ring,.zen-motion-static .system-breathe,.zen-motion-static .system-glow{animation:none!important;opacity:1!important;transform:none!important}
.zen-mobile-flow{display:none;width:100%;gap:10px;margin:20px 0 0}
.zen-mobile-node{padding:13px 17px;background:#203446;border:1px solid rgba(216,200,176,.3);border-left:3px solid var(--zen-clay);border-radius:10px;color:var(--zen-white);font-size:.92rem;font-weight:750}
.zen-mobile-node:nth-child(2){border-left-color:var(--zen-sage)}.zen-mobile-node:nth-child(3){border-left-color:var(--zen-tech)}
.zen-mobile-node small{display:block;font-size:.76rem;font-weight:500;color:var(--zen-sand);margin-top:4px}
.zen-mobile-arrow{height:14px;display:grid;place-items:center;color:var(--zen-sage);font-size:1rem;line-height:1}
@media(max-width:900px){.zen-hero-visual{max-width:640px}}
@media(max-width:620px){.zen-hero-visual svg{display:none}.zen-mobile-flow{display:grid}.zen-hero-caption{margin-top:15px!important;font-size:.65rem}.zen-hero-surface::before{mask-image:linear-gradient(90deg,transparent 0%,#000 100%)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 100%)!important}}
@media(prefers-reduced-motion:reduce){.zen-hero-visual *, .zen-motion-graphic *{animation:none!important;transition:none!important}.zen-hero-visual svg{filter:none!important}}