/* ========================================
   Micro-interactions for Process Step Cards
   Subtle, refined, premium feel
   ======================================== */

/* --- Breathing / Pulse Animation --- */
@keyframes breathing {
    0%, 100% {
        scale: 1;
        opacity: 1;
    }
    50% {
        scale: 1.02;
        opacity: 0.97;
    }
}

/* --- Floating Animation (separate transform property for composability) --- */
@keyframes float-y {
    0%, 100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -3px;
    }
}

/* --- Light Sweep Effect --- */
@keyframes light-sweep {
    from {
        left: -100%;
    }
    to {
        left: 200%;
    }
}

/* --- Step Card Base --- */
.step-card {
    position: relative;
    overflow: hidden;
    animation: breathing 2.5s ease-in-out infinite, float-y 3s ease-in-out infinite;
}

.step-card:nth-child(1) {
    animation-delay: 0s, 0s;
}
.step-card:nth-child(2) {
    animation-delay: 0.8s, 1.2s;
}
.step-card:nth-child(3) {
    animation-delay: 1.6s, 0.6s;
}

/* Light sweep pseudo-element */
.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.06),
        rgba(84, 81, 227, 0.04),
        transparent
    );
    transform: skewX(-15deg);
    z-index: 1;
    pointer-events: none;
}

.step-card:hover::before {
    animation: light-sweep 0.6s ease-out forwards;
}

/* --- Particle Ripple --- */
@keyframes particle-ripple {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0);
        opacity: 0;
    }
}

.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    animation: particle-ripple 0.4s ease-out forwards;
}

/* --- Hover lift enhancement --- */
.step-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
    box-shadow: 0 10px 40px -10px rgba(84, 81, 227, 0.25);
}

/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .step-card,
    .step-card::before,
    .particle {
        animation: none !important;
    }
    .step-card:hover {
        transform: none;
    }
}