//- Container
.container
  //-- Social links
  .social
    ul.socialList
      li.socialList__item
        a.socialList__link(href="https://github.com/Kerthin?tab=overview&from=2021-05-01&to=2021-05-05" target="_blank")
          svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
            path(d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22")
      li.socialList__item
        a.socialList__link(href="https://codepen.io/Astap" target="_blank")
          svg.socialList__icon(viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
            polygon(points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2")
            line(x1="12" y1="22" x2="12" y2="15.5")
            polyline(points="22 8.5 12 15.5 2 8.5")
            polyline(points="2 15.5 12 8.5 22 15.5")
            line(x1="12" y1="2" x2="12" y2="8.5")
  //-- Title
  h1.title Click Burger
  //-- Popup menu
  section.popupMenu
    nav.popupMenu__nav
      each val in ['HOME', 'PAGES', 'PORTFOLIO', 'BLOG', 'ABOUT', 'OVERLAY']
        a.popupMenu__link(href='#')= val
  //-- Burger
  .burgerWrap.js-burgerWrap_close
    label.burgerWrap__box
      input.burgerInput(type="checkbox")
      svg.strokeWrap(viewBox="30 28 40 40" xmlns="http://www.w3.org/2000/svg")
        path.strokeWrap__stroke.strokeWrap__stroke_first(d="M0 40h62c13 0 6 28-4 18L35 35")
        path.strokeWrap__stroke.strokeWrap__stroke_second(d="M0 50h70")
        path.strokeWrap__stroke.strokeWrap__stroke_third(d="M0 60h62c13 0 6-28-4-18L35 65")

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}

/*____________________________________________________________
# Container
____________________________________________________________*/
.container {
  width: 100%;
  height: 100vh;
  background: #9b2d30;
}

/*____________________________________________________________
## Social links
____________________________________________________________*/
.social {
  position: fixed;
  left: 40px;
  bottom: 0;
  width: 20px;
  height: 100px;
}
.socialList {
  width: 100%;
  
  &:after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 1px;
    height: 40px;
    background: #f7e0b5;
  }
}
.socialList__item {
  margin-bottom: 10px;
  width: 20px;
  height: 20px;
  transition: transform .2s;
  
  &:hover {
    transform: translateY(-3px);
    
    .socialList__icon {
      stroke: #7dcbd8;
    }
  }
}

.socialList__icon {
  fill: none;
  stroke: #f7e0b5;
}

/*____________________________________________________________
## Title
____________________________________________________________*/
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Arial';
  font-size: 40px;
  letter-spacing: 3px;
  color: #f7e0b5;
}

/*____________________________________________________________
## Popup menu
____________________________________________________________*/
.blockRevealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  z-index: 50;
}

.popupMenu {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}
.popupMenu__nav {
  position: absolute;
  background: #13334c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.popupMenu__link {
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  letter-spacing: 3px;
  color: #f6f6e9;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  cursor: pointer;
  
  &:last-child {
    margin-bottom: 0px;
  }
  
  &:before {
    content: "";
    position: absolute;
    top: 0px;
    left: -101%;
    width: 100%;
    height: 100%;
    background: #e1646a;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  }
  &:after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -2px;
    left: 101%;
    width: 100%;
    height: 4px;
    background: #e1646a;
    transition: all .3s;
    transition-delay: .4s;
  }
  
  &:hover {
    &:before {
      left: 100%;
    }
    &:after {
      left: 0;
    }
  }
}

.popupMenu__link {
  transform: translate3d(0, 50px, 0);
  opacity: 0;
  transition: transform 0s 0.6s, opacity 0s 0.6s;
}

.js-popupMenu_open {
  pointer-events: visible;
  
  .popupMenu__link {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 1s 0.3s, opacity 1s 0.3s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.2, 1);
    
    &:nth-child(2) {
      transition-delay: .35s;
    }
    &:nth-child(3) {
      transition-delay: .4s;
    }
    &:nth-child(4) {
      transition-delay: .45s;
    }
    &:nth-child(5) {
      transition-delay: .5s;
    }
    &:nth-child(6) {
      transition-delay: .55s;
    }
  }
}

