/* Homepage only. Nine distinct motifs; product-page art remains independent. */
.services-v2, .case-study { position: relative; isolation: isolate; }
.services-v2 > .container, .case-study > .case-copy, .case-study > .product-visual { position: relative; z-index: 1; }
.home-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.home-motif { position: absolute; display: block; pointer-events: none; opacity: var(--alpha, .45); }
.home-motif__pointer { display: block; transform: translate(var(--mx,0px),var(--my,0px)) rotate(var(--mr,0deg)); transition: transform .5s ease-out; }
.home-motif svg { display: block; width: 100%; height: auto; animation-play-state: paused; }
.home-art.is-visible .home-motif svg { animation-play-state: running; }
/* Foreground window, mid-layer document, distant code brackets. */
.home-motif--window { width: 106px; left: 3.5%; top: 23px; --alpha: .65; --strength: 1; }
.home-motif--window svg { animation: home-window 12s -3s ease-in-out infinite paused; }
.home-motif--brackets { width: 72px; right: -12px; bottom: 22px; --alpha: .26; --strength: .4; }
.home-motif--brackets svg { animation: home-brackets 18s -8s ease-in-out infinite paused; }
.home-motif--panel { width: 60px; left: 43%; bottom: 48px; --alpha: .42; --strength: .7; }
.home-motif--panel svg { animation: home-panel 15s -6s ease-in-out infinite paused; }
/* One capability connector and three product-specific margin notes. */
.home-motif--modules { width: 118px; left: 19%; bottom: 8px; --alpha: .34; --strength: .5; }
.home-motif--modules svg { animation: home-modules 16s -4s ease-in-out infinite paused; }
.home-motif--calendar { width: 57px; right: 20px; top: 5px; --alpha: .43; --strength: .65; }
.home-motif--calendar svg { animation: home-calendar 9s -2s ease-in-out infinite paused; }
.home-motif--tag { width: 48px; left: 4px; top: 19px; --alpha: .58; --strength: .8; }
.home-motif--tag svg { animation: home-tag 13s -5s ease-in-out infinite paused; }
.home-motif--receipt { width: 43px; right: 39%; bottom: 9px; --alpha: .48; --strength: .7; }
.home-motif--receipt svg { animation: home-receipt 11s -7s ease-in-out infinite paused; }
/* Background architecture and one closing monogram, not the official logo. */
.home-motif--architecture { width: 148px; right: -22px; bottom: 12px; --alpha: .22; --strength: .35; }
.home-motif--architecture svg { animation: home-architecture 20s -9s ease-in-out infinite paused; }
.home-motif--brand { width: 138px; left: 34%; top: -18px; --alpha: .35; --strength: .8; }
.home-motif--brand svg { animation: home-brand 17s -1s ease-in-out infinite paused; }
@keyframes home-window { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-6px) rotate(-5deg); } }
@keyframes home-brackets { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes home-panel { 0%,100% { transform: perspective(400px) rotateY(-9deg) rotate(5deg); } 50% { transform: perspective(400px) rotateY(-6deg) rotate(4deg) translateY(3px); } }
@keyframes home-modules { 0%,100% { transform: scale(.98); } 50% { transform: scale(1.015); } }
@keyframes home-calendar { 0%,100% { transform: rotate(6deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
@keyframes home-tag { 0%,100% { transform: rotate(-8deg) translateX(0); } 50% { transform: rotate(-6deg) translateX(3px); } }
@keyframes home-receipt { 0%,100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-4px) rotate(9deg); } }
@keyframes home-architecture { 0%,100% { transform: perspective(600px) rotateX(12deg); } 50% { transform: perspective(600px) rotateX(14deg) translateX(-3px); } }
@keyframes home-brand { 0%,100% { transform: translateX(0) scale(1); } 50% { transform: translateX(4px) scale(1.015); } }
@media (max-width: 1100px) {
  .home-motif--window { width: 84px; left: 20px; top: 14px; }
  .home-motif--panel { left: 35%; bottom: 18px; width: 46px; }
  .home-motif--brand { left: 44%; width: 104px; }
}
@media (max-width: 860px) {
  .home-motif { --alpha: .28; }
  .home-motif--window { width: 48px; left: 9px; top: 8px; }
  .home-motif--brackets, .home-motif--panel, .home-motif--modules, .home-motif--architecture { display: none; }
  .home-motif--calendar { width: 34px; right: 8px; top: 8px; }
  .home-motif--tag { width: 30px; left: 2px; top: 8px; }
  .home-motif--receipt { width: 28px; right: 12px; bottom: 10px; }
  .home-motif--brand { width: 76px; left: auto; right: 4%; top: auto; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-motif svg { animation: none !important; }
  .home-motif__pointer { transform: none; transition: none; }
}