/* ===============================
   1. Fade Animations
================================ */
.fade-in {
    animation: fadeIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in-up {
    animation: fadeInUp ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in-down {
    animation: fadeInDown ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

.fade-in-left {
    animation: fadeInLeft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

.fade-in-right {
    animation: fadeInRight ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

/* ===============================
   2. Zoom / Scale Animations
================================ */
.zoom-in {
    animation: zoomIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.7);
    }

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

.zoom-out {
    animation: zoomOut ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2);
    }

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

.zoom-in-soft {
    animation: zoomInSoft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes zoomInSoft {
    from {
        opacity: 0;
        transform: scale(.85);
    }

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

.zoom-out-soft {
    animation: zoomOutSoft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes zoomOutSoft {
    from {
        opacity: 0;
        transform: scale(1.15);
    }

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

.pop-in {
    animation: popIn cubic-bezier(.18, .89, .32, 1.28);
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(.6);
    }

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

/* ===============================
   3. Blur Animations
================================ */
.blur-in {
    animation: blurIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

.slide-blur-up {
    animation: slideBlurUp ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes slideBlurUp {
    from {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(10px);
    }

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

.slide-blur-left {
    animation: slideBlurLeft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes slideBlurLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.slide-blur-right {
    animation: slideBlurRight ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes slideBlurRight {
    from {
        opacity: 0;
        transform: translateX(30px);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.blur-fade-up {
    animation: blurFadeUp ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes blurFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(5px);
    }

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

/* ===============================
   4. Rotate Animations
================================ */
.rotate-in {
    animation: rotateIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-15deg);
    }

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

.rotate-fade-in {
    animation: rotateFadeIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes rotateFadeIn {
    from {
        opacity: 0;
        transform: rotate(-8deg) translateY(20px);
    }

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

.rotate-up {
    animation: rotateUp ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes rotateUp {
    from {
        opacity: 0;
        transform: rotateX(90deg);
    }

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

.rotate-down {
    animation: rotateDown ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes rotateDown {
    from {
        opacity: 0;
        transform: rotateX(-90deg);
    }

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

.rotate-left {
    animation: rotateLeft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes rotateLeft {
    from {
        opacity: 0;
        transform: rotateY(-90deg);
    }

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

.rotate-right {
    animation: rotateRight ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes rotateRight {
    from {
        opacity: 0;
        transform: rotateY(90deg);
    }

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

/* ===============================
   5. Slide Animations
================================ */
.slide-up {
    animation: slideUp ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

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

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

.slide-down {
    animation: slideDown ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

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

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

.slide-left {
    animation: slideLeft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

.slide-right {
    animation: slideRight ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

.slide-up-soft {
    animation: slideUpSoft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes slideUpSoft {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.slide-left-soft {
    animation: slideLeftSoft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes slideLeftSoft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

/* ===============================
   6. Skew / Stretch Animations
================================ */
.skew-in {
    animation: skewIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes skewIn {
    from {
        opacity: 0;
        transform: skewY(8deg) translateY(20px);
    }

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

.skew-up {
    animation: skewUp ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes skewUp {
    from {
        opacity: 0;
        transform: skewX(8deg) translateY(20px);
    }

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

.squeeze-in {
    animation: squeezeIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes squeezeIn {
    from {
        opacity: 0;
        transform: scaleX(.6);
    }

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

.stretch-in {
    animation: stretchIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes stretchIn {
    from {
        opacity: 0;
        transform: scaleY(.6);
    }

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

/* ===============================
   7. Bounce / Elastic Animations
================================ */
.bounce-in {
    animation: bounceIn cubic-bezier(.34, 1.56, .64, 1);
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes bounceIn {
    from {
        opacity: 0;
        transform: scale(.6);
    }

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

.bounce-up {
    animation: bounceUp cubic-bezier(.34, 1.56, .64, 1);
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes bounceUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.elastic-in {
    animation: elasticIn cubic-bezier(.5, 1.75, .75, 1);
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes elasticIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }

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

/* ===============================
   8. Fancy / Modern UI Animations
================================ */
.float-in {
    animation: floatIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(6px);
    }

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

.lift-in {
    animation: liftIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes liftIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(.95);
    }

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

.soft-rise {
    animation: softRise ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes softRise {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.97);
    }

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

.fade-tilt {
    animation: fadeTilt ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeTilt {
    from {
        opacity: 0;
        transform: rotate(-4deg) translateY(20px);
    }

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

.roll-in {
    animation: rollIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes rollIn {
    from {
        opacity: 0;
        transform: translateX(-60px) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(0);
    }
}

.card-float {
    animation: cardFloat ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes cardFloat {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.95);
    }

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

.fade-drop {
    animation: fadeDrop ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeDrop {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(.9);
    }

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


/* ================================================================ */
/* ================================================================ */
/* ================================================================ */
/* ================================================================ */

/* FADE-IN-UP */
.fade-in-up {
    animation: fadeInUp ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* FADE-IN-DOWN */
.fade-in-down {
    animation: fadeInDown ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

/* FADE-IN-LEFT */
.fade-in-left {
    animation: fadeInLeft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

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

/* FADE-IN-RIGHT */
.fade-in-right {
    animation: fadeInRight ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

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

/* ZOOM-IN-SOFT */
.zoom-in-soft {
    animation: zoomInSoft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes zoomInSoft {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

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

/* ZOOM-OUT-SOFT */
.zoom-out-soft {
    animation: zoomOutSoft ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes zoomOutSoft {
    from {
        opacity: 0;
        transform: scale(1.15);
    }

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

/* FLOAT-IN */
.float-in {
    animation: floatIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}

@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(6px);
    }

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

/* FLIP-IN */
.flip-in {
    animation: flipIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes flipIn {
    from {
        opacity: 0;
        transform: rotateX(-90deg);
    }

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

/* POP-IN */
.pop-in {
    animation: popIn cubic-bezier(.18, .89, .32, 1.28);
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.6);
    }

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

/* SLIDE-BLUR-UP */
.slide-blur-up {
    animation: slideBlurUp ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
}

@keyframes slideBlurUp {
    from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
    }

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

/* ROTATE-FADE-IN */

.rotate-fade-in {
    animation: rotateFadeIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes rotateFadeIn {
    from {
        opacity: 0;
        transform: rotate(-60deg) translateY(20px);
    }

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

/* SKEW-IN */
.skew-in {
    animation: skewIn ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

@keyframes skewIn {
    from {
        opacity: 0;
        transform: skewY(8deg) translateY(20px);
    }

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