/* ===================== ANIMATIONS ===================== */

/* Utility Base Class */
.animated-element {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

.paused-animation {
    animation-play-state: paused !important;
}

/* --- Fades --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.anim-fadeIn {
    animation-name: fadeIn;
}

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

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.anim-fadeInUp {
    animation-name: fadeInUp;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.anim-fadeInDown {
    animation-name: fadeInDown;
}

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

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.anim-fadeInLeft {
    animation-name: fadeInLeft;
}

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

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.anim-fadeInRight {
    animation-name: fadeInRight;
}

/* --- Zooms --- */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.anim-zoomIn {
    animation-name: zoomIn;
}

/* --- Rotates --- */
@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    to {
        transform-origin: center;
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.anim-rotateIn {
    animation-name: rotateIn;
}

/* --- Bounces --- */
@keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    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);
    }
}

.anim-bounceIn {
    animation-name: bounceIn;
}

/* --- Zooms (Continued) --- */
@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale3d(1.3, 1.3, 1.3);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.anim-zoomOut {
    animation-name: zoomOut;
}

/* --- Flips --- */
@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.anim-flipInX {
    animation-name: flipInX;
    backface-visibility: visible !important;
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.anim-flipInY {
    animation-name: flipInY;
    backface-visibility: visible !important;
}

/* --- Back Entrances --- */
@keyframes backInDown {
    0% {
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.anim-backInDown {
    animation-name: backInDown;
}

@keyframes backInUp {
    0% {
        transform: translateY(1200px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.anim-backInUp {
    animation-name: backInUp;
}

@keyframes backInLeft {
    0% {
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.anim-backInLeft {
    animation-name: backInLeft;
}

@keyframes backInRight {
    0% {
        transform: translateX(2000px) scale(0.7);
        opacity: 0.7;
    }

    80% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.anim-backInRight {
    animation-name: backInRight;
}

/* --- Slides (Pure) --- */
@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.anim-slideInUp {
    animation-name: slideInUp;
}

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

    to {
        transform: translate3d(0, 0, 0);
    }
}

.anim-slideInDown {
    animation-name: slideInDown;
}

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

    to {
        transform: translate3d(0, 0, 0);
    }
}

.anim-slideInLeft {
    animation-name: slideInLeft;
}

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

    to {
        transform: translate3d(0, 0, 0);
    }
}

.anim-slideInRight {
    animation-name: slideInRight;
}

/* --- Speed --- */
@keyframes lightSpeedInRight {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.anim-lightSpeedInRight {
    animation-name: lightSpeedInRight;
}

@keyframes lightSpeedInLeft {
    from {
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(-20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(5deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.anim-lightSpeedInLeft {
    animation-name: lightSpeedInLeft;
}

/* --- Roll --- */
@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.anim-rollIn {
    animation-name: rollIn;
}

/* --- Advanced / New --- */
@keyframes rotateBounce {
    0% {
        transform: rotate(-45deg) scale(0.3);
        opacity: 0;
    }

    70% {
        transform: rotate(10deg) scale(1.1);
    }

    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

.anim-rotateBounce {
    animation-name: rotateBounce;
}

@keyframes rotateZoomIn {
    0% {
        transform: rotate(45deg) scale(0.5);
        opacity: 0;
    }

    100% {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

.anim-rotateZoomIn {
    animation-name: rotateZoomIn;
}

@keyframes rotateZoomOut {
    0% {
        transform: rotate(-45deg) scale(1.5);
        opacity: 0;
    }

    100% {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

.anim-rotateZoomOut {
    animation-name: rotateZoomOut;
}

@keyframes speedRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.anim-speedRight {
    animation-name: speedRight;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

@keyframes speedLeft {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.anim-speedLeft {
    animation-name: speedLeft;
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

@keyframes clockwise {
    0% {
        transform: rotate(-360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.anim-clockwise {
    animation-name: clockwise;
}

@keyframes counterClockwise {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.anim-counterClockwise {
    animation-name: counterClockwise;
}

/* Status / Loop Animations */
@keyframes pulse {

    0%,
    100% {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
}

.anim-pulse {
    animation-name: pulse;
    animation-iteration-count: infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.anim-float {
    animation-name: float;
    animation-iteration-count: infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.anim-blink {
    animation-name: blink;
    animation-iteration-count: infinite;
}

/* Map Pulse Animation */
@keyframes marker-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.map-pulse-pin {
    width: 14px;
    height: 14px;
    background: #ef4444;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    animation: marker-pulse 2s infinite;
}