/* ---------------------------------------------------------------------
   Animation
   --------------------------------------------------------------------- */

/* Hidden state before animation triggers */
.ty-animation:not(.is-visible) {
    opacity: 0;
}

/* Animation types — only applied once .is-visible is set by JS */
.ty-animation.is-visible.ty-animation-fadeIn        { animation-name: fadeIn; }
.ty-animation.is-visible.ty-animation-fadeInUp      { animation-name: fadeInUp; }
.ty-animation.is-visible.ty-animation-fadeInUpSmall { animation-name: fadeInUpSmall; }
.ty-animation.is-visible.ty-animation-fadeInLeft      { animation-name: fadeInLeft; }
.ty-animation.is-visible.ty-animation-fadeInLeftSmall { animation-name: fadeInLeftSmall; }
.ty-animation.is-visible.ty-animation-fadeInRight      { animation-name: fadeInRight; }
.ty-animation.is-visible.ty-animation-fadeInRightSmall { animation-name: fadeInRightSmall; }
.ty-animation.is-visible.ty-animation-slideInUp    { animation-name: slideInUp; }
.ty-animation.is-visible.ty-animation-slideInLeft  { animation-name: slideInLeft; }
.ty-animation.is-visible.ty-animation-slideInRight { animation-name: slideInRight; }
.ty-animation.is-visible.ty-animation-zoomIn       { animation-name: zoomIn; }
.ty-animation.is-visible.ty-animation-bounceIn     { animation-name: bounceIn; }
.ty-animation.is-visible.ty-animation-heartBeat {
    animation-name: heartBeat;
    animation-timing-function: ease-in-out;
}

/* Durations */
.ty-animation-duration-400  { animation-duration: 0.4s; }
.ty-animation-duration-800  { animation-duration: 0.8s; }
.ty-animation-duration-1000 { animation-duration: 1s; }
.ty-animation-duration-1500 { animation-duration: 1.5s; }
.ty-animation-duration-2000 { animation-duration: 2s; }
.ty-animation-duration-3000 { animation-duration: 3s; }
.ty-animation-duration-4000 { animation-duration: 4s; }

/* ---------------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------------- */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes fadeInUpSmall {
    from { opacity: 0; transform: translate3d(0, 33%, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes fadeInLeftSmall {
    from { opacity: 0; transform: translate3d(-33%, 0, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes fadeInRightSmall {
    from { opacity: 0; transform: translate3d(33%, 0, 0); }
    to   { opacity: 1; transform: translateZ(0); }
}

@keyframes slideInUp {
    from { transform: translate3d(0, 100%, 0); }
    to   { transform: translateZ(0); }
}

@keyframes slideInLeft {
    from { transform: translate3d(-100%, 0, 0); visibility: visible; }
    to   { transform: translateZ(0); }
}

@keyframes slideInRight {
    from { transform: translate3d(100%, 0, 0); visibility: visible; }
    to   { transform: translateZ(0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50%  { opacity: 1; }
}

@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0%  { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    to  { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes heartBeat {
    0%  { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}