/**翻页效果**/

@mixin ani-delay100 {
    @include prefixed(animation-delay, 0.1s);
}
@mixin ani-delay180 {
    @include prefixed(animation-delay, 0.18s);
}
@mixin ani-delay200 {
    @include prefixed(animation-delay, 0.2s);
}
@mixin ani-delay300 {
    @include prefixed(animation-delay, 0.3s);
}
@mixin ani-delay400 {
    @include prefixed(animation-delay, 0.4s);
}
@mixin ani-delay500 {
    @include prefixed(animation-delay, 0.5s);
}
@mixin ani-delay600 {
    @include prefixed(animation-delay, 0.6s);
}
@mixin ani-delay700 {
    @include prefixed(animation-delay, 0.7s);
}
@mixin ani-delay800 {
    @include prefixed(animation-delay, 0.8s);
}
@mixin ani-delay900 {
    @include prefixed(animation-delay, 0.9s);
}
@mixin ani-delay1000 {
    @include prefixed(animation-delay, 1s);
}

.magic>.magicItem[data-transition]{
    visibility: hidden;
}
.magic>.magicItem[data-transition].current{
    visibility: visible;
}

/**zoomout***/

slide[data-transition="zoomout"].past,
slide[data-transition="zoomin"].next,
.magic>.magicItem[data-transition="zoomout"].past,
.magic>.magicItem[data-transition="zoomin"].next{
    @include transform(scale(1.2));
}
slide[data-transition="zoomin"].past,
slide[data-transition="zoomout"].next,
.magic>.magicItem[data-transition="zoomin"].past,
.magic>.magicItem[data-transition="zoomout"].next {
    @include transform(scale(0.8));
}

/**horizontal*/
slide[data-transition="horizontal"].current,
.magic>.magicItem[data-transition="horizontal"].current {
    @include transform-origin(20% 80%);
}
slide[data-transition="horizontal"].next,
slide[data-transition="horizontal"].past,
.magic>.magicItem[data-transition="horizontal"].next,
.magic>.magicItem[data-transition="horizontal"].past {
    @include transform(rotate(-60deg));
}
slide[data-transition="horizontal"].next {
    left: $slide-width/2;
}
.magic>.magicItem[data-transition="horizontal"].next{
    left: $slide-content-width/2 ;
}
slide[data-transition="horizontal"].past{
    left: -$slide-width/2;
}
.magic>.magicItem[data-transition="horizontal"].past {
    left: -$slide-content-width/2;
}
slides.layout-widescreen{
    > slide[data-transition="horizontal"].next {
        left: $slide-width-widescreen/2;
    }
    .magic>.magicItem[data-transition="horizontal"].next{
        left: $slide-content-width-widescreen/2 ;
    }
    > slide[data-transition="horizontal"].past {
        left: -$slide-width-widescreen/2;
    }
    .magic>.magicItem[data-transition="horizontal"].past {
        left: -$slide-content-width-widescreen/2;
    }
}

/**horizontal 3D*/
slide[data-transition="horizontal3d"],
.magic>.magicItem[data-transition="horizontal3d"]{
    @include transition(all 0.8s ease);
    @include transform-style(preserve-3d);
    @include transform-origin(50% 50% $slide-width/-2)
}
.magic>.magicItem[data-transition="horizontal3d"]{
    @include transform-origin(50% 50% $slide-content-width/-2)
}
slides.layout-widescreen slide[data-transition="horizontal3d"],
slides.layout-widescreen .magic>.magicItem[data-transition="horizontal3d"]{
    @include transition(all 0.8s ease);
    @include transform-origin(50% 50% $slide-content-width-widescreen/-2)
}

slide[data-transition="horizontal3d"].next,
.magic>.magicItem[data-transition="horizontal3d"].next {
    @include transform(rotateY(90deg));
}
slide[data-transition="horizontal3d"].past,
.magic>.magicItem[data-transition="horizontal3d"].past {
    opacity: 1;
    @include transform(rotateY(-90deg))
}

// vertical 3d
slide[data-transition="vertical3d"].next,
.magic>.magicItem[data-transition="vertical3d"].next {
    top: $slide-content-height/2;
    @include transform(translate3d(0, 75%, 0) rotateX(60deg) translate3d(0, 75%, 0))
}
.magic>.magicItem[data-transition="vertical3d"].next{
    top: $slide-height/2;
}
slide[data-transition="vertical3d"].past,
.magic>.magicItem[data-transition="vertical3d"].past {
    @include transform(translate3d(0, -75%, 0) rotateX(-60deg) translate3d(0, -75%, 0));
    top: -$slide-height/2;
}
.magic>.magicItem[data-transition="vertical3d"].past{
    top: $slide-content-height/-2;
}
// cards
slide[data-transition="cards"],
.magic>.magicItem[data-transition="cards"]{
    @include transition(all 0.8s ease);
    @include transform-style(preserve-3d);
    @include transform-origin(0 100% 0);
}

