/* Splash del punzone: il punzone batte il foglio e lascia la b. Una volta per sessione (js nel <head> di index.html), saltabile con clic o tasto.
   Origine: ~/.gstack/projects/bottega-site/designs/punzone-20261008/splash-punzone-v2.html (classi con prefisso sp- per non urtare quelle del sito). */
.sp-splash{display:none}
.sp-con-splash .sp-splash{display:grid}
.sp-splash{position:fixed;inset:0;z-index:50;background:var(--carta);cursor:pointer;
  animation:sp-alza 2600ms linear both}
/* la barra rossa del sito, appesa sotto il bordo: si vede solo quando il sp-foglio si sp-alza */
.sp-splash::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:var(--rosso)}
.sp-splash[hidden]{display:none}
.sp-tela{position:absolute;inset:0;overflow:hidden;display:grid;place-items:center}

.sp-targa{--m:clamp(60px,7.4vw,108px);--s:1.3;--dy:8vh;display:flex;align-items:center;gap:calc(var(--m)*.22)}
.sp-segno{width:var(--m);height:var(--m);flex:none;animation:sp-rientra 1400ms linear both}
.sp-scena{display:block;width:100%;height:100%;overflow:visible}
.sp-filetto{flex:none;width:1.5px;height:calc(var(--m)*.78);background:var(--grafite);animation:sp-filetto 1460ms linear both}
.sp-parola{font-family:Audiowide,sans-serif;font-size:calc(var(--m)*.31);letter-spacing:.2em;margin-right:-.2em;white-space:nowrap;line-height:1}
.sp-parola span{display:inline-block;animation:sp-imprime 80ms cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(1320ms + var(--i) * 30ms)}

