/* ADES motion layer inspired by ThreeUI Structure Flow and article-heading studies. */
.ades-flow-surface,.ades-transition-surface{position:relative;isolation:isolate}
.ades-flow-surface>:not(.ades-flow-field),.ades-transition-surface>:not(.ades-section-signal){position:relative;z-index:1}

.ades-flow-field{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1s cubic-bezier(.16,1,.3,1)}
.ades-flow-surface.threeui-in-view>.ades-flow-field{opacity:.46}
.ades-flow-line{position:absolute;right:-8%;top:calc(13% + var(--flow-index) * 13%);width:44%;height:1px;transform:rotate(calc(-7deg + var(--ades-flow-variant) * 3deg));transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(52,133,183,.08) 16%,rgba(52,133,183,.3) 54%,rgba(173,210,212,.08) 84%,transparent)}
.ades-flow-line:nth-child(even){right:auto;left:-12%;width:35%;opacity:.62;transform:rotate(calc(5deg - var(--ades-flow-variant) * 2deg))}
.ades-flow-line::before,.ades-flow-line::after{content:'';position:absolute;top:50%;border-radius:50%;background:var(--blue-primary);transform:translateY(-50%)}
.ades-flow-line::before{left:18%;width:3px;height:3px;opacity:.38;box-shadow:72px 0 0 rgba(52,133,183,.2),144px 0 0 rgba(52,133,183,.14)}
.ades-flow-line::after{right:12%;width:5px;height:5px;opacity:.3;box-shadow:0 0 0 4px rgba(173,210,212,.1)}
.ades-flow-node{position:absolute;top:50%;left:12%;width:22%;height:1px;background:linear-gradient(90deg,transparent,rgba(52,133,183,.42),transparent);transform:translate3d(-120%,0,0);opacity:0}
.ades-flow-surface.threeui-motion-active .ades-flow-node{animation:adesStructureFlow calc(8s + var(--flow-index) * .8s) cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--flow-index) * -1.15s)}

.ades-section-signal{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;display:grid;grid-template-columns:22% 1fr 16%;gap:10px;align-items:center;overflow:hidden;pointer-events:none;opacity:0;transform:scaleX(.72);transform-origin:left center;transition:opacity .75s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.ades-transition-surface.threeui-in-view>.ades-section-signal{opacity:.58;transform:scaleX(1)}
.ades-section-signal span{display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(52,133,183,.5),transparent)}
.ades-section-signal span:nth-child(2){background:linear-gradient(90deg,rgba(173,210,212,.08),rgba(52,133,183,.32) 30%,rgba(52,133,183,.1) 78%,transparent)}
.ades-section-signal span:nth-child(3){background:linear-gradient(90deg,transparent,rgba(173,210,212,.42))}
.ades-section-signal-1{grid-template-columns:13% 1fr 25%}.ades-section-signal-2{grid-template-columns:31% 1fr 11%}

.prod-pg-hero-img:has(.prod-3d-shell){isolation:isolate}
.prod-3d-shell::before{content:'';position:absolute;z-index:2;left:50%;top:47%;width:64%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,transparent 0,transparent 40%,rgba(173,210,212,.22) 51%,rgba(52,133,183,.08) 62%,transparent 73%);filter:blur(7px);transform:translate3d(-50%,-50%,0) scale(.94);pointer-events:none;opacity:.5}
.prod-3d-shell.threeui-motion-active::before{animation:adesCadHalo 7s ease-in-out infinite}
.prod-3d-shell>.prod-3d-viewer{position:relative;z-index:1;background-color:transparent}
.prod-3d-shell>.prod-3d-kicker,.prod-3d-shell>.prod-3d-parts,.prod-3d-shell>.prod-3d-note{z-index:4}
.prod-r3f-active .prod-3d-shell::before{opacity:.72}

.ades-doc-title .ades-doc-title-line{display:block;opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(0,26px,0);will-change:clip-path,transform,opacity}
.ades-doc-title.threeui-in-view .ades-doc-title-line{animation:adesDocTitle .85s cubic-bezier(.16,1,.3,1) forwards}
.ades-doc-title.threeui-in-view .ades-doc-title-line:nth-child(2){animation-delay:.13s}
.ades-doc-title.threeui-motion-complete .ades-doc-title-line{will-change:auto}
.ades-doc-card-title .cat-dl-meta{opacity:0;transform:translate3d(0,8px,0)}
.ades-doc-card-title.threeui-in-view .cat-dl-meta{animation:adesDocMeta .62s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--doc-card-index) * 90ms + 80ms)}
.ades-doc-card-title.threeui-in-view .cat-dl-label{animation:adesDocLabel .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--doc-card-index) * 90ms + 120ms)}

@keyframes adesStructureFlow{0%,10%{opacity:0;transform:translate3d(-120%,0,0)}24%{opacity:.6}72%{opacity:.38}92%,100%{opacity:0;transform:translate3d(440%,0,0)}}
@keyframes adesCadHalo{0%,100%{opacity:.5;transform:translate3d(-50%,-50%,0) scale(.92)}50%{opacity:.72;transform:translate3d(-50%,-50%,0) scale(1.04)}}
@keyframes adesDocTitle{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(0,26px,0)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:translate3d(0,0,0)}}
@keyframes adesDocMeta{0%{opacity:0;transform:translate3d(0,8px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}
@keyframes adesDocLabel{0%{opacity:0;letter-spacing:.14em;transform:translate3d(0,8px,0)}100%{opacity:1;letter-spacing:.06em;transform:translate3d(0,0,0)}}

@media(max-width:800px){.ades-flow-line{width:58%;opacity:.54}.ades-flow-line:nth-child(even){width:44%}.ades-section-signal{grid-template-columns:18% 1fr 12%}.prod-3d-shell::before{width:82%}}
@media(prefers-reduced-motion:reduce){.ades-flow-field,.ades-section-signal{opacity:.34;transform:none;transition:none}.ades-flow-node{display:none}.prod-3d-shell::before{animation:none;opacity:.5}.ades-doc-title .ades-doc-title-line{opacity:1;clip-path:none;transform:none;will-change:auto}.ades-doc-card-title .cat-dl-meta{opacity:1;transform:none}.ades-doc-title.threeui-in-view .ades-doc-title-line,.ades-doc-card-title.threeui-in-view .cat-dl-meta,.ades-doc-card-title.threeui-in-view .cat-dl-label{animation:none}}
