/* =====================================
   ОБЩИЕ НАСТРОЙКИ
===================================== */

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    background: #c8c0b4;

    overflow-x: hidden;
}



/* =====================================
   ПЕРВЫЙ ЭКРАН
===================================== */

.hero {
    position: relative;

    width: 100%;

    line-height: 0;
}


/* ФОТО */

.hero-image {
    display: block;

    width: 100%;

    object-fit: cover;

    height: auto;
}


/* ЛОГОТИП */

.logo {
    position: fixed;

    top: clamp(20px, 5vw, 40px);
    left: 22px;

    z-index: 2;

    font-family: "Island Moments", cursive;

    font-size: clamp(45px, 5vw, 65px);

    font-style: italic;

    color: #655a49;
}


/* ГЛАВНЫЙ ТЕКСТ */

.hero-title {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    padding: 0 20px;

    text-align: center;

    font-family: Georgia, serif;

    font-size: clamp(42px, 7vw, 78px);

    font-weight: 400;

    font-style: italic;

    line-height: 1.08;

    color: #f3f0ea;

    z-index: 2;
}



/* =====================================
   КНОПКА МЕНЮ
===================================== */

.menu-toggle {
    position: fixed;

    top: 15px;
    right: 15px;

    width: 50px;
    height: 50px;

    border: none;

    background: transparent;

    cursor: pointer;

    z-index: 10000;
}


.menu-toggle span {
    position: absolute;

    left: 50%;

    width: 32px;
    height: 2px;

    background: #655a49;

    border-radius: 10px;

    transform: translateX(-50%);

    transition:
        top 0.4s ease,
        transform 0.4s ease;
}


.menu-toggle span:first-child {
    top: 18px;
}


.menu-toggle span:last-child {
    top: 30px;
}


/* КРЕСТИК */

.menu-toggle.active span:first-child {
    top: 24px;

    transform:
        translateX(-50%)
        rotate(45deg);
}


.menu-toggle.active span:last-child {
    top: 24px;

    transform:
        translateX(-50%)
        rotate(-45deg);
}



/* =====================================
   НЕМНОГО ОБО МНЕ
===================================== */

.about-section {
    width: 100%;

    padding:
        70px
        7vw
        100px;

    overflow: hidden;
}


/* ЗАГОЛОВОК */

.about-title {
    margin-bottom: 55px;

    text-align: center;

    font-family: "Great Vibes", cursive;

    font-size: clamp(45px, 5vw, 75px);

    font-style: italic;

    font-weight: 400;

    color: #655a49;
}


/* ОСНОВНОЙ КОНТЕНТ */

.about-content {
    width: 100%;

    max-width: 1250px;

    font-family: "Cormorant Garamond", serif;

    margin: 0 auto;

    display: flex;

    align-items: flex-start;

    gap: 7vw;
}


/* =====================================
   КВАДРАТНАЯ ФОТОГРАФИЯ
===================================== */

.about-image {
    width: 45%;

    max-width: 550px;

    aspect-ratio: 1 / 1;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 25px;
}

/* НАСТОЯЩАЯ ФОТОГРАФИЯ */

.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}



/* =====================================
   ТЕКСТ
===================================== */

.about-text {
    flex: 1;

    padding-top: 0;

    font-family: Arial, sans-serif;

    font-size: clamp(16px, 1.5vw, 21px);

    line-height: 1.65;

    color: #655a49;
}


/* АБЗАЦЫ */

.about-text p {
    margin-bottom: 18px;
}


.about-text p:last-child {
    margin-bottom: 0;
}



/* =====================================
   АНИМАЦИЯ ВТОРОГО РАЗДЕЛА
===================================== */

/*
   Элементы остаются ВИДИМЫМИ по умолчанию.
   Это специально сделано, чтобы при любой
   проблеме с JavaScript раздел не исчезал.
*/


.about-section.animate .about-title {
    animation:
        revealTitle
        0.8s
        ease
        both;
}


.about-section.animate .about-image {
    animation:
        revealImage
        0.8s
        ease
        0.45s
        both;
}


.about-section.animate .about-text {
    animation:
        revealText
        0.8s
        ease
        0.9s
        both;
}


/* ЗАГОЛОВОК */

