/**
 * Ghostly Labs Animations CSS
 * Phantom Realty Engine - Keyframes & Animation Effects
 * 
 * Animation definitions, keyframes, and transition effects.
 * Depends on variables for timing and easing.
 * 
 * @package PhantomRealtyEngine
 * @subpackage CSS-Animations
 * @version 2.0.0
 * @order 06
 * @depends 01-variables.css
 * @brand Ghostly Labs - Enterprise Real Estate Solutions
 */

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

@keyframes pre-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes pre-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes pre-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

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

@keyframes pre-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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

@keyframes pre-scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

@keyframes pre-spin {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes pre-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes pre-bounce {

    0%,
    20%,
    53%,
    80%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        transform: translate3d(0, -30px, 0);
    }

    70% {
        transform: translate3d(0, -15px, 0);
    }

    90% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes pre-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(58, 178, 74, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(58, 178, 74, 0.6);
    }
}

@keyframes pre-float {

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

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

/* ================================
   ANIMATION UTILITY CLASSES
   ================================ */

.pre-fade-in {
    animation: pre-fade-in 0.5s var(--pre-ease-out) forwards;
}

.pre-fade-out {
    animation: pre-fade-out 0.3s var(--pre-ease-in) forwards;
}

.pre-slide-in-left {
    animation: pre-slide-in-left 0.5s var(--pre-ease-out) forwards;
}

.pre-slide-in-right {
    animation: pre-slide-in-right 0.5s var(--pre-ease-out) forwards;
}

.pre-scale-in {
    animation: pre-scale-in 0.3s var(--pre-ease-out) forwards;
}

.pre-spin {
    animation: pre-spin 1s linear infinite;
}

.pre-pulse {
    animation: pre-pulse 2s var(--pre-ease-in-out) infinite;
}

.pre-bounce {
    animation: pre-bounce 1s ease infinite;
}

.pre-glow {
    animation: pre-glow 2s ease-in-out infinite;
}

.pre-float {
    animation: pre-float 3s ease-in-out infinite;
}

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

.pre-hover-lift {
    transition: var(--pre-transition);
}

.pre-hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--pre-shadow-lg);
}

.pre-hover-scale {
    transition: var(--pre-transition);
}

.pre-hover-scale:hover {
    transform: scale(1.05);
}

.pre-hover-glow {
    transition: var(--pre-transition);
}

.pre-hover-glow:hover {
    box-shadow: var(--pre-glow);
}

.pre-hover-rotate {
    transition: var(--pre-transition);
}

.pre-hover-rotate:hover {
    transform: rotate(5deg);
}

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

.pre-skeleton {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    background-size: 200% 100%;
    animation: pre-skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes pre-skeleton-loading {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.pre-progress-bar {
    position: relative;
    background: var(--pre-glass);
    border-radius: var(--pre-radius-full);
    overflow: hidden;
    height: 8px;
}

.pre-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pre-green), var(--pre-green-light));
    border-radius: var(--pre-radius-full);
    transition: width 0.3s ease;
}

.pre-progress-indeterminate .pre-progress-fill {
    width: 30%;
    animation: pre-progress-indeterminate 2s ease-in-out infinite;
}

@keyframes pre-progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

/* ================================
   TRANSITION UTILITIES
   ================================ */

.pre-transition-none {
    transition: none;
}

.pre-transition-all {
    transition: all var(--pre-transition);
}

.pre-transition-colors {
    transition: color var(--pre-transition), background-color var(--pre-transition), border-color var(--pre-transition);
}

.pre-transition-opacity {
    transition: opacity var(--pre-transition);
}

.pre-transition-shadow {
    transition: box-shadow var(--pre-transition);
}

.pre-transition-transform {
    transition: transform var(--pre-transition);
}

/* Animation Delays */
.pre-delay-75 {
    animation-delay: 75ms;
}

.pre-delay-100 {
    animation-delay: 100ms;
}

.pre-delay-150 {
    animation-delay: 150ms;
}

.pre-delay-200 {
    animation-delay: 200ms;
}

.pre-delay-300 {
    animation-delay: 300ms;
}

.pre-delay-500 {
    animation-delay: 500ms;
}

.pre-delay-700 {
    animation-delay: 700ms;
}

.pre-delay-1000 {
    animation-delay: 1000ms;
}

/* Animation Durations */
.pre-duration-75 {
    animation-duration: 75ms;
}

.pre-duration-100 {
    animation-duration: 100ms;
}

.pre-duration-150 {
    animation-duration: 150ms;
}

.pre-duration-200 {
    animation-duration: 200ms;
}

.pre-duration-300 {
    animation-duration: 300ms;
}

.pre-duration-500 {
    animation-duration: 500ms;
}

.pre-duration-700 {
    animation-duration: 700ms;
}

.pre-duration-1000 {
    animation-duration: 1000ms;
}

/* ================================
   PHANTOM SPECIFIC ANIMATIONS
   ================================ */

@keyframes pre-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(58, 178, 74, 0.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(58, 178, 74, 0.4);
    }
}

@keyframes pre-spin {
    0% {
        transform: rotate(0deg);
    }

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

/* Animation Classes */
.pre-loading {
    animation: pre-glow 2s infinite ease-in-out;
}

body[class*='pre-realty'] .fa-spinner.fa-spin {
    animation: pre-spin 1s linear infinite;
}