/* header-farm-button.css */

/* НОВЫЙ КОММЕНТАРИЙ: Сохраняем ваши стили для рамки и т.д. */

/* 1) .header-farm-button – контейнер с градиентной рамкой */
.header-farm-button {
    position: relative; /* Родитель для псевдоэлементов */
    display: flex; /* Flex-контейнер для центрирования */
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Выравнивание по горизонтали */
    margin-left: 8px; /* Отступ слева (как у вас) */
    margin-right: 20px; /* Отступ справа (как у вас) */
    width: 240px; /* Ширина кнопки (как у вас) */
    height: 40px; /* Высота кнопки */
    border: none; /* Без стандартной рамки */
    border-radius: 13px; /* Скругленные углы */
    box-sizing: border-box; /* Учитываем padding в размерах */
    cursor: pointer; /* Курсор указателя */
    font-family: 'SourceSans3', sans-serif; /* Шрифт текста */
    font-weight: 600; /* Полужирный текст */
    font-size: 18px; /* Размер шрифта по умолчанию */
    color: #fff; /* Запасной цвет текста */
    background-color: #141414; /* Основной цвет фона */
    background-image: radial-gradient(100% 60% at 70% 0, #929292 0, #000000 100%); /* Градиент фона */
    box-shadow: rgba(105, 105, 105, 0.4) 0 2px 4px, /* Внешняя тень */
                rgba(61, 61, 61, 0.3) 0 7px 13px -3px, /* Глубина тени */
                rgba(0, 0, 0, 0.5) 0 -1px 0 inset; /* Внутренняя тень */
    transition: box-shadow 0.2s ease-out; /* Плавный переход тени */
}

/* Градиентная рамка */
.header-farm-button:before, /* Основная рамка */
.header-farm-button:after { /* Свечение рамки */
    content: ''; /* Пустой псевдоэлемент */
    position: absolute; /* Абсолютное позиционирование */
    left: -2px; /* Сдвиг за пределы кнопки */
    top: -2px; /* Сдвиг за пределы кнопки */
    width: calc(100% + 4px); /* Ширина с учётом отступов (244px) */
    height: calc(100% + 4px); /* Высота с учётом отступов (44px) */
    border-radius: 14px; /* Скругление чуть больше кнопки */
    z-index: -1; /* Позади кнопки */
    background: linear-gradient(45deg, #141414, #1b1b1b, #2e2e2e, #e1e1e1, #2e2e2e, #1b1b1b, #141414, #141414); /* Градиент рамки */
    background-size: 400%; /* Увеличенный размер для анимации */
    animation: steam 20s linear infinite; /* Анимация движения градиента */
}

/* Свечение */
.header-farm-button:after {
    filter: blur(50px); /* Размытие для эффекта свечения */
}

/* Состояние фарминга: сохраняем рамку */
.header-farm-button.is-farming:before, /* Рамка в состоянии фарминга */
.header-farm-button.is-farming:after { /* Свечение в состоянии фарминга */
    content: ''; /* Явно задаём содержимое */
    position: absolute; /* Абсолютное позиционирование */
    left: -2px; /* Сдвиг за пределы */
    top: -2px; /* Сдвиг за пределы */
    width: calc(100% + 4px); /* Ширина рамки */
    height: calc(100% + 4px); /* Высота рамки */
    border-radius: 14px; /* Скругление */
    z-index: -1; /* Позади кнопки */
    background: linear-gradient(45deg, #141414, #1b1b1b, #2e2e2e, #e1e1e1, #2e2e2e, #1b1b1b, #141414, #141414); /* Градиент */
    background-size: 400%; /* Размер для анимации */
    animation: steam 20s linear infinite; /* Анимация рамки */
}

/* НОВЫЙ БЛОК: Делаем кнопку некликабельной в состоянии фарминга */
.header-farm-button.is-farming {
    pointer-events: none; /* Отключаем клики в состоянии фарминга */
}

/* 2) Внутренний контейнер: .farm-button-content */
.farm-button-content {
    width: 100%; /* Занимает всю ширину кнопки */
    height: 100%; /* Занимает всю высоту кнопки */
    display: flex; /* Flex для центрирования содержимого */
    align-items: center; /* Вертикальное выравнивание */
    justify-content: center; /* Горизонтальное выравнивание */
    position: relative; /* Для наложения состояний */
}

/* При нажатии: эффект уменьшения */
.farm-button-content.pressed {
    transform: scale(0.95); /* Небольшое уменьшение при нажатии */
    transition: transform 0.2s ease-out; /* Плавный переход для уменьшения */
}

/* Текст (оранжевый #faa81d) */
.header-farm-button .header-onchain-text {
    font-size: 18px; /* Размер шрифта */
    font-weight: 600; /* Полужирный */
    line-height: 1; /* Высота строки */
    white-space: nowrap; /* Без переноса текста */
    color: #faa81d; /* Оранжевый цвет */
    text-shadow: 1px 1px 6px rgb(65, 65, 65); /* Тень текста */
    transition: transform 0.2s ease-out, color 0.2s ease-out; /* Плавный переход цвета и сдвига */
}

/* Таймер (серебристый градиент) */
.header-farm-button .farm-time-text {
    font-size: 18px; /* Размер шрифта */
    font-weight: 600; /* Полужирный */
    line-height: 1; /* Высота строки */
    white-space: nowrap; /* Без переноса */
    background: linear-gradient(to top, #bebebe, #fcfcfc); /* Серебристый градиент */
    -webkit-background-clip: text; /* Градиент на тексте */
    background-clip: text; /* Стандарт для градиента */
    -webkit-text-fill-color: transparent; /* Прозрачный текст под градиент */
    text-shadow: 1px 1px 6px rgb(65, 65, 65); /* Тень текста */
    transition: transform 0.2s ease-out, background 0.2s ease-out; /* Плавный переход градиента и сдвига */
}

/* Текст "Farm" (серебристый градиент) */
.header-farm-button .farm-label-text {
    font-size: 18px; /* Размер шрифта */
    font-weight: 600; /* Полужирный */
    line-height: 1; /* Высота строки */
    white-space: nowrap; /* Без переноса */
    background: linear-gradient(to top, #bebebe, #fcfcfc); /* Серебристый градиент */
    -webkit-background-clip: text; /* Градиент на тексте */
    background-clip: text; /* Стандарт для градиента */
    -webkit-text-fill-color: transparent; /* Прозрачный текст под градиент */
    text-shadow: 1px 1px 6px rgb(65, 65, 65); /* Тень текста */
    transition: transform 0.2s ease-out, background 0.2s ease-out; /* Плавный переход градиента и сдвига */
}

/* Стили для "Farm Star Points" потоньше (пример) */
.header-farm-button .start-text {
    font-size: 18px; /* Уменьшенный размер шрифта */
}

/* Иконки */
.onchain-icon {
    width: 20px; /* Ширина иконки */
    height: 20px; /* Высота иконки */
    transition: transform 0.2s ease-out; /* Плавный сдвиг при нажатии */
}

.onchain-icon-star {
    width: 16px; /* Уменьшенная ширина иконки star */
    height: 16px; /* Уменьшенная высота иконки star */
    transition: transform 0.2s ease-out; /* Плавный сдвиг при нажатии */
}

/* Обновляем селектор анимации для вращения с лёгкой пульсацией */
.header-farm-button.is-farming .state-farming .onchain-icon:first-child {
    animation: spin-with-pulse 2s infinite linear; /* Линейное вращение с пульсацией */
}

/* При нажатии: эффекты для содержимого */
.farm-button-content.pressed .header-onchain-text {
    transform: translateY(1px); /* Сдвиг вниз при нажатии */
    color: #d88f17; /* Темнее оранжевый при нажатии */
}

.farm-button-content.pressed .farm-time-text {
    transform: translateY(1px); /* Сдвиг вниз при нажатии */
    background: linear-gradient(to top, #9a9a9a, #e0e0e0); /* Темнее градиент */
    -webkit-background-clip: text; /* Градиент на тексте */
    background-clip: text; /* Стандарт для градиента */
    -webkit-text-fill-color: transparent; /* Прозрачный текст под градиент */
}

.farm-button-content.pressed .farm-label-text {
    transform: translateY(1px); /* Сдвиг вниз при нажатии */
    background: linear-gradient(to top, #9a9a9a, #e0e0e0); /* Темнее градиент */
    -webkit-background-clip: text; /* Градиент на тексте */
    background-clip: text; /* Стандарт для градиента */
    -webkit-text-fill-color: transparent; /* Прозрачный текст под градиент */
}

.farm-button-content.pressed .onchain-icon, /* Иконка слева */
.farm-button-content.pressed .onchain-icon-star { /* Иконка справа */
    transform: translateY(1px); /* Сдвиг вниз при нажатии */
}

/* Анимация градиента рамки */
@keyframes steam {
    0% { background-position: 0 0; } /* Начальная позиция градиента */
    50% { background-position: 400% 0; } /* Середина анимации */
    100% { background-position: 0 0; } /* Конец анимации (возврат) */
}

/* Обновляем анимацию с вращением и небольшой пульсацией */
@keyframes spin-with-pulse {
    0% { transform: rotate(0deg) scale(1); } /* Начало: 0°, нормальный размер */
    50% { transform: rotate(180deg) scale(1.2); } /* Середина: 180°, чуть больше (5%) */
    100% { transform: rotate(360deg) scale(1); } /* Конец: полный оборот, нормальный размер */
}

/* Состояния кнопки */
.state-start, .state-farming {
    display: flex; /* Flex для выравнивания элементов */
    align-items: center; /* Центрирование по вертикали */
    justify-content: center; /* Центрирование по горизонтали */
    gap: clamp(2px, calc((240px - (20px + 40px + 40px + 16px + 60px)) / 6), 8px); /* Динамический отступ между элементами */
    width: 100%; /* Полная ширина контейнера */
    opacity: 0; /* Начальная прозрачность */
    position: absolute; /* Абсолютное позиционирование для наложения */
    transition: opacity 0.2s ease-in-out; /* Плавный переход прозрачности (0.2s) для загрузки и меню */
}

/* НОВЫЙ БЛОК: Класс для медленного перехода при смене состояний кнопки */
.state-start.state-transition-slow, .state-farming.state-transition-slow {
    transition: opacity 0.9s ease-in-out; /* Плавный переход прозрачности (0.9s) для смены состояний */
}

/* Активное состояние: показываем с анимацией */
.state-start.active, .state-farming.active {
    opacity: 1; /* Полная видимость */
    z-index: 1; /* Поднимаем активное состояние выше */
}

/* Неактивное состояние: скрываем с анимацией */
.state-start:not(.active), .state-farming:not(.active) {
    opacity: 0; /* Полная прозрачность */
    z-index: 0; /* Опускаем неактивное состояние ниже */
}