/* Privacy Protect, builder C (templates/site/privacy_art/_trust_join.html): trust cards + icons, trust panel, join map.
   Needs identity-art.css + identity-art.js (the .ipa sizing, a-* entrances, .is-in / .is-on engine, reduced motion).
   Pieces are laid out in px at the original 1x size. Only transform / opacity animate; loops run only while
   the piece is on screen (.is-on). Anything that only exists for motion starts at opacity 0, so the still
   (reduced motion) state is the original art. */

/* ---------- trust cards (page markup marked data-ipa-host): identity-art.js copies the icon piece's is-armed / is-in / is-on
   onto the card, so these rules key off the card's own classes. (They used :has(): every class flip then restyled every
   i / svg / img on the page through the site's own :has() rules.) ---------- */
.mht_trust_item[data-ipa-host] { overflow: hidden; }
.mht_trust_col_left > .mht_trust_item:nth-child(2) { --cd: .14s; --sheen: ppc-sheen-1; }
.mht_trust_col_left > .mht_trust_item:nth-child(3) { --cd: .28s; --sheen: ppc-sheen-2; }
.mht_trust_item[data-ipa-host].is-armed:not(.is-in),
.mht_trust_item[data-ipa-host].is-armed:not(.is-in) .mht_trust_item__icon { opacity: 0; }
.mht_trust_item[data-ipa-host].is-in { animation: ipa-rise .8s cubic-bezier(.2, .7, .2, 1) var(--cd, 0s) backwards; }
.mht_trust_item[data-ipa-host].is-in .mht_trust_item__icon { animation: ipa-pop .7s cubic-bezier(.2, .8, .2, 1.1) calc(var(--cd, 0s) + .2s) backwards; }
/* light sweep across each card, one after another (same period, phase in the keyframes) */
.mht_trust_item[data-ipa-host]::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 45%; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .055) 50%, rgba(255, 255, 255, 0)); transform: translateX(-100%); opacity: 0; }
@keyframes ppc-sheen-0 { 0% { transform: translateX(-100%); opacity: 1; } 16%, 100% { transform: translateX(240%); opacity: 1; } }
@keyframes ppc-sheen-1 { 0%, 8% { transform: translateX(-100%); opacity: 1; } 24%, 100% { transform: translateX(240%); opacity: 1; } }
@keyframes ppc-sheen-2 { 0%, 16% { transform: translateX(-100%); opacity: 1; } 32%, 100% { transform: translateX(240%); opacity: 1; } }
.mht_trust_item[data-ipa-host].is-on::after { animation: var(--sheen, ppc-sheen-0) 7.5s ease-in-out 2s infinite; }

