/* ============================================================================
   PersonalVault.TOP — HERO v4: цифровая чёрная дыра Монеро + орбитальное меню
   ----------------------------------------------------------------------------
   Директивы 27.10.2026 (волна 3): дыра −20%; ДВЕ НЕЗАВИСИМЫЕ карусели;
   картинки ×0.7; подписи ÷2 всегда под картинкой; обе карусели — ЗА
   потоком и ядром; логотип ×1.5; мягкое затухание у линии потока.
   Переменные — /css/pv-config.css [10].
   Слои (снизу вверх):
     z1   #pvBHBack  — canvas: 2 слоя амбиент-цифр (внутр. + внешний шире), спирали, пыль
     z2-7  .pv-orb-item задних половин ОБОИХ каруселей (уменьшены/приглушены)
     z7   #pvBHFlow  — canvas: поток хешей — ЗА чёрным центром (п.1)
     z8   #pvBHCore  — canvas: чёрное ядро + гало ×2/+25% + слабое кольцо
     z12-20 .pv-orb-item передних половин обеих каруселей
     z30  .pv-core-top / .pv-core-bottom — лого+название / слоган+CTA
     z31  .pv-drag-hint (верхний левый угол, п.9) + .pv-scroll-hint
     z1000 .pv-modal — модалка раздела
   Обрезка каруселей: .pv-orbit-top { height:50%; overflow:hidden } — видно
   только НАД линией потока; .pv-orbit-bottom — только ПОД ней.
   ============================================================================ */

/* === СЕКЦИЯ HERO (первый экран) === */
.pv-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 560px;
    overflow: hidden;
    isolation: isolate;
    touch-action: pan-y; /* вертикальный скролл жив, горизонтальный драг — вращение орбиты */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.pv-hero.pv-dragging { cursor: grabbing; }

/* === CANVAS-СЛОИ ЧЁРНОЙ ДЫРЫ === */
.pv-hero .pv-bh-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: block;
}
#pvBHBack { z-index: 1; }
#pvBHFlow { z-index: 7; }  /* поток хешей — ЗА чёрным центром (п.1): струя скрывается за ядром */
#pvBHCore { z-index: 8; }  /* чёрное ядро + гало — поверх потока */

/* === ЦЕНТРАЛЬНОЕ ЯДРО: ЛОГОТИП + НАЗВАНИЕ НАД СТРУЁЙ, СЛОГАН + CTA ПОД НЕЙ === */
.pv-core {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none; /* драг «сквозь» пустые места ядра */
}
.pv-core a { pointer-events: auto; }
.pv-core-top,
.pv-core-bottom {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--pv-core-maxw);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
}
/* верхний блок (логотип, PersonalVault, ПЕРСОНАЛЬНОЕ ХРАНИЛИЩЕ) — над струёй */
.pv-core-top { bottom: calc(50% + var(--pv-hero-line-gap)); }
/* нижний блок (слоган, чип, кнопки) — под струёй */
.pv-core-bottom { top: calc(50% + var(--pv-hero-line-gap)); }
/* тёмные гало — читаемость текста поверх диска цифр */
.pv-core-top::before,
.pv-core-bottom::before {
    content: '';
    position: absolute;
    inset: -26px -56px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(5, 5, 8, 0.90) 0%,
        rgba(5, 5, 8, 0.58) 55%,
        rgba(5, 5, 8, 0) 78%);
}
.pv-core-logo {
    width: var(--pv-core-logo-size);
    height: auto;
    margin-bottom: 0.45rem;
    filter: drop-shadow(var(--glow-logo));
}
.pv-core-title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    background: linear-gradient(135deg, #ff9d5c 0%, #f26822 55%, #d1541a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.15rem;
}
.pv-core-title a { text-decoration: none; }
.pv-core-sub {
    font-size: clamp(0.95rem, 2.6vw, 1.3rem);
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.pv-core-tagline {
    margin-top: 0.55rem;
    font-size: clamp(0.88rem, 2.2vw, 1.12rem);
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-dim);
}
.pv-core-tagline strong { color: var(--xmr-orange-soft); font-weight: 500; }
.pv-core-chip {
    margin: 0.85rem auto 0;
    padding: 0.3rem 0.8rem;
    background: var(--chip-bg);
    border: var(--border-width) solid var(--xmr-orange-dim);
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    color: var(--xmr-orange-soft);
    letter-spacing: 0.03em;
}
.pv-core-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
}
.pv-core .btn-primary { padding: 0.55rem 1.15rem; font-size: 0.8rem; }
.pv-core .btn-secondary { padding: 0.55rem 1.15rem; font-size: 0.8rem; }

