@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* begin montserrat*/
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-ExtraLight.ttf') format('truetype');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
        font-weight: 200;
        font-style: italic;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-Light.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-LightItalic.ttf') format('truetype');
        font-weight: 300;
        font-style: italic;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-Italic.ttf') format('truetype');
        font-weight: 400;
        font-style: italic;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-MediumItalic.ttf') format('truetype');
        font-weight: 500;
        font-style: italic;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
        font-weight: 600;
        font-style: italic;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-BoldItalic.ttf') format('truetype');
        font-weight: 700;
        font-style: italic;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-ExtraBold.ttf') format('truetype');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
        font-weight: 800;
        font-style: italic;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-Black.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Montserrat';
        src: url('/web/fonts/montserrat/Montserrat-BlackItalic.ttf') format('truetype');
        font-weight: 900;
        font-style: italic;
        font-display: swap;
    }
    /*end montserrat*/
}

body {
    font-family: 'Montserrat', sans-serif;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #B00000;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.wrapper {
    position: relative;
    overflow: hidden;
}

#mobile-menu.active {
    top: 0;
    height: 100vh;
    width: 80vw;
    left: auto;
    right: -169px;
    padding-left: 40px;
    padding-top: 30px;
}

@media (max-width: 1280px) {
    .header-scrolled a{
        color: white !important;
    }
    .header-scrolled  [id^="dropdown-btn"] {
        color: white !important;
    }
    .header-scrolled  [id^="dropdown-menu"]{
        background-color: #0A192F !important;
        border: 1px solid #3c4b60 !important;
    }

    .header-scrolled a, .header-scrolled .header-link i {
        color: white !important;
    }

    #mobile-menu-toggle.active i {
        color: white !important;
    }
}

@media (max-width: 500px) {
    #mobile-menu.active {
        right: -50px !important;
    }
}

/* Стиль для фона первой секции, имитирующий изображение */
.hero-section {
    background-image: url('/web/img/main-bg-new.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); /* Полупрозрачный черный оверлей */
    z-index: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------
   2. Общие классы анимации
   -------------------- */
.animate-delay-200 {
    animation-delay: 0.2s;
}
.animate-delay-500 {
    animation-delay: 0.5s;
}
.animate-delay-800 {
    animation-delay: 0.8s;
}
.animate-fade-in-up {
    /* Применяем анимацию fadeInUp */
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards; /* Сохраняет конечное состояние (opacity: 1) */
    opacity: 0; /* Исходное состояние: скрыто */
}

/* --------------------
   3. Корректировка для Header (если нужно)
   -------------------- */
.header-transition {
    /* Плавный переход для логотипа и других элементов */
    transition: transform 0.3s ease-in-out;
}
.header-transition:hover {
    transform: scale(1.05); /* Легкое увеличение */
}
.product-card:hover .product-details {
    opacity: 1; /* Показываем дополнительный текст */
}

/* Для эффекта, если нужно затемнить весь оверлей, а не только градиент */
/* .product-card:hover .product-overlay {
    background-color: rgba(0, 0, 0, 0.4);
} */

/* Выравнивание кнопки навигации Swiper по высоте */
.swiper-button-prev-custom,
.swiper-button-next-custom {
    cursor: pointer;
    /* Убедитесь, что стили Tailwind не перекрыты Swiper */
}

/* Переопределение стилей Swiper для десктопа, чтобы карточки были расположены ближе */
@media (min-width: 768px) {
    .product-slider {
        /* Убираем лишние отступы, если они мешают */
        padding-bottom: 0 !important;
    }
}

.clipped-top-right {
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); */
    /* Создаем срезанный угол:
       - Начинаем с левого верхнего угла (0 0)
       - Переходим в точку, где должен начаться срез (85% по X, 0 по Y)
       - Переходим в точку, где должен закончиться срез (100% по X, 15% по Y)
       - Затем к правому нижнему (100% 100%) и левому нижнему (0 100%) углам
    */
    clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0 100%);
}

#book {
    width: 400px;
    height: 600px;
}

.page {
    background: white;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.mission-card-clip {
    clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0 100%);
}

.gallery-section {
    padding: 60px 0;
}

.gallery-slider {
    /* Чтобы стрелки были позиционированы относительно этого контейнера */
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Обеспечивает, что изображение заполняет область без искажений */
    display: block;
}

/* Стили для стрелок навигации */
.swiper-button-prev,
.swiper-button-next {
    color: #000; /* Цвет стрелок, можно настроить */
    top: 5%; /* Выравнивание по верхнему заголовку, как на макете */
    width: 20px;
    height: 20px;
    font-size: 14px;
    /* Убираем стандартные иконки Swiper, если используем свой текст (← →) */
    /* или используем стили Swiper, чтобы отобразить стрелки */
}

