.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;
}

.hero-display,
.site-logo {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.hero-display {
    line-height: 0.95;
    color: #1c1c17;
}

.site-logo {
    line-height: 1;
    letter-spacing: -0.02em;
    color: inherit;
}

.hero-display.text-headline-md,
.site-logo.text-headline-md {
    font-weight: 700 !important;
    font-family: 'Playfair Display', serif !important;
}

.font-button,
.text-button,
.btn-brutal.font-button,
a.font-button,
button.font-button {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
}

.hero-display > span,
.hero-display .neo-badge {
    font-family: inherit !important;
    font-weight: inherit;
    letter-spacing: inherit;
}

.hero-display .neo-badge {
    letter-spacing: -0.02em;
    line-height: 1;
    vertical-align: baseline;
}

@media (min-width: 768px) {
    .hero-display {
        letter-spacing: -0.025em;
        line-height: 0.98;
    }
}

@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;
}

.legal-bar {
    width: 100%;
}

.legal-bar a {
    text-decoration: none;
}

.legal-bar a:hover {
    color: #b72301;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.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;
    }

    .neo-animate,
    .neo-enter,
    .neo-header,
    .neo-float,
    .neo-badge,
    .neo-mail-badge {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Neo-brutal motion ── */
@keyframes neo-header-drop {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes neo-enter {
    from { opacity: 0; transform: translate(28px, 28px); }
    to { opacity: 1; transform: translate(0, 0); }
}

@keyframes neo-float {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-14px); }
}

@keyframes neo-badge-pop {
    0% { opacity: 0; transform: scale(0.88) rotate(-4deg); }
    65% { transform: scale(1.03) rotate(0deg); }
    100% { opacity: 1; transform: scale(1) rotate(-1deg); }
}

@keyframes neo-mail-wiggle {
    0%, 100% { transform: rotate(12deg); }
    50% { transform: rotate(8deg) scale(1.05); }
}

@keyframes neo-line-grow {
    from { transform: scaleY(0); transform-origin: top; }
    to { transform: scaleY(1); transform-origin: top; }
}

.neo-header {
    animation: neo-header-drop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.neo-enter {
    opacity: 0;
    animation: neo-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--neo-delay, 0ms);
}

.neo-float {
    animation: neo-float 5s ease-in-out infinite;
}

.neo-badge {
    opacity: 0;
    animation: neo-badge-pop 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    animation-delay: var(--neo-delay, 280ms);
}

.neo-mail-badge {
    animation: neo-mail-wiggle 3s ease-in-out infinite;
}

.neo-accent-line {
    transform: scaleY(0);
    animation: neo-line-grow 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--neo-delay, 200ms);
}

.neo-animate {
    opacity: 0;
    transform: translate(20px, 20px);
    transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--neo-delay, 0ms);
}

.neo-animate.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

.neo-tilt-left.neo-animate {
    transform: translate(24px, 24px) rotate(4deg);
}

.neo-tilt-left.neo-animate.is-visible {
    transform: translate(0, 0) rotate(1deg);
}

.neo-tilt-right.neo-animate {
    transform: translate(24px, 24px) rotate(-4deg);
}

.neo-tilt-right.neo-animate.is-visible {
    transform: translate(0, 0) rotate(-1deg);
}

.neo-animate.is-visible.card-lift:hover {
    transform: translate(-4px, -4px);
}

@media (prefers-reduced-motion: no-preference) {
    .neo-form-field {
        opacity: 0;
        transform: translateX(-16px);
        transition:
            opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: var(--neo-delay, 0ms);
    }

    .neo-form-field.is-visible {
        opacity: 1;
        transform: translateX(0);
    }
}