@keyframes revealTitle {

    from {
        opacity: 0;

        transform: translateY(25px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* ФОТО */

@keyframes revealImage {

    from {
        opacity: 0;

        transform: translateX(-35px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }

}


/* ТЕКСТ */

@keyframes revealText {

    from {
        opacity: 0;

        transform: translateX(35px);
    }

    to {
        opacity: 1;

        transform: translateX(0);
    }

}



/* =====================================
   ПОЛНОЭКРАННОЕ МЕНЮ
===================================== */

.fullscreen-menu {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100svh;

    background: #c8c0b4;

    z-index: 900;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}


.fullscreen-menu.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



/* ЛОГОТИП В МЕНЮ */

.menu-logo {
    position: absolute;

    top: clamp(20px, 5vw, 40px);
    left: 22px;

    z-index: 2;

    font-family: "Island Moments", cursive;

    font-size: clamp(45px, 5vw, 65px);

    font-style: italic;

    color: #655a49;
}



/* =====================================
   ССЫЛКИ МЕНЮ
===================================== */

.menu-navigation {
    position: absolute;

    top: 80px;
    left: 35px;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}


.menu-link {
    margin-left: 30px;

    position: relative;

    display: inline-block;

    font-family: "Cormorant Garamond", serif;

    font-size: 25px;

    font-weight: 400;

    text-decoration: none;

    color: #655a49;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.home {
    margin-top: 100px;
    margin-left: 30px;
    
    position: relative;

    display: inline-block;

    font-family: "Cormorant Garamond", serif;

    font-size: 35px;

    font-weight: 400;

    text-decoration: none;

    color: #655a49;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;  
}



.menu-link:hover {
    transform: translateX(5px);

    opacity: 0.7;
}


/* ЛИНИЯ ПОД ГЛАВНОЙ */

.menu-link:first-child::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -5px;

    width: 75px;
    height: 1px;

    background: #655a49;
}



/* =====================================
   ГАЛЕРЕЯ В МЕНЮ
===================================== */

.menu-gallery {
    position: absolute;

    top: 0;

    left: 48%;

    width: 36%;

    height: 100%;

    display: flex;

    gap: 5px;

    overflow: hidden;
}




.gallery-column {
    width: 50%;

    height: 100%;

    overflow: hidden;
}


.gallery-track {
    display: flex;

    flex-direction: column;

    width: 100%;
}


.gallery-set {
    display: flex;

    flex-direction: column;

    gap: 5px;

    width: 100%;

    flex-shrink: 0;
}

.gallery-photo {
    width: 100%;

    height: 220px;

    flex-shrink: 0;

    background-size: cover;

    background-position: center;
}

.gallery-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ВРЕМЕННЫЕ ЗАГЛУШКИ */

.photo-1,
.photo-7 {
    background-color: #9c8875;
}

.photo-2,
.photo-8 {
    background-color: #b8aa9a;
}

.photo-3,
.photo-9 {
    background-color: #786759;
}

.photo-4,
.photo-10 {
    background-color: #d2c5b6;
}

.photo-5,
.photo-11 {
    background-color: #8d7b6a;
}

.photo-6,
.photo-12 {
    background-color: #b5a08d;
}



/* ЛЕВАЯ КОЛОНКА ВНИЗ */

.column-down .gallery-track {
    animation:
        galleryDown
        45s
        linear
        infinite;
}


@keyframes galleryDown {

    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }

}



/* ПРАВАЯ КОЛОНКА ВВЕРХ */

.column-up .gallery-track {
    animation:
        galleryUp
        45s
        linear
        infinite;
}


@keyframes galleryUp {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }

}

/* =====================================
   PORTFOLIO
===================================== */

.portfolio-section {
    width: 100%;

    padding: 40px 0 50px;

    overflow: hidden;
}


/* =====================================
   PORTFOLIO TEXT
===================================== */

.portfolio-marquee {
    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    transform: rotate(-3deg);
}


.portfolio-marquee-track {
    display: flex;

    width: max-content;

    gap: 45px;

    padding: 10px 0;
}


.portfolio-marquee span {
    font-family: Georgia, serif;

    font-size: clamp(45px, 6vw, 95px);

    font-style: italic;

    font-weight: 400;

    color: #655a49;

    letter-spacing: -2px;
}


/* =====================================
   КАРУСЕЛЬ
===================================== */

.portfolio-carousel {
    width: 100%;

    margin: 30px 0;

    overflow: hidden;

    cursor: grab;

    user-select: none;

    touch-action: pan-y;
}


.portfolio-carousel:active {
    cursor: grabbing;
}


.portfolio-track {
    display: flex;

    align-items: center;

    gap: 50px;

    width: max-content;

    will-change: transform;
}


/* =====================================
   ОДНА КОМПОЗИЦИЯ
===================================== */

.portfolio-group {
    display: grid;

    grid-template-columns:
        360px
        510px
        360px;

    gap: 16px;

    width: 1240px;

    height: 570px;

    flex-shrink: 0;
}


/* =====================================
   ЛЕВАЯ ЧАСТЬ
===================================== */

.portfolio-left {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    grid-template-rows:
        150px
        160px
        230px;

    gap: 12px;
}


.portfolio-left .portfolio-photo:nth-child(1) {
    grid-column: 1 / 3;
}


.portfolio-left .portfolio-photo:nth-child(2) {
    grid-column: 1;
}


.portfolio-left .portfolio-photo:nth-child(3) {
    grid-column: 2;
}


.portfolio-left .portfolio-photo:nth-child(4) {
    grid-column: 1 / 3;
}



/* =====================================
   ЦЕНТРАЛЬНАЯ ФОТОГРАФИЯ
===================================== */

.portfolio-center {
    width: 100%;
    height: 100%;
}


.portfolio-center .portfolio-photo {
    width: 100%;
    height: 100%;
}



/* =====================================
   ПРАВАЯ ЧАСТЬ
===================================== */

.portfolio-right {
    display: grid;

    grid-template-rows:
        105px
        105px
        105px
        1fr;

    gap: 12px;
}



/* =====================================
   ФОТО
===================================== */

.portfolio-photo {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 12px;

    flex-shrink: 0;
}

.portfolio-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.photo-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    font-family: Arial, sans-serif;

    font-size: 13px;

    color: rgba(255, 255, 255, 0.8);
}