/* === ОРБИТЫ: ДВЕ НЕЗАВИСИМЫЕ КАРУСЕЛИ (п.2 волны 3) ===
   Верхняя — цветная (позитив, 7 пунктов); нижняя — ч/б (защита, 7).
   Вращаются НЕЗАВИСИМО (свой rot/vel/автоворот; драг по своей половине
   экрана). МЯГКОЕ ИСЧЕЗНОВЕНИЕ (п.8): mask-градиент гасит прозрачность
   по мере подхода карточки к линии потока — вместо резкой обрезки.
   Z-ПЛАН (п.5): обе карусели целиком на заднем плане — ЗА потоком
   хешей (z7) и чёрным ядром (z8): карточки не наезжают на дыру. */
.pv-orbit {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none; /* события ловит сама секция; карточки — auto */
}
.pv-orbit-top {
    top: 0;
    height: 50%;
    overflow: hidden;
    /* плавное растворение к линии потока (п.8) */
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%, #000 calc(100% - var(--pv-orb-fade)), transparent 100%);
    mask-image: linear-gradient(to bottom,
        #000 0%, #000 calc(100% - var(--pv-orb-fade)), transparent 100%);
}
.pv-orbit-bottom {
    top: 50%;
    height: 50%;
    overflow: hidden;
    /* плавное растворение к линии потока (п.8) */
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 var(--pv-orb-fade), #000 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0%, #000 var(--pv-orb-fade), #000 100%);
}
/* нижняя карусель — чёрно-белая (п.8.3) */
.pv-orbit-bottom .pv-orb-card,
.pv-orbit-bottom .pv-orb-glitch {
    filter: grayscale(1) contrast(1.06) brightness(0.94);
}
.pv-orbit-bottom .pv-orb-item:hover .pv-orb-card { filter: grayscale(1) contrast(1.1) brightness(1.04); }
.pv-orb-item {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
    cursor: grab;
    will-change: transform;
    width: var(--pv-orb-size);
}
.pv-orb-card {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    overflow: hidden;
    /* размытые края картинки: мягкая виньетка-маска */
    -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 48%, transparent var(--pv-orb-edge-blur));
    mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 48%, transparent var(--pv-orb-edge-blur));
    transition: transform 0.25s ease, filter 0.25s ease;
    animation: pvFloat var(--pv-float-dur, 7s) ease-in-out infinite alternate;
}
.pv-orb-item:hover .pv-orb-card {
    transform: scale(1.06);
    filter: brightness(1.12);
}
/* z-подъём при ховере УБРАН (п.5): карточки не выскакивают над дырой/потоком */

/* Псевдо-анимация: помехи со сдвигом цветности (два слоя поверх фото) */
.pv-orb-glitch {
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0.28;
}
.pv-orb-glitch.g1 { animation: pvGlitchA 4.6s steps(1, end) infinite; filter: hue-rotate(-28deg) saturate(1.6); }
.pv-orb-glitch.g2 { animation: pvGlitchB 3.7s steps(1, end) infinite; filter: hue-rotate(24deg) saturate(1.4); }

/* Подпись раздела: ÷2 и ВСЕГДА ПОД картинкой (п.4 волны 3).
   Затухает вместе с карточкой у линии потока (общая mask-обёртка). */
.pv-orb-cap {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px); /* всегда под картинкой */
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: var(--pv-cap-size);
    font-weight: 700;
    line-height: 1.15;
    padding: 0.32em 0.85em;
    border-radius: var(--radius-pill);
    color: var(--xmr-orange-soft);
    background: rgba(10, 10, 12, 0.86);
    border: var(--border-width) solid var(--xmr-orange-dim);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    max-width: 130vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === ПОДСКАЗКА ВРАЩЕНИЯ ОРБИТЫ — ВЕРХНИЙ ЛЕВЫЙ УГОЛ (п.9) === */
.pv-drag-hint {
    position: absolute;
    left: 22px;
    top: 20px;
    z-index: 31;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0.03em;
    color: var(--text-faint);
    text-align: left;
    max-width: 300px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

/* === ПОДСКАЗКА СКРОЛЛА === */
.pv-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 31;
    color: var(--xmr-orange-soft);
    font-size: 22px;
    opacity: 0.7;
    animation: pvHint 2.2s ease-in-out infinite;
    pointer-events: none;
}

