/* Each cover animates details of its illustration; the card, image frame, and copy stay still. */
.product-card:not(.is-animated) .product-art *,
.product-card:not(.is-animated) .product-art *::before,
.product-card:not(.is-animated) .product-art *::after{animation-play-state:paused!important}
.product-art.art-grid{position:relative;inset:auto;opacity:1;mask-image:none;background-image:none}
.product-art{--cover-pace:2.65s}
.art-ui,.art-landing,.art-dash,.art-form,.art-nav,.art-workspace,.art-operations,.art-commercepro,.art-team{--cover-pace:2.25s}
.art-code,.art-api,.art-icons,.art-type,.art-scale,.art-notes,.art-identity,.art-complete{--cover-pace:2.05s}
.art-motion,.art-texture,.art-surfaces,.art-illustration,.art-sync,.art-transitions{--cover-pace:3.1s}
.art-data,.art-analytics,.art-workflow,.art-states,.art-search{--cover-pace:2.55s}
.product-card.is-animated .product-art *,
.product-card.is-animated .product-art *::before,
.product-card.is-animated .product-art *::after{animation-duration:var(--cover-pace)!important}

/* 01–08: interface, code, icons, page layout, motion, wireframes, dashboard, type */
.is-animated .art-ui .mini-window i{animation:line-reveal 4.8s ease-in-out infinite alternate}
.is-animated .art-ui .mini-window i:nth-child(2){animation-delay:-1.6s}
.is-animated .art-ui .mini-window i:nth-child(3){animation-delay:-3.2s}
.is-animated .art-code .code-stamp{animation:code-glow 5.2s ease-in-out infinite}
.icon-matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 15px;letter-spacing:0;text-align:center;line-height:1.55}
.icon-matrix i{font-style:normal;display:block}
.is-animated .art-icons .icon-matrix i{animation:icon-spark 4.8s ease-in-out infinite}
.is-animated .art-icons .icon-matrix i:nth-child(2){animation-delay:-.8s}
.is-animated .art-icons .icon-matrix i:nth-child(3){animation-delay:-1.6s}
.is-animated .art-icons .icon-matrix i:nth-child(4){animation-delay:-2.4s}
.is-animated .art-icons .icon-matrix i:nth-child(5){animation-delay:-3.2s}
.is-animated .art-icons .icon-matrix i:nth-child(6){animation-delay:-4s}
.is-animated .art-landing .landing-shape b{animation:panel-reveal 5.5s ease-in-out infinite}
.is-animated .art-landing .landing-shape i{animation:line-reveal 5.5s ease-in-out infinite alternate}
.is-animated .art-motion .vector-satellite{animation:vector-spin 8s linear infinite}
.is-animated .art-wire .wire-frame i,.is-animated .art-wire .wire-frame b{animation:cell-fill 6s ease-in-out infinite}
.is-animated .art-wire .wire-frame i:nth-child(2){animation-delay:-1.2s}
.is-animated .art-wire .wire-frame i:nth-child(3){animation-delay:-2.4s}
.is-animated .art-wire .wire-frame i:nth-child(4){animation-delay:-3.6s}
.is-animated .art-wire .wire-frame b{animation-delay:-4.8s}
.is-animated .art-dash .dash-frame b{animation:tile-highlight 5.4s ease-in-out infinite alternate}
.is-animated .art-dash .dash-frame b:last-child{animation-delay:-2.7s}
.is-animated .art-type .type-glyph{animation:type-ink 6s ease-in-out infinite alternate}

