/* Distinct phase choreography. Native layout dimensions never animate. */
.cts-browser-piece,.cts-design-headline,.cts-design-cta,.cts-build-copy,.cts-nav-item,.cts-site-card,.cts-site-chart,.cts-lock-mark,.cts-lock-shackle,.cts-monitor-ring {
 transform-box:fill-box;transform-origin:center;
}
.cts-architecture-browser .et_pb_image_wrap {overflow:hidden}
.cts-browser-wire {opacity:0;transition:opacity 180ms ease}
.cts-browser-finish {opacity:1}
.cts-architecture-step.is-current::before {box-shadow:0 0 19px #b0d5ea10}
.cts-cloud-home .cts-architecture .cts-architecture-step.is-current h3 {color:#f1f8fc!important;font-weight:650!important}
.cts-architecture-connections path.is-active {stroke-opacity:.7;stroke-width:1.2}
.cts-architecture-connections .cts-architecture-packet {stroke-width:2.5;stroke-dasharray:9 2000}
/* Design: three deliberate alternatives, then clean alignment. */
.cts-architecture[data-phase="design"] .cts-browser-wire {opacity:.6}
.cts-architecture[data-phase="design"] .cts-browser-finish {animation:cts-story-design-ink 2.3s ease both}
.cts-architecture[data-phase="design"] .cts-design-guides {animation:cts-story-guides 2.3s ease both}
.cts-architecture[data-phase="design"] .cts-browser-piece-2 {animation:cts-story-design-copy 2.3s cubic-bezier(.45,0,.2,1) both}
.cts-architecture[data-phase="design"] .cts-browser-piece-3 {animation:cts-story-design-media 2.3s cubic-bezier(.45,0,.2,1) both}
.cts-architecture[data-phase="design"] .cts-design-headline {transform-origin:left center;animation:cts-story-design-headline 2.3s ease both}
.cts-architecture[data-phase="design"] .cts-design-cta {animation:cts-story-design-cta 2.3s ease both}
.cts-architecture[data-phase="design"] .cts-site-card-1 {transform-origin:left center;animation:cts-story-design-card 2.3s ease both}
.cts-architecture[data-phase="design"] .cts-site-card-2 {animation:cts-story-design-card-two 2.3s ease both}
@keyframes cts-story-design-ink {0%,15%{opacity:.55}65%{opacity:.78}100%{opacity:1}}
@keyframes cts-story-guides {0%{opacity:0}12%,78%{opacity:.9}100%{opacity:0}}
@keyframes cts-story-design-copy {0%,8%{transform:none}24%,38%{transform:translateX(222px)}55%,69%{transform:translate(0,5px)}88%,100%{transform:none}}
@keyframes cts-story-design-media {0%,8%{transform:none}24%,38%{transform:translateX(-242px) scale(.94)}55%,69%{transform:translate(-12px,-3px) scale(1.06)}88%,100%{transform:none}}
@keyframes cts-story-design-headline {0%,8%{transform:scaleX(.85)}24%,38%{transform:scaleX(.94)}55%,69%{transform:scaleX(.72)}88%,100%{transform:none}}
@keyframes cts-story-design-cta {0%,8%{transform:none}24%,38%{transform:translate(13px,-3px)}55%,69%{transform:translate(32px,0)}88%,100%{transform:none}}
@keyframes cts-story-design-card {0%,8%{transform:none}24%,38%{transform:scaleX(1.13)}55%,69%{transform:translateY(-7px) scaleX(.93)}88%,100%{transform:none}}
@keyframes cts-story-design-card-two {0%,8%{transform:none}24%,38%{transform:translateX(17px) scaleX(.84)}55%,69%{transform:translateY(-7px)}88%,100%{transform:none}}
/* Build: directional arrivals, slight overshoot, crisp lock-in. */
.cts-architecture[data-phase="build"] :is(.cts-browser-piece-1,.cts-design-headline,.cts-build-copy,.cts-design-cta,.cts-browser-piece-3,.cts-site-card,.cts-site-chart) {
 animation:cts-story-assemble 720ms cubic-bezier(.2,.7,.25,1) both;animation-delay:var(--assemble-delay,120ms);
}
.cts-browser-piece-1 {--fly-x:0px;--fly-y:-65px;--assemble-delay:80ms}
.cts-design-headline {--fly-x:-160px;--fly-y:0px;--assemble-delay:250ms}
.cts-build-copy {--fly-x:-125px;--fly-y:0px;--assemble-delay:390ms}
.cts-design-cta {--fly-x:0px;--fly-y:95px;--assemble-delay:620ms}
.cts-browser-piece-3 {--fly-x:175px;--fly-y:10px;--assemble-delay:420ms}
.cts-site-card-1 {--fly-x:-30px;--fly-y:100px;--assemble-delay:690ms}
.cts-site-card-2 {--fly-x:0px;--fly-y:100px;--assemble-delay:840ms}
.cts-site-chart {--fly-x:100px;--fly-y:45px;--assemble-delay:980ms}
.cts-architecture[data-phase="build"] .cts-nav-item {animation:cts-story-nav 400ms ease both}
.cts-architecture[data-phase="build"] .cts-nav-item-1 {animation-delay:380ms}
.cts-architecture[data-phase="build"] .cts-nav-item-2 {animation-delay:470ms}
.cts-architecture[data-phase="build"] .cts-nav-item-3 {animation-delay:560ms}
@keyframes cts-story-assemble {0%{opacity:0;transform:translate(var(--fly-x),var(--fly-y)) scale(.92)}72%{opacity:1;transform:translate(calc(var(--fly-x)*-.025),calc(var(--fly-y)*-.025)) scale(1.012)}100%{opacity:1;transform:none}}
@keyframes cts-story-nav {from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
/* Secure: trace, sweep, closing contour, then confirmed lock. */
.cts-architecture:is([data-phase="design"],[data-phase="build"]) .cts-browser-lock {opacity:0}
.cts-architecture[data-phase="secure"] .cts-security-trace {stroke-dasharray:1;animation:cts-story-trace 1.65s ease both}
.cts-architecture[data-phase="secure"] .cts-security-scan {animation:cts-story-scan 1.2s 180ms cubic-bezier(.35,0,.2,1) both}
.cts-architecture[data-phase="secure"] .cts-security-contour {stroke-dasharray:1;animation:cts-story-contour 1.25s 250ms ease both}
.cts-architecture[data-phase="secure"] .cts-lock-mark {animation:cts-story-lock 650ms 800ms cubic-bezier(.2,.8,.2,1) both}
.cts-architecture[data-phase="secure"] .cts-lock-shackle {animation:cts-story-shackle 450ms 930ms ease both}
.cts-architecture[data-phase="secure"] .cts-lock-check {stroke-dasharray:1;animation:cts-story-check 350ms 1250ms ease both}
@keyframes cts-story-trace {0%{opacity:0;stroke-dashoffset:1}15%{opacity:.95}72%{stroke-dashoffset:0;opacity:.95}100%{stroke-dashoffset:0;opacity:.35}}
@keyframes cts-story-scan {0%{opacity:0;transform:translateX(0)}12%,82%{opacity:.8}100%{opacity:0;transform:translateX(560px)}}
@keyframes cts-story-contour {0%{opacity:0;stroke-dashoffset:1}20%{opacity:.65}80%{opacity:.65;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes cts-story-lock {0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes cts-story-shackle {from{transform:translateY(-5px)}to{transform:none}}
@keyframes cts-story-check {from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Deploy and Manage choreography lives in cts-hero-handoff.css. */
/* Lighting is one soft exposure change, never a sharp or repeated flash. */
.cts-architecture[data-enhanced]:not([data-phase="static"])::before {animation:cts-architecture-atmosphere 19s ease-in-out infinite}
.cts-architecture[data-enhanced]:not([data-phase="static"])::after {content:'';position:absolute;inset:30% -3% 0 12%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side at center,#c0e1f530,transparent);opacity:0;animation:cts-architecture-storm 24s ease-in-out infinite}
.cts-architecture[data-enhanced]:not([data-phase="static"]) .cts-architecture-body::after {content:'';position:absolute;inset:22% -3% -5% 12%;z-index:0;pointer-events:none;background:radial-gradient(ellipse closest-side at center,#c0e1f54d,transparent);opacity:0}
.cts-architecture[data-enhanced][data-phase="secure"] .cts-architecture-body::after {animation:cts-story-exposure 1.7s ease both}
.cts-architecture[data-enhanced][data-phase="deploy"] .cts-architecture-body::after {animation:cts-story-deploy-exposure 1.7s ease both}
@keyframes cts-story-exposure {0%,100%{opacity:0}45%{opacity:.7}}
@keyframes cts-story-deploy-exposure {0%,100%{opacity:0}62%{opacity:.65}}
@keyframes cts-architecture-atmosphere {0%,100%{opacity:.65;transform:translate3d(0,0,0)}50%{opacity:.95;transform:translate3d(-5px,3px,0)}}
@keyframes cts-architecture-storm {0%,78%,93%,100%{opacity:0}84%{opacity:.7}88%{opacity:.2}}
@keyframes cts-architecture-foundation {0%,100%{opacity:.6}50%{opacity:1}}
/* Exploration supplements the story without overriding an active event. */
.cts-architecture[data-explore="design"] .cts-browser-wire {opacity:.6}
.cts-architecture[data-explore="secure"] .cts-browser-perimeter {opacity:.7}
.cts-architecture:is([data-explore="cloud"],[data-explore="manage"]) .cts-architecture-status span {color:#e3f0f8!important}
.cts-architecture:is([data-explore="build"],[data-explore="deploy"]) .cts-browser-perimeter {opacity:.35}
.cts-architecture:is([data-phase="manage"],[data-explore="manage"]) .cts-architecture-managed {border-color:#8daabd99}
/* Tablet and phone tell the same story with fewer independently moving pieces. */
@media(max-width:980px){
 .cts-architecture[data-phase="design"] :is(.cts-browser-piece-2,.cts-design-cta,.cts-site-card-1,.cts-site-card-2){animation:none}
 .cts-architecture[data-phase="design"] .cts-browser-piece-3{animation:cts-story-design-compact 2.3s ease both}
 .cts-architecture[data-phase="build"] :is(.cts-design-headline,.cts-build-copy,.cts-design-cta,.cts-site-card,.cts-site-chart,.cts-nav-item){animation:none}
 .cts-architecture[data-phase="build"] .cts-browser-piece-2{--fly-x:-35px;--fly-y:0px;animation:cts-story-assemble 700ms 200ms ease both}
 .cts-architecture[data-phase="build"] .cts-browser-piece-3{--fly-x:45px;--fly-y:0px}
 .cts-architecture[data-phase="build"] .cts-browser-piece-4{--fly-x:0px;--fly-y:40px;animation:cts-story-assemble 750ms 700ms ease both}
 .cts-architecture[data-enhanced]:not([data-phase="static"])::after,.cts-architecture[data-enhanced]:not([data-phase="static"]) .cts-architecture-body::after{display:none}
 .cts-architecture[data-phase="secure"] .cts-security-contour{animation:none}
}
@keyframes cts-story-design-compact {0%,8%,88%,100%{transform:none}24%,38%{transform:translateY(9px) scale(.94)}55%,69%{transform:translateY(-5px) scale(1.02)}}
@media(max-width:767px){.cts-architecture[data-enhanced]:not([data-phase="static"])::before{animation:none}}
.cts-architecture[data-motion-running="false"],.cts-architecture[data-motion-running="false"]::before,.cts-architecture[data-motion-running="false"]::after,.cts-architecture[data-motion-running="false"] *,.cts-architecture[data-motion-running="false"] *::before,.cts-architecture[data-motion-running="false"] *::after {animation-play-state:paused!important}
.cts-architecture[data-phase="static"] *,.cts-architecture[data-phase="static"] *::before,.cts-architecture[data-phase="static"] *::after {animation:none!important}
@media(prefers-reduced-motion:reduce){
 .cts-architecture,.cts-architecture::before,.cts-architecture::after,.cts-architecture *,.cts-architecture *::before,.cts-architecture *::after{animation:none!important;transition:none!important}
 .cts-architecture-care-packet,.cts-security-scan,.cts-security-trace,.cts-security-contour,.cts-design-guides,.cts-monitor-ring{opacity:0!important}
 .cts-architecture .cts-browser-finish,.cts-architecture .cts-browser-lock,.cts-architecture .cts-architecture-online{opacity:1!important}
}