/* PALBON: the immersive layer of the public pages (behaviour: public/js/palbon_immersive.js). Every rule is scoped to
   html.ps-immersive, which the script sets only when motion is allowed - without it the page is exactly as before. */

/* ----- 1. cursor: the dot is the pointer, the ring follows it. The native arrow stays hidden only while ours is on. */
html.ps-cursor-on,html.ps-cursor-on a,html.ps-cursor-on button,html.ps-cursor-on [role="button"],html.ps-cursor-on summary,html.ps-cursor-on label{cursor:none}
html.ps-cursor-on input,html.ps-cursor-on textarea,html.ps-cursor-on select,html.ps-cursor-on [contenteditable="true"]{cursor:auto}
.ps-cursor,.ps-cursor-ring{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;opacity:0;transition:opacity .25s ease}
html.ps-cursor-on .ps-cursor,html.ps-cursor-on .ps-cursor-ring{opacity:1}
.ps-cursor{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--pb-text-on-accent);mix-blend-mode:difference;transition:opacity .25s ease,width .2s ease,height .2s ease,margin .2s ease}
.ps-cursor[data-mode="view"],.ps-cursor[data-mode="link"]{width:0;height:0;margin:0}
.ps-cursor[data-mode="text"]{width:2px;height:22px;margin:-11px 0 0 -1px;border-radius:2px}
.ps-cursor-ring{display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--pb-accent-vivid) 70%,transparent);will-change:transform;
	transition:opacity .25s ease,width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1),background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.ps-cursor-ring.is-dark{border-color:color-mix(in srgb,var(--pb-text-on-accent) 70%,transparent)}
/* over a link: the ring closes in and fills softly */
.ps-cursor-ring[data-mode="link"]{width:54px;height:54px;margin:-27px 0 0 -27px;background:color-mix(in srgb,var(--pb-accent-vivid) 14%,transparent);border-color:transparent}
.ps-cursor-ring.is-dark[data-mode="link"]{background:color-mix(in srgb,var(--pb-text-on-accent) 16%,transparent)}
/* over a card: a solid disc that says View */
.ps-cursor-ring[data-mode="view"]{width:92px;height:92px;margin:-46px 0 0 -46px;border-color:transparent;background:linear-gradient(135deg,var(--pb-accent-vivid),var(--pb-band-highlight));box-shadow:0 14px 40px -10px color-mix(in srgb,var(--pb-accent-vivid) 70%,transparent)}
.ps-cursor-ring[data-mode="text"]{width:6px;height:30px;margin:-15px 0 0 -3px;border-radius:3px;border-color:transparent;background:color-mix(in srgb,var(--pb-accent-vivid) 25%,transparent)}
.ps-cursor-ring.is-down{width:30px;height:30px;margin:-15px 0 0 -15px}
.ps-cursor-ring[data-mode="view"].is-down{width:80px;height:80px;margin:-40px 0 0 -40px}
.ps-cursor-ring__label{font:600 13px/1 var(--font,inherit);letter-spacing:.06em;text-transform:uppercase;color:var(--pb-text-on-accent);opacity:0;scale:.6;transition:opacity .2s ease,scale .3s cubic-bezier(.2,.8,.2,1)}
.ps-cursor-ring[data-mode="view"] .ps-cursor-ring__label{opacity:1;scale:1}
.ps-btn,.ps-pager__dot,.ps-pause{transition:translate .35s cubic-bezier(.2,.8,.2,1),background-color .2s,box-shadow .2s,border-color .2s,color .2s}