/* 09–16: fields, API, texture, navigation, chart, portfolio, notes, bundle */
.is-animated .art-form .form-frame b{animation:field-focus 5.2s ease-in-out infinite}
.is-animated .art-form .form-frame b:last-child{animation-delay:-2.6s}
.art-api .api-symbol{position:relative}
.art-api .api-symbol::after{content:'_';position:absolute;right:-15px;bottom:0;font-size:25px;color:#ddd}
.is-animated .art-api .api-symbol::after{animation:cursor-blink 1.5s steps(2,end) infinite}
.is-animated .art-texture .texture-orb::after{animation:surface-ripple 4.8s ease-out infinite}
.is-animated .art-nav .nav-frame i{animation:nav-draw 5.2s ease-in-out infinite alternate}
.is-animated .art-nav .nav-frame i:nth-child(2){animation-delay:-1.7s}
.is-animated .art-nav .nav-frame i:nth-child(3){animation-delay:-3.4s}
.is-animated .art-data .vector-line{animation:vector-draw 7s ease-in-out infinite}
.is-animated .art-data .vector-points{animation:vector-points 7s ease-in-out infinite}
.is-animated .art-portfolio .portfolio-frame i{animation:portfolio-panel 5.8s ease-in-out infinite}
.is-animated .art-portfolio .portfolio-frame i:nth-of-type(2){animation-delay:-1.9s}
.is-animated .art-portfolio .portfolio-frame i:nth-of-type(3){animation-delay:-3.8s}
.is-animated .art-notes .note-glyph small{animation:note-mark 4.5s ease-in-out infinite}
.is-animated .art-bundle .bundle-stack i:first-child{animation:bundle-fan 6s ease-in-out infinite alternate}
.is-animated .art-bundle .bundle-stack i:nth-child(2){animation:bundle-fan-back 6s ease-in-out infinite alternate}

/* 17–24: commerce, tokens, editorial, workspace, scale, illustration, access, sync */
.is-animated .art-commerce .commerce-layout b{animation:tile-highlight 6s ease-in-out infinite}
.is-animated .art-commerce .commerce-layout b:nth-of-type(2){animation-delay:-2s}
.is-animated .art-commerce .commerce-layout b:nth-of-type(3){animation-delay:-4s}
.is-animated .art-tokens .token-stack i{animation:token-shift 6s ease-in-out infinite alternate}
.is-animated .art-tokens .token-stack i:nth-child(2){animation-delay:-2s}
.is-animated .art-tokens .token-stack i:nth-child(3){animation-delay:-4s}
.is-animated .art-editorial .editorial-layout i{animation:editorial-rule 5.7s ease-in-out infinite alternate}
.is-animated .art-editorial .editorial-layout i:last-child{animation-delay:-2.8s}
.is-animated .art-workspace .workspace-layout b{animation:workspace-focus 6.3s ease-in-out infinite}
.is-animated .art-workspace .workspace-layout b:nth-of-type(2){animation-delay:-2.1s}
.is-animated .art-workspace .workspace-layout b:nth-of-type(3){animation-delay:-4.2s}
.is-animated .art-scale .scale-type small{animation:scale-tick 5s steps(4,end) infinite}
.is-animated .art-illustration .illustration-shape i{animation:illustration-breathe 5s ease-in-out infinite}
.is-animated .art-illustration .illustration-shape b{animation:illustration-dot 5s ease-in-out infinite}
.is-animated .art-access .access-symbol small{animation:access-arrow 4.8s ease-in-out infinite}
.is-animated .art-sync .vector-sync-path{animation:vector-dash 8s linear infinite}

/* 25–32: grid, operations, workflow, identity, analytics, search, surfaces, mobile */
.is-animated .art-grid .atlas-grid i,.is-animated .art-grid .atlas-grid b{animation:grid-pop 6.4s ease-in-out infinite}
.is-animated .art-grid .atlas-grid i:nth-child(2){animation-delay:-1.6s}
.is-animated .art-grid .atlas-grid i:nth-child(3){animation-delay:-3.2s}
.is-animated .art-grid .atlas-grid b{animation-delay:-4.8s}
.is-animated .art-operations .ops-layout b{animation:operation-state 5.8s ease-in-out infinite}
.is-animated .art-operations .ops-layout b:nth-of-type(2){animation-delay:-1.9s}
.is-animated .art-operations .ops-layout b:nth-of-type(3){animation-delay:-3.8s}
.is-animated .art-workflow .flow-layout i{animation:workflow-node 5.4s ease-in-out infinite}
.is-animated .art-workflow .flow-layout i:nth-child(2){animation-delay:-1.8s}
.is-animated .art-workflow .flow-layout i:nth-child(3){animation-delay:-3.6s}
.is-animated .art-identity .identity-mark span{animation:identity-star 12s linear infinite}
.is-animated .art-analytics .analytics-layout b{animation:analytics-bar 5.6s ease-in-out infinite alternate}
.is-animated .art-analytics .analytics-layout b:last-of-type{animation-delay:-2.8s}
.art-search .search-symbol::before{content:'';position:absolute;inset:13px;border:1px solid #777;border-radius:50%}
.is-animated .art-search .search-symbol::before{animation:search-scan 4.8s ease-in-out infinite}
.is-animated .art-surfaces .surface-shape i:first-child{animation:surface-orbit 12s linear infinite}
.is-animated .art-surfaces .surface-shape i:last-child{animation:surface-orbit-reverse 14s linear infinite}
.is-animated .art-mobile .mobile-screen b{animation:mobile-screen 6s ease-in-out infinite}
.is-animated .art-mobile .mobile-screen b:nth-of-type(2){animation-delay:-2s}
.is-animated .art-mobile .mobile-screen b:nth-of-type(3){animation-delay:-4s}

/* 33–40: content, studio, collection, commerce pro, states, transitions, team, max */
.is-animated .art-content .content-layout i{animation:content-rule 5.8s ease-in-out infinite alternate}
.is-animated .art-content .content-layout i:last-child{animation-delay:-2.9s}
.is-animated .art-studio .studio-stack i:first-child{animation:studio-fan 7s ease-in-out infinite alternate}
.is-animated .art-studio .studio-stack i:nth-child(2){animation:studio-fan-back 7s ease-in-out infinite alternate}
.is-animated .art-complete .complete-mark>span{animation:collection-star 9s linear infinite}
.is-animated .art-commercepro .commerce-layout b{animation:checkout-step 6s ease-in-out infinite}
.is-animated .art-commercepro .commerce-layout b:nth-of-type(2){animation-delay:-2s}
.is-animated .art-commercepro .commerce-layout b:nth-of-type(3){animation-delay:-4s}
.is-animated .art-states .state-node{animation:state-active 6s ease-in-out infinite}
.is-animated .art-states .state-node:nth-of-type(3){animation-delay:-1.2s}
.is-animated .art-states .state-node:nth-of-type(4){animation-delay:-2.4s}
.is-animated .art-states .state-node:nth-of-type(5){animation-delay:-3.6s}
.is-animated .art-states .state-node:nth-of-type(6){animation-delay:-4.8s}
.is-animated .art-transitions .vector-transition-arc{animation:vector-arc 6.5s ease-in-out infinite alternate}
.is-animated .art-transitions .arc-two{animation-delay:-3.25s}
.is-animated .art-team .team-layout b{animation:team-focus 6.6s ease-in-out infinite}
.is-animated .art-team .team-layout b:nth-of-type(2){animation-delay:-2.2s}
.is-animated .art-team .team-layout b:nth-of-type(3){animation-delay:-4.4s}
.is-animated .art-max .max-stack i:first-child{animation:max-fan 7.4s ease-in-out infinite alternate}
.is-animated .art-max .max-stack i:nth-child(2){animation:max-fan-back 7.4s ease-in-out infinite alternate}

@keyframes line-reveal{0%,15%,100%{opacity:.25;scale:.35 1;transform-origin:left}40%,75%{opacity:1;scale:1.25 1;transform-origin:left}}
@keyframes code-glow{0%,100%{border-color:#555;text-shadow:none;box-shadow:0 0 0 #eee0}45%,70%{border-color:#f1f1e8;text-shadow:0 0 21px #fff;box-shadow:0 0 22px #eee7}}
@keyframes icon-spark{0%,15%,100%{opacity:.25;scale:.65;rotate:-12deg}35%,65%{opacity:1;scale:1.35;rotate:12deg}}
@keyframes panel-reveal{0%,15%,100%{opacity:.35;filter:brightness(.8);scale:.85}40%,75%{opacity:1;filter:brightness(1.25);scale:1.08}}
@keyframes cell-fill{0%,15%,100%{background:transparent;scale:.9}40%,70%{background:#5d5d56a8;scale:1.06}}
@keyframes tile-highlight{0%,15%,100%{filter:brightness(.8);background:#d2d2cc}45%,75%{filter:brightness(1.35);background:#85857d}}
@keyframes type-ink{0%,100%{color:#333;text-shadow:none}45%,70%{color:#111;text-shadow:5px 5px 0 #b3b3ab,0 0 10px #fff}}
@keyframes field-focus{0%,20%,100%{border-color:#c7c7c1;background:transparent;box-shadow:0 0 0 transparent}45%,72%{border-color:#4c4c45;background:#bcbcb5;box-shadow:0 0 0 3px #8e8e8440}}
@keyframes cursor-blink{50%{opacity:0}}
@keyframes surface-ripple{0%{opacity:1;transform:scale(.35)}70%,100%{opacity:0;transform:scale(2)}}
@keyframes nav-draw{0%,100%{scale:.45 1;transform-origin:left;opacity:.45}50%{scale:1.5 1;transform-origin:left;opacity:1}}
@keyframes portfolio-panel{0%,20%,100%{filter:brightness(.75);opacity:.35;scale:.92}45%,75%{filter:brightness(1.3);opacity:1;scale:1.08}}
@keyframes note-mark{0%,100%{opacity:.2;rotate:-18deg;scale:.75}50%{opacity:1;rotate:18deg;scale:1.2}}
@keyframes bundle-fan{to{translate:14px -11px;rotate:9deg}}
@keyframes bundle-fan-back{to{translate:-11px 7px;rotate:-8deg}}
@keyframes token-shift{to{filter:brightness(1.6);scale:1.22;translate:0 -5px}}
@keyframes editorial-rule{to{scale:1.65 1;transform-origin:left;opacity:.35}}
@keyframes workspace-focus{0%,15%,100%{opacity:.3;background:#d2d2cc}45%,75%{opacity:1;background:#83837b}}
@keyframes scale-tick{0%,100%{letter-spacing:.05em;opacity:.2}50%{letter-spacing:.55em;opacity:1}}
@keyframes illustration-breathe{50%{scale:1.38;opacity:.55}}
@keyframes illustration-dot{50%{translate:14px -12px;scale:1.6}}
@keyframes access-arrow{50%{translate:9px -9px;opacity:.25;scale:1.3}}
@keyframes grid-pop{0%,15%,100%{background:transparent;scale:.85}45%,70%{background:#56564bb5;scale:1.12}}
@keyframes operation-state{0%,15%,100%{opacity:.3;background:#d2d2cc}45%,75%{opacity:1;background:#72726a}}
@keyframes workflow-node{0%,15%,100%{box-shadow:0 0 0 0 #5555;background:#ddd;scale:.85}45%,75%{box-shadow:0 0 0 10px #5553;background:#555;scale:1.2}}
@keyframes identity-star{to{rotate:360deg}}
@keyframes analytics-bar{to{scale:1 1.65;transform-origin:bottom;filter:brightness(1.8);background:#b7b7af}}
@keyframes search-scan{0%,100%{opacity:.1;scale:.35}50%{opacity:1;scale:1.4}}
@keyframes surface-orbit{to{rotate:360deg}}
@keyframes surface-orbit-reverse{to{rotate:-360deg}}
@keyframes mobile-screen{0%,15%,100%{opacity:.35;background:#cecec8}45%,75%{opacity:1;background:#85857c}}
@keyframes content-rule{to{scale:1.48 1;transform-origin:left;opacity:.3}}
@keyframes studio-fan{to{translate:14px -10px;rotate:8deg}}
@keyframes studio-fan-back{to{translate:-10px 8px;rotate:-7deg}}
@keyframes collection-star{to{rotate:360deg}}
@keyframes checkout-step{0%,15%,100%{opacity:.3;background:#d2d2cc}45%,75%{opacity:1;background:#686860}}
@keyframes state-active{0%,15%,100%{fill:#e6e6e0}45%,75%{fill:#62625b}}
@keyframes team-focus{0%,15%,100%{opacity:.3;background:#d2d2cc}45%,75%{opacity:1;background:#77776e}}
@keyframes max-fan{to{translate:16px -13px;rotate:10deg;filter:brightness(1.4)}}
@keyframes max-fan-back{to{translate:-12px 10px;rotate:-9deg}}

@media(prefers-reduced-motion:reduce){.product-art *, .product-art *::before, .product-art *::after{animation:none!important}}