/**
 * Freestyle Popup Builder - Animations
 */

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

@keyframes slideUp {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes anim-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animation-fade .freestyle-popup-content {
    animation: anim-fade 0.3s ease;
}

@keyframes anim-fade-slide-down {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animation-fade-slide-down .freestyle-popup-content {
    animation: anim-fade-slide-down 0.4s ease;
}

@keyframes anim-fade-slide-up {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animation-fade-slide-up .freestyle-popup-content {
    animation: anim-fade-slide-up 0.4s ease;
}

@keyframes anim-fade-zoom {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animation-fade-zoom .freestyle-popup-content {
    animation: anim-fade-zoom 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes anim-slide-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.animation-slide-right .freestyle-popup-content {
    animation: anim-slide-right 0.4s ease;
}

@keyframes anim-slide-left {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.animation-slide-left .freestyle-popup-content {
    animation: anim-slide-left 0.4s ease;
}

@keyframes anim-newspaper {
    from {
        opacity: 0;
        transform: scale(0) rotate(720deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.animation-newspaper .freestyle-popup-content {
    animation: anim-newspaper 0.7s ease;
}

@keyframes anim-bounce {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.animation-bounce .freestyle-popup-content {
    animation: anim-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes anim-flip-horizontal {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateY(-90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
}

.animation-flip-horizontal .freestyle-popup-content {
    animation: anim-flip-horizontal 0.6s ease;
}

@keyframes anim-flip-vertical {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateX(-90deg);
    }
    to {
        opacity: 1;
        transform: perspective(1000px) rotateX(0deg);
    }
}

.animation-flip-vertical .freestyle-popup-content {
    animation: anim-flip-vertical 0.6s ease;
}

@keyframes anim-rotate-in {
    from {
        opacity: 0;
        transform: rotate(-360deg) scale(0);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.animation-rotate-in .freestyle-popup-content {
    animation: anim-rotate-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes anim-elastic {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    55% {
        opacity: 1;
        transform: scale(1.2);
    }
    75% {
        transform: scale(0.85);
    }
    90% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.animation-elastic .freestyle-popup-content {
    animation: anim-elastic 0.9s ease-out;
}

@keyframes anim-swing {
    0% {
        opacity: 0;
        transform: rotate(-10deg) scale(0.8);
    }
    50% {
        transform: rotate(5deg) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.animation-swing .freestyle-popup-content {
    animation: anim-swing 0.7s ease;
}

@keyframes anim-blur {
    from {
        opacity: 0;
        filter: blur(20px);
    }
    to {
        opacity: 1;
        filter: blur(0px);
    }
}

.animation-blur .freestyle-popup-content {
    animation: anim-blur 0.5s ease;
}

@keyframes anim-glow {
    0% {
        opacity: 0;
        box-shadow: 0 0 0 rgba(0, 115, 170, 0);
        transform: scale(0.8);
    }
    50% {
        box-shadow: 0 0 60px rgba(0, 115, 170, 0.8);
    }
    100% {
        opacity: 1;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        transform: scale(1);
    }
}

.animation-glow .freestyle-popup-content {
    animation: anim-glow 0.6s ease;
}

@keyframes anim-jello {
    0%, 100% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
}

.animation-jello .freestyle-popup-content {
    animation: anim-jello 0.9s ease;
}

@keyframes anim-rubber {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

.animation-rubber .freestyle-popup-content {
    animation: anim-rubber 0.8s ease;
}

@keyframes anim-slingshot {
    0%   { opacity: 0; transform: scale(3) translateY(-60px); }
    60%  { opacity: 1; transform: scale(0.9) translateY(5px); }
    80%  { transform: scale(1.05) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.animation-slingshot .freestyle-popup-content {
    animation: anim-slingshot 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes anim-drop {
    0%   { opacity: 0; transform: translateY(-120%) scaleY(0.8); }
    60%  { opacity: 1; transform: translateY(8%) scaleY(1.05); }
    80%  { transform: translateY(-3%) scaleY(0.98); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

.animation-drop .freestyle-popup-content {
    animation: anim-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes anim-roll {
    0%   { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

.animation-roll .freestyle-popup-content {
    animation: anim-roll 0.6s ease-out;
}

@keyframes anim-swoosh {
    0%   { opacity: 0; transform: translate(40px, 40px) rotate(6deg) scale(0.85); }
    60%  { opacity: 1; transform: translate(-4px, -4px) rotate(-1deg) scale(1.02); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

.animation-swoosh .freestyle-popup-content {
    animation: anim-swoosh 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes anim-unfold {
    0%   { opacity: 0; transform: scaleY(0) rotateX(60deg); transform-origin: top center; }
    60%  { opacity: 1; transform: scaleY(1.04) rotateX(-3deg); transform-origin: top center; }
    100% { opacity: 1; transform: scaleY(1) rotateX(0deg); transform-origin: top center; }
}

.animation-unfold .freestyle-popup-content {
    animation: anim-unfold 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    perspective: 800px;
}

@keyframes anim-tilt {
    0%   { opacity: 0; transform: perspective(600px) rotateX(40deg) scale(0.85); }
    70%  { opacity: 1; transform: perspective(600px) rotateX(-4deg) scale(1.02); }
    100% { opacity: 1; transform: perspective(600px) rotateX(0deg) scale(1); }
}

.animation-tilt .freestyle-popup-content {
    animation: anim-tilt 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes close-fade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.is-closing.close-fade .freestyle-popup-content {
    animation: close-fade 0.3s ease forwards;
}

@keyframes close-zoom {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.6); }
}

.is-closing.close-zoom .freestyle-popup-content {
    animation: close-zoom 0.3s ease forwards;
}

@keyframes close-slide-up {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-80px); }
}

.is-closing.close-slide-up .freestyle-popup-content {
    animation: close-slide-up 0.35s ease forwards;
}

@keyframes close-slide-down {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(80px); }
}

.is-closing.close-slide-down .freestyle-popup-content {
    animation: close-slide-down 0.35s ease forwards;
}

@keyframes close-slide-left {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(-120px); }
}

.is-closing.close-slide-left .freestyle-popup-content {
    animation: close-slide-left 0.35s ease forwards;
}

@keyframes close-slide-right {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(120px); }
}

.is-closing.close-slide-right .freestyle-popup-content {
    animation: close-slide-right 0.35s ease forwards;
}

@keyframes close-flip-h {
    0%   { opacity: 1; transform: perspective(1000px) rotateY(0deg); }
    100% { opacity: 0; transform: perspective(1000px) rotateY(90deg); }
}

.is-closing.close-flip-h .freestyle-popup-content {
    animation: close-flip-h 0.45s ease forwards;
}

@keyframes close-flip-v {
    0%   { opacity: 1; transform: perspective(1000px) rotateX(0deg); }
    100% { opacity: 0; transform: perspective(1000px) rotateX(90deg); }
}

.is-closing.close-flip-v .freestyle-popup-content {
    animation: close-flip-v 0.45s ease forwards;
}

@keyframes close-rotate {
    0%   { opacity: 1; transform: rotate(0deg) scale(1); }
    100% { opacity: 0; transform: rotate(180deg) scale(0); }
}

.is-closing.close-rotate .freestyle-popup-content {
    animation: close-rotate 0.5s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes close-bounce {
    0%   { transform: scale(1); opacity: 1; }
    20%  { transform: scale(1.1); }
    100% { transform: scale(0); opacity: 0; }
}

.is-closing.close-bounce .freestyle-popup-content {
    animation: close-bounce 0.45s ease forwards;
}

@keyframes close-fold {
    0%   { opacity: 1; transform: scaleY(1) rotateX(0deg); transform-origin: top center; }
    100% { opacity: 0; transform: scaleY(0) rotateX(-60deg); transform-origin: top center; }
}

.is-closing.close-fold .freestyle-popup-content {
    animation: close-fold 0.4s ease forwards;
    perspective: 800px;
}

@keyframes close-slingshot {
    0%   { opacity: 1; transform: scale(1); }
    30%  { transform: scale(1.1); }
    100% { opacity: 0; transform: scale(0.1) translateY(80px); }
}

.is-closing.close-slingshot .freestyle-popup-content {
    animation: close-slingshot 0.4s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes close-drop {
    0%   { opacity: 1; transform: translateY(0) scaleY(1); }
    20%  { transform: translateY(-10px) scaleY(1.03); }
    100% { opacity: 0; transform: translateY(120%) scaleY(0.8); }
}

.is-closing.close-drop .freestyle-popup-content {
    animation: close-drop 0.45s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes close-blur {
    0%   { opacity: 1; filter: blur(0px); transform: scale(1); }
    100% { opacity: 0; filter: blur(20px); transform: scale(1.1); }
}

.is-closing.close-blur .freestyle-popup-content {
    animation: close-blur 0.4s ease forwards;
}

@keyframes close-newspaper {
    0%   { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(0) rotate(-720deg); }
}

.is-closing.close-newspaper .freestyle-popup-content {
    animation: close-newspaper 0.6s ease forwards;
}

.freestyle-popup-overlay.is-closing {
    animation: close-fade 0.45s ease forwards;
}

.freestyle-popup-overlay.is-closing.no-overlay {
    animation: none;
}