/* =========================================================
   ANIMATIONS & TRANSITIONS
   Frontend Design Ecosystem
========================================================= */

/* =========================================================
   CARD HOVER POLISH
========================================================= */

.card {
    transition: 
        transform var(--transition-normal) cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow var(--transition-normal) cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color var(--transition-fast),
        background var(--transition-normal);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 
        var(--shadow-md), 
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.feature-card {
    position: relative;
    overflow: hidden;
}

/* Subtle glow effect on hover for feature cards */
.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--color-primary-soft);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

.feature-card:hover::after {
    opacity: 1;
}

/* =========================================================
   BUTTON TRANSITIONS
========================================================= */

.btn {
    transition: 
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px var(--color-primary-soft);
}

.icon-btn {
    transition: 
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.icon-btn:active {
    transform: scale(0.95);
}

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

.mockup-window {
    animation: mockupFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transform: translateY(10px);
    opacity: 0;
}

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

.mockup-nav-item {
    transition: 
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.mockup-nav-item:hover:not(.active) {
    background: rgba(128, 128, 128, 0.05);
}

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

.workflow-step {
    transition: transform var(--transition-normal);
}

.workflow-step:hover {
    transform: translateY(-4px);
}

.workflow-step:hover .step-number {
    box-shadow: 
        0 0 0 8px var(--surface-primary),
        inset 0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 12px var(--color-primary-soft);
}

.step-number {
    transition: box-shadow var(--transition-normal);
}