.pd-pu-art {
--pd-pu-size: clamp(160px, calc(144px + 4vw), 200px);
display: inline-grid;
place-items: center;
box-sizing: content-box;
width: var(--pd-pu-size);
height: var(--pd-pu-size);
max-width: calc(100% - 24px);
padding: 12px;
margin: 0;
overflow: visible;
vertical-align: middle;
flex: none;
pointer-events: none;
}
.pd-pu-art > img.pd-pu__fig {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
aspect-ratio: 1;
object-fit: contain;
object-position: center;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
clip-path: none;
filter: drop-shadow(0 4px 5px rgb(29 25 22 / 12%));
transform-origin: center 90%;
}
.pd-pu {
--pd-pu-size: clamp(112px, calc(96px + 4vw), 152px);
position: fixed;
right: max(16px, env(safe-area-inset-right));
bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--pd-pu-viewport-inset, 0px));
z-index: 55;
width: max-content;
max-width: calc(100vw - 32px);
line-height: 0;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity .18s ease, visibility .18s;
}
.pd-pu > .pd-pu-art { --pd-pu-size: inherit; max-width: none; }
.pd-pu.is-qui { opacity: 1; visibility: visible; }
.pd-pu.is-scansata, .pd-panel-open .pd-pu { opacity: 0; visibility: hidden; transition-duration: 60ms; }
body:has(.pd-head.is-finding) .pd-pu { transform: none; }
.pd-pu .pd-pu__fig { animation: pd-pu-respira 6s ease-in-out infinite; }
.pd-pu.is-scansata .pd-pu__fig, .pd-pu.is-scrolling .pd-pu__fig { animation-play-state: paused; }
.pd-pu.is-entra .pd-pu__fig { animation: pd-pu-arriva .55s ease-out; }
.pd-pu.is-salta .pd-pu__fig { animation: pd-pu-gioia 1.1s ease-out; }
@keyframes pd-pu-respira { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes pd-pu-arriva { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pd-pu-gioia { 0%,40%,100% { transform: translateY(0); } 20% { transform: translateY(-8px) rotate(-2deg); } 60% { transform: translateY(-3px); } }
.pd-pu-fermo { display: grid; justify-items: center; gap: 18px; text-align: center; padding-block: var(--pd-space-10); }
.pd-pu-fermo .pd-pu-art { align-self: center; }
.pd-pu-fermo p { margin: 0; max-width: 44ch; color: var(--pd-ink-soft); }
.pd-pu-fermo h1,.pd-pu-fermo h2 { margin: 0; font-size: clamp(26px,3.5vw,40px); line-height: 1.12; }
.pd-perso > .pd-pu-art { margin-bottom: var(--pd-space-6); }
.pd-pu-art[hidden] { display: none; }
.pd-pu-art[data-mascotte] { position: relative; }
.pd-pu-art[data-mascotte] > img.pd-pu__fig { transition: opacity .5s ease; }
.pd-pu-art > canvas { opacity: 0; transition: opacity .5s ease; }
.pd-pu-art.pu--3d > canvas { opacity: 1; }
.pd-pu-art.pu--3d > img.pd-pu__fig { opacity: 0; animation: none; }
.pd-pu-art.pu--3d::before { content: ""; position: absolute; left: 24%; right: 24%; bottom: 0; height: 9%; background: radial-gradient(closest-side, rgb(29 25 22 / 16%), transparent); }
@media (prefers-reduced-motion: reduce) { .pd-pu { transition: none; } .pd-pu .pd-pu__fig { animation: none; } }