.css-animation-link {
    width: max-content;
    position: relative;
}

.css-animation-link::after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -3px;
  background: linear-gradient(to right, transparent, #2929294D, transparent);
  opacity: 0;
  transform: scaleX(0);
  will-change: opacity;
  transition: all .3s ease-in-out;
}

.css-animation-link--yellow::after {
  background: linear-gradient(to right, transparent, #F4C86F, transparent);
}

.css-animation-link--white::after {
  background: #FFFFFF;
}

.css-animation-link--pink::after {
    background: linear-gradient(to right, transparent, #D66584, transparent);
}

.css-animation-link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.css-animation-button {
    position: relative;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.css-animation-button--yellow {
    background: #F4C86F;
    border: 1px solid #F4C86F;
}

.css-animation-button::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #FFFFFF;
    opacity: 0;
    transform: scaleX(0);
    transition: all .3s ease-in-out;
}

.css-animation-button--black::after {
    background: #292929;
}

.css-animation-button--orange::after {
    background: #E69E5F;
}

.css-animation-button:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.css-animation-button span {
    position: relative;
    z-index: 1;
    transition: all .3s ease-in-out;
}

.css-animation-button--yellow:hover span {
    color: #F4C86F;
}

.css-animation-button--orange:hover span {
    color: #FFFFFF;
}

.css-animation-button--black:hover span {
    color: #FFFFFF;
}

.css-animation-button--white:hover span {
    color: #292929;
}

.css-animation-button--pink {
    background: #D66584;
    border: 1px solid #D66584;
}

.css-animation-button--pink::after {
    background: #FFFFFF;
}

.css-animation-button--pink:hover span {
    color: #D66584;
}

.css-animation-scale {
    transition: all .3s ease-in-out;
    will-change: transform;
}

.css-animation-scale:hover {
    transform: scale(1.1);
}

.css-animation-card {
    position: relative;
    will-change: transform, box-shadow;
    transition: transform .3s 
                cubic-bezier(.2, .7, .2, 1), box-shadow .3s 
                cubic-bezier(.2, .7, .2, 1), outline-color .3s;
    outline: 0 solid transparent;
    overflow: hidden;
    cursor: default;
}

.css-animation-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-120%) rotate(0.001deg);
    transition: transform .75s 
                cubic-bezier(.2, .7, .2, 1);
}

.css-animation-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    outline-width: 2px;
    outline-color: rgba(93, 81, 79, .18);
    outline-offset: -2px;
}

.css-animation-card:hover::after {
    transform: translateX(120%) rotate(0.001deg);
}

.js-animation-pulsebtn.is-animating {
    animation: pulseBtn 1.5s ease-in-out infinite;
}

.js-animation-pulse.is-animating {
    cursor: pointer;
    animation: pulse 1.5s ease-in-out infinite;
}

.js-animation-parallax {
    transform: translateY(0);
    will-change: transform;
    pointer-events: none;  
    transition: transform 0s !important;
}

.js-animation-scroll-fade, .js-animation-scroll-fade-delay > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js-animation-scroll-fade--visible, .js-animation-scroll-fade--visible > * {
    opacity: 1;
    transform: translateY(0);
}

@keyframes pulseBtn {
    0%   { transform: scale(1); box-shadow: 0 0 10px rgba(40,29,24,0.1); }
    50%  { transform: scale(1.05); box-shadow: 0 0 20px rgba(40,29,24,0.3); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(40,29,24,0.1); }
}

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}