.cf-fade-in { opacity: 0; animation: cfFadeIn var(--fade-duration, 0.5s) var(--fade-easing, ease-in-out) forwards; } .cf-fade-in-up { opacity: 0; transform: translateY(var(--fade-translate-y, 20px)); animation: cfFadeInUp var(--fade-duration, 0.5s) var(--fade-easing, ease-in-out) forwards; } .cf-fade-in-down { opacity: 0; transform: translateY(calc(var(--fade-translate-y, 20px) * -1)); animation: cfFadeInDown var(--fade-duration, 0.5s) var(--fade-easing, ease-in-out) forwards; } .cf-fade-in-left { opacity: 0; transform: translateX(calc(var(--fade-translate-x, 20px) * -1)); animation: cfFadeInLeft var(--fade-duration, 0.5s) var(--fade-easing, ease-in-out) forwards; } .cf-fade-in-right { opacity: 0; transform: translateX(var(--fade-translate-x, 20px)); animation: cfFadeInRight var(--fade-duration, 0.5s) var(--fade-easing, ease-in-out) forwards; }  .cf-fade-out { opacity: 1; animation: cfFadeOut var(--fade-duration, 0.5s) var(--fade-easing, ease-in-out) forwards; }  @keyframes cfFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes cfFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes cfFadeInUp { from { opacity: 0; transform: translateY(var(--fade-translate-y, 20px)); } to { opacity: 1; transform: translateY(0); } } @keyframes cfFadeInDown { from { opacity: 0; transform: translateY(calc(var(--fade-translate-y, 20px) * -1)); } to { opacity: 1; transform: translateY(0); } } @keyframes cfFadeInLeft { from { opacity: 0; transform: translateX(calc(var(--fade-translate-x, 20px) * -1)); } to { opacity: 1; transform: translateX(0); } } @keyframes cfFadeInRight { from { opacity: 0; transform: translateX(var(--fade-translate-x, 20px)); } to { opacity: 1; transform: translateX(0); } }  .cf-fade-on-scroll { opacity: 0; transition: opacity var(--fade-duration, 0.5s) var(--fade-easing, ease-in-out); } .cf-fade-on-scroll.is-visible { opacity: 1; }