@keyframes bganimation{0%{background-position:-100% -100%,200% 200%,-100% 200%,200% -100%}50%{background-position:150% 100%,-200% 100%,100% 0%,0% 100%}100%{background-position:-100% -100%,200% 200%,-100% 200%,200% -100%}}.animated-bg{background:radial-gradient(ellipse at center,rgba(0,0,255,0.3) 0%,rgba(0,0,0,0) 70%),radial-gradient(ellipse at center,rgba(255,0,0,0.3) 0%,rgba(0,0,0,0) 70%),radial-gradient(ellipse at center,rgba(0,255,0,0.3) 0%,rgba(0,0,0,0) 70%) #c3d7db;background-repeat:no-repeat,no-repeat,no-repeat;background-size:900px 900px,900px 900px,900px 900px;animation:bganimation 30s infinite}h1{font-family:'Sophillia',sans-serif;font-variant-ligatures:common-ligatures;font-feature-settings:"liga","calt";font-feature-settings:"dlig"}//------------------------------------// vars
//-------------------------------------$color-alpha:#4D84F1;$ease-cb:cubic-bezier(.4,0,.2,1);$mq-med:40em;$mq-lg:62em;//------------------------------------// little reset/setup
//-------------------------------------*,*:before,*:after{box-sizing:border-box;min-width:0;min-height:0;margin:0;padding:0}body{margin:0;width:100%;font-family:"Source Sans Pro";font-weight:400;font-style:normal;line-height:1.6;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;background-color:$color-alpha;font-size:100%;@media (min-width:$mq-med){font-size:70%}@media (min-width:$mq-lg){font-size:100%}}h2{font-family:"Playfair Display";font-weight:700;font-size:2.2em;line-height:1.2;//font-size:9vmin;@media (min-width:$mq-med){font-size:4em}}//------------------------------------// Mast
//-------------------------------------.mast{display:flex;align-items:center;flex-direction:column;justify-content:center;min-height:100vh;width:100%;max-width:80em;margin:0 auto;padding:3em 1em;@media (min-width:$mq-med){flex-direction:row;justify-content:space-around}&__img{margin:0 auto 1.5em;background-color:$color-alpha;@media (min-width:$mq-med){margin:0 auto}img{display:block;max-width:34em;width:100%;margin:0 auto;// This makes the jpg invert and blend.
filter:invert(1);mix-blend-mode:screen;@media (min-width:$mq-lg){max-width:50em}}figcaption{text-align:center;color:rgba(255,255,255,0.5);margin:-1em auto 0}}&__img:after{content:'';position:absolute;top:0;left:0;background:$color-alpha;width:100%;height:100%}&__title{color:rgba(255,255,255,0.8);margin-bottom:0.25em}.title-line{display:block;padding-bottom:0.1em;overflow-y:hidden;background-color:$color-alpha;span{position:relative;display:inline-block;//animation:text-up-in 1s $ease-cb both}}&__text{color:rgba(255,255,255,0.7);font-size:115%;max-width:23em;@media (min-width:$mq-med){font-size:140%}}}//------------------------------------// Animation
//-------------------------------------.animated{.mast .title-line{span{animation:text-up 1s $ease-cb both}&:nth-of-type(2) span{animation-delay:0.1s}&:nth-of-type(3) span{animation-delay:0.2s}&:nth-of-type(4) span{animation-delay:0.3s}}.mast__text{animation:fade-in 1s 0.5s ease both}button i{animation:spin 1s $ease-cb both}}//------------------------------------// Keyframes:Text Up animation
//-------------------------------------@keyframes text-up{from{transform:translate3d(0,150%,0)}to{transform:translate3d(0,0,0)}}//------------------------------------// keyframes:Slide up to reveal
//-------------------------------------@keyframes slide-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-110%,0)}}//------------------------------------// keyframes:fade in
//-------------------------------------@keyframes fade-in{from{opacity:0}to{opacity:1}}//------------------------------------// keyframes:spin
//-------------------------------------@keyframes spin{from{transform:rotate(0)}to{transform:rotate(720deg)}}