/* ═══════════════════════════════════════════════════════════
   privacy-fx.css — __PRIVACY_FX_PF1__
   Анимация блока .idx-privacy: построчный stagger (A),
   перещёлкивание bad→good в правой колонке (B),
   заливка дивайдера + «замок» щита (C).
   Guard: всё скрытие скоплено под .pf-on (ставит JS в рантайме),
   поэтому без JS / при ошибке JS блок остаётся полностью видимым.
   Не конфликтует с __HOME_FX_HX1__: hx-* работает на
   .idx-privacy-header / .idx-privacy-compare, pf-* — внутри строк.
   ═══════════════════════════════════════════════════════════ */

/* ── A: построчное проявление ───────────────────────────── */
.pf-on .idx-privacy-row {
    opacity: 0;
    transform: translateY(6px);
    will-change: opacity, transform;
}

.pf-on .idx-privacy.pf-go .idx-privacy-row {
    opacity: 1;
    transform: none;
    transition:
        opacity   .5s cubic-bezier(.22,.61,.36,1) var(--pf-d, 0ms),
        transform .5s cubic-bezier(.22,.61,.36,1) var(--pf-d, 0ms);
}

.pf-on .idx-privacy.pf-done .idx-privacy-row { will-change: auto; }

.idx-privacy-rows > .idx-privacy-row:nth-child(1) { --pf-d: 0ms;   }
.idx-privacy-rows > .idx-privacy-row:nth-child(2) { --pf-d: 90ms;  }
.idx-privacy-rows > .idx-privacy-row:nth-child(3) { --pf-d: 180ms; }
.idx-privacy-rows > .idx-privacy-row:nth-child(4) { --pf-d: 270ms; }
.idx-privacy-rows > .idx-privacy-row:nth-child(5) { --pf-d: 360ms; }
.idx-privacy-rows > .idx-privacy-row:nth-child(6) { --pf-d: 450ms; }

/* ── B: бейдж — flip при смене состояния ────────────────── */
.idx-privacy-col--good .idx-privacy-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform-origin: center;
    backface-visibility: hidden;
    transition:
        background   .3s ease,
        color        .3s ease,
        border-color .3s ease;
}

.idx-privacy-col--good .idx-privacy-badge.pf-flip {
    animation: pfFlip .44s cubic-bezier(.4,0,.2,1);
}

@keyframes pfFlip {
    0%   { transform: rotateX(0deg);  }
    45%  { transform: rotateX(90deg); }
    55%  { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg);  }
}

/* моно-значение (IP → маска) */
.idx-privacy-col--good .idx-privacy-row-val.pf-morph {
    animation: pfMorph .44s cubic-bezier(.4,0,.2,1);
}

@keyframes pfMorph {
    0%   { opacity: 1; letter-spacing: 0;      }
    45%  { opacity: 0; letter-spacing: 1.5px;  }
    55%  { opacity: 0; letter-spacing: -.5px;  }
    100% { opacity: 1; letter-spacing: 0;      }
}

/* подсветка строки в момент переключения */
.idx-privacy-col--good .idx-privacy-row.pf-switch {
    animation: pfFlash .7s ease-out;
}

@keyframes pfFlash {
    0%   { background: rgba(74,158,255,.10); }
    100% { background: rgba(74,158,255,0);   }
}

/* ── C: дивайдер + щит ──────────────────────────────────── */
.pf-on .idx-privacy-divider-line {
    transform: scaleY(0);
    transform-origin: top center;
}

.pf-on .idx-privacy.pf-go .idx-privacy-divider-line {
    transform: scaleY(1);
    transition: transform 1.4s cubic-bezier(.22,.61,.36,1) 120ms;
}

.idx-privacy-shield.pf-lock {
    animation: pfLock .8s cubic-bezier(.34,1.4,.64,1);
}

@keyframes pfLock {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgba(74,158,255,.35); }
    35%  { transform: scale(1.12); box-shadow: 0 0 0 8px  rgba(74,158,255,.14); }
    100% { transform: scale(1);    box-shadow: 0 0 0 16px rgba(74,158,255,0);   }
}

.idx-privacy-shield.pf-lock svg {
    animation: pfShieldGlow .8s ease-out;
}

@keyframes pfShieldGlow {
    0%   { filter: drop-shadow(0 0 0   rgba(74,158,255,0));   }
    35%  { filter: drop-shadow(0 0 6px rgba(74,158,255,.75)); }
    100% { filter: drop-shadow(0 0 0   rgba(74,158,255,0));   }
}

/* ── a11y / print ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pf-on .idx-privacy-row,
    .pf-on .idx-privacy-divider-line {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .idx-privacy-badge.pf-flip,
    .idx-privacy-row-val.pf-morph,
    .idx-privacy-row.pf-switch,
    .idx-privacy-shield.pf-lock,
    .idx-privacy-shield.pf-lock svg { animation: none !important; }
}

@media print {
    .pf-on .idx-privacy-row {
        opacity: 1 !important;
        transform: none !important;
    }
    .pf-on .idx-privacy-divider-line { transform: none !important; }
}