/* Decorative motion uses transforms and opacity, and runs only while visible. */
.dw-page .dw-hero-ambient{position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 35% 48%,#2b5ba84d,transparent 37%),radial-gradient(ellipse at 74% 65%,#3c5c9a38,transparent 35%);opacity:.55;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  .dw-page .dw-craft-core{animation:dwCraftFloat 8s ease-in-out infinite;animation-play-state:paused}
  .dw-page .dw-craft-satellite-layout{animation:dwCraftSatellite 7s ease-in-out -2s infinite;animation-play-state:paused}
  .dw-page .dw-craft-satellite-color{animation:dwCraftSatellite 9s ease-in-out -5s infinite reverse;animation-play-state:paused}
  .dw-page .dw-craft-rings{animation:dwCraftOrbit 46s linear infinite;animation-play-state:paused}
  .dw-page .dw-craft-halo{animation:dwCraftGlow 9s ease-in-out infinite;animation-play-state:paused}
  .dw-page .dw-craft-visual.is-motion-visible :is(.dw-craft-core,.dw-craft-satellite,.dw-craft-rings,.dw-craft-halo){animation-play-state:running}
  .dw-page .dw-service-art{--art-y-start:-16deg;--art-y-end:7deg;--art-z-start:-8deg;--art-z-end:-3deg;--art-phase:0s;--art-rise:-14px;--art-depth:30px;--art-light:#478fff75;transition:border-color .35s ease,box-shadow .35s ease}
  .dw-page .dw-service:nth-child(even) .dw-service-art{--art-y-start:16deg;--art-y-end:-7deg;--art-z-start:8deg;--art-z-end:3deg;--art-phase:-3s}
  .dw-page .dw-service-ecommerce .dw-service-art{--art-phase:-5s;--art-light:#68a9bb70}
  .dw-page .dw-service-landing .dw-service-art{--art-light:#7c78e67a}
  .dw-page .dw-service-art:before{content:'';position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(ellipse at 35% 40%,var(--art-light),transparent 55%),radial-gradient(ellipse at 75% 65%,#8fcaff33,transparent 40%);z-index:-1;pointer-events:none;animation:dwServiceAura 12s ease-in-out var(--art-phase) infinite;animation-play-state:paused}
  .dw-page .dw-service-art:after{content:'';position:absolute;left:-40%;top:-25%;bottom:auto;width:28%;height:150%;background:linear-gradient(90deg,transparent,#d4ebff2e 45%,#eff9ff52 50%,transparent);transform:skewX(-22deg);z-index:4;pointer-events:none;mix-blend-mode:screen;animation:dwServiceSweep 10s ease-in-out var(--art-phase) infinite;animation-play-state:paused}
  .dw-page .dw-service-art .dw-service-preview{animation:dwServiceArrive 1.1s cubic-bezier(.16,1,.3,1) both,dwServiceFlight 8.5s ease-in-out infinite;animation-delay:0s,var(--art-phase);animation-direction:normal,normal;animation-play-state:paused;transform-origin:50% 55%}
  .dw-page .dw-service:nth-child(even) .dw-service-preview,.dw-page .dw-service:nth-child(3) .dw-service-preview{animation-delay:0s,var(--art-phase);animation-direction:normal,normal}
  .dw-page .dw-service-art .dw-art-detail{animation:dwServiceDetail 7s ease-in-out var(--art-phase) infinite;animation-play-state:paused}
  .dw-page .dw-service-art.is-motion-visible :is(.dw-service-preview,.dw-art-detail),.dw-page .dw-service-art.is-motion-visible:hover :is(.dw-service-preview,.dw-art-detail),.dw-page .dw-service-art.is-motion-visible:before,.dw-page .dw-service-art.is-motion-visible:after{animation-play-state:running}
  .dw-page .dw-service-art:hover{border-color:#9bcfff78;box-shadow:inset 0 1px #d5eaff25,0 0 42px #579bef18}
  .dw-page .dw-studio-art{animation:dwStudioFloat 10s ease-in-out infinite;animation-play-state:paused}
  .dw-page .dw-studio-art .dw-phone{animation:dwPhoneFloat 8s ease-in-out -3s infinite;animation-play-state:paused}
  .dw-page .dw-studio-art.is-motion-visible,.dw-page .dw-studio-art.is-motion-visible .dw-phone{animation-play-state:running}
  .dw-page .dw-studio:hover .dw-studio-art,.dw-page .dw-studio:hover .dw-studio-art .dw-phone{animation-play-state:paused}
  .dw-page .dw-hero-ambient{animation:dwHeroLight 24s ease-in-out infinite;animation-play-state:paused}
  .dw-page .dw-hero:before{animation:dwHeroArc 28s ease-in-out infinite;animation-play-state:paused}
  .dw-page .dw-hero:after{animation:dwHeroDust 32s ease-in-out infinite;animation-play-state:paused}
  .dw-page .dw-hero.is-motion-visible .dw-hero-ambient,.dw-page .dw-hero.is-motion-visible:before,.dw-page .dw-hero.is-motion-visible:after{animation-play-state:running}
}
@keyframes dwCraftFloat{0%,100%{translate:0 3px;rotate:-.5deg}50%{translate:0 -9px;rotate:1deg}}
@keyframes dwCraftSatellite{0%,100%{translate:0 3px}50%{translate:0 -7px}}
@keyframes dwCraftOrbit{from{rotate:0deg}to{rotate:360deg}}
@keyframes dwCraftGlow{0%,100%{opacity:.6;scale:.96}50%{opacity:.95;scale:1.09}}
@keyframes dwStudioFloat{0%,100%{translate:0 2px}50%{translate:0 -6px}}
@keyframes dwPhoneFloat{0%,100%{translate:0 2px}50%{translate:0 -4px}}
@keyframes dwHeroLight{0%,100%{translate:-2% -1%;scale:1;rotate:-3deg;opacity:.45}50%{translate:3% 2%;scale:1.08;rotate:3deg;opacity:.7}}
@keyframes dwHeroArc{0%,100%{rotate:-2deg;opacity:.55}50%{rotate:2deg;opacity:.85}}
@keyframes dwHeroDust{0%,100%{translate:0 0;opacity:.55}50%{translate:7px -6px;opacity:.85}}
@media(prefers-reduced-motion:reduce){.dw-page .dw-hero-ambient{opacity:.45;animation:none}.dw-page .dw-hero:before,.dw-page .dw-hero:after{animation:none}}

/* The first reveal and the ongoing flight use separate transform properties. */
@keyframes dwServiceArrive{from{opacity:.35;translate:0 24px;scale:.88}to{opacity:1;translate:0 0;scale:1}}
@keyframes dwServiceFlight{0%,100%{transform:perspective(1000px) rotateX(9deg) rotateY(var(--art-y-start)) rotateZ(var(--art-z-start)) translate3d(-5px,8px,0)}50%{transform:perspective(1000px) rotateX(-5deg) rotateY(var(--art-y-end)) rotateZ(var(--art-z-end)) translate3d(7px,var(--art-rise),var(--art-depth))}}
@keyframes dwServiceDetail{0%,100%{translate:0 5px;rotate:-1.5deg;scale:.98}50%{translate:0 -10px;rotate:1.5deg;scale:1.035}}
@keyframes dwServiceAura{0%,100%{translate:-6% -2%;rotate:-12deg;scale:.95;opacity:.55}50%{translate:9% 6%;rotate:18deg;scale:1.12;opacity:.95}}
@keyframes dwServiceSweep{0%,32%{translate:-120% 0;opacity:0}40%{opacity:.6}62%{translate:600% 0;opacity:0}100%{translate:600% 0;opacity:0}}
@media(max-width:600px) and (prefers-reduced-motion:no-preference){.dw-page .dw-service-art{--art-rise:-9px;--art-depth:16px}}
@media(prefers-reduced-motion:reduce){.dw-page .dw-service-art:before{content:none}.dw-page .dw-service-art:after{animation:none}}