/* ----- 2. cards fill from where the pointer came in and drain to where it left */
html.ps-immersive .ps-washable{isolation:isolate}
html.ps-immersive .ps-wash{position:absolute;left:var(--wx,50%);top:var(--wy,50%);z-index:-1;width:var(--ws,600px);height:var(--ws,600px);border-radius:50%;pointer-events:none;
	background:radial-gradient(circle,color-mix(in srgb,var(--acc,var(--pb-accent-vivid)) 16%,transparent) 0%,color-mix(in srgb,var(--acc,var(--pb-accent-vivid)) 7%,transparent) 45%,transparent 70%);
	transform:translate(-50%,-50%) scale(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
html.ps-immersive .ps-washable.is-washed .ps-wash{transform:translate(-50%,-50%) scale(1)}

/* ----- 3. the thread through the steps, its orb, and the steps it has lit */
html.ps-immersive .ps-story__steps.has-thread{position:relative}
.ps-thread{position:absolute;left:0;top:0;width:100%;overflow:visible;pointer-events:none;z-index:0}
.ps-thread__base{fill:none;stroke:color-mix(in srgb,var(--pb-accent-vivid) 16%,transparent);stroke-width:2;stroke-dasharray:4 8;stroke-linecap:round}
.ps-thread__drawn{fill:none;stroke:var(--pb-accent-vivid);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--pb-accent-vivid) 55%,transparent))}
.ps-thread__halo{fill:color-mix(in srgb,var(--pb-accent-vivid) 18%,transparent);transform-box:fill-box;transform-origin:center;animation:ps-thread-pulse 2.4s ease-in-out infinite}
.ps-thread__core{fill:var(--pb-accent-vivid);stroke:var(--pb-text-on-accent);stroke-width:3;filter:drop-shadow(0 0 10px var(--pb-accent-vivid))}
.ps-thread__orb.is-moving .ps-thread__halo{animation-duration:.9s}
@keyframes ps-thread-pulse{0%,100%{transform:scale(.8);opacity:.9}50%{transform:scale(1.25);opacity:.4}}
html.ps-immersive .ps-story__steps.has-thread>.ps-story__step{position:relative;z-index:1}
html.ps-immersive .ps-story__step .ps-story__num{transition:background-color .4s ease,color .4s ease,box-shadow .4s ease,scale .4s cubic-bezier(.2,.8,.2,1)}
html.ps-immersive .ps-story__step.is-lit .ps-story__num{background:var(--pb-accent-vivid);color:var(--pb-text-on-accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--pb-accent-vivid) 18%,transparent);scale:1.08}

/* ----- 4. the products assemble out of depth */
@media (min-width:992px){html.ps-immersive .ps-bento.ps-assemble{perspective:1400px;perspective-origin:50% 30%}}
html.ps-immersive .ps-bento.ps-assemble>*{will-change:translate,rotate,scale}

/* ----- 6. the giant outlined line behind the figures */
html.ps-immersive section.has-band{position:relative;overflow:hidden}
.ps-band{position:absolute;inset:50% 0 auto 0;translate:0 -50%;z-index:0;pointer-events:none;white-space:nowrap;user-select:none}
.ps-band__track{display:inline-block;font-size:clamp(80px,12vw,190px);font-weight:900;letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--pb-text-on-accent) 14%,transparent);will-change:transform}
html.ps-immersive section.has-band>.ps-container{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){.ps-cursor,.ps-cursor-ring,.ps-band,.ps-thread{display:none}}

/* ----- 7. the depth wave, floating heads and drifting glows (every public page and the launcher) */
html.ps-immersive .ps-wave-host{perspective:1200px}
html.ps-immersive .ps-wave{will-change:translate,rotate,scale;transform-origin:50% 50%}
/* the light sweep: only on a card that already clips its content (a launcher card), so no badge is ever cut */
html.ps-immersive .pl-card.ps-wave::after{content:"";position:absolute;inset:-20% -60%;pointer-events:none;z-index:2;translate:var(--pb-sweep,140%) 0;
	background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--pb-text-on-accent) 22%,transparent) 50%,transparent 60%);mix-blend-mode:soft-light}
html.ps-immersive .ps-glow-host{position:relative;isolation:isolate;overflow-x:clip}
.ps-glow{position:absolute;z-index:-1;left:var(--gx,20%);top:10%;width:min(520px,60vw);aspect-ratio:1;border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.22;will-change:translate}
.ps-glow--a{background:radial-gradient(circle,var(--pb-glow-1),transparent 65%)}
.ps-glow--b{top:45%;left:calc(var(--gx,20%) + 18%);background:radial-gradient(circle,var(--pb-glow-2),transparent 65%);opacity:.16}
html[data-ps-theme="dark"] .ps-glow,html[data-pl-theme="dark"] .ps-glow{opacity:.3}

/* ----- 8. the launcher's product circle */
html.ps-immersive .pl-orbit.ps-orbit-live{transform-style:preserve-3d;will-change:transform,rotate,scale}
html.ps-immersive .pl-orbit.ps-orbit-live .pl-orbit__node{transition:box-shadow .25s ease}
html.ps-immersive .pl-orbit .pl-orbit__node.is-near{z-index:3;box-shadow:0 0 0 3px var(--pl-gold-dot,var(--pb-accent-secondary)),0 12px 34px -6px color-mix(in srgb,var(--acc-l,var(--pb-accent-vivid)) 60%,transparent)}
.ps-orbit-pulse{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--pb-glow-1);pointer-events:none;animation:ps-orbit-pulse 1.4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ps-orbit-pulse{from{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}
/* ----- 9. the comet on the launcher's outer ring */
.ps-comet{transition:opacity .3s ease}
.ps-comet__tail{fill:color-mix(in srgb,var(--pb-glow-3) 35%,transparent);filter:blur(4px)}
.ps-comet__head{fill:var(--pb-glow-3);filter:drop-shadow(0 0 6px var(--pb-glow-3))}