/* 
 * VeZetaeLeA OS — Delight & Micro-interactions
 * Focused on generating "Dopamine Hits" for the user.
 */

@keyframes vzl-success-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vzl-color-success, #10B981) 40%, transparent); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 15px color-mix(in srgb, var(--vzl-color-success, #10B981) 0%, transparent); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vzl-color-success, #10B981) 0%, transparent); }
}

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

@keyframes vzl-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.vzl-animate-success {
    animation: vzl-success-pulse 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Hover Delight for Cards */
.vzl-card-delight {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vzl-card-delight:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--vzl-primary) !important;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--vzl-primary) 15%, transparent) !important;
}

/* Success Checkmark Animation */
.vzl-checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--vzl-color-success, #10B981);
    fill: none;
    animation: vzl-stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes vzl-stroke {
    100% { stroke-dashoffset: 0; }
}

/* Chrome-like loading bar for specific actions */
.vzl-loading-bar {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--vzl-primary), var(--vzl-secondary), var(--vzl-primary));
    background-size: 200% auto;
    animation: vzl-border-flow 2s linear infinite;
}

/* Reveal Animation for Headers */
.vzl-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.vzl-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@keyframes vzl-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.vzl-animate-reveal {
    animation: vzl-fade-in-up 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* Kinetic Gradient Flow */
@keyframes vzl-physi-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}