/* ---------- trust item icons (24px; 20px at <= 768px like the old img) ---------- */
.ppc-ic { flex: none; }
@media screen and (max-width: 768px) { .mht_trust_item__icon > .ppc-ic { max-width: 20px; } }
.ppc-ic__in { position: relative; width: 24px; height: 24px; }
.ppc-ic__in svg { position: absolute; left: 0; top: 0; }
.ppc-ic svg { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ppc-ic--1 path { stroke: none; }

@keyframes ppc-shake { 0%, 72%, 100% { transform: none; } 78% { transform: rotate(-7deg); } 84% { transform: rotate(6deg); } 90% { transform: rotate(-3deg); } }
@keyframes ppc-badge { 0%, 86%, 100% { transform: none; } 93% { transform: scale(1.14); } }
.ppc-ic1__hands { transform-origin: 50% 70%; }
.ppc-ic1__ring, .ppc-ic1__tick { transform-origin: 12px 5px; }
.ipa.is-on .ppc-ic1__hands { animation: ppc-shake 4.2s ease-in-out 1.2s infinite; }
.ipa.is-on .ppc-ic1__tick { animation: ppc-badge 4.2s ease-in-out 1.2s infinite; }

@keyframes ppc-lift { 0%, 55%, 100% { transform: none; } 65%, 78% { transform: translateY(-1.6px); } 84% { transform: translateY(.3px); } }
@keyframes ppc-hole { 0%, 80%, 100% { opacity: 1; } 88% { opacity: .2; } }
.ipa.is-on .ppc-ic2__shackle { animation: ppc-lift 4.6s ease-in-out 1.4s infinite; }
.ipa.is-on .ppc-ic2__hole { animation: ppc-hole 4.6s ease-in-out 1.4s infinite; }
.ipa.is-on .ppc-ic2__ring { animation: ipa-breathe 4.6s ease-in-out 1.4s infinite; }

@keyframes ppc-needle { 0%, 100% { transform: rotate(-38deg); } 45% { transform: rotate(32deg); } 60% { transform: rotate(24deg); } }
.ppc-ic6__needle { transform-origin: 12px 18px; }
.ipa.is-on .ppc-ic6__needle { animation: ppc-needle 5s cubic-bezier(.45, 0, .3, 1) 1s infinite; }

/* ---------- trust panel (544 x 544) ---------- */
/* the panel's grid (page CSS paints it as the box background) moves onto a layer so it can fade in */
.mht_trust_image[data-ipa-host] { background-image: none; }
.mht_trust_image[data-ipa-host]::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; border-radius: inherit; background: url(/assets/lp/img/bg_grid_small.svg) 0 0 no-repeat; }
.mht_trust_image[data-ipa-host].is-armed:not(.is-in)::after,
.mht_trust_image[data-ipa-host].is-armed:not(.is-in) .bg_lines { opacity: 0; }
.mht_trust_image[data-ipa-host].is-in::after { animation: ipa-fade 1.4s ease backwards; }
/* the cards and this panel replace the section's old data-aos fade-up (removed from .mht_trust_cols): the frame fades in, its parts build */
.mht_trust_image[data-ipa-host].is-armed:not(.is-in) { opacity: 0; }
.mht_trust_image[data-ipa-host].is-in { animation: ipa-fade .9s ease backwards; }
.mht_trust_image[data-ipa-host].is-in .bg_lines { animation: ipa-fade 1.6s ease .2s backwards; }

/* ring = the original group: white .1 fill + inner glow (was an SVG filter; a box-shadow rasters far cheaper) at opacity --o */
.ppc-trust__ring { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, calc(.1 * var(--o))); box-shadow: inset 0 6.08px 30.4px rgba(255, 255, 255, calc(.08 * var(--o))); }
/* rings: pop in from the centre outward, then a slow swell runs outward through them (desktop only:
   four 544px layers scaling is too much for a throttled phone) */
@keyframes ppc-ring-0 { 0%, 24%, 100% { transform: none; } 12% { transform: scale(1.03); } }
@keyframes ppc-ring-1 { 0%, 8%, 32%, 100% { transform: none; } 20% { transform: scale(1.025); } }
@keyframes ppc-ring-2 { 0%, 16%, 40%, 100% { transform: none; } 28% { transform: scale(1.02); } }
@keyframes ppc-ring-3 { 0%, 24%, 48%, 100% { transform: none; } 36% { transform: scale(1.015); } }
@media (min-width: 769px) {
    .ipa.is-in.is-on .ppc-trust__ring { animation: ipa-pop .8s cubic-bezier(.2, .8, .2, 1.1) var(--d) backwards, var(--rw) 4.4s ease-in-out 1.4s infinite; }
}
@keyframes ppc-ripple-a { 0% { transform: scale(1); opacity: .9; } 50%, 100% { transform: scale(2.32); opacity: 0; } }
@keyframes ppc-ripple-b { 0%, 50% { transform: scale(1); opacity: 0; } 50.1% { opacity: .9; } 100% { transform: scale(2.32); opacity: 0; } }
.ppc-trust__ripple { position: absolute; left: 155px; top: 155px; width: 234px; height: 234px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .1); opacity: 0; }
.ipa.is-on .ppc-trust__ripple { animation: var(--rp, ppc-ripple-a) 4.4s cubic-bezier(.2, .6, .3, 1) 1.4s infinite; }

