@import 'variables-mixins';

.interactive-svg      {
  &:before            { content: "Hover to Animate"; position: relative; top: 3.5em; left: 2em; display: inline; padding: .5em 1em; background: $lt-gblue-6; font-size: .8em; font-style: italic; @include border-radius(1em);}
  &.touch:before      { content: "Touch to Animate"; }
}
svg                   {
  &#vertical-scaling  { max-width: 600px; margin: 0 auto; display: block;
    #sm-top, #lg-top,
    #sm-btm, #lg-btm  { @include transition(all .15s); }
    &:hover, :active  {
      #sm-top         { @include transform(translateY(-3em)) ; @include opacity(.05); }
      #lg-top         { @include transform(translateY(-4em)) ; @include opacity(.05); }
      #sm-btm         { @include transform(translateY(1.5em)) ; @include opacity(.05); }
      #lg-btm         { @include transform(translateY(2em)) ; @include opacity(.05); }
    }
  }
  &#horizontal-scaling{ max-width: 600px; margin: 0 auto; display: block; @include transform(scale(.9));
    #i2,#i3,#i4,#i5,
    #i6,#i7,#i8,#i9   { @include opacity(0); @include transform(translateY(2em)); @include transition(all .1s); }
    #i2               { @include transition-delay(.05s); }
    #i3               { @include transition-delay(.1s); }
    #i4               { @include transition-delay(.15s); }
    #i5               { @include transition-delay(.2s); }
    #i6               { @include transition-delay(.25s); }
    #i7               { @include transition-delay(.3s); }
    #i8               { @include transition-delay(.35s); }
    #i9               { @include transition-delay(.4s); }
    &:hover, :active  {
      #i2,#i3,#i4,#i5,
      #i6,#i7,#i8,#i9 { @include transform(translateY(0)); @include opacity(1); }
    }
  }
}

.svg-anim             { max-width: 380px;
  .bodymovin          { position: relative;
    a.replay          { height: 1.1em; width: 1.1em; position: absolute; bottom: 1em; right: 0; padding: .3em; display: block; z-index: 1; cursor: pointer; @include border-radius(50%); @include opacity(0); @include transition(all .2s); border: none !important;
      &:hover         { background-color: #fff; }
    }
    &:hover a.replay  { @include opacity(1); }
  }
}

#map                  { }
