/**
 * MCP AI Builder — Frontend Animations
 * Provides scroll-triggered animations for all AI-generated content.
 */

/* ── Base: hide all animatable elements until observed ──────────────────────── */

.mcp-anim {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-duration: 0.7s;
}

/* ── Pre-animation states ─────────────────────────────────────────────────────*/

[data-anim="fade-up"]    { transform: translateY(40px); }
[data-anim="fade-down"]  { transform: translateY(-40px); }
[data-anim="fade-left"]  { transform: translateX(50px); }
[data-anim="fade-right"] { transform: translateX(-50px); }
[data-anim="fade-in"]    { transform: none; }
[data-anim="zoom-in"]    { transform: scale(0.88); }
[data-anim="zoom-out"]   { transform: scale(1.12); }
[data-anim="flip-x"]     { transform: rotateX(20deg) translateY(30px); perspective: 600px; }
[data-anim="flip-y"]     { transform: rotateY(20deg) translateX(30px); perspective: 600px; }

/* ── Visible (animated-in) state ─────────────────────────────────────────────*/

.mcp-anim.is-visible {
    opacity: 1;
    transform: none;
}

/* ── Hover lift for cards and buttons ─────────────────────────────────────────*/

.mcp-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Count-up numbers: pulse when first counted ───────────────────────────────*/

.mcp-count-up.counting {
    animation: mcp-pulse-num 0.15s ease;
}

@keyframes mcp-pulse-num {
    0%   { transform: scale(1.0); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1.0); }
}

/* ── Section entry: decorative gradient line on top of each animated section ──*/

.elementor-section.mcp-section-entered .elementor-container {
    position: relative;
}

/* ── Loading spinner (editor) ─────────────────────────────────────────────────*/

@keyframes mcp-spin {
    to { transform: rotate(360deg); }
}

/* ── Gradient text utility (applied via inline HTML) ─────────────────────────*/

.mcp-grad-text {
    background: linear-gradient(135deg, var(--mcp-primary, #6e48f7), var(--mcp-accent, #e94560));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Glassmorphism card utility ───────────────────────────────────────────────*/

.mcp-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

/* ── Animated gradient background (hero sections) ────────────────────────────*/

.mcp-bg-animated {
    background-size: 400% 400%;
    animation: mcp-gradient-shift 8s ease infinite;
}

@keyframes mcp-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Floating elements (hero decoration) ─────────────────────────────────────*/

.mcp-float {
    animation: mcp-float 6s ease-in-out infinite;
}

@keyframes mcp-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-16px); }
    100% { transform: translateY(0); }
}

/* ── Shimmer skeleton (while page loads) ─────────────────────────────────────*/

.mcp-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: mcp-shimmer 1.5s infinite;
    border-radius: 8px;
}

@keyframes mcp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Typewriter cursor ────────────────────────────────────────────────────────*/

.mcp-typewriter::after {
    content: '|';
    animation: mcp-cursor 1s step-end infinite;
}

@keyframes mcp-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Number badge bounce ──────────────────────────────────────────────────────*/

@keyframes mcp-bounce-in {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.mcp-badge-anim {
    animation: mcp-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Stagger children inside a visible parent ─────────────────────────────────*/

.mcp-stagger-parent.is-visible > * {
    opacity: 0;
    animation: mcp-stagger-child 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mcp-stagger-parent.is-visible > *:nth-child(1) { animation-delay: 0ms; }
.mcp-stagger-parent.is-visible > *:nth-child(2) { animation-delay: 80ms; }
.mcp-stagger-parent.is-visible > *:nth-child(3) { animation-delay: 160ms; }
.mcp-stagger-parent.is-visible > *:nth-child(4) { animation-delay: 240ms; }
.mcp-stagger-parent.is-visible > *:nth-child(5) { animation-delay: 320ms; }
.mcp-stagger-parent.is-visible > *:nth-child(6) { animation-delay: 400ms; }

@keyframes mcp-stagger-child {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* ── Parallax container (JS drives transform) ─────────────────────────────────*/

.mcp-parallax {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ── Responsive: disable heavy animations on mobile ──────────────────────────*/

@media (prefers-reduced-motion: reduce) {
    .mcp-anim, .mcp-float, .mcp-bg-animated {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    [data-anim="fade-left"],
    [data-anim="fade-right"] {
        transform: translateY(30px);
    }
}