/* ВРЕМЕННЫЕ РАЗНЫЕ ЦВЕТА */

.p1,
.p10,
.p19 {
    background: #9b8878;
}

.p2,
.p11,
.p20 {
    background: #b7a99a;
}

.p3,
.p12,
.p21 {
    background: #756557;
}

.p4,
.p13,
.p22 {
    background: #c9b9aa;
}

.p5,
.p14,
.p23 {
    background: #887666;
}

.p6,
.p15,
.p24 {
    background: #b3a08d;
}

.p7,
.p16,
.p25 {
    background: #78695d;
}

.p8,
.p17,
.p26 {
    background: #d0c1b2;
}

.p9,
.p18,
.p27 {
    background: #947f6d;
}





/* =====================================
   МОБИЛЬНАЯ ВЕРСИЯ
===================================== */

@media (max-width: 768px) {


    .portfolio-section {
        padding:
            25px
            0
            35px;
    }


    .portfolio-marquee {
        transform: rotate(-3deg);
    }


    .portfolio-marquee-track {
        gap: 25px;
    }


    .portfolio-marquee span {
        font-size: 52px;
    }


    .portfolio-carousel {
        margin: 25px 0;
    }


    /* КАЖДАЯ КОМПОЗИЦИЯ УМЕНЬШАЕТСЯ */

    .portfolio-group {
        grid-template-columns:
            105px
            185px
            105px;

        gap: 9px;

        width: 415px;

        height: 350px;
    }


    .portfolio-left {
        grid-template-rows:
            92px
            100px
            140px;

        gap: 7px;
    }


    .portfolio-right {
        grid-template-rows:
            65px
            65px
            65px
            1fr;

        gap: 7px;
    }


    .portfolio-track {
        gap: 25px;
    }


    .portfolio-photo {
        border-radius: 8px;
    }

}

/* Секция "Напиши мне" */

.contact-section {
    width: 100%;
    padding: 40px 24px 60px 24px;
    position: relative;
    height: auto;
}

.contact-section {
    width: 100%;
    background-color: #c8c0b4;
    padding: 40px 24px 60px 24px;
    position: relative;
    min-height: 100vh;
}

.contact-container {
    width: 100%;
}