.ppc-trust__shield { position: absolute; left: 200px; top: 186px; width: 143px; height: 160px; }
.ppc-trust__shield > div > * { position: absolute; left: 0; top: 0; }
@keyframes ppc-shine { 0%, 100% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 30% { transform: translateX(200px); opacity: 1; } 31% { opacity: 0; } }
.ppc-trust__shield .ppc-trust__clip { left: -200px; top: -186px; width: 544px; height: 544px; }
.ppc-trust__shine { position: absolute; left: 150px; top: 170px; width: 46px; height: 190px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); opacity: 0; }
.ipa.is-on .ppc-trust__shine { animation: ppc-shine 5.5s ease-in-out 1.6s infinite; }
/* check mark "draws on": a clip box wipes left to right while its content counter-moves (transform only) */
.ppc-trust__shield .ppc-trust__tickw { left: 48px; top: 62px; width: 48px; height: 40px; overflow: hidden; }
.ppc-trust__tickw > i { position: absolute; left: -48px; top: -62px; }
.ipa.is-armed:not(.is-in) .ppc-trust__tickw { transform: translateX(-100%); }
.ipa.is-armed:not(.is-in) .ppc-trust__tickw > i { transform: translateX(48px); }
.ipa.is-in .ppc-trust__tickw { animation: ipa-wipe .6s cubic-bezier(.5, 0, .3, 1) .85s backwards; }
.ipa.is-in .ppc-trust__tickw > i { animation: ppc-unwipe .6s cubic-bezier(.5, 0, .3, 1) .85s backwards; }
@keyframes ppc-unwipe { from { transform: translateX(48px); } }

.ppc-trust__card {
    position: absolute; left: 201px; top: 382px; width: 334px; height: 132px;
    border-radius: 19.8px;
    background: rgba(255, 255, 255, .01);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15), inset 0 4.8px 28.6px rgba(255, 255, 255, .04);
    font-family: 'Inter Tight', 'Inter', sans-serif; line-height: 1; white-space: nowrap; color: #fff;
}
.ppc-trust__card > * { position: absolute; }
.ppc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ppc-trust__q { left: 14px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ppc-trust__q svg { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.ppc-trust__q::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); opacity: 0; }
@keyframes ppc-look { 0%, 100% { transform: none; } 25% { transform: translate(1.2px, -.8px); } 50% { transform: translate(-.6px, 1px); } 75% { transform: translate(-1.2px, -.4px); } }
.ipa.is-on .ppc-trust__q svg { animation: ppc-look 3.2s ease-in-out 1.4s infinite; }
.ipa.is-on .ppc-trust__q::after { animation: ipa-ping 3.2s ease-out 1.4s infinite; }
.ppc-trust__title { left: 48.3px; top: 20.2px; font-size: 16px; font-weight: 500; }
.ppc-trust__live { left: 272px; top: 16px; width: 48px; height: 30px; border-radius: 15px; background: rgba(24, 221, 77, .1); color: #18dd4d; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.ppc-trust__live::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgba(24, 221, 77, .5), 0 0 12px rgba(24, 221, 77, .35); opacity: 0; }
@keyframes ppc-live { from { transform: scale(1); opacity: .9; } to { transform: scale(1.35, 1.6); opacity: 0; } }
.ipa.is-on .ppc-trust__live::before { animation: ppc-live 2.2s ease-out 1.6s infinite; }
.ppc-trust__num { left: 14.6px; top: 65.8px; font-size: 30px; font-weight: 500; }
/* "200+" counts up once: each digit is a column of earlier digits sliding up into a 1em window */
.ppc-roll { display: inline-block; vertical-align: top; height: 1em; overflow: hidden; }
.ppc-roll > span { display: block; position: relative; }
.ppc-roll i { position: absolute; left: 0; font-style: normal; }
@keyframes ppc-roll { from { transform: translateY(calc(var(--k) * 1em)); } }
.ipa.is-in .ppc-roll > span { animation: ppc-roll 1.6s cubic-bezier(.3, .6, .2, 1) .9s backwards; }
.ppc-trust__sub { left: 14.4px; top: 103.2px; font-size: 12px; }
.ppc-trust__logo { top: 70px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .08); }
.ppc-trust__logo svg { position: absolute; left: 0; top: 0; }
.ppc-trust__logo .ppc-st { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.ppc-trust__logo > i { position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); opacity: 0; }
@keyframes ppc-scan { 0%, 30%, 100% { opacity: 0; } 10% { opacity: 1; } }
.ipa.is-on .ppc-trust__logo > i { animation: ppc-scan 3.6s ease-in-out calc(1.8s + var(--i) * .9s) infinite; }
.ppc-trust__more { box-shadow: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }
.ppc-trust__more > span { position: relative; }