//-- Burger
.burgerWrap {
  position: absolute;
  top: 10px;
  right: 50px;
  width: 50px;
  height: 50px;
  z-index: 51;
}
.burgerWrap__box {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.strokeWrap__stroke {
  fill: none;
  stroke: #f7e0b5;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  transition: all 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.strokeWrap__stroke_first,
.strokeWrap__stroke_third {
  --total-length: 126.64183044433594;
}
.strokeWrap__stroke_second {
  --total-length: 70;
}
.burgerInput {
  display: none;
  
  &:checked {
    
    + .strokeWrap {
      
      .strokeWrap__stroke_first,
      .strokeWrap__stroke_third {
        --length: 22.627416998;
        --offset: -94.1149185097;
      }
      .strokeWrap__stroke_second {
        --length: 0;
        --offset: -50;
      }
    }
  }
}

/*____________________________________________________________
# Anime.min.js
____________________________________________________________*/
(function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){var u={duration:1E3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0},r="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),y,f={arr:function(a){return Array.isArray(a)},obj:function(a){return-1<
Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||f.svg(a)},num:function(a){return!isNaN(parseInt(a))},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},nul:function(a){return"null"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)},
col:function(a){return f.hex(a)||f.rgb(a)||f.hsl(a)}},D=function(){var a={},b={Sine:function(a){return 1-Math.cos(a*Math.PI/2)},Circ:function(a){return 1-Math.sqrt(1-a*a)},Elastic:function(a,b){if(0===a||1===a)return a;var d=1-Math.min(b,998)/1E3,g=a/1-1;return-(Math.pow(2,10*g)*Math.sin(2*(g-d/(2*Math.PI)*Math.asin(1))*Math.PI/d))},Back:function(a){return a*a*(3*a-2)},Bounce:function(a){for(var b,d=4;a<((b=Math.pow(2,--d))-1)/11;);return 1/Math.pow(4,3-d)-7.5625*Math.pow((3*b-2)/22-a,2)}};["Quad",
"Cubic","Quart","Quint","Expo"].forEach(function(a,e){b[a]=function(a){return Math.pow(a,e+2)}});Object.keys(b).forEach(function(c){var e=b[c];a["easeIn"+c]=e;a["easeOut"+c]=function(a,b){return 1-e(1-a,b)};a["easeInOut"+c]=function(a,b){return.5>a?e(2*a,b)/2:1-e(-2*a+2,b)/2};a["easeOutIn"+c]=function(a,b){return.5>a?(1-e(1-2*a,b))/2:(e(2*a-1,b)+1)/2}});a.linear=function(a){return a};return a}(),z=function(a){return f.str(a)?a:a+""},E=function(a){return a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()},
F=function(a){if(f.col(a))return!1;try{return document.querySelectorAll(a)}catch(b){return!1}},A=function(a){return a.reduce(function(a,c){return a.concat(f.arr(c)?A(c):c)},[])},t=function(a){if(f.arr(a))return a;f.str(a)&&(a=F(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]},G=function(a,b){return a.some(function(a){return a===b})},R=function(a,b){var c={};a.forEach(function(a){var d=JSON.stringify(b.map(function(b){return a[b]}));c[d]=c[d]||[];c[d].push(a)});
return Object.keys(c).map(function(a){return c[a]})},H=function(a){return a.filter(function(a,c,e){return e.indexOf(a)===c})},B=function(a){var b={},c;for(c in a)b[c]=a[c];return b},v=function(a,b){for(var c in b)a[c]=f.und(a[c])?b[c]:a[c];return a},S=function(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,m){return b+b+c+c+m+m});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"},
T=function(a){a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);var b=parseInt(a[1])/360,c=parseInt(a[2])/100,e=parseInt(a[3])/100;a=function(a,b,c){0>c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a};if(0==c)c=e=b=e;else var d=.5>e?e*(1+c):e+c-e*c,g=2*e-d,c=a(g,d,b+1/3),e=a(g,d,b),b=a(g,d,b-1/3);return"rgb("+255*c+","+255*e+","+255*b+")"},p=function(a){return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]},I=function(a,b,c){return p(b)?
b:-1<a.indexOf("translate")?p(c)?b+p(c):b+"px":-1<a.indexOf("rotate")||-1<a.indexOf("skew")?b+"deg":b},w=function(a,b){if(b in a.style)return getComputedStyle(a).getPropertyValue(E(b))||"0"},U=function(a,b){var c=-1<b.indexOf("scale")?1:0,e=a.style.transform;if(!e)return c;for(var d=/(\w+)\((.+?)\)/g,g=[],m=[],f=[];g=d.exec(e);)m.push(g[1]),f.push(g[2]);e=f.filter(function(a,c){return m[c]===b});return e.length?e[0]:c},J=function(a,b){if(f.dom(a)&&G(r,b))return"transform";if(f.dom(a)&&(a.getAttribute(b)||
f.svg(a)&&a[b]))return"attribute";if(f.dom(a)&&"transform"!==b&&w(a,b))return"css";if(!f.nul(a[b])&&!f.und(a[b]))return"object"},K=function(a,b){switch(J(a,b)){case "transform":return U(a,b);case "css":return w(a,b);case "attribute":return a.getAttribute(b)}return a[b]||0},L=function(a,b,c){if(f.col(b))return b=f.rgb(b)?b:f.hex(b)?S(b):f.hsl(b)?T(b):void 0,b;if(p(b))return b;a=p(a.to)?p(a.to):p(a.from);!a&&c&&(a=p(c));return a?b+a:b},M=function(a){var b=/-?\d*\.?\d+/g;return{original:a,numbers:z(a).match(b)?
z(a).match(b).map(Number):[0],strings:z(a).split(b)}},V=function(a,b,c){return b.reduce(function(b,d,g){d=d?d:c[g-1];return b+a[g-1]+d})},W=function(a){a=a?A(f.arr(a)?a.map(t):t(a)):[];return a.map(function(a,c){return{target:a,id:c}})},N=function(a,b,c,e){"transform"===c?(c=a+"("+I(a,b.from,b.to)+")",b=a+"("+I(a,b.to)+")"):(a="css"===c?w(e,a):void 0,c=L(b,b.from,a),b=L(b,b.to,a));return{from:M(c),to:M(b)}},X=function(a,b){var c=[];a.forEach(function(e,d){var g=e.target;return b.forEach(function(b){var l=
J(g,b.name);if(l){var q;q=b.name;var h=b.value,h=t(f.fnc(h)?h(g,d):h);q={from:1<h.length?h[0]:K(g,q),to:1<h.length?h[1]:h[0]};h=B(b);h.animatables=e;h.type=l;h.from=N(b.name,q,h.type,g).from;h.to=N(b.name,q,h.type,g).to;h.round=f.col(q.from)||h.round?1:0;h.delay=(f.fnc(h.delay)?h.delay(g,d,a.length):h.delay)/k.speed;h.duration=(f.fnc(h.duration)?h.duration(g,d,a.length):h.duration)/k.speed;c.push(h)}})});return c},Y=function(a,b){var c=X(a,b);return R(c,["name","from","to","delay","duration"]).map(function(a){var b=
B(a[0]);b.animatables=a.map(function(a){return a.animatables});b.totalDuration=b.delay+b.duration;return b})},C=function(a,b){a.tweens.forEach(function(c){var e=c.from,d=a.duration-(c.delay+c.duration);c.from=c.to;c.to=e;b&&(c.delay=d)});a.reversed=a.reversed?!1:!0},Z=function(a){if(a.length)return Math.max.apply(Math,a.map(function(a){return a.totalDuration}))},O=function(a){var b=[],c=[];a.tweens.forEach(function(a){if("css"===a.type||"transform"===a.type)b.push("css"===a.type?E(a.name):"transform"),
a.animatables.forEach(function(a){c.push(a.target)})});return{properties:H(b).join(", "),elements:H(c)}},aa=function(a){var b=O(a);b.elements.forEach(function(a){a.style.willChange=b.properties})},ba=function(a){O(a).elements.forEach(function(a){a.style.removeProperty("will-change")})},ca=function(a,b){var c=a.path,e=a.value*b,d=function(d){d=d||0;return c.getPointAtLength(1<b?a.value+d:e+d)},g=d(),f=d(-1),d=d(1);switch(a.name){case "translateX":return g.x;case "translateY":return g.y;case "rotate":return 180*
Math.atan2(d.y-f.y,d.x-f.x)/Math.PI}},da=function(a,b){var c=Math.min(Math.max(b-a.delay,0),a.duration)/a.duration,e=a.to.numbers.map(function(b,e){var f=a.from.numbers[e],l=D[a.easing](c,a.elasticity),f=a.path?ca(a,l):f+l*(b-f);return f=a.round?Math.round(f*a.round)/a.round:f});return V(e,a.to.strings,a.from.strings)},P=function(a,b){var c;a.currentTime=b;a.progress=b/a.duration*100;for(var e=0;e<a.tweens.length;e++){var d=a.tweens[e];d.currentValue=da(d,b);for(var f=d.currentValue,m=0;m<d.animatables.length;m++){var l=
d.animatables[m],k=l.id,l=l.target,h=d.name;switch(d.type){case "css":l.style[h]=f;break;case "attribute":l.setAttribute(h,f);break;case "object":l[h]=f;break;case "transform":c||(c={}),c[k]||(c[k]=[]),c[k].push(f)}}}if(c)for(e in y||(y=(w(document.body,"transform")?"":"-webkit-")+"transform"),c)a.animatables[e].target.style[y]=c[e].join(" ");a.settings.update&&a.settings.update(a)},Q=function(a){var b={};b.animatables=W(a.targets);b.settings=v(a,u);var c=b.settings,e=[],d;for(d in a)if(!u.hasOwnProperty(d)&&
"targets"!==d){var g=f.obj(a[d])?B(a[d]):{value:a[d]};g.name=d;e.push(v(g,c))}b.properties=e;b.tweens=Y(b.animatables,b.properties);b.duration=Z(b.tweens)||a.duration;b.currentTime=0;b.progress=0;b.ended=!1;return b},n=[],x=0,ea=function(){var a=function(){x=requestAnimationFrame(b)},b=function(b){if(n.length){for(var e=0;e<n.length;e++)n[e].tick(b);a()}else cancelAnimationFrame(x),x=0};return a}(),k=function(a){var b=Q(a),c={};b.tick=function(a){b.ended=!1;c.start||(c.start=a);c.current=Math.min(Math.max(c.last+
a-c.start,0),b.duration);P(b,c.current);var d=b.settings;d.begin&&c.current>=d.delay&&(d.begin(b),d.begin=void 0);c.current>=b.duration&&(d.loop?(c.start=a,"alternate"===d.direction&&C(b,!0),f.num(d.loop)&&d.loop--):(b.ended=!0,b.pause(),d.complete&&d.complete(b)),c.last=0)};b.seek=function(a){P(b,a/100*b.duration)};b.pause=function(){ba(b);var a=n.indexOf(b);-1<a&&n.splice(a,1)};b.play=function(a){b.pause();a&&(b=v(Q(v(a,b.settings)),b));c.start=0;c.last=b.ended?0:b.currentTime;a=b.settings;"reverse"===
a.direction&&C(b);"alternate"!==a.direction||a.loop||(a.loop=1);aa(b);n.push(b);x||ea()};b.restart=function(){b.reversed&&C(b);b.pause();b.seek(0);b.play()};b.settings.autoplay&&b.play();return b};k.version="1.1.1";k.speed=1;k.list=n;k.remove=function(a){a=A(f.arr(a)?a.map(t):t(a));for(var b=n.length-1;0<=b;b--)for(var c=n[b],e=c.tweens,d=e.length-1;0<=d;d--)for(var g=e[d].animatables,k=g.length-1;0<=k;k--)G(a,g[k].target)&&(g.splice(k,1),g.length||e.splice(d,1),e.length||c.pause())};k.easings=D;
k.getValue=K;k.path=function(a){a=f.str(a)?F(a)[0]:a;return{path:a,value:a.getTotalLength()}};k.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return k});