.section-title {
    font-family: 'Great Vibes', cursive;
    font-size: 52px;
    font-weight: 400;
    color: #6d655b;
    margin-bottom: 35px;
    text-align: center;
    letter-spacing: 1px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    width: 100%;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding: 12px 0;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-group textarea {
    resize: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-size: 23px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-bottom: 1px solid #ffffff;
}

.form-action {
    margin-top: 10px;
}

.submit-btn {
    background-color: #ffffff;
    color: #5a524b;
    border: none;
    border-radius: 24px;
    padding: 12px 42px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s, transform 0.1s;
}

.submit-btn:hover {
    background-color: #f5f2ef;
}

/* КНОПКА ЧАТА — Теперь точно поверх всего */
.chat-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 9999 !important; /* Гарантирует, что кнопка поверх всего */
    pointer-events: auto !important;
}

.chat-widget svg {
    pointer-events: none; /* Клики проходят на саму кнопку */
}

/* МОДАЛЬНОЕ ОКНО */
.contacts-modal {
    position: fixed;
    bottom: 95px;
    right: 30px;
    display: none; /* Переключение через display гарантирует показ */
    z-index: 9998 !important;
}

.contacts-modal.active {
    display: block !important;
}

.modal-content {
    background-color: #ffffff;
    padding: 24px 28px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    position: relative;
    width: 260px;
    text-align: center;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.modal-title {
    font-family: 'Great Vibes', cursive;
    font-size: 32px;
    color: #6d655b;
    margin-bottom: 8px;
    font-weight: 400;
}

.email-link {
    display: block;
    color: #6d655b;
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 20px;
    font-weight: 500;
    word-break: break-all;
}

.email-link:hover {
    text-decoration: underline;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f5f2ef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d655b;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.social-icon:hover {
    background-color: #6d655b;
    color: #ffffff;
    transform: translateY(-2px);
}




/* =====================================
   ОТЗЫВЫ
===================================== */

.reviews-section {
    width: 100%;
    background-color: #c8c0b4;
    padding: 40px 24px 60px 24px;
    min-height: 100vh;
}

.reviews-container {
    width: 100%;
}

.reviews-title {
    font-family: 'Great Vibes', cursive;
    margin-top: 50px;
    font-size: 56px;
    font-weight: 400;
    color: #6d655b;
    margin-bottom: 35px;
    text-align: left;
    letter-spacing: 1px;
}

/* Карточки отзывов */
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
}

.review-card {
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.client-name {
    font-size: 17px;
    font-weight: 500;
    color: #5a524b;
}

.review-date {
    font-size: 12px;
    color: #8c837b;
    font-weight: 300;
}

.review-text {
    font-size: 14px;
    line-height: 1.6;
    color: #4a443f;
    font-weight: 300;
}

/* Блок формы отправки */
.add-review-block {
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.form-title {
    font-family: 'Great Vibes', cursive;
    font-size: 42px;
    color: #6d655b;
    margin-bottom: 20px;
    font-weight: 400;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    padding: 12px 0;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-group textarea {
    resize: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
}

.submit-btn {
    background-color: #ffffff;
    color: #5a524b;
    border: none;
    border-radius: 24px;
    padding: 12px 36px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #f5f2ef;
}
































/* =====================================
   МОБИЛЬНАЯ ВЕРСИЯ
===================================== */

@media (max-width: 768px) {


    /* ПЕРВЫЙ ЭКРАН */

    .hero-title {
        font-size: clamp(38px, 10vw, 56px);

        padding: 0 25px;
    }


    /* ВТОРОЙ РАЗДЕЛ */

    .about-section {
        padding:
            45px
            20px
            70px;
    }


    .about-title {
        margin-bottom: 35px;
    }


    .about-content {
        flex-direction: column;

        align-items: center;

        gap: 30px;
    }


    /* ФОТО ПОЧТИ НА ВСЮ ШИРИНУ */

    .about-image {
        width: 100%;

        max-width: 600px;

        border-radius: 20px;
    }


    /* ТЕКСТ ПОЧТИ НА ВСЮ ШИРИНУ */

    .about-text {
        width: 100%;

        max-width: 600px;

        font-size: 16px;

        line-height: 1.65;
    }


    .about-text p {
        margin-bottom: 16px;
    }



    /* МЕНЮ */
    .menu-navigation {
        left: 4px;

        top: 20px;

        gap: 13px;
    }


    .menu-link {
        font-size: 20px;
    }

    .home {
        font-size: 30px;
    }

    .logo, 
    .menu-logo {
        font-size: 45px;
    }

    .menu-gallery {
        left: 48%;

        width: 40%;

        gap: 4px;
    }


    .gallery-set {
        gap: 4px;
    }


    .gallery-photo {
        height: 180px;
    }

}