/* index.css */

/* Универсальные классы для золотых полос с градиентом */
.gold-line {
    display: inline-block;
    height: 1px;
    background: var(--gold-main, #C9A45C);
}

/* Градиент слева направо: от прозрачного к непрозрачному */
.gold-line-fade-left {
    background: linear-gradient(
        to right,
        rgba(201, 164, 92, 0) 0%,
        rgba(201, 164, 92, 0.3) 30%,
        rgba(201, 164, 92, 0.7) 70%,
        var(--gold-main, #C9A45C) 100%
    );
}

/* Градиент справа налево: от непрозрачного к прозрачному */
.gold-line-fade-right {
    background: linear-gradient(
        to left,
        rgba(201, 164, 92, 0) 0%,
        rgba(201, 164, 92, 0.3) 30%,
        rgba(201, 164, 92, 0.7) 70%,
        var(--gold-main, #C9A45C) 100%
    );
}

/* Градиент от центра к краям (для центрированных элементов) */
.gold-line-fade-center {
    background: linear-gradient(
        to right,
        rgba(201, 164, 92, 0) 0%,
        rgba(201, 164, 92, 0.3) 20%,
        var(--gold-main, #C9A45C) 50%,
        rgba(201, 164, 92, 0.3) 80%,
        rgba(201, 164, 92, 0) 100%
    );
}

/* Горизонтальные линии по бокам с затуханием (фиксированная ширина 30px) */
.gold-line-sides {
    position: relative;
    padding-left: 90px; /* Отступ для левой линии (30px + 10px) */
    padding-right: 90px; /* Отступ для правой линии (30px + 10px) */
}

.gold-line-sides::before,
.gold-line-sides::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 70px;
    height: 1px;
    transform: translateY(-50%);
    z-index: 1;
}

/* Левая линия: затухает от контейнера влево */
.gold-line-sides::before {
    left: 0;
    background: linear-gradient(
        to left,
        var(--gold-main, #C9A45C) 0%,
        rgba(201, 164, 92, 0.7) 30%,
        rgba(201, 164, 92, 0.3) 70%,
        rgba(201, 164, 92, 0) 100%
    );
}

/* Правая линия: затухает от контейнера вправо */
.gold-line-sides::after {
    right: 0;
    background: linear-gradient(
        to right,
        var(--gold-main, #C9A45C) 0%,
        rgba(201, 164, 92, 0.7) 30%,
        rgba(201, 164, 92, 0.3) 70%,
        rgba(201, 164, 92, 0) 100%
    );
}

/* На мобильных устройствах - уменьшаем отступы */
@media (max-width: 768px) {
    .gold-line-sides {
        padding-left: 52px;
        padding-right: 52px;
    }
    
    .gold-line-sides::before,
    .gold-line-sides::after {
        width: 40px; /* Немного короче на мобильных */
    }
}

#gallery {
    position: relative;
}

#gallery::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(var(--gold-main-rgb), 0),
        rgba(var(--gold-main-rgb), 0.9),
        rgba(var(--gold-main-rgb), 0)
    );
}

#image-modal {
    transition: opacity 0.5s ease-in-out;
}

#image-modal.hidden {
    opacity: 0;
}

#banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/static/images/index/hero-bg.jpg');
    background-size: cover;
    background-position: right;
    z-index: -2;
    filter: blur(0px);
    transform: scale(1.0);
}

#contacts::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
        url('/static/images/index/hero-main.jpg');
    background-size: cover;
    background-position: center;
    z-index: -2;
    filter: blur(0px);
    transform: scale(1.0);
}


/* Hero lockets: slide-in from sides + fade-in */
.hero-locket {
    opacity: 0;
    will-change: transform, opacity;
}

.hero-locket-left {
    animation: locketSlideFromLeft 900ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 80ms;
}

.hero-locket-center {
    animation: locketSlideFromBottom 900ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 160ms;
}

.hero-locket-right {
    animation: locketSlideFromRight 900ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: 240ms;
}

