.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.brutal-border { border: 4px solid #1c1c17; }
.neo-shadow { box-shadow: 8px 8px 0 0 #1c1c17; }
.neo-shadow-sm { box-shadow: 4px 4px 0 0 #1c1c17; }
.neo-shadow-lg { box-shadow: 12px 12px 0 0 #1c1c17; }

.card-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-lift:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 0 #1c1c17;
}

.btn-brutal:active {
    transform: translate(4px, 4px);
    box-shadow: none;
}

.active-nav {
    border-bottom: 4px solid #b72301;
    color: #b72301;
}

.form-input:focus {
    outline: none;
    box-shadow: 4px 4px 0 0 #2e5bff;
}

.hero-pattern {
    background-image: radial-gradient(#1c1c17 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    opacity: 0.1;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.animate-marquee {
    display: inline-block;
    animation: marquee 30s linear infinite;
}

input::placeholder,
textarea::placeholder {
    color: #8f7069;
}

.portfolio-card.is-hidden {
    display: none;
}

/* Портфолио: desktop — hover, mobile — фокус по центру экрана */
.portfolio-img {
    transition:
        filter 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: filter, transform;
}

@media (min-width: 768px) {
    .portfolio-img {
        filter: grayscale(1) saturate(0.85);
    }

    .group:hover .portfolio-img {
        filter: grayscale(0) saturate(1.05);
    }
}

@media (max-width: 767px) {
    .portfolio-img-wrap {
        overflow: hidden;
    }

    .portfolio-img {
        filter: grayscale(1) saturate(0.75) brightness(0.97);
        transform: scale(1);
    }

    .portfolio-img.is-centered {
        filter: grayscale(0) saturate(1.12) brightness(1.02) contrast(1.03);
        transform: scale(1.015);
    }

    .portfolio-card article {
        transition:
            box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .portfolio-card.is-focused article {
        transform: translate(-2px, -2px);
        box-shadow: 10px 10px 0 0 #b72301;
    }

    .portfolio-card.is-focused .material-symbols-outlined {
        color: #b72301;
        transition: color 0.45s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-img,
    .portfolio-card article {
        transition-duration: 0.01ms;
    }
}