:root {
    --color-primary: #00FFC2;
    --color-secondary: #FF5733;
    --color-background-dark: #0D0D0D;
    --color-text-light: #F0F0F0;
}

.reveal-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-element.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.split-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6) grayscale(0.2);
}

.overlapping-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    z-index: 10;
}
.overlapping-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 4px solid var(--color-secondary);
    z-index: 5;
    border-radius: 0.5rem;
}

#mobile-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}
#mobile-menu.is-active {
    transform: translateX(0);
}