@keyframes locketSlideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes locketSlideFromRight {
    from {
        opacity: 0;
        transform: translateX(70px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes locketSlideFromBottom {
    from {
        opacity: 0;
        transform: translateY(70px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#headline {
    animation: fadeIn 1s ease-in-out forwards; 
}

.reflection-center {
    position: relative;
    top: 100%; /* Position reflection below the main image */
    left: 0;
    height: 50%;
    margin-bottom: -60%;
    overflow: hidden;
    transform: scaleY(-1); /* Vertical reflection */
    opacity: 0.3; /* Semi-transparency for effect */
    clip-path: inset(50% 0 0 0);
    mask-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0) 21%);
    transition: opacity 0.5s ease-in-out;
}

.reflection-left {
    position: relative;
    top: 100%; /* Position reflection below the main image */
    left: 0;
    height: 50%;
    margin-bottom: -60%;
    overflow: hidden;
    transform: scaleY(-1); /* Vertical reflection */
    opacity: 0.3; /* Semi-transparency for effect */
    clip-path: inset(50% 0 0 0);
    mask-image: linear-gradient(359deg, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0) 21%);
    transition: opacity 0.5s ease-in-out;
}

.reflection-right {
    position: relative;
    top: 100%; /* Position reflection below the main image */
    left: 0;
    height: 50%;
    margin-bottom: -60%;
    overflow: hidden;
    transform: scaleY(-1); /* Vertical reflection */
    opacity: 0.3; /* Semi-transparency for effect */
    clip-path: inset(50% 0 0 0);
    mask-image: linear-gradient(1deg, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 0.1) 18%, rgba(0, 0, 0, 0) 21%);
    transition: opacity 0.5s ease-in-out;
}

#slogan {
    animation: fadeIn 2s ease-in-out forwards; 
}

/* Тень для кулона с прозрачным фоном */
#render-image {
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)) 
            drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: filter 0.3s ease;
    width: 100%;
}

#render-image:hover {
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.2)) 
            drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}

/* На мобильных устройствах */
@media (max-width: 768px) {
    /* Более мягкая и менее заметная тень на мобильных */
    #render-image {
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08)) 
                drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    }
    
    #render-image:hover {
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1)) 
                drop-shadow(0 3px 6px rgba(0, 0, 0, 0.06));
    }
}

/* Hero title with gold lines */
.hero-title {
    display: inline-block;
    text-align: center;
    font-weight: 300 !important; /* Используем 300, так как 200 может быть недоступен */
    letter-spacing: 0.02em; /* Немного увеличиваем межбуквенное расстояние для визуального облегчения */
    opacity: 0.88;
    padding: 0px 24px;
}

.hero-line-1,
.hero-line-text {
    font-weight: 300 !important; /* Тонкий шрифт для обеих строк */
    letter-spacing: 0.02em;
}

.hero-line-1 {
    display: block;
    text-align: center;
    margin-bottom: 0.5rem;
    white-space: nowrap;
}

/* Контейнер для второй строки - ограничен шириной первой строки через родителя */
.hero-line-2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

/* Золотые полосы - выравниваются по центру текста */
.hero-line-gold {
    display: inline-block;
    height: 1px;
    flex: 1 1 auto;
    min-width: 20px;
}

/* Левая полоса: использует универсальный класс */
.hero-line-gold-left {
    margin-right: 12px;
}

/* Правая полоса: использует универсальный класс */
.hero-line-gold-right {
    margin-left: 12px;
}

.hero-line-text {
    white-space: nowrap;
    flex-shrink: 0;
}

/* На мобильных устройствах */
@media (max-width: 768px) {
    .hero-line-1 {
        margin-bottom: 0.375rem;
    }
    
    .hero-line-gold-left {
        margin-right: 8px;
    }
    
    .hero-line-gold-right {
        margin-left: 8px;
    }
    
    .hero-line-text {
        padding-left: 8px;
        padding-right: 8px;
    }
}