/* === МОДАЛЬНОЕ ОКНО РАЗДЕЛА (2/3 картинка + 1/3 текст) === */
.pv-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.pv-modal[hidden] { display: none; }
.pv-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--pv-modal-backdrop);
    backdrop-filter: blur(var(--blur-modal)) saturate(0.85);
    -webkit-backdrop-filter: blur(var(--blur-modal)) saturate(0.85);
}
.pv-modal-panel {
    position: relative;
    width: var(--pv-modal-w);
    height: var(--pv-modal-h);
    display: flex;
    flex-direction: column;
    background: rgba(13, 13, 16, 0.96);
    border: var(--border-width) solid var(--xmr-orange-dim);
    border-radius: var(--pv-modal-radius);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), var(--glow-card-lg);
    animation: pvModalIn 0.28s ease;
}
.pv-modal-img {
    flex: 0 0 var(--pv-modal-img-h);
    background-size: cover;
    background-position: center;
    position: relative;
}
/* лёгкие помехи и на картинке модалки */
.pv-modal-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    opacity: 0.12;
    filter: hue-rotate(22deg);
    animation: pvGlitchB 5.2s steps(1, end) infinite;
}
.pv-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.15rem 1.4rem 1.3rem;
    text-align: left;
}
.pv-modal-title {
    font-size: clamp(1.05rem, 3vw, 1.45rem);
    font-weight: 800;
    color: var(--xmr-orange-soft);
    margin-bottom: 0.55rem;
    line-height: 1.25;
}
.pv-modal-text {
    font-size: clamp(0.9rem, 2.4vw, 1.02rem);
    line-height: 1.65;
    color: var(--text-dim);
}
.pv-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: var(--border-width) solid var(--xmr-orange-dim);
    background: rgba(10, 10, 12, 0.72);
    color: var(--text-main);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}
.pv-modal-close:hover { border-color: var(--xmr-orange); transform: rotate(90deg); }

/* === АНИМАЦИИ === */
@keyframes pvFloat {
    0%   { translate: 0 -5px; rotate: -1.2deg; }
    100% { translate: 0 5px;  rotate: 1.2deg; }
}
@keyframes pvGlitchA {
    0%, 86%, 100% { transform: translate(0, 0); opacity: 0.10; }
    87% { transform: translate(-3px, 1px); opacity: 0.34; }
    89% { transform: translate(3px, -1px); opacity: 0.30; }
    91% { transform: translate(-2px, -1px); opacity: 0.26; }
    93% { transform: translate(0, 0); opacity: 0.10; }
}
@keyframes pvGlitchB {
    0%, 78%, 100% { transform: translate(0, 0); opacity: 0.08; }
    79% { transform: translate(2px, 2px); opacity: 0.30; }
    82% { transform: translate(-2px, 1px); opacity: 0.26; }
    85% { transform: translate(0, 0); opacity: 0.08; }
}
@keyframes pvHint {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
    50% { transform: translate(-50%, 7px); opacity: 0.95; }
}
@keyframes pvModalIn {
    from { opacity: 0; transform: scale(0.94) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* === АДАПТИВ === */
@media (max-width: 920px) {
    .pv-core-logo { width: calc(var(--pv-core-logo-size) * 0.78); }
    .pv-core .btn-primary, .pv-core .btn-secondary { padding: 0.5rem 0.95rem; font-size: 0.74rem; }
    .pv-core-top::before, .pv-core-bottom::before { inset: -18px -30px; }
    .pv-drag-hint { max-width: 220px; font-size: 12px; }
}
@media (max-width: 640px) {
    .pv-modal { padding: 0.6rem; }
    .pv-modal-img { flex-basis: 46%; }
    .pv-modal-body { padding: 0.9rem 1rem 1.1rem; }
    .pv-core-tagline { margin-top: 0.35rem; }
    :root { --pv-hero-line-gap: 20px; } /* п.5: опущено и на мобильных */
    .pv-core-top::before, .pv-core-bottom::before {
        inset: -16px -24px;
        background: radial-gradient(ellipse at center,
            rgba(5, 5, 8, 0.96) 0%,
            rgba(5, 5, 8, 0.74) 55%,
            rgba(5, 5, 8, 0) 80%);
    }
}

/* === REDUCED MOTION: без плаваний и помех === */
@media (prefers-reduced-motion: reduce) {
    .pv-orb-card, .pv-orb-glitch, .pv-modal-img::after, .pv-scroll-hint { animation: none !important; }
}