/* Privacy Protect hero + about illustrations (templates/site/privacy_art/_hero_about.html).
   Needs identity-art.css (.ipa sizing, a-* entrances, loop gating) and identity-art.js (fit + in-view engine).
   Laid out in px at the PNGs' 1x size. Only transform / opacity animate; loops run only while .is-on. */

/* ---------- hero: data exposure / removed / secure ---------- */
/* own layer keeps the text grayscale-antialiased like the PNG; text `top` snaps to whole px, so half-px nudges use transform */
.ppa-hero > .ipa__s { will-change: opacity; }
.ppa-hero > .ipa__s > div, .ppa-hero > .ipa__s > i { position: absolute; }
.ppa-hero__glow { left: 270px; top: 10px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .05), rgba(0, 0, 0, .03) 60%, rgba(0, 0, 0, 0)); }

.ppa-hero__wire { left: 0; top: 0; }
.ppa-hero__wire path { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 2; stroke-dasharray: 2 4; }
.ppa-hero__pulse { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, .5) 45%, rgba(255, 255, 255, 0)); opacity: 0; }
@keyframes ppa-wire {
    0% { transform: translate(119px, 59px); opacity: 0; }
    3% { opacity: 1; }
    6% { transform: translate(119px, 18px); }
    8% { transform: translate(124px, 6px); }
    10% { transform: translate(136px, 1px); }
    54.5% { transform: translate(441px, 1px); }
    56.5% { transform: translate(453px, 6px); }
    58.5% { transform: translate(458px, 18px); }
    72% { opacity: 1; }
    75%, 100% { transform: translate(458px, 132px); opacity: 0; }
}
.ipa.is-on .ppa-hero__pulse { animation: ppa-wire 5s linear 1.4s infinite; }

