/* Опциональные улучшения — отключить: убрать enhancements.css */

/* ===== Точки навигации по секциям (только десктоп, в стиле сайта) ===== */
.section-rail {
    display: none;
}

@media (min-width: 1024px) {
    .section-rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: clamp(10px, 1.4vh, 14px);
        position: fixed;
        right: clamp(16px, 1.6vw, 26px);
        top: 50%;
        transform: translateY(-50%);
        z-index: 55;
        padding: clamp(14px, 1.6vh, 18px) clamp(10px, 0.9vw, 12px);
        border-radius: 999px;
        background: linear-gradient(
            165deg,
            rgba(12, 4, 8, 0.72) 0%,
            rgba(48, 8, 24, 0.58) 48%,
            rgba(10, 4, 8, 0.68) 100%
        );
        border: 1px solid rgba(212, 175, 55, 0.16);
        backdrop-filter: blur(14px) saturate(1.15);
        -webkit-backdrop-filter: blur(14px) saturate(1.15);
        box-shadow:
            0 10px 36px rgba(0, 0, 0, 0.42),
            0 0 0 1px rgba(128, 0, 32, 0.12),
            inset 0 1px 0 rgba(255, 232, 177, 0.06);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
    }

    .section-rail::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 50%;
        width: 1px;
        margin-left: -0.5px;
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(212, 175, 55, 0.22) 18%,
            rgba(255, 232, 177, 0.38) 50%,
            rgba(212, 175, 55, 0.22) 82%,
            transparent 100%
        );
        pointer-events: none;
        z-index: 0;
    }

    .section-rail.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .section-rail__btn {
        position: relative;
        z-index: 1;
        width: 7px;
        height: 7px;
        padding: 0;
        border: 1px solid rgba(212, 175, 55, 0.28);
        border-radius: 50%;
        background: rgba(255, 248, 242, 0.12);
        cursor: pointer;
        transition:
            transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            background 0.28s ease,
            border-color 0.28s ease,
            box-shadow 0.28s ease;
    }

    .section-rail__btn::after {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: inherit;
        border: 1px solid transparent;
        transition: border-color 0.28s ease;
    }

    .section-rail__btn:hover {
        transform: scale(1.35);
        border-color: rgba(255, 232, 177, 0.55);
        background: rgba(212, 175, 55, 0.35);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.28);
    }

    .section-rail__btn[aria-current='true'] {
        width: 9px;
        height: 9px;
        transform: scale(1.15);
        border-color: rgba(255, 232, 177, 0.85);
        background: linear-gradient(
            145deg,
            var(--gold-light, #ffe8b1) 0%,
            var(--gold-medium, #d4af37) 45%,
            var(--gold-dark, #b8860b) 100%
        );
        box-shadow:
            0 0 14px rgba(212, 175, 55, 0.55),
            0 0 28px rgba(128, 0, 32, 0.22);
    }

    .section-rail__btn[aria-current='true']::after {
        border-color: rgba(212, 175, 55, 0.25);
    }

    .section-rail__btn:focus-visible {
        outline: 2px solid var(--gold-medium, #d4af37);
        outline-offset: 4px;
    }

    .section-rail__tip {
        position: absolute;
        right: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%) translateX(6px);
        white-space: nowrap;
        padding: 7px 12px 7px 11px;
        border-radius: 10px;
        background: linear-gradient(
            135deg,
            rgba(14, 4, 8, 0.94) 0%,
            rgba(56, 10, 28, 0.88) 100%
        );
        border: 1px solid rgba(212, 175, 55, 0.22);
        border-left: 2px solid rgba(212, 175, 55, 0.65);
        font-family: var(--font-luxury, 'Cormorant Garamond', serif);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 240, 215, 0.96);
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
        box-shadow:
            0 8px 24px rgba(0, 0, 0, 0.45),
            0 0 12px rgba(128, 0, 32, 0.15);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .section-rail__btn:hover .section-rail__tip,
    .section-rail__btn:focus-visible .section-rail__tip,
    .section-rail__btn[aria-current='true'] .section-rail__tip {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    .section-rail__btn[aria-current='true'] .section-rail__tip {
        color: rgba(255, 248, 230, 1);
        border-left-color: var(--gold-medium, #d4af37);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-rail,
    .section-rail__btn,
    .section-rail__tip {
        transition: none !important;
    }
}

/* Parallax: смещение через --hero-parallax-y на img (см. hero-scroll-parallax.js) */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .slide--circles .slide-hero-circles__img,
    .slide--desire .slide-hero-desire__img {
        will-change: transform;
        transition: transform 0.12s linear;
    }
}

/* ===== Полноэкранные блоки + scroll-snap (десктоп) ===== */
@media (min-width: 1024px) {
    html.section-snap-enabled {
        scroll-snap-type: y proximity;
        scroll-padding-top: var(--header-height, 76px);
    }

    html.section-snap-enabled .hero-slider {
        height: calc(100dvh + var(--header-height, 76px));
        min-height: calc(100dvh + var(--header-height, 76px));
        max-height: none;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    html.section-snap-enabled #main > .section {
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        min-height: 100dvh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        padding: clamp(56px, 9vh, 96px) 0;
        overflow: clip;
    }

    html.section-snap-enabled #main > .section > .container {
        width: 100%;
        flex: 0 1 auto;
    }

    /* Длинные секции — прилипаем к началу, дальше скролл внутри */
    html.section-snap-enabled #main > .section.gallery-section,
    html.section-snap-enabled #main > .section.events-section,
    html.section-snap-enabled #main > .section.testimonials-section,
    html.section-snap-enabled #main > .section.contact-section,
    html.section-snap-enabled #main > .section.faq-section {
        justify-content: flex-start;
        padding-top: clamp(72px, 11vh, 108px);
        padding-bottom: clamp(64px, 10vh, 96px);
    }

    /* Золотой «мост» между экранами */
    html.section-snap-enabled #main > .section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(92vw, 720px);
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(128, 0, 32, 0.45) 12%,
            rgba(212, 175, 55, 0.55) 50%,
            rgba(128, 0, 32, 0.45) 88%,
            transparent 100%
        );
        box-shadow: 0 0 18px rgba(212, 175, 55, 0.12);
        opacity: 0.65;
        pointer-events: none;
        z-index: 2;
    }

    html.section-snap-enabled #main > .about-section::before {
        opacity: 0.35;
    }

    /* Виньетка при входе в блок */
    html.section-snap-enabled #main > .section::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(
            ellipse 120% 80% at 50% 0%,
            rgba(212, 175, 55, 0.07) 0%,
            transparent 55%
        );
        opacity: 0;
        transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: 0;
    }

    html.section-snap-enabled #main > .section.section--in-view::after {
        opacity: 1;
    }

    html.section-snap-enabled #main > .section.section--in-view .section-header {
        animation: section-header-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes section-header-enter {
        from {
            opacity: 0.55;
            transform: translateY(22px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    html.section-snap-enabled #main > .section.section--in-view .section-header {
        animation: none;
    }

    html.section-snap-enabled #main > .section::after {
        transition: none;
        opacity: 1;
    }
}