/**
 * Этап 2–4: бренд, меню, 3D-кнопки, стекло, главная «кинематографичная».
 */

/* --- Бренд в шапке --- */
.app-topbar__brand {
    transition: transform 0.25s ease;
}

.app-topbar__brand:hover {
    transform: translateY(-1px);
}

.app-topbar__logo-img {
    display: block;
    height: 2.65rem;
    width: auto;
    max-width: min(11rem, 42vw);
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(0 2px 10px rgba(0, 20, 50, 0.45));
    animation: brand-logo-glow 3.5s ease-in-out infinite;
}

@keyframes brand-logo-glow {
    0%, 100% {
        filter: drop-shadow(0 2px 10px rgba(0, 20, 50, 0.4));
    }
    50% {
        filter: drop-shadow(0 4px 16px rgba(38, 193, 207, 0.45));
    }
}

/* --- Нижнее меню: свечение активного --- */
.app-nav__item--active {
    color: #b8f8ff;
    background: rgba(125, 240, 255, 0.16);
    box-shadow:
        0 0 0 1px rgba(125, 240, 255, 0.35),
        0 0 18px rgba(125, 240, 255, 0.35),
        0 4px 12px rgba(0, 20, 40, 0.25);
    animation: nav-active-glow 2.4s ease-in-out infinite;
}

.app-nav__item--active svg {
    filter: drop-shadow(0 0 6px rgba(125, 240, 255, 0.65));
}

@keyframes nav-active-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(125, 240, 255, 0.3),
            0 0 14px rgba(125, 240, 255, 0.28);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(125, 240, 255, 0.55),
            0 0 22px rgba(125, 240, 255, 0.5);
    }
}

/* --- 3D кнопки --- */
.btn-primary,
.btn-glass:not(.app-topbar__logout),
.btn-amt69 {
    transform: translateY(0);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.btn-primary {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 4px 0 rgba(13, 126, 168, 0.55),
        0 8px 20px rgba(0, 40, 80, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 6px 0 rgba(13, 126, 168, 0.5),
        0 12px 28px rgba(125, 240, 255, 0.25);
}

.btn-primary:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 1px 0 rgba(13, 126, 168, 0.4),
        0 4px 10px rgba(0, 40, 80, 0.2);
}

.btn-glass:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 6px 16px rgba(0, 0, 0, 0.22);
}

/* --- Стеклянные панели: блик и глубина --- */
.app-body .glass:not(.app-topbar):not(.app-nav):not(.home-cinema),
[data-tilt] {
    position: relative;
    overflow: hidden;
}

.home-cinema--dark {
    overflow: visible;
}

.app-body .glass:not(.app-topbar):not(.app-nav)::before,
[data-tilt]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.14) 0%,
        transparent 42%,
        transparent 58%,
        rgba(125, 240, 255, 0.06) 100%
    );
    opacity: 0.85;
    z-index: 0;
}

.app-body .glass:not(.app-topbar):not(.app-nav) > *,
[data-tilt] > * {
    position: relative;
    z-index: 1;
}

[data-tilt] {
    transition: box-shadow 0.25s ease;
}

[data-tilt].is-tilt-hover {
    box-shadow:
        var(--shadow-deep),
        0 20px 48px rgba(0, 30, 60, 0.35),
        inset 0 1px 0 var(--glass-highlight);
}

/* --- Главная: логотип (тёмное стекло под эмблему) --- */
.home-cinema {
    text-align: center;
    padding: 1rem 1rem 0.75rem;
    margin-bottom: 0.65rem;
    border-radius: 20px;
}

.home-cinema--dark {
    background: linear-gradient(
        165deg,
        rgba(22, 26, 34, 0.94) 0%,
        rgba(14, 18, 26, 0.9) 45%,
        rgba(20, 24, 32, 0.92) 100%
    ) !important;
    border: 1px solid rgba(55, 75, 110, 0.45) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.home-cinema--dark::before {
    opacity: 0.35;
}

html[data-theme="light"] .home-cinema--dark {
    background: linear-gradient(
        165deg,
        rgba(30, 38, 52, 0.92) 0%,
        rgba(18, 24, 36, 0.88) 100%
    ) !important;
}

.home-cinema__title {
    margin: 0;
    line-height: 0;
}

.home-cinema__logo {
    display: block;
    margin: 0 auto;
    width: min(280px, 78vw);
    height: auto;
    object-fit: contain;
    object-position: center center;
    filter: drop-shadow(0 6px 24px rgba(0, 20, 50, 0.5));
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    animation: home-logo-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.home-cinema__tagline {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    opacity: 0;
    animation: home-tagline-in 0.8s ease 0.35s forwards;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@keyframes home-logo-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes home-tagline-in {
    to { opacity: 1; }
}

.home-side__title,
.home-main__title {
    font-family: 'Onest', 'Manrope', system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
    .app-topbar__logo-img,
    .app-nav__item--active,
    .home-cinema__logo,
    .home-cinema__tagline {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .epoch-bg {
        animation: none !important;
    }
}