Spoopy Signup

index.haml

#wrap
 %form.signup
  %input.email{:minlength => "4", :maxlength => "22", :type => "email", :required => "", :placeholder => "email"}/
  %input.submit{:type => "submit", :value => "Subscribe"}/
  .field
   %p.text.initial{"data-splitting" => "chars"} email
   .graves
    .ghost
     .ghostbody
    -2.times do
     .grave
   .inner
   .btn
    %span SUBSCRIBE
   

script.js

Splitting();

$('.email').keyup(function(){
   $( ".field p" ).remove();
   var emailText = $('.email').val();
   $(".field").append("<p class='text' data-splitting='chars'>" + emailText + "</p>");
    Splitting();
});

$('.signup').submit(function(event){
 event.preventDefault();
  $(".field").addClass("haunt");
  var grave = ($(".field .text .word").width() + 40) + 'px';
  $('body').get(0).style.setProperty("--width", grave);
  setTimeout(function(){	
    $('.email').val('');
    $( ".field p" ).remove();
    $(".field").removeClass("haunt");
    $('body').get(0).style.setProperty("--width", "calc(100% + 200px)");
    $(".field").append("<p class='text initial' data-splitting='chars'>email</p>");
    Splitting();
}, 7000);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/splitting@1.0.5/dist/splitting.min.js"></script>

spoopy-signup.markdown

Spoopy Signup

A Pen by Adam Kuhn on CodePen.

License.

dEMO https://codemyui.com/horror-email-signup-form-animation-with-tombstones/

style.scss

@font-face {
    font-family: 'Headhunter';
    src: url('https://assets.codepen.io/383755/HeadhunterRegular.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Titan+One&display=swap');


$gr: #9ecb62;
$r: #c20000;
$br: #5a5002;
$t: rgba(255,255,255,0.0001);
$noise: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtFS1lAAAAK3RSTlMWi3QSa1uQOKBWCTwcb6V4gWInTWYOqQSGfa6XLyszmyABlFFJXySxQ0BGn2PQBgAAC4NJREFUWMMV1kWO5UAQRdFk5kwzs/33v8Cunr7ZUehKAdaRUAse99ozDjF5BqswrPKm7btzJ2tRziN3rMYXC236humIV5Our7nHWnVdFOBojW2XVnkeu1IZHNJH5OPHj9TjgVxBGBwAAmp60WoA1gBBvg3XMFhxUQ4KuLqx0CritYZPPXinsOqB7I76+OHaZlPzLEcftrqOlOwjeXvuEuH6t6emkaofgVUDIb4fEZB6CmRAeFCTq11lxbAgUyx4rXkqlH9I4bTUDRRVD1xjbqb9HyUBn7rhtr1x+x9Y0e3BdX31/loYvZaLxqnjbRuokz+pPG7WebnSNKE3yE6Tka4aDEDMVYr6Neq126c+ZR2nzzm3yyiC7PGWG/1uueqZudrVGYNdsgOMDvt1cI8CXu63QIcPvYNY8z870WwYazTS7DqpDEknZqS0AFXObWUxTaw0q5pnHlq4oQImakpLfJkmErdvAfhsc7lod0DVT4tuob25C0tQjzdiFObCz7U7eaKGP3s6yQVgQ/y+q+nY6K5dfV75iXzcNlGIP38aj22sVwtWWKMRb7B5HoHPaBvI1Ve5TSXATi66vV6utxsV+aZNFu+93VvlrG/oj8Wp67YT8l+Oq6PjwdGatFm7SEAP13kE0y9CEcf9qhtEWCMIq5AGq71moEAI9vrmFcmO8+7ZyDnmRN/VUaFkM2ce8KuBGFzDMmY6myLfQGra2ofgHhbJRXuRDZ4H+HmliWBHXQ0ysLGfv6FetbxtxzRgIZWjIsGVFl5imPXeyvVyayNek+dSWzjXd4t310YBdaF8sXeKs481PjsXbAtIru2+wHbv3GVh3sQY6Dnu6pF3pZ714VYdDi9A5GkXR/6xgaZN/tpQ8wVV3zeBuB+njoBNE4wjc+uA523ysXGd/P2sntmOb3OdHNWP5OVrxD3eJHdtH8QVkEIAqCor3hReR96yqt6PkTQfenllooQ447h6tOrnnuzwA8fMpq+jqg1oW8fTYYIncAYpVeTvkEFr/khQSbjoE8ykx9049OkE5MQEO9lC24tT7DwThQgf4Fhf8nGgAo3GYaON3crODpOr2pu5dBABz69t7F5yJBBo+r6QJdeLDWEoO7r1tceR3haA7gc7eZrCvpxSXXeKpo4P+hRixo9DeOFbqQVjKyWfBg9pnrEZKzK7R437YTTwhfoySG/YOCt3fs4aXlU3FjKortqQ6XyXaD0+Y/8VoqpyU9TRW45eN4oBxAH8Y/jLnNXfELJW+/p/MgO9Z+mBli2qqAP7dV/Arc2+YZRZwtBW8/p32y5ZsEuCS4O5AAgfR7Dde7zhiGfgvurQkfAXIrUG61rmxc2EZo18ph4vaWZI+QM0JdsbNlBJlPlwf9uguujQJy0j7TgTHdtRnjybTg55Hkk9S6l2rpYahumSewKHVosa1bh2Y6r9JGkdKvIDN/eeAwScrfjoLkCxWJuFZQ53FNP5w9XbQd1HhgHcVB/0fATG3sUUid1RTfc2+7pZVKldFSsaEK0v4k90tapQOk2HIbMhaJQtrUEL5+3sDanh8sOpbYRoQoqXWu6SQcUTQL9jzOrXNPWCJwXge4U7tlU1hkF012cAmvp8llQxf1IEMcw14pURxVOWATz4ITnYQjuF+vDXg5hgoiqXzO6mS91FQUBheURHIJxUeU1i3P0WOMpsm7vFYk0JJi/Ev+X3FwYD69cARPuP5GIc0PxoAFjcLRbNur0iMTrQmBBNYJ2ngU4x7SWfdTRl52Bqv7LmYW3C1CyTCPTHeWWIAM/Whm32COHsaj+2UQ739XB9t6NV0o9E9b7CW3XNiXzi9e0KiE+3rntukdIDBWrU2jsfQWuyFJRANxq8StHVv1JPy2C3Byco7qdNbASrnNXZ8G0L/Wp/pif4Ai9aEZ9Bb+TRx+REBdGlkF/s0dUdMSMr+6YCbuGxqPWdzcdqutvqkBzCksFcwAtjf55TeuH79M6AQa7r5PLeXxMFIlQKrXP9VJ275WGX+ptpf+tvTDBsecPnYQAlAWrVbRVJ7K2pRHwIjtSpbX96Y/lbKk6ZWXlBmh15r8yAWQsYxXgBOXYMAfHnUXF+rDqnB8bXDRtAn7bCziIqetSboK3NexMePvsCRLvmsoREA+kH8j4HWFpnNEaWgOmR7xyXHfTaz3slHc/YA6H6tl/L8d5tPcIwwD0tjvRaq3Y5BmYBSDClpv0VIX4s8D0XK3sPdpAb94HjPLkgboEz9EdZATW6ZdcmQvtKUwoWw+nAVKA7IcdY1UHnvNnIBplKci+knzewLz5/GGnzkGuuGky+0LTjtGBGR85EQICDqKChnm5pH3Z44nnWAk1YRdyu3g7QoFZ0h8jkr2ffjKmi+Qvsp+9GvNGZHmgW+YQAGUw7PPt8IPKbdy432vhKtRJjKWcSqq7helj81o3nfmaxVZ7Sqie8OOBk9WsyTD/ab7fQ5aWwQeJvnH6+ayo4IdIkOSBJjzXkgr+1TPhAx1AXDsxtCCj3TzQTLA1p782f7a8vdgPfwwrXmZxxbqo2h+6Zlo6mcMY4V7cFBOLm17VCvx9Qa2tAnkxEB+KYyQgbgAAnmNDOdOO6y2Cb+lke1MWQc9o+EMdQf7ubIG3Ek8GZ4k1PtGjbhwgOMPp5Em59JMVk/jU8/aF73Xcrd3UBNZyueQu0/xz2aGtZT8CRziOax2BWFXaeDzgZNV7oRtUzFoijoETf3xkAFFk3OMb7SgPh5wxU1+MygDIp9gZChH2qEcpgLh8pBIK90PXT1ZSU+ZExFK4Vm4GL/J7+K13lS5dQkW4HQwl6GX4yLqu8GhGWS2k75yel5IZIfFNdAL0NpKr2N5dQesBnxa42DLgJd6agS1jJsp1mO1dip7PU4P6diLLoTsZ4m3Q0QweiqeFfIGPLgF6v6mSVv6xe85VBD/1Mpe3AurRbcJ9SEo8NszNVy8rOCEexyIFcJRvYAlI/wk2I7r3p60FFLQXoH2q9xri/m41svRPbW0/EnPn2DWsmk0IiPpB60aa3+hiFfWuC8ZvWKEd9LxAk3HcOof6d77RewPaPsGw5lQAHcZN2vx1448u9pLfMLGQ3BSRRjBzRhKt7HcCw/7aqjtCDs5q76b4ZGphxN2th1WeXYlfnozX3ebKtX4Te11hf1tZP1diiGjIDAB1cR4Sb9rcFPC/nBARjlgDxd+tCBb1t91j71xJcgGjT3g/dUFnXXNiDrxkyoHANPk58ACPUa42hj8tgGrhiXOCmygxFZBiT2wyAJTDJ4wJEPmp6JIrDaSWYNqv4xH2wwdSTGYb3E0pXnS39nmLUsqoVZxzSoegqzd0o06wdbTXsaHGL+IF4JtIcXddTcD/dCd8hVf+fWPSV553kjMmMEULLS8HcgmptDO955dLGX78PjiDA6IsTHPm5IA6bc5ha0gaGkoEttXuxU11B2dOJ65/Q08tEF1+Y9cr2Nh/VECfQ33GyvR/gsdN1LuIeLpKMCAF2yRr769g9/4aJLZNRI71m2S91+Kp+Q0zubTcxoG2/6gm1Q79wkMj2XNO2ui7nWw8ULtu27CCvqTGX2PffD+xcwgh/TrOKvGZMM5jRFGDTn4NO/lwnDR/GY/waDZtkWDUPI0O8ztcFVqp6r2ZW+2bvkJ3raptYagFqu95VdIaml2CIp6CKets34x+fH2C+zH4cVFO7vj+6k2FU39PtRhWluYeZ3gDz1TLB9K2v7SD9gJU1qDxoRDrAWcrFGLyndhdtd0505+gEP79adK8fmFCWNYC+ahzVNcRH79E8dA1iqX/N0qq22xcOc20ALxLDspEj4QCFBQMgaIwoKbxr0Bd7Sbws6GiRK6tqoPfpiCle23axejRLyO1I+ahsEpWrzT5ZsCyS5RcY9jMfENFxSnhKsrfW8JHH6/rdQUMfmQPT3Uz9gY0C/pu1yuCnrPUvio0a1qMEosA/EwIzzid7cqsAAAAASUVORK5CYII=');

body{
  display:grid;
  place-content:center;
  height:100vh;
  --width:calc(100% + 200px);
  background:radial-gradient(circle at center, #666, #222);
  &:before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:999;
    mask:$noise;
    background:#000;
    opacity:0.25;
    animation: static 0.4s steps(4, end) infinite;
    pointer-events:none;
    mix-blend-mode:overlay;
    @keyframes static{
      to{
        mask-position:500px 1500px;
      }
    }
  }
  #wrap{
    width:600px;
    height:50px;
    max-width:100%;
    position:relative;
    .signup, .field{
      position:relative;
      z-index:10;
    }
    .field{
      position:absolute;
      pointer-events:none;
      height:50px;
      top:0;
      left:0;
      width:calc(100% - 200px);
      background:transparent;
      box-sizing:border-box;
      outline:none;
      font-size:22px;
      line-height:1;
      text-transform:uppercase;
      font-family:'Headhunter';
      transform-style:preserve-3d;
      perspective:800px;
      z-index:2;
      transition:0.4s ease-in-out;
      transition-delay:0.6s;
      &:after{
        content:'';
        position:absolute;
        width:calc(100% + 200px);
        height:100%;
        top:0;
        left:0;
        box-shadow:0 15px 20px -5px rgba(0,0,0,0.5);
        z-index:-1;
        opacity:1;
        transition:opacity 0.3s ease-in-out;
        transition-delay:2s;
      }
      .graves{
        width:300px;
        position:absolute;
        height:10px;
        top:calc(50% - 10px);
        left:calc(50% - 50px);
        background:repeating-linear-gradient(78deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px), repeating-linear-gradient(60deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px) -5px 50%, repeating-linear-gradient(84deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px) -9px 50%, repeating-linear-gradient(71deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px) -12px 50%, repeating-linear-gradient(101deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px) -14px 50%, repeating-linear-gradient(110deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px) -2px 50%, repeating-linear-gradient(68deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px) 5px 50%, repeating-linear-gradient(94deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px) -18px 50%, repeating-linear-gradient(114deg, $gr 1px, $t 1px, $t 15px, $gr 15px, $gr 16px) -2px 50%, linear-gradient(to top, darken($gr, 5%), $t 7.5px);
        z-index:999;
        transform:scaleX(0);
        transition:0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition-delay:0.9s;
        border-radius:100px 100px 0 0;
        &:after{
          content:'';
          position:absolute;
          width:150%;
          height:50px;
          top:100%;
          left:50%;
          background:linear-gradient(to bottom, darken($gr, 5%) 2.5px, $br 10px, darken($br, 10%) 20px, $t);
          transition:0.3s ease-in-out;
          transition-delay:0.5s;
          transform-origin:top;
          transform:translateX(-50%) scaleY(0);
          mask:linear-gradient(to right, $t, #000 15%, #000 85%, $t);
        }
        &:first-of-type{
         .ghost{
          position:absolute;
          width:100px;
          height:100px;
          top:-125px;
          left:100px;
          overflow:hidden;
           transform-origin:left;
           transform:scale(0.75);
          .ghostbody{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            transform:rotate(90deg);
            transition:0.5s ease-in-out;
            transform-origin:0% 0%;
            &:before{
              content:'';
              position:absolute;
              z-index:1;
              width:100px;
              height:100px;
              top:-70px;
              left:-85px;
              border:35px solid;
              border-color:$t #fff $t $t;
              border-radius:100%;
              transform:rotate(45deg);
              mask:linear-gradient(to top, $t 25%, #000 50%);
            }
            &:after{
              content:'';
              position:absolute;
              width:35px;
              height:35px;
              background:radial-gradient(circle at center, #000 2px, $t 2px) 50% 50% / 100% 100% no-repeat, radial-gradient(circle at center, #000 2px, $t 2px) calc(50% + 12.5px) 50%  / 100% 100% no-repeat, #fff;
              border-radius:100%;
              left:50px;
              top:0;
              z-index:2;
              animation:look 3s ease-in-out infinite alternate;
              @keyframes look{
                from{
                  background-position:50% 50%, calc(50% + 12.5px) 50%, 50% 50%;
                }
                to{
                  background-position:calc(50% - 12.5px) 50%, 50% 50%, 50% 50%;
                }
              }
            }
           }
        }
        }
        .grave{
          width:100px;
          height:150px;
          position:absolute;
          bottom:2px;
          left:25px;
          overflow:hidden;
          z-index:2;
          &:before, &:after{
            content:'THANK';
            font-family:"Amatic SC";
            font-size:28px;
            display:flex;
            justify-content:center;
            align-items:center;
            color:#666;
            position:absolute;
            width:75%;
            height:75%;
            background:#ccc;
            border-radius:100px 100px 0 0;
            transform-origin:bottom;
            bottom:0;
            right:0;
            box-shadow:-10px 5px 0 0 #666;
            transition:0.75s ease-in-out;
            transition-delay:0.3s;
            transform:skewX(5deg) translateY(100%);
          }
          &:last-of-type{
            width:150px;
            height:200px;
            left:150px;
            &:before, &:after{
              transition:0.9s ease-in-out;
              transition-delay:0.3s;
            }
            &:before, &:after{
              content:'YOU';
              right:auto;
              left:25%;
              padding-bottom:55px;
              border-radius:0px;
              box-shadow:none;
              width:60%;
              z-index:1;
              background:linear-gradient(to right, $t 30%, #ccc 30%, #ccc 65%, $t 65%), linear-gradient(to bottom, $t 25%, #ccc 25%, #ccc 45%, $t 45%);
              padding-right:5px;
              transform:skewX(-5deg) translateY(250px);
              height:75%;
            }
            &:after{
              color:$t;
              left:30%;
              bottom:-5%;
              z-index:-1;
              filter:brightness(0.5);
            }
          }
        }
      }
      .btn{
        width:200px;
        height:50px;
        right:-200px;
        position:absolute;
        background:#000;
        top:0;
        pointer-events:none;
        overflow:hidden;
        display:grid;
        place-content:center;
        padding-bottom:2.5px;
        box-sizing:border-box;
        transition:0.3s ease-in-out, background 0.2s ease-in-out;
        transition-delay:1.6s, 0s;
        transform-origin:right;
        transform-style:preserve-3d;
        &:before{
            content:'';
            position:absolute;
            width:100%;
            height:100%;
            z-index:999;
            backdrop-filter:blur(2px) contrast(20) brightness(0.65);
            opacity:0;
            transition:0.2s ease-in-out;
          }
        > span{
          color:#fff;
          font-family:'Titan One';
          display:inline-block;
          transform:scaleY(1.35);
          transition:transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.175), color 0.2s ease-in-out;
          transition-delay:2.15s, 0s;
          &:before, &:after{
            content:'SUBSCRIBE';
            position:absolute;
            color:$r;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            transition:transform 0.5s ease-in-out, opacity 0.2s ease-in-out;
            z-index:-1;
          }
        }
      }
      .inner{
        position:absolute;
        width:var(--width);
        height:100%;
        background:#fff;
        left:0;
        top:0;
        border-radius:5px;
        box-shadow:0 0 0 1px;
        transition:0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease-in-out, clip-path 0.3s ease-in-out;
        transition-delay:0.75s, 0.5s, 1.5s;
        transform-origin:bottom;
        transform:rotateX(0deg);
        perspective:800px;
        overflow:hidden;
        clip-path: polygon(-1% -1%, 101% -1%, 101% 101%, -1% 101%);
        &:before{
          content:'';
          position:absolute;
          width:100%;
          left:0;
          top:0;
          height:100%;
          box-shadow:inset 0 0 0 1px;
          transform-origin:top;
          transform:rotateX(-90deg);
          transition:0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease-in-out;
        }
      }
      &.haunt{  
        transform:translateY(50px);
        transition-delay:3.25s;
        &:after{
          opacity:0;
          transition-delay:0s;
        }
        .graves{
          transition-delay:3.65s;
          transform:scaleX(1);
          animation:shake 0.05s linear 20 alternate 3.75s;
          &:after{
            transition:0.8s ease-in-out;
            transition-delay:3.65s;
            transform:translateX(-50%) scaleY(1);
          }
          .ghost{
            .ghostbody{
              transition-delay:4.75s;
              transform:rotate(0deg);
            }
          }
          @keyframes shake{
            from{
              transform:scaleX(1) translateX(-1px);
            }
            to{
              transform:scaleX(1) translateX(1px);
            }
          }
          .grave{
            &:before{
              transform:skewX(5deg) translateY(0%);
              transition-delay:4s;
            }
            &:last-of-type{
              &:before, &:after{
                transform:skewX(-5deg) translateY(10px);
                transition-delay:4.25s;
              }
            }
          }
        }
        .btn{
          transition-delay:0.6s;
          transform:scaleX(0);
          &:before{
            opacity:1;
          }
          > span{
            transition-delay:0.2s, 0s;
            transform:scaleY(1.35) translateY(30px);
            color:$r;
            &:before, &:after{
              transform:translate(-50%, calc(-50% + 30px));
              transition-delay:0s, 0s;
              opacity:1;
            }
            &:after{
              transform:translate(-50%, calc(-50% + 50px));
              transition-delay:0.1s, 0s;
            }
          }
        }
        .inner{
          background:darken($br, 10%);
          transform:rotateX(45deg) scaleY(1.75) translateX(calc(300px - var(--width)/2));
          
          transition:1s ease-in-out, background 0.45s ease-in-out, -webkit-clip-path 0.35s ease-in-out;
          transition-delay:0.75s, 0.7s, 3.35s;
          clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);

          &:before{
            transform:rotateX(-60deg);
            background:darken($br, 15%);
            box-shadow:inset 0 0 10px 1px darken($br, 20%);
            transition-delay:1.05s, 0.95s;
          }
        }
        p{
          .word{
            animation:shift 0.75s ease-in-out 1 forwards 0.15s;
            &:after{
              display:none;
            }
            @keyframes shift{
              from{
                transform:translateX(0);
              }
              to{
                transform:translateX(calc(300px -  var(--width)/2));
              }
            }
            .char{
               filter:brightness(1);
               animation:fill 2s ease-in-out 1 forwards, drop 0.5s ease-in-out 1 forwards;
               transform:scaleY(1.25) translateY(5px);
                @for $i from 1 through 4{
                  &:nth-of-type(#{$i}n){
                    transition-delay:#{($i/10) + 0.75}s;
                    animation-delay:#{($i/10) + 0.75}s, #{($i/10) + 2.5}s;
                    &:before{
                      transition-delay:#{($i/10) + 0.75}s;
                      animation-delay:#{($i/10) + 0.75}s, #{($i/10) + 2.25}s;
                    }
                  }
                }
              &:before{
                animation:fill 2s ease-in-out 1 forwards, drop 3s ease-in-out 1 forwards;
                @keyframes drop{
                  to{
                    transform:translateY(100px);
                  }
                }
              }
            }
          }
        }
      }
      p{
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        display:flex;
        justify-content:flex-start;
        align-items:center;
        margin:0;
        padding:2.5px 20px 0;
        overflow:hidden;
        &:not(.initial){
          .word{
            position:relative;
            &:after{
              content:'';
              position:absolute;
              width:2px;
              height:25px;
              top:50%;
              left:105%;
              background:#666;
              transform:translateY(calc(-50% - 3.5px));
              animation:blinking 1s steps(2, start) infinite;
              @keyframes blinking{
                to{
                  opacity:0;
                }
              }
            }
          }
        }
        &.text.initial{
          .word{
            position:relative;
            z-index:999;
            animation:fadeIn 0.5s ease-in-out 1 forwards 1s;
            opacity:0;
            @keyframes fadeIn{
              to{
                opacity:0.25;
              }
            }
            span.char{
              background-image:linear-gradient(to bottom, #000, #000);
            }
          }
        }
        .word{
          display:flex;
          flex-wrap:wrap;
          width:auto;
          transition:transform 0.6s ease-in-out;
          .char{
            width:auto;
            max-width:20px;
            display:flex;
            justify-content:center;
            align-items:center;
            height:50px;
            overflow:hidden;
            color:#fff;
            position:relative;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            background-image:linear-gradient(to bottom, #fff 50%, $t 50%);
            background-size:50% 200%;
            background-position:50% 100%;
            transition:0.6s ease-in-out;
            transform-origin:bottom;
            filter:brightness(0);
            @keyframes fill{
              to{
                background-position:50% 0%;
              }
            }
            &:before{
              content:attr(data-char);
              position:absolute;
              font-family:'Titan One';
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text;
              background-image:linear-gradient(to bottom, $t 50%, $r 50%, $r 54%, $gr 54%, darken($gr, 15%));
              background-size:50% 200%;
              background-position:50% 100%;
              color:$gr;
              transform-origin:50% 100%;
              left:50%;
              top:50%;
              transform:translate(-50%, -50%) scaleY(1.35);
            }
          }
        }
      }
    }
    input{
      height:50px;
      border:none;
      width:calc(100% - 205px);
      box-sizing:border-box;
      padding:0 20px;
      outline:none;
      font-size:22px;
      line-height:1;
      text-transform:uppercase;
      font-family:'Headhunter';
      &.submit{
        width:200px;
        opacity:0;
        &:hover ~ .field:not(.haunt){
          .btn{
            background:#222;
          }
        }
      }
      &.email{
        opacity:0;
      }
    }
  }
}