:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Нативные элементы (выпадающие списки, скроллбары) в цвет темы */
html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

/* Chrome берёт цвет выпадающего меню с самого элемента,
   поэтому color-scheme дублируем на полях формы,
   а опциям задаём цвета явно */
html.dark select,
html.dark input,
html.dark textarea {
    color-scheme: dark;
}

html.dark select option {
    background-color: #0F172A;
    color: #ffffff;
}

body {
    background: radial-gradient(circle at 14% 8%, rgba(59, 130, 246, .16), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(59, 130, 246, .12), transparent 30%),
    linear-gradient(180deg, #f5f9ff 0%, #e9f1fe 48%, #dcE9fd 100%);
}

html.dark body {
    background: radial-gradient(circle at 14% 8%, rgba(59, 130, 246, .16), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(59, 130, 246, .10), transparent 30%),
    linear-gradient(180deg, #0B1120 0%, #0D1526 48%, #101A30 100%);
}

.bottom-safe {
    bottom: calc(12px + var(--safe-bottom));
}

/* Фото в hero «Обо мне»: выносится вправо за карточку,
   но внизу обрезается по скруглению её угла (радиус 36px, вынос 24px) */
.hero-photo {
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 90px),
        calc(100% - 24px) calc(100% - 44px),
        calc(100% - 24px) calc(100% - 36px),
        calc(100% - 27px) calc(100% - 22px),
        calc(100% - 34px) calc(100% - 10px),
        calc(100% - 46px) calc(100% - 3px),
        calc(100% - 60px) 100%,
        0 100%
    );
}

/* Иллюстрация в hero главной: наклоны и самостоятельное «парение» */
.hero-mock-card {
    transform: rotate(3deg);
}

.hero-chip-code {
    transform: rotate(-6deg);
}

.hero-chip-rocket {
    transform: rotate(6deg);
}

@media (prefers-reduced-motion: no-preference) {
    .float-soft {
        animation: floatSoft 5.5s ease-in-out infinite;
    }

    @keyframes floatSoft {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    .hero-mock-card {
        animation: heroFloatCard 6s ease-in-out infinite;
    }

    .hero-chip-code {
        animation: heroFloatCode 5s ease-in-out infinite;
        animation-delay: -2s;
    }

    .hero-chip-rocket {
        animation: heroFloatRocket 4.5s ease-in-out infinite;
        animation-delay: -1s;
    }

    @keyframes heroFloatCard {
        0%, 100% { transform: rotate(3deg) translateY(0); }
        50% { transform: rotate(3deg) translateY(-8px); }
    }

    @keyframes heroFloatCode {
        0%, 100% { transform: rotate(-6deg) translateY(0); }
        50% { transform: rotate(-6deg) translateY(-11px); }
    }

    @keyframes heroFloatRocket {
        0%, 100% { transform: rotate(6deg) translateY(0); }
        50% { transform: rotate(6deg) translateY(-7px); }
    }
}

/* Раскрывающиеся вопросы FAQ: прячем стандартный маркер, крутим стрелку */
.faq-item summary {
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item .faq-arrow {
    transition: transform .3s ease;
}

.faq-item[open] .faq-arrow {
    transform: rotate(180deg);
}

/* Подсказка «листай вправо» на телефонах (создаётся в app.js) */
.scroll-hint-wrap {
    position: relative;
}

.scroll-hint {
    position: absolute;
    top: 50%;
    right: 4px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: #3B82F6;
    color: #ffffff;
    box-shadow: 0 12px 36px rgba(15, 23, 42, .25);
    transform: translateY(-50%);
    transition: opacity .3s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .scroll-hint {
        animation: hintNudge 1.6s ease-in-out infinite;
    }

    @keyframes hintNudge {
        0%, 100% { transform: translateY(-50%) translateX(0); }
        50% { transform: translateY(-50%) translateX(-8px); }
    }
}

/* Лента навыков: плавный горизонтальный скролл со снапом, скроллбар скрыт */
.skills-scroller {
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.skills-scroller::-webkit-scrollbar {
    display: none;
}

.skills-scroller > div {
    scroll-snap-align: start;
}

/* Плавное появление карточек (управляется из app.js) */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .6s ease-out, transform .6s ease-out;
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Видимая обводка при навигации с клавиатуры */
:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Отключаем анимации для пользователей с настройкой «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}