/* lucaprata.com — the face in the hero (2026-10-30, webdev ag.72). Colours and type from app.css tokens. */
/* the bust sits in a red disc, on the right of the title; the head may leave it */
/* centred on the title block (the hero minus the figures strip at the bottom), right edge on the content column */
.lpface-wrap{position:absolute;z-index:3;top:50%;transform:translateY(-50%);right:max(16px,calc((100vw - 1232px)/2));
 width:min(460px,34vw,calc(100svh - 300px));display:none}
body.face-mode .lpface-wrap{display:block}
#lpface{position:relative;display:block;width:100%;aspect-ratio:1/1;max-width:100%;touch-action:none;cursor:grab;
 appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;color:inherit;font:inherit}
#lpface:focus{outline:none}#lpface:focus-visible{outline:2px solid var(--red);outline-offset:6px}
#lpface:active{cursor:grabbing}
#lpface img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none}
body.lpface-off #lpface img{display:block}
#lpface-fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:30;display:none}
body.face-mode #lpface-fx{display:block}

/* under the title, where the rotating words were */
.lpface-ui{display:none;flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px;pointer-events:auto}
body.face-mode .lpface-ui{display:flex}
body.face-mode .hin .hrot{display:none}
.lpface-ui p{margin:0;font:11px/1.6 var(--m);letter-spacing:.09em;color:var(--fg2);max-width:46ch;text-shadow:0 1px 2px var(--halo2,transparent)}
.lpface-ui p::before{content:"\203A";color:var(--red);margin-right:.7em;font-weight:500}

/* while the face has the hero, the game's scene and its overlays step aside and the hero takes the page's ground */
body.face-mode #hero{background:var(--bg)}
body.face-mode #hero::before,body.face-mode #hero::after{display:none}
body.face-mode #gl,body.face-mode .ghud,body.face-mode .gsub,body.face-mode #glab,body.face-mode #gcw,
body.face-mode #gcard,body.face-mode #gcore,body.face-mode #ghint,body.face-mode #gstk,body.face-mode #gchap{visibility:hidden}

/* the switch: two square halves, the live one filled red, like the site's other buttons */
.lpsw{display:inline-flex;padding:0;border:1px solid var(--line2);border-radius:0;background:var(--bg2);cursor:pointer;
 font:500 11px/1 var(--m);letter-spacing:.16em;text-transform:uppercase}
.lpsw span{padding:12px 18px;color:var(--fg2);transition:background .18s,color .18s}
.lpsw[aria-checked="false"] span:first-child,.lpsw[aria-checked="true"] span:last-child{background:var(--red);color:#fff}
.lpsw:hover span{color:var(--fg)}
.lpsw[aria-checked="false"]:hover span:first-child,.lpsw[aria-checked="true"]:hover span:last-child{color:#fff}
.lpsw:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.gbar .lpsw{margin-right:10px;align-self:center}
.gbar .lpsw span{padding:8px 12px;font-size:10px}

@media (max-width:760px){
 .lpface-wrap{top:64px;right:auto;left:50%;transform:translateX(-50%);width:min(72vw,40svh)}
 body.face-mode .hin{justify-content:flex-end;padding-bottom:96px}
 .lpface-ui{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){.lpsw span{transition:none}}

/* the face as a floating button, bottom-right on every page of the router; clears the Credits badge */
body.lpfab{--lpfs:76px;--lpfr:max(20px,calc(env(safe-area-inset-right,0px) + 16px));--lpfb:calc(60px + env(safe-area-inset-bottom,0px))}
#lpfab{position:fixed;right:var(--lpfr);bottom:var(--lpfb);z-index:40;width:var(--lpfs);height:var(--lpfs);margin:0;padding:0;border:0;
 border-radius:50%;overflow:hidden;background:#E6E6E6;cursor:pointer;appearance:none;-webkit-appearance:none;
 box-shadow:0 0 0 1px var(--line2),0 12px 30px -12px rgba(0,0,0,.5);transform-origin:50% 50%;will-change:transform;
 -webkit-tap-highlight-color:transparent;touch-action:manipulation}
#lpfab img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
#lpfab:focus{outline:none}#lpfab:focus-visible{outline:2px solid var(--red);outline-offset:4px}
body.lpfab-off #lpfab{visibility:hidden;pointer-events:none}
body.lpfab-fly #lpface-fx{visibility:hidden}
body.lpfab-fly #lpfab{box-shadow:none}
/* one companion is enough: the 3D pill and its chip step aside */
body.lpfab:not(.lp3d) #strato,body.lpfab:not(.lp3d) #chip{display:none!important}

/* the pill: red cap, white cap; it opens and the way to /book/ is inside */
#lppill{position:fixed;right:var(--lpfr);bottom:calc(var(--lpfb) + var(--lpfs) + 14px);z-index:41;display:flex;height:46px;
 filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));opacity:0;transform:translateY(14px) scale(.5);transform-origin:100% 100%;pointer-events:none;
 transition:opacity .16s ease,transform .26s cubic-bezier(.2,.9,.25,1.25)}
#lppill .h{flex:none;width:30px}
#lppill .r{background:var(--red);border-radius:23px 0 0 23px}
#lppill .w{background:#E4E1DA;border-radius:0 23px 23px 0}
#lppill a{display:flex;align-items:center;max-width:0;padding:0;overflow:hidden;white-space:nowrap;background:var(--bg2);color:var(--fg);
 font:500 11px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
 transition:max-width .36s cubic-bezier(.3,.9,.3,1) .12s,padding .36s cubic-bezier(.3,.9,.3,1) .12s,color .15s}
#lppill a b{color:var(--red);margin-left:.6em;font-weight:500}
#lppill a:hover{color:var(--red)}
#lppill a:focus-visible{outline:2px solid var(--red);outline-offset:-3px}
body.lppill-open #lppill{opacity:1;transform:none;pointer-events:auto}
body.lppill-open #lppill a{max-width:220px;padding:0 18px}
@media (max-width:760px){body.lpfab{--lpfs:62px;--lpfr:max(16px,env(safe-area-inset-right,0px));--lpfb:calc(64px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){#lppill,#lppill a{transition:none}}
/* the theme squares every corner with !important: the bubble and the pill caps stay round */
html body #lpfab{border-radius:50%!important}
html body #lppill .r{border-radius:23px 0 0 23px!important}html body #lppill .w{border-radius:0 23px 23px 0!important}
/* only the bubble: no other photos of Luca on the cards (home and About) */
body.lpfab .idpw{display:none!important}body.lpfab .idc{grid-template-columns:1fr!important}