/* ================= Общие стили openhr ================= */

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

/* Появление контента */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: revealUp .9s cubic-bezier(.22,1,.36,1) both; }

@keyframes navDown {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}
.nav-anim { animation: navDown .7s cubic-bezier(.22,1,.36,1) both; }

/* Анимации логотипа */
.logo-box { animation: logoFadeIn .6s cubic-bezier(.22,1,.36,1) both; }
.logo-arc { animation: logoArc .8s cubic-bezier(.22,1,.36,1) .15s both; stroke-dasharray: 90; stroke-dashoffset: 90; }
.logo-node-c { animation: logoNode .5s cubic-bezier(.34,1.56,.64,1) .3s both; transform-origin: 36px 48px; transform: scale(0); }
.logo-node-l { animation: logoNode .5s cubic-bezier(.34,1.56,.64,1) .45s both; transform-origin: 14px 66px; transform: scale(0); }
.logo-node-r { animation: logoNode .5s cubic-bezier(.34,1.56,.64,1) .45s both; transform-origin: 58px 66px; transform: scale(0); }
.logo-line-l { animation: logoFadeIn .4s ease .6s both; }
.logo-line-r { animation: logoFadeIn .4s ease .6s both; }
.logo-text  { animation: logoSlideIn .6s cubic-bezier(.22,1,.36,1) .2s both; }
.logo-tag   { animation: logoFadeIn .5s ease .55s both; }
@keyframes logoFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes logoArc     { from { stroke-dashoffset:90 } to { stroke-dashoffset:0 } }
@keyframes logoNode    { from { transform:scale(0); opacity:0 } to { transform:scale(1); opacity:1 } }
@keyframes logoSlideIn { from { opacity:0; transform:translateX(-8px) } to { opacity:1; transform:translateX(0) } }

/* WebGL-фон */
#three-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
}

.neon-text-glow { text-shadow: 0 0 25px rgba(0, 242, 254, 0.45), 0 0 60px rgba(161, 84, 242, 0.25); }
html:not(.dark) .neon-text-glow { text-shadow: none; }

/* Стеклянные поверхности */
.glassmorphism {
    background: rgba(3, 6, 18, 0.55);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: background .3s, border-color .3s;
}
html:not(.dark) .glassmorphism {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(15, 23, 42, 0.08);
}

.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all .5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
html:not(.dark) .glass-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.01) 0%, rgba(15, 23, 42, 0.03) 100%);
    border-color: rgba(15, 23, 42, 0.06);
}

/* Секции с подложкой при скролле */
.scroll-bg-section {
    transition: background-color .8s cubic-bezier(0.25, 0.8, 0.25, 1), border-color .8s ease;
    background-color: transparent;
}

@media (max-width: 1024px) {
    #hud-container { display: none !important; }
}

/* ================= Анимации AI-карточек (bento) ================= */
@keyframes scanY { 0% { top: -30%; } 100% { top: 110%; } }
.scan-beam {
    position: absolute; left: 0; right: 0; height: 36px; top: -30%;
    background: linear-gradient(180deg, transparent, rgba(0, 242, 254, .16), transparent);
    animation: scanY 3.2s linear infinite; pointer-events: none;
}
html:not(.dark) .scan-beam { background: linear-gradient(180deg, transparent, rgba(30, 58, 138, .10), transparent); }

@keyframes fillX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.match-fill { transform-origin: left center; animation: fillX 1.3s cubic-bezier(.22,1,.36,1) both; }

@keyframes chatPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.chat-pop { opacity: 0; animation: chatPop .5s cubic-bezier(.22,1,.36,1) both; }

.typing-dot {
    width: 6px; height: 6px; border-radius: 9999px; background: #94a3b8;
    display: inline-block; animation: typingBounce 1.2s ease-in-out infinite;
}
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ================= Панель-резюме кандидата ================= */
.profile-overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(2, 4, 10, .6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .3s ease;
}
.profile-overlay.open { opacity: 1; }
.profile-overlay.hidden { display: none; }
.profile-panel {
    position: absolute; top: 0; right: 0; height: 100%;
    width: 100%; max-width: 480px;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    overflow-y: auto;
}
.profile-overlay.open .profile-panel { transform: translateX(0); }

