/* Custom Animations */

/* 3D Hover Effect */
.3d-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.3d-hover:hover { transform: translateY(-10px) rotateX(2deg) rotateY(2deg); box-shadow: 0 15px 30px rgba(0,0,0,0.5); }

/* Ripple Effect for Buttons */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px;
    background: rgba(255,255,255,0.5); opacity: 0; border-radius: 100%;
    transform: scale(1, 1) translate(-50%, -50%); transform-origin: 50% 50%;
}
@keyframes ripple {
    0% { transform: scale(0, 0); opacity: 0.5; }
    100% { transform: scale(40, 40); opacity: 0; }
}
.ripple:focus:not(:active)::after { animation: ripple 1s ease-out; }

/* Typing Effect Cursor */
.typing-text::after {
    content: '|'; animation: blink 1s step-end infinite; color: var(--primary);
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Particles */
.particle { position: absolute; background: var(--primary); border-radius: 50%; opacity: 0.2; pointer-events: none; }