/*
    Project:    Darlington.gov.uk 2022 Umbraco 10
    Version:    1.0
    Date:       17/02/2023
    Author:     Chris Smith (DBC)
    
    Purpose:    This CSS file houses all the custom animations that can be appllied to the site, primarily when injecting dynmaic data so that they don't just appear.
*/

/*This animation will make the element grow into its full size whilst fading in from being invisible*/

@keyframes grow-fade-in {
    from {
        transform: scale(0);
        opacity: 0;
    }

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

.animate-grow-fade-in {
    animation: grow-fade-in .3s linear;
}

/*This animation will make the element fade in from invisible to fully opaque*/

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fade-in .3s linear;
}


/*This animation makes the element appear from a small circle until it grows into the full size element*/
@keyframes circle-in-center {
    from {
        clip-path: circle(0%);
    }

    to {
        clip-path: circle(125%);
    }
}

.animate-circle-centre {
    animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
}


/*This animation makes the element appear from a small square until it grows into the full size element*/
@keyframes square-in-center {
    from {
        clip-path: inset(100% 100% 100% 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.animate-square-centre {
    animation: 1s cubic-bezier(.25, 1, .30, 1) square-in-center both;
}

/*This animation makes the element appear from a left to right screen wipe*/
@keyframes wipe-in-right {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

/*This animation makes the element appear from a right to left screen wipe*/
.animate-wipe-right {
    animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}

@keyframes wipe-in-left {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.animate-wipe-left {
    animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-left both;
}

/*This animation makes the element appear from a bottom to top screen wipe*/
@keyframes wipe-in-up {
    from {
        clip-path: inset(100% 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.animate-wipe-up {
    animation: 1.5s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
}

/*This animation makes the element appear from a top to bottom screen wipe*/
@keyframes wipe-in-down {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.animate-wipe-down {
    animation: 1.5s cubic-bezier(.25, 1, .30, 1) wipe-in-down both;
}

/*This animation makes the element appear from the middle out*/
@keyframes wipe-cinematic-in {
    0% {
        clip-path: inset(100% 0 100% 0);
    }

    30%, 70% {
        clip-path: inset(10% 0 10% 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

.animate-wipe-cinematic {
    animation-name: wipe-cinematic-in;
}

@media (prefers-reduced-motion) {
    .animate-grow-fade-in,
    .animate-fade-in,
    .animate-circle-centre,
    .animate-square-centre,
    .animate-wipe-right,
    .animate-wipe-left,
    .animate-wipe-up,
    .animate-wipe-down,
    .animate-wipe-cinematic {
        animation: none;
    }
}