/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS
FILE: brands.css
VERSION: 6.0 (PURE CSS ENGINE)
DESCRIPTION: Styles specifically for the Brands Portfolio page. 
             Handles 3D hovers, gradients, typography, and dark/light modes.
====================================================================================================
*/

/* 
==========================================================================
1.0 CORE VARIABLES & RESET
Настройка переменных для быстрой смены цветов и поведения.
==========================================================================
*/
:root {
    /* Базовые цвета брендов (резервные) */
    --color-akko: #a855f7;
    --color-ocypus: #F5D450;
    --color-io: #00E5FF;
    --color-lunacy: #FF00FF;

    /* Физика анимаций (Apple-style easing) */
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

    /* Размеры */
    --card-min-height: 650px;
    /* Минимальная высота карточки, чтобы влез текст */
}

/* Глобальные фиксы для страницы */
body {
    overflow-x: hidden;
    /* Запрет горизонтального скролла */
    background-color: #050505;
    /* Глубокий черный по умолчанию */
}

/* 
==========================================================================
2.0 HERO SECTION TYPOGRAPHY
Стили для огромного заголовка и водяных знаков.
==========================================================================
*/

/* Гигантский заголовок "НАШ АРСЕНАЛ" */
.text-display-giant {
    /* Адаптивный размер: от 3rem до 9rem в зависимости от ширины экрана */
    font-size: clamp(3rem, 11vw, 9rem);
    font-weight: 900;
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -0.06em;
    /* Плотный кернинг (буквы близко) */

    /* Градиентная заливка текста (Металлик) */
    background-image: linear-gradient(180deg,
            #ffffff 20%,
            rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Тень для объема */
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8));

    /* Оптимизация */
    will-change: transform, opacity;
}

/* 
==========================================================================
3.0 THE TRINITY CARD ENGINE (CORE)
Самая важная часть. Логика карточек брендов.
==========================================================================
*/

/* Базовый контейнер карточки */
.card-trinity {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Контент прижат к низу */

    min-height: var(--card-min-height);
    border-radius: 2.5rem;
    /* Сильное скругление */

    /* Фон и границы */
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);

    /* Скрываем всё, что вылезает (для зума картинок) */
    overflow: hidden;

    /* Курсор */
    cursor: default;

    /* Плавность переходов */
    transition:
        transform 0.6s var(--ease-smooth),
        box-shadow 0.6s var(--ease-smooth),
        border-color 0.4s ease;

    /* Оптимизация для видеокарт */
    transform: translateZ(0);
    will-change: transform, box-shadow;
}

/* 
   HOVER STATE (Наведение на карточку)
   1. Карточка поднимается
   2. Тень становится цветной (в цвет бренда)
   3. Рамка светится
*/
.card-trinity:hover {
    transform: translateY(-12px) scale(1.01);
    z-index: 10;

    /* Переменная --brand-color задается инлайново в HTML для каждой карточки */
    border-color: var(--brand-color);

    /* Сложная тень: обычная темная + цветное свечение */
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.8),
        0 0 40px -10px var(--brand-color);
}

/* 
==========================================================================
3.1 LOGO ANIMATION
Логотип по центру, который уезжает вверх.
==========================================================================
*/
.trinity-logo-container {
    position: absolute;
    inset: 0;
    /* Растянут на всю карточку */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    transition: transform 0.7s var(--ease-smooth);
    pointer-events: none;
    /* Пропускает клики сквозь себя */
}

/* При наведении логотип уезжает вверх на 25% */
.card-trinity:hover .trinity-logo-container {
    transform: translateY(-25%);
}

.logo-trinity {
    /* Фильтр делает лого белым (если исходник черный) */
    filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
    transition: all 0.5s ease;
}

/* При наведении логотип чуть уменьшается */
.card-trinity:hover .logo-trinity {
    transform: scale(0.85);
    filter: brightness(0) invert(1) drop-shadow(0 0 30px var(--brand-color));
}

/* 
==========================================================================
3.2 CONTENT REVEAL (TEXT & DESCRIPTION)
Блок с описанием, который выезжает снизу.
==========================================================================
*/
.trinity-content {
    position: relative;
    z-index: 20;
    width: 100%;
    padding: 3rem 2.5rem;

    /* Фон-градиент, чтобы текст читался на любом фоне */
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.95) 10%,
            rgba(0, 0, 0, 0.8) 40%,
            transparent 100%);

    /* Начальное состояние: сдвинут вниз и прозрачен */
    transform: translateY(100px);
    opacity: 0;

    transition: all 0.6s var(--ease-smooth);
}

/* При наведении контент появляется */
.card-trinity:hover .trinity-content {
    transform: translateY(0);
    opacity: 1;
}

