/* ========================================================= */
/* Denke: Überarbeitete Stil-Definitionen für Unique Design */
/* ========================================================= */

/* Mobile Menu Animation */
.mobile-menu {
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.mobile-menu.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

/* Header Scroll Effect (New Class) */
#main-header.header-scrolled {
    background-color: var(--color3) !important;
    /* Новый, более мягкий Shadow */
    box-shadow: 0 2px 10px rgba(29, 53, 87, 0.1); 
}

/* Reveal Animation */
.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);
}

/* Glitch Grid Styling */
.glitch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr;
    gap: 1.5rem;
}

.glitch-item-4 { 
    grid-column: 1 / 4; 
    min-height: 400px;
    overflow: hidden;
    border-radius: 1.5rem; 
    box-shadow: 0 10px 30px rgba(20, 33, 61, 0.4); 
}

/* Footer Grid (New Structure) */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* 3 колонки: Большая, Средняя, Средняя */
    gap: 3rem;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Decoration Shape (Deco-shape class) */
.deco-shape {
    position: absolute;
    z-index: 10;
}

/* Toast Notification */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 300;
}

.toast {
    padding: 15px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s, transform 0.4s, visibility 0.4s;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}