:root{--why-view-e-top:55%;--why-view-t-width:520px;--why-view-m-width:520px;--why-view-anima-duration:1000s;--why-view-tm-margin:40%}@keyframes why-view-t1-left-out{0%{left:50%;opacity:1;top:var(--why-view-e-top);transform:translate(calc(-100% - var(--why-view-tm-margin)/2),calc(-50% - 30px))}to{left:50%;opacity:0;top:var(--why-view-e-top);transform:translate(calc(-100% - var(--why-view-tm-margin)/2 - 200px),calc(-50% - 30px))}}@keyframes why-view-m1-right-out{0%{left:50%;opacity:1;top:var(--why-view-e-top);transform:translate(calc(var(--why-view-tm-margin)/2),-50%)}to{left:50%;opacity:0;top:var(--why-view-e-top);transform:translate(calc(var(--why-view-tm-margin)/2 + 200px),-50%)}}@keyframes why-view-t2-scale-in{0%{left:50%;opacity:0;top:var(--why-view-e-top);transform:translate(-100%,calc(-50% - 30px)) scale(.4)}to{left:50%;opacity:1;top:var(--why-view-e-top);transform:translate(calc(-100% - var(--why-view-tm-margin)/2),calc(-50% - 30px)) scale(1)}}@keyframes why-view-m2-scale-in{0%{left:50%;opacity:0;top:var(--why-view-e-top);transform:translateY(-50%) scale(.4) rotate(-180deg)}to{left:50%;opacity:1;top:var(--why-view-e-top);transform:translate(calc(var(--why-view-tm-margin)/2),-50%) scale(1) rotate(0deg)}}@keyframes why-view-t2-fade-out{0%{left:50%;opacity:1;top:var(--why-view-e-top);transform:translate(calc(-100% - var(--why-view-tm-margin)/2),calc(-50% - 30px))}to{left:50%;opacity:0;top:var(--why-view-e-top);transform:translate(calc(-100% - var(--why-view-tm-margin)/2),calc(-50% - 30px))}}@keyframes why-view-m2-fade-out{0%{left:50%;opacity:1;top:var(--why-view-e-top);transform:translate(calc(var(--why-view-tm-margin)/2),-50%)}to{left:50%;opacity:0;top:var(--why-view-e-top);transform:translate(calc(var(--why-view-tm-margin)/2),-50%)}}@keyframes why-view-t3-left-in{0%{left:50%;opacity:0;top:var(--why-view-e-top);transform:translate(calc(-100% - var(--why-view-tm-margin)/2 - 200px),calc(-50% - 30px))}to{left:50%;opacity:1;top:var(--why-view-e-top);transform:translate(calc(-100% - var(--why-view-tm-margin)/2),calc(-50% - 30px))}}@keyframes why-view-m3-right-in{0%{left:50%;opacity:0;top:var(--why-view-e-top);transform:translate(calc(var(--why-view-tm-margin)/2 + 200px),-50%)}to{left:50%;opacity:1;top:var(--why-view-e-top);transform:translate(calc(var(--why-view-tm-margin)/2),-50%)}}