/* Главная страница. Только локальные селекторы, без глобальных .position-relative. */

body.index-page {
    --parallax-offset: 0px;
    overflow-x: hidden;
    padding-top: 0;
}

/* На главной существующая фоновая фотография управляется через body::before. */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: 120%;
    background: url("/assets/misc/bg_nature4.jpg") center / cover no-repeat;
    z-index: -1;
    transform: translateY(calc(var(--parallax-offset, 0px) * -1));
    will-change: transform;
    pointer-events: none;
}

/* Первый экран: карусель и наплывающий блок предложений. */
.index-hero {
    padding: 50px 0;
    background: rgba(255, 255, 255, .8);
}

.index-hero .carousel-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
}

.index-hero #myCarousel {
    position: relative;
    z-index: 0;
}

.index-hero .carousel-img {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center;
}

/* Горящие предложения: заголовок и CTA не прокручиваются. */
.index-hot-offers {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    position: relative;
    z-index: 10;
}

.index-hot-offers__header,
.index-hot-offers__footer {
    flex: 0 0 auto;
}

.index-hot-offers__list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 0;
}

.index-hot-offers__list .index-hot-offer {
    flex: 0 0 auto;
    margin: 0 !important;
}

.index-hot-offers__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.index-hot-offers__footer .index-hot-offers__button {
    width: auto;
    max-width: 100%;
    padding: .55rem 1rem;
    font-size: .9rem;
    border-radius: .75rem;
}

.index-hot-offers__footer .uni-button__icon { font-size: 1rem; }
.index-hot-offers__footer .uni-button__text { font-size: 1rem; }

/* Сами предложения. */
.index-hot-offer { padding: 1rem; }
.index-hot-offer__date {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    color: #006a57;
    font-weight: 700;
    font-size: 1.05rem;
}
.index-hot-offer__date i { color: #bd3546; }
.index-hot-offer__description { margin-top: .65rem; font-size: .9rem; line-height: 1.5; }
.index-hot-offer__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .75rem;
}
.index-hot-offer__discount { font-weight: 700; color: #bd3546; }
.index-hot-offer__new-price { color: #006a57; font-size: 1.2rem; white-space: nowrap; }
.index-hot-offer__old-price { color: #934b55; font-size: .9rem; white-space: nowrap; }
.index-hot-empty { padding: 1.5rem; }

/* Десктоп: блок слегка выше и ниже карусели, список скроллится внутри. */
@media (min-width: 1301px) {
    .index-hero .carousel-wrapper { width: 73%; }

    .index-hot-offers {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: calc(150px + 20%);
        height: 560px;
        max-height: 560px;
        margin: 0;
    }

    .index-hot-offers__list {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: .35rem;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 106, 87, .4) transparent;
    }
    .index-hot-offers__list::-webkit-scrollbar { width: 5px; }
    .index-hot-offers__list::-webkit-scrollbar-thumb {
        background: rgba(0, 106, 87, .4);
        border-radius: 4px;
    }
}

@media (max-width: 1300px) {
    .index-hot-offers {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        max-height: none;
        margin-top: 1.5rem;
    }
    .index-hot-offers__list { overflow: visible; max-height: none; }
}

@media (max-width: 767.98px) {
    .index-hero { padding: 1.5rem 0; }
    .index-hero .carousel-img { height: min(65vw, 360px); min-height: 220px; }
}

/* Четыре промо-карточки. */
.index-promo-card {
    overflow: hidden;
    border: 1px solid rgba(0, 106, 87, .12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .94);
}
.index-promo-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.index-promo-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.index-promo-card__media:hover img { transform: scale(1.035); }
.index-promo-card .card-body { gap: .5rem; padding: 1.25rem; }
.index-promo-card .card-title { line-height: 1.35; }
.index-promo-card .card-text { font-size: 1rem; line-height: 1.5; }

/* Слоган — заметный, но не очередная тяжёлая белая карточка. */
.index-slogan {
    padding: clamp(3.5rem, 8vw, 7rem) 1rem;
    text-align: center;
}
.index-slogan__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .76);
    backdrop-filter: blur(5px);
}
.index-slogan__eyebrow {
    display: block;
    color: #006a57;
    font-size: .88rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.index-slogan__text {
    color: #005946;
    font-size: clamp(1.85rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: 1.25;
    text-wrap: balance;
}
.index-slogan__line {
    display: block;
    width: 90px;
    height: 3px;
    border-radius: 999px;
    background: #006a57;
    margin: 1.5rem auto 0;
}

/* Заставка. Только стили; решение о частоте показа примем отдельно. */
#intro {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOutIntro 4s forwards ease-in-out;
}
.intro-bg-color, .intro-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.intro-bg-color { background: #fffded; }
.intro-bg-image {
    background: url("/assets/misc/bg_nature4.jpg") center / cover no-repeat;
    opacity: 0;
    animation: fadeInImage 4.5s forwards ease-in-out;
}
.intro-logo {
    position: absolute;
    top: 60px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.intro-logo img {
    width: clamp(160px, 45vw, 420px);
    height: auto;
    opacity: 0;
    transform: scale(.95);
    transition: opacity 1.2s ease, transform 1s ease;
}
.intro-logo img.animate { opacity: 1; transform: scale(1); }
.intro-title, .intro-subtitle {
    font-size: clamp(18px, 6vw, 32px);
    color: #6b4a2b;
    opacity: 0;
    transform: translateY(-16px);
    transition: opacity 1.5s ease .2s, transform 1s ease .2s;
    text-align: center;
    letter-spacing: .5px;
}
.intro-subtitle { transform: translateY(16px); }
.intro-title.animate, .intro-subtitle.animate { opacity: 1; transform: translateY(0); }
@media (min-width: 700px) and (max-width: 1100px) and (orientation: landscape) {
    .intro-logo img { width: 32vw; max-width: 360px; }
}
@media (max-width: 480px) {
    .intro-logo { top: 15vh; }
    .intro-logo img { width: 65vw; max-width: 300px; }
}
@keyframes fadeInImage {
    0%, 25% { opacity: 0; }
    55%, 85% { opacity: 1; }
}
@keyframes fadeOutIntro {
    0%, 75% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .index-promo-card__media img { transition: none; }
    /* Заставку пока не меняем: решение по ней ещё обсуждается. */
}




/* Заставка: скрыть после первого показа в этой вкладке */

html.intro-already-seen #intro {
    display: none !important;
}

/* Заставка: любое касание запускает плавное закрытие */

#intro {
    cursor: pointer;
    touch-action: manipulation;
}

#intro.intro--closing {
    animation: none !important;

    opacity: 0 !important;
    visibility: visible;

    transition: opacity .4s ease !important;

    pointer-events: none;
}

#intro:focus-visible {
    outline: 3px solid #006a57;
    outline-offset: -8px;
}