/* --- SVG: tutte le coordinate in unità del logo (viewBox 96) ---------- */
.sp-scena *{transform-box:view-box}
.sp-piano{transform-origin:50px 46px;transform:rotate(-4deg);animation:sp-raddrizza 1140ms linear both}
.sp-foglio{fill:none;stroke:var(--inchiostro);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;animation:sp-foglio 1000ms linear both}
.sp-parete{fill:var(--grafite);opacity:0;animation:sp-parete 1140ms linear both}
.sp-fondo{fill:var(--rosso);animation:sp-fondo 1140ms linear both}
.sp-scossa{animation:sp-scossa 520ms linear both}
.sp-forza line{stroke:var(--inchiostro);stroke-width:2.2;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:1;animation:sp-forza 680ms linear both}
.sp-forza line.sp-r{stroke:var(--rosso)}
.sp-posa{opacity:0;animation:posa 520ms linear both}
.sp-posa{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.sp-posa:nth-child(1),.sp-posa:nth-child(2){stroke:var(--grigio)}
.sp-posa:nth-child(3),.sp-posa:nth-child(4){stroke:var(--chiaro)}
.sp-posa:nth-child(1){animation-name:sp-posa1}.sp-posa:nth-child(2){animation-name:sp-posa2}.sp-posa:nth-child(3){animation-name:sp-posa3}.sp-posa:nth-child(4){animation-name:sp-posa4}
.sp-punzone{transform-origin:50px 46px;transform:translateY(-1100px);animation:sp-punzone 760ms linear both}
.sp-punzone .sp-fr{fill:var(--inchiostro)}
.sp-punzone .sp-dx{fill:var(--grafite)}
.sp-punzone .sp-cima{fill:var(--chiaro)}
.sp-punzone .sp-lu{fill:var(--grigio)}
.sp-punzone .sp-tinta{fill:var(--rosso)}
.sp-punzone .sp-spigolo{fill:none;stroke:var(--grafite);stroke-width:.8}

/* il sp-punzone: entra, carica, batte, preme, rimbalza sp-via */
@keyframes sp-punzone{
  0%      {transform:translateY(-1100px) scale(1,1);animation-timing-function:cubic-bezier(.15,.75,.3,1)}
  31.579% {transform:translateY(-120px) scale(1,1);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  42.105% {transform:translateY(-132px) scale(1,1);animation-timing-function:cubic-bezier(.5,0,.75,.5)}
  52.632% {transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
  56.842% {transform:translateY(1.5px) scale(1.04,.9);animation-timing-function:cubic-bezier(.3,.6,.4,1)}
  63.158% {transform:translateY(0) scale(1,1);animation-timing-function:linear}
  68.421% {transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.4,0,.7,.2)}
  100%    {transform:translateY(-1100px) scale(1,1)}
}
/* le pose: compaiono quando il sp-punzone ci passa, svaniscono dopo il colpo (stessa posizione fissa) */
@keyframes sp-posa1{0%,67.307%{opacity:0;transform:translateY(-117px)}67.308%,80.769%{opacity:1;transform:translateY(-117px)}96.154%,100%{opacity:0;transform:translateY(-117px)}}
@keyframes sp-posa2{0%,70.191%{opacity:0;transform:translateY(-96px)}70.192%,80.769%{opacity:1;transform:translateY(-96px)}96.154%,100%{opacity:0;transform:translateY(-96px)}}
@keyframes sp-posa3{0%,73.076%{opacity:0;transform:translateY(-62px)}73.077%,80.769%{opacity:1;transform:translateY(-62px)}96.154%,100%{opacity:0;transform:translateY(-62px)}}
@keyframes sp-posa4{0%,74.999%{opacity:0;transform:translateY(-32px)}75%,80.769%{opacity:1;transform:translateY(-32px)}96.154%,100%{opacity:0;transform:translateY(-32px)}}
/* il sobbalzo al contatto: peso */
@keyframes sp-scossa{
  0%,76.923%{transform:translateY(0)}
  78.846%{transform:translateY(3.5px)}
  84.615%{transform:translateY(-1.5px)}
  91.346%{transform:translateY(.6px)}
  100%{transform:translateY(0)}
}
/* il sp-foglio: disteso sul banco (assonometria cavaliera) finché il sp-punzone se ne va, poi si gira verso di noi.
   Si gira subito (ease-out deciso): schiacciata nel piano inclinato la b si legge "lo", quindi quella vista
   deve durare il meno possibile dopo che il punzone si è alzato (sotto il 75% dell'altezza: 70ms, erano 220ms) */
@keyframes sp-raddrizza{
  0%{transform:rotate(0deg) skewX(-45deg) scaleY(.35355)}
  45.614%{transform:rotate(0deg) skewX(-45deg) scaleY(.35355);animation-timing-function:cubic-bezier(.05,.75,.2,1)}
  100%{transform:rotate(-4deg) skewX(0deg) scaleY(1)}
}
@keyframes sp-foglio{0%{opacity:0}12%,68%{opacity:1}100%{opacity:0}}
/* l'incavo: il sp-fondo (inchiostrato) sta più in basso del bordo di h unità; nel piano inclinato
   lo spostamento (h, h/0.35355) diventa (0, h) a schermo, cioè "dentro" il sp-foglio */
@keyframes sp-fondo{
  0%,35.087%{opacity:0;transform:translate(4px,11.31px)}
  35.088%{opacity:1;transform:translate(4px,11.31px);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  45.614%{opacity:1;transform:translate(2.6px,7.35px);animation-timing-function:cubic-bezier(.05,.75,.2,1)}
  100%{opacity:1;transform:translate(0,0)}
}
@keyframes sp-parete{0%,35.087%{opacity:0}35.088%,45.614%{opacity:1;animation-timing-function:cubic-bezier(.4,0,.6,1)}100%{opacity:0}}
@keyframes sp-forza{
  0%,58.824%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.1,.8,.3,1)}
  76.471%{stroke-dashoffset:0;animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  100%{stroke-dashoffset:-1}
}
@keyframes sp-rientra{0%,75.714%{transform:translate(var(--dx,0px),var(--dy)) scale(var(--s));animation-timing-function:cubic-bezier(.65,0,.25,1)}100%{transform:translate(0,0) scale(1)}}
@keyframes sp-filetto{0%,89.041%{transform:scaleY(0);animation-timing-function:cubic-bezier(.2,.7,.3,1)}100%{transform:scaleY(1)}}
@keyframes sp-imprime{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes sp-alza{0%,82.692%{transform:translateY(0);visibility:visible;animation-timing-function:cubic-bezier(.7,0,.85,.25)}100%{transform:translateY(-100%);visibility:hidden}}
/* salto: click, tocco o tasto */
.sp-splash.sp-via{animation:sp-via 200ms cubic-bezier(.5,0,.8,.4) both}
@keyframes sp-via{from{opacity:1}to{opacity:0;visibility:hidden}}

/* movimento ridotto: niente colpo. Il timbro è già lì, la targa anche; poi lo splash si apre in dissolvenza */
@media (prefers-reduced-motion:reduce){
  .sp-punzone,.sp-posa,.sp-forza,.sp-foglio,.sp-parete{display:none}
  .sp-segno,.sp-filetto,.sp-parola span,.sp-piano,.sp-fondo,.sp-scossa{animation:none}
  .sp-fondo{opacity:1}
  .sp-splash{animation:sp-dissolve 950ms linear both}
  @keyframes sp-dissolve{0%,73.7%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
}

/* telefono: targa più grande (era 60px di segno, testo ~19px) */
@media (max-width:700px){.sp-targa{--s:1.3;--dy:6vh}}
@media (max-width:440px){.sp-targa{--m:72px}}