/* Intro motion only: the original resting layout and controls remain in charge. */
@media (prefers-reduced-motion:no-preference){
  .product-motion-enabled [data-product-scene]{
    --entry-x:28px;--entry-y:34px;--entry-depth:-110px;
    --entry-rx:10deg;--entry-ry:-34deg;--entry-rz:-2deg;
    transform-origin:65% 55%;
  }
  .product-motion-enabled [data-product-scene=ggb]{
    --entry-x:-18px;--entry-depth:-85px;--entry-rx:7deg;--entry-ry:24deg;--entry-rz:1deg;
    transform-origin:35% 55%;
  }
  .product-motion-enabled [data-motion-state=waiting]{
    opacity:0;pointer-events:none;
    transform:perspective(1500px) translate3d(var(--entry-x),var(--entry-y),var(--entry-depth)) rotateX(var(--entry-rx)) rotateY(var(--entry-ry)) rotateZ(var(--entry-rz)) scale(.96);
  }
  .product-motion-enabled [data-motion-state=playing]{
    animation:product-unfold 1.1s cubic-bezier(.2,.85,.2,1) both;
    will-change:transform,opacity;
  }

  .product-motion-enabled [data-motion-state=waiting] :is(.desk-metrics>div,.creative-window,.composition-view img,.demo-footnote){opacity:0}
  .product-motion-enabled [data-motion-state=waiting] :is(.chart-bars i,.timeline i){transform:scaleY(0)}
  .product-motion-enabled [data-motion-state=waiting] :is(.desk-mascot,.desk-sticker,.timeline>b){opacity:0}

  .product-motion-enabled [data-motion-state=playing] .desk-metrics>div{
    animation:product-rise .56s calc(.5s + var(--part-index)*.09s) cubic-bezier(.22,1,.36,1) both;
  }
  .product-motion-enabled [data-motion-state=playing] .chart-bars i{
    transform-origin:center bottom;
    animation:product-bar-grow .76s calc(1.02s + var(--part-index)*.075s) cubic-bezier(.2,.8,.25,1) both;
  }
  .product-motion-enabled [data-motion-state=playing] .desk-mascot{
    animation:product-mascot .72s .82s cubic-bezier(.2,.9,.25,1) both;
  }
  .product-motion-enabled [data-motion-state=playing] .desk-sticker{
    animation:product-sticker .7s .92s cubic-bezier(.2,.9,.25,1) both;
  }
  .product-motion-enabled [data-motion-state=playing] .creative-window{
    animation:product-rise .72s .35s cubic-bezier(.22,1,.36,1) both;
  }
  .product-motion-enabled [data-motion-state=playing] .composition-view img{
    animation:product-image .65s .58s cubic-bezier(.22,1,.36,1) both;
  }
  .product-motion-enabled [data-motion-state=playing] .timeline i{
    transform-origin:left center;
    animation:product-track-grow .68s calc(.95s + var(--part-index)*.085s) cubic-bezier(.22,1,.36,1) both;
  }
  .product-motion-enabled [data-motion-state=playing] .timeline>b{
    animation:product-playhead .7s 1.1s cubic-bezier(.22,1,.36,1) both;
  }
  .product-motion-enabled [data-motion-state=playing] .demo-footnote{
    animation:product-rise .5s .85s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes product-unfold{
    from{opacity:0;transform:perspective(1500px) translate3d(var(--entry-x),var(--entry-y),var(--entry-depth)) rotateX(var(--entry-rx)) rotateY(var(--entry-ry)) rotateZ(var(--entry-rz)) scale(.96)}
    35%{opacity:1}
    to{opacity:1;transform:perspective(1500px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0) scale(1)}
  }
  @keyframes product-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes product-bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes product-track-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes product-playhead{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:translateX(0)}}
  @keyframes product-image{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
  @keyframes product-mascot{from{opacity:0;transform:translateY(17px) rotate(10deg) scale(.9)}to{opacity:1;transform:translateY(0) rotate(4deg) scale(1)}}
  @keyframes product-sticker{from{opacity:0;transform:translateY(13px) rotate(-12deg)}to{opacity:1;transform:translateY(0) rotate(-5deg)}}
  @media(max-width:760px){
    .product-motion-enabled [data-product-scene]{--entry-x:0px;--entry-y:25px;--entry-depth:-60px;--entry-rx:7deg;--entry-ry:-20deg;--entry-rz:-1deg;transform-origin:50% 55%}
    .product-motion-enabled [data-product-scene=ggb]{--entry-x:0px;--entry-depth:-60px;--entry-ry:18deg;--entry-rz:1deg;transform-origin:50% 55%}
  }
}