/* ================= Облако тегов (интеграции) ================= */
.tag-cloud { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.tag-cloud .tag {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem; border-radius: 9999px; font-weight: 700; white-space: nowrap;
    border: 1px solid rgba(15, 23, 42, .1); background: rgba(15, 23, 42, .03); color: #334155;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
    animation: chatPop .4s cubic-bezier(.22,1,.36,1) both;
}
.dark .tag-cloud .tag { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #cbd5e1; }
.tag-cloud .tag:hover { transform: translateY(-2px); border-color: rgba(0, 242, 254, .4); }
.tag-cloud .tag.s { font-size: .72rem; opacity: .85; }
.tag-cloud .tag.m { font-size: .85rem; }
.tag-cloud .tag.l { font-size: 1rem; }
.tag-cloud .tag.xl { font-size: 1.15rem; padding: .4rem .95rem; }
.tag-cloud .tag.accent { border-color: rgba(0, 242, 254, .35); background: rgba(0, 242, 254, .07); color: #0891b2; }
.dark .tag-cloud .tag.accent { color: #22d3ee; }

/* ================= Таймлайн «Внедрение платформы» ================= */
.timeline { position: relative; }
.timeline-line {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(0,242,254,.35), rgba(161,84,242,.35), transparent);
}
@media (max-width: 767px) { .timeline-line { left: 19px; } }
.tl-node {
    width: 44px; height: 44px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: .8rem; color: #fff;
    background: linear-gradient(135deg, #1E3A8A, #2B5FD9);
    box-shadow: 0 0 0 6px rgba(43, 95, 217, .12);
}

/* ================= Канбан-доска ================= */
.kanban-col { transition: border-color .2s ease, background-color .2s ease; }
.kanban-col.drag-over { border-color: rgba(0, 242, 254, .5) !important; background: rgba(0, 242, 254, .05); }
.kb-card { cursor: grab; }
.kb-card:active { cursor: grabbing; }
.kb-card { animation: chatPop .35s cubic-bezier(.22,1,.36,1) both; }

/* ================= Лента интеграций (marquee) ================= */
.int-marquee {
    overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
@keyframes intScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.int-track { display: flex; align-items: center; gap: .6rem; width: max-content; animation: intScroll 18s linear infinite; }
.int-chip {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .35rem .8rem; border-radius: 9999px; font-size: .75rem; font-weight: 700;
    border: 1px solid rgba(15, 23, 42, .1); background: rgba(15, 23, 42, .04); color: #334155;
}
.dark .int-chip { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: #cbd5e1; }

/* ================= Ротатор фраз в CTA ================= */
#cta-rotator { transition: opacity .35s ease, transform .35s ease; }
.cta-phrase-out { opacity: 0; transform: translateY(8px); }
.cta-phrase-in { opacity: 1; transform: none; }

/* ================= Кнопки ================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 800; border-radius: .85rem; cursor: pointer; white-space: nowrap;
    position: relative; overflow: hidden;
    transition: transform .2s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: 2px solid rgba(0,242,254,.6); outline-offset: 2px; }

/* Основная — фирменный синий (под цвет лого) + свечение + блик */
.btn-primary {
    background-image: linear-gradient(90deg, #1E3A8A, #2B5FD9);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(30, 58, 138, .22);
}
.btn-primary:hover {
    background-image: linear-gradient(90deg, #24479F, #3168E6);
    box-shadow: 0 14px 36px rgba(30, 58, 138, .45);
    transform: translateY(-2px);
}
.btn-primary::after {
    content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg); pointer-events: none;
}
.btn-primary:hover::after { left: 140%; transition: left .7s ease; }

/* Второстепенная — стеклянная обводка */
.btn-ghost {
    background: transparent; border: 1px solid rgba(15, 23, 42, .12); color: #0f172a;
}
.dark .btn-ghost { border-color: rgba(255, 255, 255, .14); color: #fff; }
.btn-ghost:hover { background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .22); }
.dark .btn-ghost:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); }

/* ================= Поля формы ================= */
.field {
    width: 100%; border-radius: .85rem; padding: .8rem 1rem; font-size: .9rem;
    background: rgba(15, 23, 42, .04); border: 1px solid rgba(15, 23, 42, .12); color: #0f172a;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.dark .field { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: #fff; }
.field::placeholder { color: rgba(100, 116, 139, .8); }
.field:focus {
    outline: none; border-color: #00F2FE;
    box-shadow: 0 0 0 3px rgba(0, 242, 254, .18);
    background: rgba(15, 23, 42, .02);
}
.dark .field:focus { background: rgba(255, 255, 255, .07); }

/* ================= Модальное окно ================= */
.modal-overlay {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(2, 4, 10, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .25s ease;
}
.modal-overlay.open { opacity: 1; }
.modal-overlay.hidden { display: none; }
.modal-panel {
    width: 100%; max-width: 30rem; border-radius: 1.5rem;
    transform: translateY(16px) scale(.98); opacity: 0;
    transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.modal-overlay.open .modal-panel { transform: translateY(0) scale(1); opacity: 1; }