.ppa-hero__exp {
    left: 0; top: 59px; width: 252px; height: 273px; border-radius: 24px;
    background: linear-gradient(165deg, #2337a9 0%, #253dbd 45%, #2741c5 100%);
    box-shadow: inset 0 0 0 1.5px rgba(140, 160, 245, .32);
}
.ppa-hero__gauge { position: absolute; left: 0; top: 0; width: 252px; height: 120px; }
.ppa-hero__arc { fill: none; stroke: url(#ppaHeroArc); stroke-width: 12.5; }
.ppa-hero__thin { fill: none; stroke: rgba(150, 168, 245, .55); stroke-width: 1.5; }
.ppa-hero__needle { position: absolute; inset: 0; transform-origin: 126.5px 110.5px; rotate: 156deg; }
.ppa-hero__needle i { position: absolute; left: 56.25px; top: 107px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
@keyframes ppa-needle-in { from { rotate: 0deg; } }
@keyframes ppa-needle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
.ipa.is-in .ppa-hero__needle { animation: ppa-needle-in 1.6s cubic-bezier(.3, .7, .2, 1) .45s backwards, ppa-needle 4.5s ease-in-out 2.2s infinite; }

.ppa-hero__lvl { position: absolute; left: 0; right: 0; top: 66px; text-align: center; font-size: 18px; font-weight: 600; line-height: 22px; letter-spacing: -.01em; }
.ppa-hero__sev { position: absolute; left: 0; right: 0; top: 91px; transform: translate(.25px, .5px); text-align: center; font-size: 9px; line-height: 12px; color: rgba(255, 255, 255, .7); }
.ppa-hero__msg { position: absolute; left: 0; right: 0; top: 144px; transform: translate(-.25px, .5px); text-align: center; font-size: 19.3px; line-height: 24px; letter-spacing: -.01em; }
.ppa-hero__msg span { color: rgba(255, 255, 255, .5); }
.ppa-hero__btn {
    position: absolute; left: 57px; top: 217px; width: 138px; height: 32px; border-radius: 16px; overflow: hidden;
    background: #ebf0ff; color: #0e1335; font-size: 9.3px; font-weight: 500; line-height: 32px; text-align: center;
}
.ppa-hero__btn span { position: relative; }
.ppa-hero__sheen { position: absolute; top: 0; left: -40px; width: 40px; height: 32px; background: linear-gradient(100deg, rgba(120, 140, 255, 0), rgba(120, 140, 255, .28), rgba(120, 140, 255, 0)); transform: translateX(0); opacity: 0; }
@keyframes ppa-sheen { 0% { transform: translateX(0); opacity: 1; } 35%, 100% { transform: translateX(210px); opacity: 1; } }
.ipa.is-on .ppa-hero__sheen { animation: ppa-sheen 4.5s ease-in-out 2s infinite; }

.ppa-hero__rm {
    left: 349px; top: 132px; width: 180px; height: 68px; border-radius: 14px;
    background: linear-gradient(90deg, #283ea8 0%, #1e3194 25%, #1c2878 65%, #1c255e 100%);
    box-shadow: inset 0 0 0 1.5px rgba(125, 140, 215, .45), 0 0 30px rgba(0, 0, 0, .1);
}
.ppa-hero__ok { position: absolute; left: 13px; top: 17.5px; width: 31px; height: 31px; }
.ppa-hero__ok svg { position: relative; }
.ppa-hero__ok circle { fill: #ebf1ff; }
.ppa-hero__ok path { fill: none; stroke: #3d5af9; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ppa-hero__ping { position: absolute; inset: 0; border-radius: 50%; background: rgba(235, 241, 255, .35); opacity: 0; }
.ipa.is-on .ppa-hero__ping { animation: ipa-ping 2.8s ease-out 1.6s infinite; }
.ppa-hero__rmt { position: absolute; left: 59.5px; top: 12px; transform: translateY(.5px); font-size: 15.2px; line-height: 21.5px; letter-spacing: -.01em; white-space: nowrap; }

.ppa-hero__sec {
    left: 324px; top: 224px; width: 229.5px; height: 182.5px; border-radius: 20px;
    background: linear-gradient(90deg, #22369f 0%, #1f3196 32%, #192669 62%, #141c4d 100%);
    box-shadow: inset 0 0 0 1.5px rgba(115, 130, 210, .42);
}
.ppa-hero__sh { position: absolute; left: 84.4px; top: 18.5px; width: 59px; height: 66px; }
.ppa-hero__sh .ipa-float-s { position: relative; width: 59px; height: 66px; }
/* the shield art is ~1.5px wider than its 54/56 viewBox gives; stretch shape and glint mask together */
.ppa-hero__shape, .ppa-hero__gbox { transform-origin: 29.5px 33px; transform: translateX(1px) scaleX(1.027); }
.ppa-hero__gbox { position: absolute; left: 0; top: 0; width: 59px; height: 66px; clip-path: path('M29.50 1.05C20.02 1.05 9.48 3.67 3.69 7.86C1.90 9.11 1.05 10.79 1.05 12.99L1.05 32.48C1.05 46.10 10.54 55.52 26.34 64.43C28.24 65.48 30.76 65.48 32.66 64.43C48.46 55.52 57.95 46.10 57.95 32.48L57.95 12.99C57.95 10.79 57.10 9.11 55.31 7.86C49.52 3.67 38.98 1.05 29.50 1.05Z'); }
.ppa-hero__glint { position: absolute; inset: 0; opacity: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 65%); }
@keyframes ppa-glint { 0% { transform: translateX(-60px); opacity: 1; } 30%, 100% { transform: translateX(60px); opacity: 1; } }
.ipa.is-on .ppa-hero__glint { animation: ppa-glint 5s ease-in-out 2.4s infinite; }
.ppa-hero__lock { position: absolute; left: 20.85px; top: 22.4px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.ppa-hero__bar { height: 6px; border-radius: 3px; background: #434da3; }
.ppa-hero__bar.is-dim { background: #232e78; }
.ipa.is-in .ppa-hero__bar { transform-origin: 50% 50%; }
.ppa-hero__sect { position: absolute; left: 0; right: 0; top: 147px; transform: translate(-.5px, .5px); text-align: center; font-size: 15.1px; line-height: 20px; letter-spacing: -.01em; }

/* ---------- about: Intelliscore gauge + information at risk ---------- */
/* Own layer keeps the text grayscale-antialiased like the PNG. Text `top` snaps to whole px, so half-px nudges use transform. */
.ppa-about > .ipa__s { will-change: opacity; }
.ppa-about > .ipa__s > div { position: absolute; }
/* Backdrop least-squares fitted to the PNG: a blue glow over a diagonal base. Kept to two gradients (one per card) on purpose:
   every extra gradient shape is one more GPU shader compile in the scroll-in frame. Edges: SVG rects with a top-down fade. */
.ppa-about__frame {
    inset: 0; border-radius: 32px;
    background: radial-gradient(275.9px 281.5px at 262.7px 223.2px, rgba(30, 62, 223, .637), rgba(29, 59, 211, .653) 20%, rgba(28, 59, 212, .477) 40%, rgba(29, 67, 253, .219) 60%, rgba(15, 55, 255, .072) 80%, rgba(30, 63, 224, 0)),
        linear-gradient(112.27deg, #0f1332, #121947 18.04%, #17246a 68.33%, #152165 79.84%, #162161);
}
.ppa-about svg.ppa-about__edge { position: absolute; left: 0; top: 0; fill: none; }
/* breathing light on top of the fitted field: invisible at rest, so the still frame is the PNG */
.ppa-about__glow { position: absolute; left: 90px; top: 90px; width: 340px; height: 280px; background: radial-gradient(closest-side, rgba(45, 80, 230, .45), rgba(45, 80, 230, 0)); opacity: 0; }
@keyframes ppa-glow { 50% { opacity: .3; } }
.ipa.is-on .ppa-about__glow { animation: ppa-glow 5s ease-in-out 1s infinite; }

.ppa-about__main {
    left: 26px; top: 50px; width: 335.5px; height: 270px; border-radius: 20px;
    background: linear-gradient(93.44deg, rgba(31, 44, 109, .263), rgba(66, 92, 235, .098) 50%, rgba(52, 72, 179, .182));
}
.ppa-about__main > div { position: absolute; }
.ppa-about__t { left: 17px; top: 16px; font-size: 17.3px; font-weight: 500; line-height: 22px; letter-spacing: -.01em; white-space: nowrap; }
.ppa-about__t sup { font-size: 6px; font-weight: 600; letter-spacing: .03em; vertical-align: 0; position: relative; top: -8px; }
.ppa-about__s { left: 16.5px; top: 40px; transform: translateY(.5px); font-size: 11.1px; line-height: 16px; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.ppa-about__gauge { left: 73.5px; top: 79px; width: 188px; height: 100px; transform: translateX(-.5px); }
.ppa-about__gauge svg { position: absolute; left: 0; top: 0; }
.ppa-about__track path { fill: none; stroke: rgba(235, 241, 255, .24); stroke-width: 8.5; stroke-linecap: round; }
.ppa-about__clip { position: absolute; left: -10px; top: -10px; width: 208px; height: 101px; overflow: hidden; }
.ppa-about__turn { position: absolute; left: 10px; top: 10px; width: 188px; height: 188px; transform-origin: 94px 94px; rotate: 115deg; }
.ppa-about__turn path { fill: none; stroke: #ebf1ff; stroke-width: 8.5; }
.ppa-about__cap { position: absolute; left: 3.75px; top: 86.75px; width: 8.5px; height: 8.5px; border-radius: 50%; background: #ebf1ff; }
.ppa-about__knob { left: 0; top: 0; }
.ppa-about__knob > i { position: absolute; left: -.75px; top: 85.25px; width: 17.5px; height: 17.5px; border-radius: 50%; background: #ebf1ff; }
.ppa-about__knob b { position: absolute; left: 2.75px; top: 2.75px; width: 12px; height: 12px; border-radius: 50%; background: #375dfb; }
.ppa-about__ping { position: absolute; inset: -4px; border-radius: 50%; background: rgba(90, 130, 255, .35); opacity: 0; }
@keyframes ppa-gauge-in { from { rotate: 0deg; } }
.ipa.is-in .ppa-about__turn { animation: ppa-gauge-in 1.8s cubic-bezier(.3, .7, .2, 1) .5s backwards; }
.ipa.is-on .ppa-about__ping { animation: ipa-ping 2.6s ease-out 2.4s infinite; }
.ppa-about__n { left: 0; width: 335px; top: 131px; transform: translateY(.5px); text-align: center; font-size: 32.4px; font-weight: 400; line-height: 40px; letter-spacing: -.015em; }
.ppa-about__of { left: .5px; width: 335px; top: 174px; transform: translateY(.5px); text-align: center; font-size: 11.4px; letter-spacing: .01em; line-height: 14px; color: rgba(255, 255, 255, .5); }
.ppa-about__alert {
    left: 17px; top: 211.5px; width: 302px; height: 41.5px; border-radius: 8px;
    background: rgba(69, 108, 203, .141);
}
.ppa-about__info { position: absolute; left: 10px; top: 13.5px; fill: none; stroke: #f79728; stroke-width: 1.2; stroke-linecap: round; }
.ppa-about__info .f { fill: #f79728; stroke: none; }
.ppa-about__alert span { position: absolute; left: 31.25px; top: 13px; transform: translateY(.5px); font-size: 10.85px; letter-spacing: .005em; line-height: 14px; white-space: nowrap; color: #fff; }
.ppa-about__alert b { font-weight: 400; color: #f79728; }

.ppa-about__risk {
    left: 319px; top: 80px; width: 143px; height: 159px; border-radius: 15px;
    background: linear-gradient(72.71deg, #253bb1, #1f339d 31.42%, #1c2f92 45.67%, #192a82 67.43%, #1b2973); /* opaque, like the original frosted card */
    box-shadow: inset 0 0 0 1.25px rgba(255, 255, 255, .16);
}
.ppa-about__rt { position: absolute; left: 12px; top: 14px; font-size: 10.8px; font-weight: 500; line-height: 14px; }
.ppa-about__risk ul { list-style: none; margin: 0; padding: 0; }
.ppa-about__risk li { position: absolute; left: 12.5px; width: 124px; height: 14px; font-size: 9.5px; line-height: 14px; white-space: nowrap; padding-left: 19.5px; }
.ppa-about__risk li:nth-child(1) { top: 56px; }
.ppa-about__risk li:nth-child(2) { top: 81px; transform: translateY(.5px); }
.ppa-about__risk li:nth-child(3) { top: 107px; }
.ppa-about__risk li:nth-child(4) { top: 132px; transform: translateY(.5px); }
.ppa-about__risk li svg { position: absolute; left: 0; top: 1px; fill: none; stroke: #d3d8ee; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.ppa-about__bang { position: absolute; left: 105.75px; top: -.5px; width: 12.5px; height: 12.5px; border-radius: 50%; box-shadow: inset 0 0 0 1px #5a86fb; }
.ppa-about__bang::before { content: ''; position: absolute; left: 5.75px; top: 3px; width: 1px; height: 4px; background: #5a86fb; }
.ppa-about__bang::after { content: ''; position: absolute; left: 5.6px; top: 8.2px; width: 1.3px; height: 1.3px; border-radius: 50%; background: #5a86fb; }
/* pulse = an echo ring on its own element, invisible at rest: animating the visible icon itself kept Chrome restyling on the main thread */
.ppa-about__bang i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px #5a86fb; opacity: 0; }
@keyframes ppa-bang { 0% { transform: none; opacity: .9; } 30%, 100% { transform: scale(1.7); opacity: 0; } }
.ipa.is-on .ppa-about__bang i { animation: ppa-bang 4s ease-out calc(1.8s + var(--i) * .3s) infinite; }