.header-blur {
    backdrop-filter: blur(5px);
    background-color: rgba(51, 51, 51, 0.8);
}

.blur-effect {
    backdrop-filter: blur(5px);
    background-color: rgba(51, 51, 51, 0.8);
}

.background-blur {
    filter: blur(10px) brightness(0.7);
    transition: filter 0.3s ease-in-out;
}

.content-fade {
    opacity: 0;
}

.main-nav a,
.hero-button,
.back-button {
    position: relative;
    overflow: hidden;
}

.main-nav a::before,
.hero-button::before,
.back-button::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--highlight-color) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    transform: translate(-50%, -50%);
}

.main-nav a:hover::before,
.hero-button:hover::before,
.back-button:hover::before {
    opacity: 1;
}

.back-button:hover,
.project-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Transition Styles */
header,
footer,
nav ul li a,
button {
    transition: background-color 0.3s ease, color 0.3s ease;
}

input,
textarea {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.back-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    color: var(--button-text);
    background-color: var(--button-bg);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 2rem;
}