/* Base state: elements are hidden initially */
.anima {
    opacity: 0;
}

/* 
   Animation Definitions 
   (Apply animation properties only when active, or define them on the class but they won't run until display/opacity/trigger changes if setup that way. 
   Better approach: Define animation-name on the variant class, but it runs immediately. 
   Since we want to trigger it, we can keep the name on the variant but pause it, OR only add the name when active.
   
   Preferred strategy for this request: 
   .anima = opacity 0
   .anima.active = opacity 1, normal flow
   .slideUp.active = animation-name: slideUp
*/


/* Slide Up Variant */
.slideUp.active {
    animation-name: slideUp;
    animation-duration: 1.8s;
    /* Default duration */
    animation-timing-function: linear(0.0000, 0.0193, 0.0702, 0.1431, 0.2300, 0.3243, 0.4207, 0.5152, 0.6047, 0.6872, 0.7612, 0.8262, 0.8818, 0.9283, 0.9662, 0.9962, 1.0191, 1.0357, 1.0470, 1.0538, 1.0570, 1.0573, 1.0554, 1.0519, 1.0474, 1.0422, 1.0367, 1.0311, 1.0258, 1.0208, 1.0163, 1.0122, 1.0087, 1.0057, 1.0032, 1.0012, 0.9997, 0.9985, 0.9977, 0.9971, 0.9968, 0.9967, 0.9967, 0.9969, 0.9971, 0.9974, 0.9977, 0.9980, 0.9983, 0.9986, 0.9989, 0.9992, 0.9994, 0.9996, 0.9997, 0.9999, 1.0000, 1.0000, 1.0001, 1.0001, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000);
    animation-fill-mode: forwards;
}

/* Slide Down Variant */
.slideDown.active {
    animation-name: slideDown;
    animation-duration: 1.8s;
    animation-timing-function: linear(0.0000, 0.0193, 0.0702, 0.1431, 0.2300, 0.3243, 0.4207, 0.5152, 0.6047, 0.6872, 0.7612, 0.8262, 0.8818, 0.9283, 0.9662, 0.9962, 1.0191, 1.0357, 1.0470, 1.0538, 1.0570, 1.0573, 1.0554, 1.0519, 1.0474, 1.0422, 1.0367, 1.0311, 1.0258, 1.0208, 1.0163, 1.0122, 1.0087, 1.0057, 1.0032, 1.0012, 0.9997, 0.9985, 0.9977, 0.9971, 0.9968, 0.9967, 0.9967, 0.9969, 0.9971, 0.9974, 0.9977, 0.9980, 0.9983, 0.9986, 0.9989, 0.9992, 0.9994, 0.9996, 0.9997, 0.9999, 1.0000, 1.0000, 1.0001, 1.0001, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0002, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000, 1.0000);
    animation-fill-mode: forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Scale Up Variant */
.scaleUp.active {
    animation-name: scaleUp;
    animation-duration: 1s;
    animation-timing-function: linear(0.0000, 0.0123, 0.0468, 0.0996, 0.1670, 0.2455, 0.3316, 0.4222, 0.5146, 0.6063, 0.6952, 0.7795, 0.8578, 0.9291, 0.9925, 1.0475, 1.0941, 1.1321, 1.1619, 1.1837, 1.1982, 1.2060, 1.2078, 1.2043, 1.1964, 1.1848, 1.1703, 1.1537, 1.1356, 1.1166, 1.0974, 1.0784, 1.0601, 1.0427, 1.0267, 1.0122, 0.9993, 0.9882, 0.9789, 0.9713, 0.9654, 0.9611, 0.9584, 0.9570, 0.9569, 0.9578, 0.9596, 0.9621, 0.9652, 0.9687, 0.9725, 0.9765, 0.9805, 0.9844, 0.9882, 0.9917, 0.9950, 0.9980, 1.0006, 1.0028, 1.0047, 1.0062, 1.0074, 1.0082, 1.0087, 1.0090, 1.0089, 1.0087, 1.0083, 1.0078, 1.0071, 1.0064, 1.0056, 1.0047, 1.0039, 1.0031, 1.0023, 1.0016, 1.0009, 1.0003, 0.9998, 0.9993, 0.9990, 0.9987, 0.9984, 0.9983, 0.9982, 0.9981, 0.9981, 0.9982, 0.9983, 0.9984, 0.9986, 0.9987, 0.9989, 0.9990, 0.9992, 0.9994, 0.9995, 0.9997, 1.0000);
    animation-fill-mode: forwards;
}

@keyframes scaleUp {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}