/*____________________________________________________________
# Revealer.js
____________________________________________________________*/
;(function(window) {

  'use strict';

  // Helper vars and functions.
  function extend(a, b) {
    for(var key in b) { 
      if( b.hasOwnProperty( key ) ) {
        a[key] = b[key];
      }
    }
    return a;
  }

  function createDOMEl(type, className, content) {
    var el = document.createElement(type);
    el.className = className || '';
    el.innerHTML = content || '';
    return el;
  }

  /**
   * RevealFx obj.
   */
  function RevealFx(el, options) {
    this.el = el;
    this.options = extend({}, this.options);
    extend(this.options, options);
    this._init();
  }

  /**
   * RevealFx options.
   */
  RevealFx.prototype.options = {
    // If true, then the content will be hidden until it´s "revealed".
    isContentHidden: true,
    // The animation/reveal settings. This can be set initially or passed when calling the reveal method.
    revealSettings: {
      // Animation direction: left right (lr) || right left (rl) || top bottom (tb) || bottom top (bt).
      direction: 'lr',
      // Revealer´s background color.
      bgcolor: '#f0f0f0',
      // Animation speed. This is the speed to "cover" and also "uncover" the element (seperately, not the total time).
      duration: 500,
      // Animation easing. This is the easing to "cover" and also "uncover" the element.
      easing: 'easeInOutQuint',
      // percentage-based value representing how much of the area should be left covered.
      coverArea: 0,
      // Callback for when the revealer is covering the element (halfway through of the whole animation).
      onCover: function(contentEl, revealerEl) { return false; },
      // Callback for when the animation starts (animation start).
      onStart: function(contentEl, revealerEl) { return false; },
      // Callback for when the revealer has completed uncovering (animation end).
      onComplete: function(contentEl, revealerEl) { return false; }
    }
  };

  /**
   * Init.
   */
  RevealFx.prototype._init = function() {
    this._layout();
  };

  /**
   * Build the necessary structure.
   */
  RevealFx.prototype._layout = function() {
    var position = getComputedStyle(this.el).position;
    if( position !== 'fixed' && position !== 'absolute' && position !== 'relative' ) {
      this.el.style.position = 'relative';
    }
    // Content element.
    this.content = createDOMEl('div', 'block-revealer__content', this.el.innerHTML);
    if( this.options.isContentHidden) {
      this.content.style.opacity = 0;
    }
    // Revealer element (the one that animates)
    this.revealer = createDOMEl('div', 'blockRevealer__element');
    this.el.classList.add('block-revealer');
    this.el.innerHTML = '';
    this.el.appendChild(this.content);
    this.el.appendChild(this.revealer);
  };

  /**
   * Gets the revealer element´s transform and transform origin.
   */
  RevealFx.prototype._getTransformSettings = function(direction) {
    var val, origin, origin_2;

    switch (direction) {
      case 'lr' : 
        val = 'scale3d(0,1,1)';
        origin = '0 50%';
        origin_2 = '100% 50%';
        break;
      case 'rl' : 
        val = 'scale3d(0,1,1)';
        origin = '100% 50%';
        origin_2 = '0 50%';
        break;
      case 'tb' : 
        val = 'scale3d(1,0,1)';
        origin = '50% 0';
        origin_2 = '50% 100%';
        break;
      case 'bt' : 
        val = 'scale3d(1,0,1)';
        origin = '50% 100%';
        origin_2 = '50% 0';
        break;
      default : 
        val = 'scale3d(0,1,1)';
        origin = '0 50%';
        origin_2 = '100% 50%';
        break;
    };

    return {
      // transform value.
      val: val,
      // initial and halfway/final transform origin.
      origin: {initial: origin, halfway: origin_2},
    };
  };

  /**
   * Reveal animation. If revealSettings is passed, then it will overwrite the options.revealSettings.
   */
  RevealFx.prototype.reveal = function(revealSettings) {
    // Do nothing if currently animating.
    if( this.isAnimating ) {
      return false;
    }
    this.isAnimating = true;
    
    // Set the revealer element´s transform and transform origin.
    var defaults = { // In case revealSettings is incomplete, its properties deafault to:
        duration: 500,
        easing: 'easeInOutQuint',
        delay: 0,
        bgcolor: '#f0f0f0',
        direction: 'lr',
        coverArea: 0
      },
      revealSettings = revealSettings || this.options.revealSettings,
      direction = revealSettings.direction || defaults.direction,
      transformSettings = this._getTransformSettings(direction);

    this.revealer.style.WebkitTransform = this.revealer.style.transform =  transformSettings.val;
    this.revealer.style.WebkitTransformOrigin = this.revealer.style.transformOrigin =  transformSettings.origin.initial;
    
    // Set the Revealer´s background color.
    this.revealer.style.backgroundColor = revealSettings.bgcolor || defaults.bgcolor;
    
    // Show it. By default the revealer element has opacity = 0 (CSS).
    this.revealer.style.opacity = 1;

    // Animate it.
    var self = this,
      // Second animation step.
      animationSettings_2 = {
        complete: function() {
          self.isAnimating = false;
          if( typeof revealSettings.onComplete === 'function' ) {
            revealSettings.onComplete(self.content, self.revealer);
          }
        }
      },
      // First animation step.
      animationSettings = {
        delay: revealSettings.delay || defaults.delay,
        complete: function() {
          self.revealer.style.WebkitTransformOrigin = self.revealer.style.transformOrigin = transformSettings.origin.halfway;   
          if( typeof revealSettings.onCover === 'function' ) {
            revealSettings.onCover(self.content, self.revealer);
          }
          anime(animationSettings_2);   
        }
      };

    animationSettings.targets = animationSettings_2.targets = this.revealer;
    animationSettings.duration = animationSettings_2.duration = revealSettings.duration || defaults.duration;
    animationSettings.easing = animationSettings_2.easing = revealSettings.easing || defaults.easing;

    var coverArea = revealSettings.coverArea || defaults.coverArea;
    if( direction === 'lr' || direction === 'rl' ) {
      animationSettings.scaleX = [0,1];
      animationSettings_2.scaleX = [1,coverArea/100];
    }
    else {
      animationSettings.scaleY = [0,1];
      animationSettings_2.scaleY = [1,coverArea/100];
    }

    if( typeof revealSettings.onStart === 'function' ) {
      revealSettings.onStart(self.content, self.revealer);
    }
    anime(animationSettings);
  };
  
  window.RevealFx = RevealFx;

})(window);


/*____________________________________________________________
# Popup menu script
____________________________________________________________*/
(function() {

  var popupMenu = document.querySelector('.popupMenu'),
      revealer = new RevealFx(popupMenu),
      burger = document.querySelector('.burgerWrap');

    burger.onclick = function() {
      if (burger.classList.contains('js-burgerWrap_close') === true) {
        revealer.reveal({
          bgcolor: '#f7e0b5',
          direction: 'tb',
          duration: 700,
          onCover: function(contentEl, revealerEl) {
            popupMenu.classList.add('js-popupMenu_open');
            contentEl.style.opacity = 1;
            burger.classList.remove('js-burgerWrap_close');
          }
        });
      } else {
        popupMenu.classList.remove('js-popupMenu_open');
        revealer.reveal({
          bgcolor: '#f7e0b5',
          direction: 'bt',
          duration: 700,
          onCover: function(contentEl, revealerEl) {
            popupMenu.classList.remove('js-popupMenu_open');
            contentEl.style.opacity = 0;
            burger.classList.add('js-burgerWrap_close');
          }
        });
      }
    }
  popupMenu.addEventListener('submit', function(ev) {ev.preventDefault();});
})();