/* =========================================================
   NEXPELL Motion Engine
   File: animations.css
   ========================================================= */

:root {
    --nx-duration-fast: 0.25s;
    --nx-duration-normal: 0.5s;
    --nx-duration-slow: 0.9s;

    --nx-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --nx-distance-sm: 12px;
    --nx-distance-md: 24px;
    --nx-distance-lg: 40px;

    --nx-scale-sm: 0.96;
    --nx-scale-md: 0.92;
}

/* =========================================================
   BASE
   ========================================================= */

.nx-animate {
    opacity: 0;
    transition:
        opacity var(--nx-duration-normal) var(--nx-ease),
        transform var(--nx-duration-normal) var(--nx-ease);
    will-change: opacity, transform;
}

.nx-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* =========================================================
   SPEED
   ========================================================= */

.nx-speed-fast {
    transition-duration: var(--nx-duration-fast) !important;
}

.nx-speed-normal {
    transition-duration: var(--nx-duration-normal) !important;
}

.nx-speed-slow {
    transition-duration: var(--nx-duration-slow) !important;
}

/* =========================================================
   FADE
   ========================================================= */

.nx-fade {
    opacity: 0;
}

.nx-fade.nx-visible {
    opacity: 1;
}

/* =========================================================
   SLIDE
   ========================================================= */

.nx-slide-up {
    transform: translateY(var(--nx-distance-md));
}

.nx-slide-down {
    transform: translateY(calc(var(--nx-distance-md) * -1));
}

.nx-slide-left {
    transform: translateX(var(--nx-distance-md));
}

.nx-slide-right {
    transform: translateX(calc(var(--nx-distance-md) * -1));
}

/* =========================================================
   ZOOM
   ========================================================= */

.nx-zoom-in {
    transform: scale(var(--nx-scale-sm));
}

.nx-zoom-out {
    transform: scale(1.08);
}

/* =========================================================
   ROTATE
   ========================================================= */

.nx-rotate-left {
    transform: rotate(-4deg);
}

.nx-rotate-right {
    transform: rotate(4deg);
}

/* =========================================================
   BLUR
   ========================================================= */

.nx-blur {
    filter: blur(8px);
    transition:
        opacity var(--nx-duration-normal) var(--nx-ease),
        transform var(--nx-duration-normal) var(--nx-ease),
        filter var(--nx-duration-normal) var(--nx-ease);
}

.nx-blur.nx-visible {
    filter: blur(0);
}

/* =========================================================
   STAGGER
   ========================================================= */

.nx-delay-1 {
    transition-delay: 0.1s;
}

.nx-delay-2 {
    transition-delay: 0.2s;
}

.nx-delay-3 {
    transition-delay: 0.3s;
}

.nx-delay-4 {
    transition-delay: 0.4s;
}

.nx-delay-5 {
    transition-delay: 0.5s;
}

.nx-delay-6 {
    transition-delay: 0.6s;
}

/* =========================================================
   HOVER EFFECTS
   ========================================================= */

.nx-hover-lift {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.nx-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18);
}

.nx-hover-scale {
    transition: transform 0.25s ease;
}

.nx-hover-scale:hover {
    transform: scale(1.04);
}

.nx-hover-glow {
    transition:
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.nx-hover-glow:hover {
    box-shadow:
        0 0 20px rgba(255, 136, 0, 0.35);
}

/* =========================================================
   SOFT BOUNCE
   ========================================================= */

@keyframes nxSoftBounce {

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

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

.nx-bounce-soft {
    animation: nxSoftBounce 2.5s infinite ease-in-out;
}

/* =========================================================
   FLOAT
   ========================================================= */

@keyframes nxFloat {

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

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

.nx-float {
    animation: nxFloat 4s ease-in-out infinite;
}

/* =========================================================
   PULSE
   ========================================================= */

@keyframes nxPulse {

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

    50% {
        transform: scale(1.03);
    }
}

.nx-pulse {
    animation: nxPulse 2.5s infinite ease-in-out;
}

/* =========================================================
   TEXT REVEAL
   ========================================================= */

.nx-text-reveal {
    overflow: hidden;
}

.nx-text-reveal > * {
    transform: translateY(100%);
    transition:
        transform 0.8s var(--nx-ease);
}

.nx-text-reveal.nx-visible > * {
    transform: translateY(0);
}

/* =========================================================
   NAVBAR
   ========================================================= */

.nx-navbar-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nx-navbar-scrolled {
    background: rgba(15, 15, 15, 0.92);
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   DROPDOWN
   ========================================================= */

.nx-dropdown-animate {
    transform-origin: top center;
    animation: nxDropdown 0.22s ease;
}

@keyframes nxDropdown {
    from {
        opacity: 0;
        transform: scaleY(0.92) translateY(-6px);
    }

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

/* =========================================================
   MOBILE OPTIMIZATION
   ========================================================= */

/* Builder: Grid/Layout nicht verstecken, Animation nur in der Vorschau sichtbar lassen */
body.builder-active .nx-animate {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

@media (prefers-reduced-motion: reduce) {

    .nx-animate,
    .nx-hover-lift,
    .nx-hover-scale,
    .nx-hover-glow,
    .nx-bounce-soft,
    .nx-float,
    .nx-pulse {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}