.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Background Scrolling Effect */
@keyframes scrollBg {
    0% { background-position: 0 0; }
    100% { background-position: 64px 64px; }
}

.hero-pattern {
    background-image: radial-gradient(#2563eb25 2px, transparent 2px);
    background-size: 32px 32px;
    animation: scrollBg 3s linear infinite;
}

/* 3D Tilt Parallax Effect */
.tilt-container {
    perspective: 1000px;
    display: inline-block;
}

.tilt-card {
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.tilt-card.smooth-reset {
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
}

/* Fallback simple hover for touch devices */
@media (hover: none) {
    .tilt-container:active .tilt-card {
        transform: scale(0.98);
    }
}

/* Typewriter Cursor Blink */
#typewriter {
    transition: all 0.1s ease;
}

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: #004ac6 } /* Primary blue color */
}

#typewriter {
    animation: blink 0.8s step-end infinite;
}

/* Scroll Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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