/* Depth: real 3D on the home page. Loaded after main.css, only on the front page.
   Everything here is switched on by body.motion-full (the "Animation level: Full" style setting) and is skipped for
   visitors who asked their device for less motion (html.px-anim is not set for them). The JS only adds pointer/scroll variables. */

/* ---------- hero: flight orbits around the globe ---------- */
.px-orbit{display:none}
.motion-full .px-orbit{display:block;position:absolute;inset:-11%;pointer-events:none;perspective:1100px;transform-style:preserve-3d}
.motion-full .px-orbit.is-back{z-index:0;clip-path:inset(0 0 50% 0)}
.motion-full .px-orbit.is-front{z-index:3;clip-path:inset(50% 0 0 0)}
.motion-full .px-hero-globe canvas,.motion-full .px-globe-fallback{z-index:1}
.px-orbit-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(66deg + var(--my,0) * 7deg)) rotateY(calc(var(--mx,0) * 9deg)) rotateZ(-18deg);transition:transform .25s ease-out}
.px-orbit-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(255,255,255,.34);animation:px-spin 38s linear infinite}
.px-orbit-ring.is-b{inset:9%;border-style:solid;border-color:rgba(255,255,255,.16);animation-duration:26s;animation-direction:reverse}
.px-sat{position:absolute;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,var(--crimson,#e31e26) 58%,#6b0c12);box-shadow:0 0 22px 4px color-mix(in srgb,var(--crimson,#e31e26) 70%,transparent)}
.px-orbit-ring.is-b .px-sat{width:12px;height:12px;margin-left:-6px;top:-6px;background:radial-gradient(circle at 34% 30%,#fff,#7fa6ff 58%,#1c3a99);box-shadow:0 0 16px 3px rgba(127,166,255,.6)}
@keyframes px-spin{to{transform:rotate(360deg)}}

/* ---------- hero: floating glass shapes with pointer and scroll depth ---------- */
.px-3d{display:none}
.motion-full .px-3d{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden;perspective:1000px;z-index:0}
.px-3d-i{position:absolute;transform:translate3d(calc(var(--mx,0) * var(--d,10) * 1px),calc(var(--my,0) * var(--d,10) * 1px + var(--hs,0) * var(--d,10) * -5px),0);transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
.px-orb{display:block;width:var(--s,90px);height:var(--s,90px);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),var(--c,#4c78ff) 40%,rgba(5,12,40,.75) 100%);box-shadow:0 26px 50px rgba(2,8,30,.45),inset -8px -10px 22px rgba(0,0,0,.35);opacity:.85;animation:px-float 9s ease-in-out infinite;animation-delay:var(--dl,0s)}
.px-cube{--e:64px;width:var(--e);height:var(--e);transform-style:preserve-3d}
.px-cube-in{position:absolute;inset:0;transform-style:preserve-3d;animation:px-cube 22s linear infinite}
.px-cube-in i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.4);background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.04));box-shadow:inset 0 0 18px rgba(127,166,255,.28);backface-visibility:visible}
.px-cube-in i:nth-child(1){transform:translateZ(calc(var(--e) / 2))}
.px-cube-in i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--e) / 2))}
.px-cube-in i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--e) / 2))}
.px-cube-in i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--e) / 2))}
.px-cube-in i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--e) / 2))}
.px-cube-in i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--e) / 2))}
@keyframes px-cube{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
@keyframes px-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.px-hero.is-off .px-orbit-ring,.px-hero.is-off .px-orb,.px-hero.is-off .px-cube-in{animation-play-state:paused}
@media (max-width:899px){.motion-full .px-3d-i.is-wide{display:none}.motion-full .px-orbit{inset:-5%}}
@media (max-width:599px){.motion-full .px-3d{display:none}}

/* ---------- 3D reveal: sections tip up into place ---------- */
.px-anim .motion-full .px-reveal{opacity:0;transform:perspective(1100px) translate3d(0,38px,-70px) rotateX(11deg);transform-origin:50% 100%;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.px-anim .motion-full .px-reveal.is-in{opacity:1;transform:none}
.px-anim .motion-full .px-stats.px-reveal{transform:perspective(1100px) translate3d(0,50px,-90px) rotateX(16deg)}
.px-anim .motion-full .px-stats.px-reveal.is-in{transform:none}
.motion-full .px-stats.is-in li{animation:px-flip .9s cubic-bezier(.2,.7,.2,1) both}
.motion-full .px-stats.is-in li:nth-child(2){animation-delay:.09s}.motion-full .px-stats.is-in li:nth-child(3){animation-delay:.18s}.motion-full .px-stats.is-in li:nth-child(4){animation-delay:.27s}
@keyframes px-flip{from{opacity:0;transform:perspective(700px) rotateX(-80deg) translateZ(-30px);transform-origin:50% 0}to{opacity:1;transform:none}}
.motion-full .px-steps-grid li.px-reveal:nth-child(2){transition-delay:.08s}.motion-full .px-steps-grid li.px-reveal:nth-child(3){transition-delay:.16s}
.motion-full .px-steps-grid li.px-reveal:nth-child(4){transition-delay:.08s}.motion-full .px-steps-grid li.px-reveal:nth-child(5){transition-delay:.16s}.motion-full .px-steps-grid li.px-reveal:nth-child(6){transition-delay:.24s}

/* ---------- tilt cards: lean towards the pointer, with a glare ---------- */
.motion-full [data-tilt]{position:relative;transform-style:preserve-3d;will-change:transform}
.motion-full [data-tilt].is-tilting{transition:transform .12s linear,box-shadow .25s!important}
.motion-full [data-tilt].is-tilt-end{transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .25s!important}
.px-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.34),transparent 52%);mix-blend-mode:soft-light;z-index:5}
[data-tilt].is-tilting .px-glare{opacity:1}
.motion-full [data-tilt] :is(.px-ico-badge,.px-ccard-code,.px-step-n,.px-cred-logo,.px-ccard-name){transform:translateZ(30px)}
.motion-full .px-director[data-tilt] .px-director-photo{transform:translateZ(26px);box-shadow:0 18px 30px rgba(10,31,92,.22)}
.motion-full .px-step-n{box-shadow:0 0 0 6px color-mix(in srgb,var(--crimson) 22%,transparent),1px 1px 0 #8f1218,2px 2px 0 #8f1218,3px 3px 0 #7a0f14,4px 4px 8px rgba(0,0,0,.35)}
.motion-full .px-ccard[data-tilt]{overflow:hidden}

/* ---------- scroll depth for the photos ---------- */
.motion-full [data-pz]{transform:translate3d(0,calc(var(--pz,0) * 1px),0);will-change:transform}

/* ---------- calm ---------- */
@media (prefers-reduced-motion:reduce){.px-orbit,.px-3d{display:none!important}.px-stats li{animation:none!important}[data-tilt]{transform:none!important}}
.motion-subtle .px-orbit,.motion-subtle .px-3d,.motion-off .px-orbit,.motion-off .px-3d{display:none}
@media (hover:none){.px-glare{display:none}}