/* Shared entrance and ambient motion for the banner scenes (docs, products,
   home heroes). Containers carry .scene-anim; public.js stamps .is-animated as
   Visuals' Animation says, unless the visitor prefers reduced motion, so without JS the artwork
   simply shows settled. Elements opt in through the data attributes the
   artwork ships with. */

/* The band behind these scenes is dark navy in BOTH themes, so the artwork
   keeps its light-mode palette everywhere. Without this, dark mode remaps the
   white shapes to deep blues and the scenery vanishes into the band. */
.scene-anim,
.contact__hero-art{
  --svg-illustration-gray-1:#393E41;
  --svg-illustration-gray-2:#4F5357;
  --svg-illustration-gray-3:#CBCFD4;
  --svg-illustration-gray-4:#DADCDE;
  --svg-illustration-gray-5:#DCDEE1;
  --svg-illustration-gray-6:#E9EBEE;
  --svg-illustration-gray-7:#EBEDF0;
  --svg-illustration-gray-8:#EAEEF3;
  --svg-illustration-gray-w:#ffffff;
  --svg-illustration-color-6:#112240;
  --svg-illustration-color-7:color-mix(in oklab, var(--blue) 12%, white);
  --svg-illustration-line-color:color-mix(in oklab, #112240 38%, white);
  --svg-illustration-green-1:#15803D;
  --svg-illustration-green-2:#16A34A;
  --svg-illustration-green-3:#22C55E;
  --svg-illustration-green-4:#86EFAC;
  --svg-illustration-yellow-1:color-mix(in oklab, var(--gold) 88%, black);
}

.scene-anim.is-animated [data-bg-element-animation],
.scene-anim.is-animated [data-server-animation]{
  opacity:0;animation:dpns-fade0 calc(1s * var(--scene-k,1)) ease-in forwards}
.scene-anim.is-animated [data-bg-element-animation][data-animation-type-1]{
  animation-name:dpns-fade1}
.scene-anim.is-animated [data-bg-element-animation][data-animation-type-2]{
  animation-name:dpns-fade2}
.scene-anim.is-animated [data-bg-element-animation][data-animation-type-3]{
  animation-name:dpns-fade3}
.scene-anim.is-animated [data-server-animation][data-server-animation-top]{
  animation-name:dpns-fade2;animation-timing-function:cubic-bezier(.16,0,0,1)}
.scene-anim.is-animated [data-server-animation][data-server-animation-center]{
  animation-name:dpns-fade1;animation-timing-function:cubic-bezier(.16,0,0,1)}
.scene-anim.is-animated [data-top-left-animation]{
  opacity:0;animation:dpns-top-left calc(1s * var(--scene-k,1)) cubic-bezier(0,0,0,1) forwards}
.scene-anim.is-animated [data-top-right-animation]{
  opacity:0;animation:dpns-top-right calc(1s * var(--scene-k,1)) cubic-bezier(0,0,0,1) forwards}

.scene-anim.is-animated [data-animation-delay-1]{animation-delay:calc(.56s * var(--scene-k,1))}
.scene-anim.is-animated [data-animation-delay-2]{animation-delay:calc(.64s * var(--scene-k,1))}
.scene-anim.is-animated [data-animation-delay-3]{animation-delay:calc(.8s * var(--scene-k,1))}
.scene-anim.is-animated [data-animation-delay-5]{animation-delay:calc(1.96s * var(--scene-k,1))}

.scene-anim.is-animated [data-animation-path]{
  animation:dpns-draw calc(1s * var(--scene-k,1)) linear calc(1.08s * var(--scene-k,1)) forwards}
.scene-anim.is-animated [data-animation-path][data-animation-path-6]{
  animation-duration:calc(.6s * var(--scene-k,1))}

.scene-anim.is-animated [data-animation-vertical-loop]{
  animation:dpns-float-up 3s ease-in-out 1.08s infinite}
.scene-anim.is-animated [data-animation-vertical-loop-sm]{
  animation:dpns-float 3s ease-in-out 1.08s infinite}

.scene-anim.is-animated [data-animation-cube]{
  opacity:0;will-change:transform,opacity;
  animation:dpns-cube 2.2s ease-in-out 1.08s infinite}
.scene-anim.is-animated [data-animation-cube]:nth-child(1){animation-delay:.32s}
.scene-anim.is-animated [data-animation-cube]:nth-child(2){animation-delay:.96s}
.scene-anim.is-animated [data-animation-cube]:nth-child(3){animation-delay:1.24s}
.scene-anim.is-animated [data-animation-cube][data-animation-cube-1]{
  --cubeStart:60px;--cubeGap:-50px}
.scene-anim.is-animated [data-animation-cube][data-animation-cube-2]{
  --cubeStart:40px;--cubeGap:-70px}
.scene-anim.is-animated [data-animation-cube][data-animation-cube-3]{
  --cubeStart:20px;--cubeGap:-70px}
.scene-anim.is-animated [data-animation-cube][data-animation-cube-sm-1]{
  --cubeStart:60px;--cubeGap:-25px}
.scene-anim.is-animated [data-animation-cube][data-animation-cube-sm-2]{
  --cubeStart:50px;--cubeGap:-35px}
.scene-anim.is-animated [data-animation-cube][data-animation-cube-sm-3]{
  --cubeStart:50px;--cubeGap:-35px}

/* Site › Theme › Visuals' Animation (M166): the speed stretches or shortens the stagger, and Fade shows
   each drawing whole, fading in, in place of its layers drawing on one by one. */
html[data-anim-speed="slow"]{--scene-k:1.5}
html[data-anim-speed="fast"]{--scene-k:.6}
html[data-anim="fade"] .scene-anim.is-animated{animation:dpns-fade0 calc(.9s * var(--scene-k,1)) ease-out both}
html[data-anim="fade"] .scene-anim.is-animated [data-bg-element-animation],
html[data-anim="fade"] .scene-anim.is-animated [data-server-animation],
html[data-anim="fade"] .scene-anim.is-animated [data-top-left-animation],
html[data-anim="fade"] .scene-anim.is-animated [data-top-right-animation],
html[data-anim="fade"] .scene-anim.is-animated [data-animation-path]{opacity:1;animation:none}

@keyframes dpns-fade0{0%{transform:translate3d(0,0,0);opacity:0}
  48%{opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@keyframes dpns-fade1{0%{transform:translate3d(0,16px,0);opacity:0}
  48%{opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@keyframes dpns-fade2{0%{transform:translate3d(0,32px,0);opacity:0}
  48%{opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@keyframes dpns-fade3{0%{transform:translate3d(0,48px,0);opacity:0}
  48%{opacity:1}100%{transform:translate3d(0,0,0);opacity:1}}
@keyframes dpns-top-left{from{transform:translate3d(52px,30px,0);opacity:0}
  to{transform:translate3d(0,0,0);opacity:1}}
@keyframes dpns-top-right{from{transform:translate3d(-52px,30px,0);opacity:0}
  to{transform:translate3d(0,0,0);opacity:1}}
@keyframes dpns-draw{from{stroke-dashoffset:800}to{stroke-dashoffset:0}}
@keyframes dpns-float{0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,15px,0)}}
@keyframes dpns-float-up{0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-15px,0)}}
@keyframes dpns-cube{0%{transform:translate3d(0,var(--cubeStart),0);opacity:0}
  10%,60%{opacity:1}
  100%{transform:translate3d(0,var(--cubeGap),0);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .scene-anim.is-animated [data-bg-element-animation],
  .scene-anim.is-animated [data-server-animation],
  .scene-anim.is-animated [data-top-left-animation],
  .scene-anim.is-animated [data-top-right-animation],
  .scene-anim.is-animated [data-animation-cube],
  .scene-anim.is-animated [data-animation-path],
  .scene-anim.is-animated [data-animation-vertical-loop],
  .scene-anim.is-animated [data-animation-vertical-loop-sm]{
    opacity:1;animation:none}
}