/* animations.css */

/* ── Базовые переходы ── */
* {
    transition: color 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease,
                opacity 0.2s ease;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, .nav-logo, .box-logo {
    font-family: 'DM Sans', sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.hero h1 {
    letter-spacing: -0.03em;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Появление страницы ── */
body {
    animation: pageIn 0.4s ease forwards;
}

@keyframes pageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Nav всегда на месте */
nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    animation: none !important;
}

/* ── Fade Up (уже есть, улучшаем) ── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Stagger для карточек ── */
.reveal:nth-child(1) { transition-delay: 0.05s; }
.reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal:nth-child(3) { transition-delay: 0.19s; }
.reveal:nth-child(4) { transition-delay: 0.26s; }
.reveal:nth-child(5) { transition-delay: 0.33s; }

/* ── Кнопки ── */
button, .btn-submit, .btn-card, .btn-buy {
    transition: background 0.2s ease,
                transform 0.15s ease,
                box-shadow 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease !important;
}

button:active, .btn-submit:active {
    transform: scale(0.97) !important;
}

/* ── Инпуты ── */
input {
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease !important;
}

input:focus {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
}

/* ── Карточки pricing ── */
.card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease,
                background 0.35s ease !important;
}

/* ── Info блоки в account ── */
.info-block, .sub-block, .info-row {
    transition: background 0.2s ease,
                border-color 0.2s ease;
}

.info-row:hover {
    background: rgba(255,255,255,0.02);
}

/* ── Nav ── */
nav {
    position: fixed !important;
    top: 0 !important;
    transform: none !important;
    transition: background 0.3s ease !important;
}

/* ── Ссылки ── */
a {
    transition: color 0.2s ease !important;
}

/* ── Модальное/раскрывающееся ── */
#pass-section {
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Пульс для активного badge ── */
.badge-green, .sub-badge[style*="4a4"] {
    animation: pulse 3s ease infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 170, 74, 0); }
    50%       { box-shadow: 0 0 0 4px rgba(74, 170, 74, 0.08); }
}

/* ── Skeleton loader (пока грузится профиль) ── */
.skeleton {
    background: linear-gradient(90deg,
        #111 25%,
        #1a1a1a 50%,
        #111 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease infinite;
    border-radius: 4px;
    color: transparent !important;
}

@keyframes skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Hover на feature items ── */
.feature-item {
    transition: transform 0.2s ease, opacity 0.2s ease;
    border-radius: 8px;
    padding: 0.5rem;
}

.feature-item:hover {
    transform: translateX(4px);
    opacity: 1;
}

/* ── Hero текст ── */
.hero h1 {
    animation: heroIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
        filter: blur(4px);
    }
    to   {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ── Scroll arrow bounce (улучшенный) ── */
.scroll-arrow {
    animation: bounceImproved 2s cubic-bezier(0.16, 1, 0.3, 1) infinite !important;
}

@keyframes bounceImproved {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%       { transform: translateY(8px); opacity: 1; }
}

/* ── Page transition при уходе ── */
.page-leaving {
    animation: pageOut 0.3s ease forwards;
}

@keyframes pageOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

/* ── Ripple эффект на кнопках ── */
.btn-submit, .btn-buy, .btn-card {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transform: scale(0);
    animation: rippleAnim 0.5s ease;
    pointer-events: none;
}

@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}