@media (prefers-reduced-motion: reduce) {
    .mht_trust_item, .mht_trust_item::after, .mht_trust_item__icon,
    .mht_trust_image, .mht_trust_image::after, .mht_trust_image .bg_lines { animation: none !important; }
}

/* ---------- join data map (667 x 351) ---------- */
.ppc-join__defs { position: absolute; }
.ppc-join__arc { position: absolute; }
.ppc-join__arc path { fill: none; stroke: url(#ppcArcG); stroke-width: 1.5; stroke-dasharray: 4 4; }
/* Join loops share one start time and one period per group (phase lives in the keyframes), so their
   iteration boundaries coincide: the browser then wakes the main thread once per cycle, not once per element. */
@keyframes ppc-wave-0 { 0%, 30%, 100% { opacity: 1; } 15% { opacity: .3; } }
@keyframes ppc-wave-1 { 0%, 36%, 100% { opacity: 1; } 21% { opacity: .3; } }
@keyframes ppc-wave-2 { 0%, 42%, 100% { opacity: 1; } 27% { opacity: .3; } }
@keyframes ppc-wave-3 { 0%, 48%, 100% { opacity: 1; } 33% { opacity: .3; } }
@keyframes ppc-wave-4 { 0%, 54%, 100% { opacity: 1; } 39% { opacity: .3; } }
/* the wave runs on the arc's svg, not on the arc (which fades in via .a-fade): with both opacity animations on one element
   Chrome kept the wave on the main thread and restyled the page every frame while the join was on screen */
.ipa.is-on .ppc-join__arc svg { animation: var(--wave) 4.4s ease-in-out 1.6s infinite; }
/* phones: five half-ring layers blending every frame cost too much on a throttled CPU; they keep the entrance only */
@media (max-width: 767px) { .ipa.is-on .ppc-join__arc svg { animation: none; } }

.ppc-join__ln, .ppc-join__fl { position: absolute; height: 1px; margin-top: -.5px; transform-origin: 0 50%; }
.ppc-join__ln { background: rgba(255, 255, 255, .8); }
/* the travelling light is a sibling of the line (not a child of its grow animation) and 12px tall: Chrome kept a 3px-tall layer on the main thread */
.ppc-join__fl b { position: absolute; left: 0; top: -5.5px; width: 100%; height: 12px; opacity: 0; }
.ppc-join__fl b::before { content: ''; position: absolute; right: 100%; top: 4.5px; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(133, 133, 233, 0), #fff 70%, rgba(255, 255, 255, 0)); }
@keyframes ppc-flow-a { 0% { transform: translateX(0); opacity: 0; } 3%, 25% { opacity: 1; } 30%, 100% { transform: translateX(calc(100% + 22px)); opacity: 0; } }
@keyframes ppc-flow-b { 0%, 33% { transform: translateX(0); opacity: 0; } 36%, 58% { opacity: 1; } 63%, 100% { transform: translateX(calc(100% + 22px)); opacity: 0; } }
@keyframes ppc-flow-c { 0%, 66% { transform: translateX(0); opacity: 0; } 69%, 91% { opacity: 1; } 96%, 100% { transform: translateX(calc(100% + 22px)); opacity: 0; } }
.ipa.is-on .ppc-join__fl b { animation: var(--fl) 6s linear 1.6s infinite; }

.ppc-join__dot { position: absolute; width: 48px; height: 48px; }
.ppc-join__disc { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.ppc-join__disc.is-blue { background: linear-gradient(265.04deg, #8585e9 0%, #264bff 100%); }
.ppc-join__disc svg { fill: none; stroke: #264bff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ppc-join__disc.is-blue svg { stroke: #fff; }
.ppc-join__disc .ppc-fill { fill: #264bff; stroke: none; }
@keyframes ppc-bob-0 { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes ppc-bob-1 { 0%, 100% { transform: translateY(-2px); } 17% { transform: translateY(-3px); } 67% { transform: none; } }
@keyframes ppc-bob-2 { 0%, 100% { transform: translateY(-2px); } 33% { transform: none; } 83% { transform: translateY(-3px); } }
.ipa.is-on .ppc-join__disc { animation: var(--bob) 6s ease-in-out 1.2s infinite; }