slide[data-transition="cards"].next,
.magic>.magicItem[data-transition="cards"].next {
  @include transform(translate3d(50px, 0, -100px));
  opacity: 0;
}

slide[data-transition="cards"].past,
.magic>.magicItem[data-transition="cards"].past {
  @include transform(translateZ(40px) rotateY(-60deg) translateX(-400px) rotateZ(120deg));
  opacity: 0;
}


// glue
slide.pagedown[data-transition="glue"].current,
.magic>.magicItem.pagedown[data-transition="glue"].current{
    @include prefixed(animation, moveFromRight .6s ease both);
    @include ani-delay300();
    z-index: 999;
}

slide.pagedown[data-transition="glue"].next,
.magic>.magicItem.pagedown[data-transition="glue"].next {
    @include prefixed(transform-origin,0 50%);
    @include prefixed(animation, rotateRightSideFirst .8s both ease-in);
    opacity: 1;
}
slide.pagedown[data-transition="glue"].past,
.magic>.magicItem.pagedown[data-transition="glue"].past {
    @include prefixed(transform-origin, 100% 50%);
}
//glue
slide.pageup[data-transition="glue"].current,
.magic>.magicItem.pageup[data-transition="glue"].current{
    @include prefixed(animation,moveFromLeft .6s ease both);
    @include ani-delay300();
    z-index: 999;
}
slide.pageup[data-transition="glue"].next,
.magic>.magicItem.pageup[data-transition="glue"].next {
    @include prefixed(transform-origin,0 50%);

}
slide.pageup[data-transition="glue"].past,
.magic>.magicItem.pageup[data-transition="glue"].past {
    @include prefixed(transform-origin,100% 50%);
    @include prefixed(animation,rotateLeftSideFirst .8s both ease-in);
    opacity: 1;
}

//kontext
slide[data-transition="kontext"],
.magic>.magicItem[data-transition="kontext"]{
    @include transform(translateZ( -100px ));
    z-index: 99;
}
slide.pagedown[data-transition="kontext"].current,
.magic>.magicItem.pagedown[data-transition="kontext"].current{
    @include transform(translateZ( 0 ));
    @include prefixed(animation,show-right 1s forwards ease);
    z-index: 999;
}
slide.pagedown[data-transition="kontext"].past,
.magic>.magicItem.pagedown[data-transition="kontext"].past  {
    @include prefixed(animation, hide-right 1s forwards ease);
    opacity: 1;
}
slide.pageup[data-transition="kontext"].current,
.magic>.magicItem.pageup[data-transition="kontext"].current{
    @include prefixed(animation, show-left 1s forwards ease);
    @include transform(translateZ( 0 ));
}
slide.pageup[data-transition="kontext"].next,
.magic>.magicItem.pageup[data-transition="kontext"].next {
    @include prefixed(animation, hide-left 1s forwards ease);
    opacity: 1;
}


//newspaper
slide[data-transition="newspaper"],
.magic>.magicItem[data-transition="newspaper"]{
    visibility: hidden;
    @include prefixed(transform-origin, 50% 50%);
    z-index: 99;
}
slide[data-transition="newspaper"].current,
.magic>.magicItem[data-transition="newspaper"].current{
    visibility: visible;
    @include prefixed(animation, rotateInNewspaper 0.5s both ease-out);
    @include ani-delay300();
    z-index: 999;
}
slide[data-transition="newspaper"].past,
.magic>.magicItem[data-transition="newspaper"].past {
    visibility: visible;
    @include prefixed(animation, rotateOutNewspaper 0.5s both ease-out);
}
slide[data-transition="newspaper"].next,
.magic>.magicItem[data-transition="newspaper"].next {
    visibility: visible;
    @include prefixed(animation, rotateOutNewspaper 0.5s both ease-out);
}


//move

slide.pagedown[data-transition="move"].current,
.magic>.magicItem.pagedown[data-transition="move"].current{
    @include prefixed(animation, moveFromRight 0.6s ease both);
    z-index: 999;
}
.magic>.magicItem.pagedown[data-transition="move"].current{
    @include prefixed(animation, moveFromRight_Magic 0.6s ease both);
}
slide.pagedown[data-transition="move"].past,
.magic>.magicItem.pagedown[data-transition="move"].past {
    @include prefixed(animation, moveToLeft 0.6s ease both);
}