/* Расположение стрелок (как на макете - справа, возле заголовка) */
.swiper-button-next {
    right: 0;
}
.swiper-button-prev {
    right: 30px; /* Сдвиг, чтобы не перекрывали друг друга */
    left: auto; /* Отмена левого позиционирования по умолчанию */
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

/* иконка */
.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}



.faq-left {
    background-image: url("/web/img/faq-right.webp");
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
}

.header-scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.header-scrolled a,
.header-scrolled i {
    color: #111 !important;
}

.header-scrolled .header-logo path {
    fill: #111 !important;
}

.header-scrolled [id^="dropdown-btn"] {
    color: #111 !important;
}

.header-scrolled [id^="dropdown-menu"] {
    background-color: white !important;
}

.intro-contacts-section {
    background-image: url('/web/img/contacts.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

.order-contacts-section {
    background-image: url('/web/img/order.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

.intro-reviews-section {
    background-image: url('/web/img/reviews.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

.intro-productions-section {
    background-image: url('/web/img/productions.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

.intro-gallery-section {
    background-image: url('/web/img/gallery.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

.intro-catalogue-section {
    background-image: url('/web/img/catalogue.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

.intro-producing-section {
    background-image: url('/web/img/producing.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

.intro-about-section {
    background-image: url('/web/img/about.png');
    background-size: cover;
    background-position: center;
    position: relative;
    margin-top: -5px;
}

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out both;
}

/* =================================
   2. Анимация масштабирования (Zoom In)
   ================================= */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-zoom-in {
    animation: zoomIn 1s ease-out both;
}

/* Установка задержек для последовательного появления */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.8s ease-out both;
}

 .clipped-top-right {
     /* Создаем срезанный угол с помощью clip-path: polygon(верхний левый, верхний правый (с отступом), срез, нижний правый, нижний левый) */
     clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 0 100%);
 }

/* =================================
   2. Анимация появления снизу (Fade In Up)
   ================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out both;
}

/* =================================
   3. Анимация появления слайдов (Zoom In)
   ================================= */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-zoom-in {
    animation: zoomIn 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55) both; /* Более упругая анимация */
}

/* Установка задержек для последовательного появления */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }
.delay-6 { animation-delay: 1.2s; }
.delay-7 { animation-delay: 1.4s; }

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Увеличено смещение для лучшего эффекта */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.9s ease-out both;
}

/* Установка задержек для последовательного появления */
.delay-h { animation-delay: 0.1s; } /* Заголовок */
.delay-c1 { animation-delay: 0.3s; } /* Карточка 1 */
.delay-c2 { animation-delay: 0.5s; } /* Карточка 2 */
.delay-c3 { animation-delay: 0.7s; } /* Карточка 3 */
.delay-c4 { animation-delay: 0.9s; } /* Карточка 4 */

/* Дополнительный стиль для карточки (clip-path) */
.mission-card-clip {
    /* Создание скошенного угла */
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0% 100%);
}

/* Основной контейнер элемента */
.accordion-item {
    background-color: #191A1A;
    margin-bottom: 16px;
    border: 1px solid #303131; /* Тонкая рамка в обычном состоянии */
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Эффект при наведении на закрытый элемент */
.accordion-item:not(.active):hover {
    border-color: #4b4c4c;
    background-color: #1f2020;
}

/* Активное состояние (открыто) */
.accordion-item.active {
    border: 1px solid #dc2626 !important; /* Ваш красный акцент */
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.1); /* Легкое свечение */
}

/* Кнопка переключения */
.accordion-toggle {
        padding: 20px 24px;
    border-bottom: 1px solid #1f2020 !important;
    transition: background-color 0.2s ease;
}

/* Контентная область с плавной анимацией высоты */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    padding: 0 !important;
    opacity: 0;
}

.accordion-item.active .accordion-content {
    max-height: 500px; /* неважно, т.к. JS перезапишет */
    opacity: 1;
    padding: 1rem 24px !important;
}

.active .accordion-content {
    max-height: 500px;
    opacity: 1;
    padding: 1rem !important;
}

/* Стилизация текста */
.accordion-item span {
    transition: color 0.3s ease;
}

.active .accordion-toggle span {
    color: #dc2626; /* Текст вопроса становится красным при открытии */
}

.partners-item {
    height: 240px !important; 
    display: flex;
    align-items: center;
    justify-content: center;
}

.partners-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    display: block;
}

.partners-item:hover img {
    filter: grayscale(0%);
    transform: scale(1.1);
}