/* Ritratti scontornati: varianti "fuori cornice" (ritratti.js). */
.portrait{position:relative}
[data-portrait-fx] .portrait{overflow:visible;border:0;background:none;border-radius:0}
[data-portrait-fx] .portrait>img:not(.p-cut){visibility:hidden}
.p-frame,.p-shadow,.p-sticker,.p-hello{display:none}
.p-frame{position:absolute;inset:0;border-radius:6px;border:5px solid var(--ink);background:var(--green)}
.p-cut,.p-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;pointer-events:none;transform-origin:50% 100%;transform:translate(var(--px,0px),var(--py,0px))}
.p-cut{object-fit:cover;object-position:50% 100%;filter:grayscale(1)}
.portrait.is-hover .p-cut{filter:none}
.p-shadow{-webkit-mask:var(--cut) 50% 100%/cover no-repeat;mask:var(--cut) 50% 100%/cover no-repeat;background:var(--hero-accent)}
.p-sticker{position:absolute;z-index:2;top:12%;right:-14px;padding:9px 16px;border-radius:30px;background:var(--ink);color:var(--green);font-size:15px;font-weight:800;white-space:nowrap;transform:rotate(9deg) scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.portrait.is-hover .p-sticker{transform:rotate(9deg) scale(1);transition-delay:.12s}
/* ritaglio dentro la cornice che si apre verso l'alto all'hover */
[data-portrait-fx] .p-cut,[data-portrait-fx] .p-shadow{clip-path:inset(5px 5px 5px 5px round 3px);transition:clip-path .7s cubic-bezier(.34,1.3,.64,1),filter .5s,scale .8s cubic-bezier(.34,1.56,.64,1),translate .8s cubic-bezier(.34,1.56,.64,1),opacity .4s}
[data-portrait-fx] .p-frame{transition:transform .7s cubic-bezier(.34,1.56,.64,1),background .5s}
[data-portrait-fx] .p-frame:not(.p-frame-2):not(.p-frame-3),[data-portrait-fx] .p-cut,[data-portrait-fx] .p-sticker{display:block}

/* 1. Fuori cornice */
[data-portrait-fx="cornice"] .portrait.is-hover .p-frame{transform:scale(.9) rotate(-2deg);background:var(--sculpture-front)}
[data-portrait-fx="cornice"] figure:nth-child(2) .portrait.is-hover .p-frame{transform:scale(.9) rotate(2deg)}
[data-portrait-fx="cornice"] .portrait.is-hover .p-cut{clip-path:inset(-60% -25% 5px -25% round 3px);scale:1.2;translate:0 -9%}

/* 2. Ombra pop: una sagoma colorata sfalsata dà profondità */
[data-portrait-fx="ombra"] .p-shadow{display:block;opacity:0}
[data-portrait-fx="ombra"] .portrait.is-hover .p-frame{transform:scale(.92)}
[data-portrait-fx="ombra"] .portrait.is-hover .p-cut,[data-portrait-fx="ombra"] .portrait.is-hover .p-shadow{clip-path:inset(-60% -25% 5px -25% round 3px);scale:1.18;translate:0 -8%}
[data-portrait-fx="ombra"] .portrait.is-hover .p-shadow{opacity:1;translate:22px calc(-8% + 14px)}

/* 3. Sbircia: si vede solo il ciuffo, all'hover salta fuori */
[data-portrait-fx="sbircia"] .p-frame{background:var(--ink)}
[data-portrait-fx="sbircia"] .p-cut{translate:0 66%;clip-path:inset(5px 5px calc(66% + 5px) 5px round 3px)}
[data-portrait-fx="sbircia"] .p-hello{display:block;position:absolute;z-index:2;left:50%;top:38%;translate:-50% 0;font-size:clamp(22px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--green);white-space:nowrap;transition:opacity .3s,scale .5s cubic-bezier(.34,1.56,.64,1)}
[data-portrait-fx="sbircia"] .p-sticker{display:none}
[data-portrait-fx="sbircia"] .portrait.is-hover .p-frame{background:var(--green);transform:scale(.94)}
[data-portrait-fx="sbircia"] .portrait.is-hover .p-cut{clip-path:inset(-60% -25% 5px -25% round 3px);translate:0 -10%;scale:1.16;transition:clip-path .7s cubic-bezier(.34,1.3,.64,1),filter .5s,scale .8s cubic-bezier(.34,1.56,.64,1),translate .75s cubic-bezier(.3,1.7,.6,1)}
[data-portrait-fx="sbircia"] .portrait.is-hover .p-hello{opacity:0;scale:.6}
@media(hover:none){[data-portrait-fx="sbircia"] .p-cut{translate:0 0;clip-path:inset(5px 5px 5px 5px round 3px)}[data-portrait-fx="sbircia"] .p-hello{display:none}[data-portrait-fx="sbircia"] .p-frame{background:var(--green)}}

/* 4. Ventaglio: le cornici dietro si aprono come carte */
[data-portrait-fx="ventaglio"] .p-frame-2,[data-portrait-fx="ventaglio"] .p-frame-3{display:block}
[data-portrait-fx="ventaglio"] .p-frame-2{background:var(--sculpture-front)}
[data-portrait-fx="ventaglio"] .p-frame-3{background:var(--hero-accent)}
[data-portrait-fx="ventaglio"] .portrait.is-hover .p-frame-3{transform:rotate(-7deg) translate(-18px,6px)}
[data-portrait-fx="ventaglio"] .portrait.is-hover .p-frame-2{transform:rotate(4deg) translate(14px,-4px)}
[data-portrait-fx="ventaglio"] .portrait.is-hover .p-frame:not(.p-frame-2):not(.p-frame-3){transform:scale(.94)}
[data-portrait-fx="ventaglio"] .portrait.is-hover .p-cut{clip-path:inset(-60% -25% 5px -25% round 3px);scale:1.18;translate:0 -9%}

/* 5. Adesivo: la persona diventa uno sticker con bordo bianco che si stacca */
[data-portrait-fx="adesivo"] .p-cut{filter:grayscale(1) drop-shadow(0 0 0 #fff)}
[data-portrait-fx="adesivo"] .portrait.is-hover .p-frame{transform:scale(.93) rotate(1.5deg);background:var(--hero-accent)}
[data-portrait-fx="adesivo"] .portrait.is-hover .p-cut{clip-path:inset(-60% -25% -10% -25%);scale:1.12;translate:0 -7%;rotate:-4deg;filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(10px 12px 0 var(--ink))}
[data-portrait-fx="adesivo"] figure:nth-child(2) .portrait.is-hover .p-cut{rotate:4deg}
[data-portrait-fx="adesivo"] .p-cut{transition:clip-path .7s cubic-bezier(.34,1.3,.64,1),filter .4s,scale .8s cubic-bezier(.34,1.56,.64,1),translate .8s cubic-bezier(.34,1.56,.64,1),rotate .8s cubic-bezier(.34,1.56,.64,1)}

/* All'hover la testa esce dalla cornice di circa il 18% della larghezza di una colonna: il testo sopra resta libero.
   In home c'è già il link "Conosci lo studio" in mezzo; nella pagina Studio il testo sta subito sopra le foto. */
.studio-heading:has(+.people[data-portrait-fx])>p:last-child{margin-bottom:max(65px,calc((100vw - 2 * var(--g) - 25px) * .09 + 24px))}

/* Mobile: l'etichetta del ruolo va sulla maglia, non sul viso; la testa esce meno e c'è più spazio
   tra una persona e l'altra, così non copre nome e LinkedIn di quella sopra. */
@media(max-width:800px){
 .people{row-gap:80px}
 .p-sticker{top:auto;bottom:9%;right:-8px;padding:7px 13px;font-size:13px;transform:rotate(-5deg) scale(0)}
 .portrait.is-hover .p-sticker{transform:rotate(-5deg) scale(1)}
 .studio-heading:has(+.people[data-portrait-fx])>p:last-child{margin-bottom:max(45px,calc((100vw - 2 * var(--g)) * .075 + 24px))}
 [data-portrait-fx="cornice"] .portrait.is-hover .p-cut{clip-path:inset(-30% -25% 5px -25% round 3px);scale:1.1;translate:0 -5%}
}

/* Selettore temporaneo per provare gli effetti */