.magic>.magicItem.pagedown[data-transition="move"].past {
    @include prefixed(animation, moveToLeft_Magic 0.6s ease both);
}

slide.pageup[data-transition="move"].current,
.magic>.magicItem.pageup[data-transition="move"].current{
    @include prefixed(animation, moveFromLeft 0.6s ease both);
    z-index: 999;
}
.magic>.magicItem.pageup[data-transition="move"].current{
    @include prefixed(animation, moveFromLeft_Magic 0.6s ease both);
}
slide.pageup[data-transition="move"].next,
.magic>.magicItem.pageup[data-transition="move"].next {
    @include prefixed(animation, moveToRight 0.6s ease both);
}
.magic>.magicItem.pageup[data-transition="move"].next {
    @include prefixed(animation, moveToRight_Magic 0.6s ease both);
}

//stick
slide.pagedown[data-transition="stick"],
.magic>.magicItem.pageup[data-transition="stick"],
slide.pagedown[data-transition="stick"],
.magic>.magicItem.pageup[data-transition="stick"]{
    @include prefixed(perspective, 1600px);
    opacity: 0;
    z-index: 999;
}
slide.pagedown[data-transition="stick"].current,
.magic>.magicItem.pagedown[data-transition="stick"].current{
    z-index: 1001;
    @include prefixed(animation, slideInFromBottomDelayed 0.8s forwards);
}
slide.pagedown[data-transition="stick"].past,
.magic>.magicItem.pagedown[data-transition="stick"].past {
    @include prefixed(transform-origin, 50% 0);
    @include prefixed(animation, rotateBottomSideOut 0.8s forwards ease-in);
}
slide[data-transition="stick"].current,
.magic>.magicItem[data-transition="stick"].current{
    @include prefixed(transform-origin, 50% 0);
    opacity: 1;
    @include prefixed(animation, rotateBottomSideIn 0.8s 0.1s forwards ease-in);
}
slide.pageup[data-transition="stick"].next,
.magic>.magicItem.pageup[data-transition="stick"].next {
    @include prefixed(animation, slideOutToBottom 0.8s forwards);
}

//vkontext
slide[data-transition="vkontext"],
.magic>.magicItem[data-transition="vkontext"]{
    @include prefixed(perspective, 1000px);
}
slide.pagedown[data-transition="vkontext"].current,
.magic>.magicItem.pagedown[data-transition="vkontext"].current{
    @include prefixed(animation, showRight 1s forwards);
}
slide.pagedown[data-transition="vkontext"].past,
.magic>.magicItem.pagedown[data-transition="vkontext"].past {
    @include prefixed(animation, hideLeft 1s forwards);
}
slide.pageup[data-transition="vkontext"].current,
.magic>.magicItem.pageup[data-transition="vkontext"].current{
    @include prefixed(animation, showLeft 1s forwards);
}
slide.pageup[data-transition="vkontext"].next,
.magic>.magicItem.pageup[data-transition="vkontext"].next {
    @include prefixed(animation, hideRight 1s forwards);
}

//earthquake
slide[data-transition="earthquake"].past,
.magic>.magicItem[data-transition="earthquake"].past,
slide[data-transition="earthquake"].next,
.magic>.magicItem[data-transition="earthquake"].next{
    visibility: visible;
}
slide.pagedown[data-transition="earthquake"].current,
.magic>.magicItem.pagedown[data-transition="earthquake"].current{
    opacity: 0;
    @include prefixed(animation, pushFromTop 1s 0.3s forwards);
}
slide.pagedown[data-transition="earthquake"].past,
.magic>.magicItem.pagedown[data-transition="earthquake"].past {
    opacity: 1;
    @include prefixed(animation, shakeSlideBottom 1s 0.1s forwards);
}

slide.pageup[data-transition="earthquake"].current,
.magic>.magicItem.pageup[data-transition="earthquake"].current{
    opacity: 0;
    @include prefixed(animation, pushFromBottom 1s 0.3s forwards);
}
slide.pageup[data-transition="earthquake"].next,
.magic>.magicItem.pageup[data-transition="earthquake"].next {
    opacity: 1;
    @include prefixed(animation, shakeSlideTop 1s 0.1s forwards);
}


slide[data-transition="earthquake"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0,0,0,0.3);
    transition: opacity 0.5s;
}

slide[data-transition="earthquake"].next::after,
slide[data-transition="earthquake"].past::after{
    opacity: 1;
}

