@keyframes dynamicFade {
    0% {
        -webkit-filter: var(--filter-end, none);
        filter: var(--filter-start, none);
        opacity: var(--opacity-start, 0);
        transform: var(--transform-start, translateY(50px));
    }
    100% {
        -webkit-filter: var(--filter-end, none);
        filter: var(--filter-end, none);
        opacity: var(--opacity-end, 1);
        transform: var(--transform-end, translateY(0));
    }
  }
  
  [data-animate] {
    --opacity-start: 0;
    --opacity-end: 1;
    --transform-start: translateY(50px) scale(1, 1.25);
    --transform-end: translateY(0);
    --filter-start: blur(5px);
    --filter-end: blur(0px);
    --duration: 1s;
    --delay: 0s;
    --timing: cubic-bezier(.65,0,.6,1.4);
    
    opacity: var(--opacity-start);
    transform: var(--transform-start);
    -webkit-filter: var(--filter-start);
    filter: var(--filter-start);

    will-change: -webkit-filter, filter, opacity, transform;

    display: inline-block;
    opacity: var(--opacity-start);
    transform: var(--transform-start);
    animation: dynamicFade var(--duration) var(--timing) var(--delay) forwards;
    will-change: opacity, transform, filter;
  }
  .animate-words
  {
    --timing: ease-out;
    display: inline-block;
  }

  /* For elements that should animate immediately */
  [fadein-onload-section] [data-animate] {
    animation-play-state: running;
  }
  
  /* For scroll-triggered elements */
  [data-animate]:not([fadein-onload-section] *) {
    animation-play-state: paused;
  }

  @keyframes burger-menu-item-in {
    0%
    {
        opacity: 0;
        -webkit-filter: blur(5px);
        filter: blur(5px);
        -webkit-transform: var(--transform-start);
        transform: var(--transform-start);
    }
    100%
    {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        -webkit-transform: var(--transform-end);
        transform: var(--transform-end);
    }
}

@keyframes burger-menu-item-out {
    0%
    {
        opacity: 1;
        -webkit-filter: blur(0px);
        filter: blur(0px);
        -webkit-transform: var(--transform-end);
        transform: var(--transform-end);
    }
    100%
    {
        opacity:0;
        -webkit-filter: blur(5px);
        filter: blur(5px);
        -webkit-transform: var(--transform-start);
        transform: var(--transform-start);
    }
}