/* Заголовок бренда (Akko, Ocypus...) */
.title-trinity {
    /* Градиентный текст */
    background: linear-gradient(90deg, #ffffff, #aaaaaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

/* Кнопка "ИССЛЕДОВАТЬ" */
.btn-trinity {
    margin-top: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
}

/* 
==========================================================================
3.3 RICH TEXT STYLING (HTML INJECTION)
Стили для тех HTML-тегов, которые приходят из translationsbrand.js
==========================================================================
*/

/* Контейнер описания */
.desc-trinity {
    font-weight: 300;
    color: #cccccc;
    /* Сглаживание шрифтов */
    -webkit-font-smoothing: antialiased;
}

/* Жирный текст внутри описания */
.desc-trinity b,
.desc-trinity strong {
    color: #ffffff;
    font-weight: 700;
}

/* Списки (ul) внутри описания */
.desc-trinity ul {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.desc-trinity li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    /* Отступ между иконкой и текстом */
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Иконки в списках (раскрашиваем через span style в JS, но тут база) */
.desc-trinity li span:first-child {
    font-size: 1.1em;
    line-height: 1;
    margin-top: 2px;
    /* Выравнивание с текстом */
}

/* Блоки с рамками (если есть в HTML) */
.desc-trinity .border-l-2 {
    border-left-width: 3px;
    padding-left: 1rem;
    margin-bottom: 1rem;
    font-style: italic;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
    padding: 0.75rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* 
==========================================================================
4.0 MOBILE ADAPTATION
На телефонах нет ховера, поэтому показываем всё сразу.
==========================================================================
*/
@media (hover: none) and (pointer: coarse) {

    /* Отключаем минимальную высоту, пусть тянется по контенту */
    .card-trinity {
        min-height: auto;
        height: auto;
    }

    /* Логотип делаем статичным сверху */
    .trinity-logo-container {
        position: relative;
        height: 180px;
        transform: none !important;
        margin-bottom: -50px;
        /* Наезд контента на лого */
    }

    .logo-trinity {
        width: 140px;
        transform: none !important;
        filter: brightness(0) invert(1);
        /* Без теней */
    }

    /* Контент показываем всегда */
    .trinity-content {
        transform: none !important;
        opacity: 1 !important;
        background: linear-gradient(to top, #0a0a0a 80%, transparent 100%);
        padding: 1.5rem;
    }

    /* Кнопка всегда видна */
    .btn-trinity {
        background-color: var(--brand-color) !important;
        color: #000 !important;
        margin-top: 2rem;
    }

    /* Технические надписи (ID) */
    .absolute.top-8 {
        opacity: 1 !important;
        top: 1.5rem;
        left: 1.5rem;
    }
}

/* 
==========================================================================
5.0 LIGHT MODE OVERRIDES (FIX)
Адаптация для светлой темы.
==========================================================================
*/
html.light-mode body {
    background-color: #ffffff;
    color: #111827;
}

/* Заголовок в светлой теме */
html.light-mode .text-display-giant {
    background-image: linear-gradient(180deg,
            #111827 30%,
            #6b7280 100%);
    filter: none;
}

/* Карточка в светлой теме */
html.light-mode .card-trinity {
    background-color: #f9fafb;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
}

html.light-mode .card-trinity:hover {
    background-color: #ffffff;
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.1),
        0 0 0 2px var(--brand-color);
    /* Цветная обводка вместо свечения */
}

/* Логотип в светлой теме (Инвертируем обратно в черный) */
html.light-mode .logo-trinity {
    filter: brightness(0);
    /* Черный */
    opacity: 0.8;
}

html.light-mode .card-trinity:hover .logo-trinity {
    opacity: 1;
}

/* Контент в светлой теме */
html.light-mode .trinity-content {
    background: linear-gradient(to top,
            rgba(255, 255, 255, 0.98) 20%,
            rgba(255, 255, 255, 0.8) 60%,
            transparent 100%);
}

html.light-mode .title-trinity {
    background: linear-gradient(90deg, #000000, #333333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}

/* Текст описания в светлой теме */
html.light-mode .desc-trinity {
    color: #4b5563;
    /* Gray-600 */
}

html.light-mode .desc-trinity b,
html.light-mode .desc-trinity strong {
    color: #111827;
    /* Black */
}

html.light-mode .desc-trinity ul {
    border-top-color: rgba(0, 0, 0, 0.1);
}

html.light-mode .desc-trinity .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

/* Кнопка в светлой теме */
html.light-mode .btn-trinity {
    background-color: #111827;
    color: #ffffff;
}

html.light-mode .card-trinity:hover .btn-trinity {
    background-color: var(--brand-color);
    color: #000000;
}

/* ID и Origin в светлой теме */
html.light-mode .absolute.top-8 .text-white {
    color: #111827;
}

/* Добавьте это в конец style.css для страховки */
body:not(.lenis-stopped):not(:has(#mobile-menu.is-open)) {
    overflow-y: auto !important;
}

/* Специально для Андроида в Chrome */
@media screen and (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}