//circle
slide.pagedown[data-transition="circle"],
.magic>.magicItem[data-transition="circle"]{
    opacity: 0;
}
slide.pagedown[data-transition="circle"],
slide.pageup[data-transition="circle"]{
    -webkit-transform-origin: 50% 400%;
    transform-origin: 50% 400%;
    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        pointer-events: none;
        background-color: rgba(0,0,0,1);
        @include prefixed(transition, opacity 0.9s cubic-bezier(0.7, 0, 0.3, 1));
    }
}

slide.pagedown[data-transition="circle"].current,
.magic>.magicItem.pagedown[data-transition="circle"].current{
    opacity: 1;
    @include prefixed(animation, rotateInCircRight 0.9s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
.magic>.magicItem.pagedown[data-transition="circle"].current{
    @include prefixed(animation, rotateInCircRight_Magic 0.9s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
slide.pagedown[data-transition="circle"].past,
.magic>.magicItem.pagedown[data-transition="circle"].past {
    opacity: 1;
    @include prefixed(animation, rotateOutCircLeft 0.9s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
.magic>.magicItem.pagedown[data-transition="circle"].past {
    @include prefixed(animation, rotateOutCircLeft_Magic 0.9s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
slide.pageup[data-transition="circle"].current,
.magic>.magicItem.pageup[data-transition="circle"].current{
    opacity: 1;
    @include prefixed(animation, rotateInCircLeft 0.9s forwards cubic-bezier(0.7, 0, 0.3, 1));
}

.magic>.magicItem.pageup[data-transition="circle"].current{
    @include prefixed(animation, rotateInCircLeft_Magic 0.9s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
slide.pageup[data-transition="circle"].next,
.magic>.magicItem.pageup[data-transition="circle"].next {
    opacity: 1;
    @include prefixed(animation, rotateOutCircRight 0.9s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
.magic>.magicItem.pageup[data-transition="circle"].next {
    @include prefixed(animation, rotateOutCircRight_Magic 0.9s forwards cubic-bezier(0.7, 0, 0.3, 1));
}


slide[data-transition="circle"].next::after,
slide[data-transition="circle"].next::after{
    opacity: 1;
}

//pulse
slide.pagedown[data-transition="pulse"],
slide.pageup[data-transition="pulse"],
.magic>.magicItem.pagedown[data-transition="pulse"],
.magic>.magicItem.pageup[data-transition="pulse"]{
    opacity: 0;
}
slide.pagedown[data-transition="pulse"].past,
slide.pageup[data-transition="pulse"].next,
.magic>.magicItem.pagedown[data-transition="pulse"].past,
.magic>.magicItem.pageup[data-transition="pulse"].next {
    @include prefixed(animation, scaleUpFadeOut 0.8s forwards ease-in);
}

slide.pageup[data-transition="pulse"].current,
slide.pagedown[data-transition="pulse"].current,
.magic>.magicItem.pageup[data-transition="pulse"].current,
.magic>.magicItem.pagedown[data-transition="pulse"].current {
    @include prefixed(animation, scaleDownFadeIn 0.8s forwards ease-out);
}

//slide
slide.pagedown[data-transition="slide"].past,
.magic>.magicItem.pagedown[data-transition="slide"].past {
    @include prefixed(animation, rotateSlideOutToLeft 1s both ease);
}

slide.pagedown[data-transition="slide"].current,
.magic>.magicItem.pagedown[data-transition="slide"].current {
    @include prefixed(animation, rotateSlideInFromRight 1s both ease);
}


slide.pageup[data-transition="slide"].current,
.magic>.magicItem.pageup[data-transition="slide"].current{
    @include prefixed(animation, rotateSlideInFromLeft 1s both ease);
}

slide.pageup[data-transition="slide"].next,
.magic>.magicItem.pageup[data-transition="slide"].next {
    @include prefixed(animation, rotateSlideOutToRight 1s both ease);
}

//slide2
slide.pagedown[data-transition="slide2"].past,
.magic>.magicItem.pagedown[data-transition="slide2"].past {
    @include prefixed(animation, slideOutScaleLeft 1s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
.magic>.magicItem.pagedown[data-transition="slide2"].past {
    @include prefixed(animation, slideOutScaleLeft_Magic 1s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
slide.pagedown[data-transition="slide2"].current,
.magic>.magicItem.pagedown[data-transition="slide2"].current {
    opacity: 1;
    @include prefixed(animation, slideInFromRight 1s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
.magic>.magicItem.pagedown[data-transition="slide2"].current {
    opacity: 1;
    @include prefixed(animation, slideInFromRight_Magic 1s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
slide.pageup[data-transition="slide2"].next,
.magic>.magicItem.pageup[data-transition="slide2"].next  {
    @include prefixed(animation, slideOutScaleRight 1s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
.magic>.magicItem.pageup[data-transition="slide2"].next  {
    @include prefixed(animation, slideOutScaleRight_Magic 1s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
slide.pageup[data-transition="slide2"].current,
.magic>.magicItem.pageup[data-transition="slide2"].current{
    opacity: 1;
    @include prefixed(animation, slideInFromLeft 1s forwards cubic-bezier(0.7, 0, 0.3, 1));
}
.magic>.magicItem.pageup[data-transition="slide2"].current{
    opacity: 1;
    @include prefixed(animation, slideInFromLeft_Magic 1s forwards cubic-bezier(0.7, 0, 0.3, 1));
}



//slide3
slide.pagedown[data-transition="slide3"].past,
.magic>.magicItem.pagedown[data-transition="slide3"].past {
    @include prefixed(animation, slideOutScaleLeft 1s forwards cubic-bezier(1, 0, 0, 1));
}
.magic>.magicItem.pagedown[data-transition="slide3"].past {
    @include prefixed(animation, slideOutScaleLeft_Magic 1s forwards cubic-bezier(1, 0, 0, 1));
}

slide.pagedown[data-transition="slide3"].current,
.magic>.magicItem.pagedown[data-transition="slide3"].current {
    opacity: 1;
    @include prefixed(animation, slideInFromRight 1s forwards cubic-bezier(1, 0, 0, 1));
}
.magic>.magicItem.pagedown[data-transition="slide3"].current {
    opacity: 1;
    @include prefixed(animation, slideInFromRight_Magic 1s forwards cubic-bezier(1, 0, 0, 1));
}


slide.pageup[data-transition="slide3"].current,
.magic>.magicItem.pageup[data-transition="slide3"].current{
    opacity: 1;
    @include prefixed(animation, slideInFromLeft 1s forwards cubic-bezier(1, 0, 0, 1));
}
.magic>.magicItem.pageup[data-transition="slide3"].current{
    opacity: 1;
    @include prefixed(animation, slideInFromLeft_Magic 1s forwards cubic-bezier(1, 0, 0, 1));
}

slide.pageup[data-transition="slide3"].next,
.magic>.magicItem.pageup[data-transition="slide3"].next {
    opacity: 1;
    @include prefixed(animation, slideOutScaleRight 1s forwards cubic-bezier(1, 0, 0, 1));
}
.magic>.magicItem.pageup[data-transition="slide3"].next {
    opacity: 1;
    @include prefixed(animation, slideOutScaleRight_Magic 1s forwards cubic-bezier(1, 0, 0, 1));
}


//cover-diamond
slide[data-transition="cover-diamond"],
.magic>.magicItem[data-transition="cover-diamond"]{
    @include transition(opacity 0.9s, -webkit-clip-path 0.9s);
    opacity: 0;
    @include prefixed(clip-path, polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%));
}
slide[data-transition="cover-diamond"].current,
.magic>.magicItem[data-transition="cover-diamond"].current{
    opacity: 1;
    @include ani-delay700();
    @include prefixed(clip-path, polygon(50% -100%, 137.5% 50%, 50% 200%, -37.5% 50%));
}

slide[data-transition="cover-diamond"].past,
.magic>.magicItem[data-transition="cover-diamond"].past,
slide[data-transition="cover-diamond"].next,
.magic>.magicItem[data-transition="cover-diamond"].next  {
    opacity: 1;
    @include transition(clip-path, 0 cubic-bezier(.11,.75,.58,.97));
}


slide[data-transition="cover-circle"],
.magic>.magicItem[data-transition="cover-circle"]{
    opacity: 0;
    @include transition(opacity 0.9s, -webkit-clip-path 0.9s);
    @include prefixed(clip-path,circle(0% at 50% 50%));
}
slide[data-transition="cover-circle"].current,
.magic>.magicItem[data-transition="cover-circle"].current{
    opacity: 1;
    @include prefixed(clip-path,circle(80% at 50% 50%));
}
slide[data-transition="cover-circle"].past,
.magic>.magicItem[data-transition="cover-circle"].past,
slide[data-transition="cover-circle"].next,
.magic>.magicItem[data-transition="cover-circle"].next  {
    opacity: 1;
    @include transition(clip-path, 0 cubic-bezier(.11,.75,.58,.97));
}

@import "keyframes";