/* Cuori di Ghostlove: fluttuano, vibrano, esplodono. Solo in home. */

.hero{position:relative}
.cuori{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}

.cuore{position:absolute;display:block;padding:6px;margin:-6px;border:0;background:none;cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;animation:fluttua var(--durata,7s) ease-in-out var(--ritardo,0s) infinite alternate;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1.4)}
.cuore svg{display:block;width:100%;height:100%;overflow:visible;
  animation:fremito var(--fremito,3.4s) linear var(--ritardo-fremito,0s) infinite;transform-origin:50% 60%}
.cuore svg path{fill:var(--rose);stroke:var(--rose);stroke-width:1.6;stroke-linejoin:round}
.cuore.vuoto svg path{fill:none;stroke:var(--ghost)}
.cuore.velato svg path{fill:var(--rose-wash);stroke:var(--rose)}
.trepidi .cuore svg{animation:fremito-forte .3s linear infinite}
@media (hover:hover){.cuore:hover svg{animation:fremito-forte .3s linear infinite}}
.cuore.nascosto{opacity:0;transform:scale(1.7);transition:opacity .14s ease-out,transform .14s ease-out;pointer-events:none}
.cuore.nasce{opacity:0;transform:scale(.3);transition:none}

@keyframes fluttua{
  from{translate:0 0}
  to{translate:var(--dx,6px) var(--dy,-14px)}
}
/* lunghi silenzi, poi un brivido */
@keyframes fremito{
  0%,78%,100%{transform:rotate(0) scale(1)}
  80%{transform:rotate(-9deg) scale(1.06)}
  83%{transform:rotate(8deg) scale(1.1)}
  86%{transform:rotate(-6deg) scale(1.06)}
  89%{transform:rotate(5deg) scale(1.08)}
  92%{transform:rotate(-2deg) scale(1.02)}
}
@keyframes fremito-forte{
  0%{transform:translate(0,0) rotate(0) scale(1.08)}
  25%{transform:translate(-1.2px,.6px) rotate(-10deg) scale(1.14)}
  50%{transform:translate(1px,-.8px) rotate(9deg) scale(1.1)}
  75%{transform:translate(-.6px,-.4px) rotate(-6deg) scale(1.16)}
  100%{transform:translate(0,0) rotate(0) scale(1.08)}
}

/* il cuore che batte dietro il 3, 2, 1 */
.stage{isolation:isolate}
.cuore-conto{position:absolute;left:50%;top:50%;width:210px;height:210px;margin:-96px 0 0 -105px;z-index:-1;pointer-events:none;opacity:0}
.cuore-conto path{fill:var(--rose-wash);stroke:var(--rose);stroke-width:.4;stroke-linejoin:round}
.cuore-conto.batte{animation:battito-conto .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes battito-conto{
  0%{opacity:0;transform:scale(calc(var(--forza,1) * .7))}
  18%{opacity:1;transform:scale(calc(var(--forza,1) * 1.12))}
  34%{transform:scale(calc(var(--forza,1) * .94))}
  50%{transform:scale(calc(var(--forza,1) * 1.06))}
  100%{opacity:.85;transform:scale(var(--forza,1))}
}

/* il cuoricino del logo batte piano */
.top .mark svg path:last-child{transform-box:fill-box;transform-origin:50% 55%;animation:battito-logo 1.9s ease-in-out infinite}
@keyframes battito-logo{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1.05)}32%{transform:scale(1.16)}}

/* la tela delle esplosioni e il bigliettino delle battute */
.scoppi{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.bigliettino{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:41;max-width:min(30em,calc(100% - 32px));
  translate:-50% 12px;opacity:0;padding:10px 16px;border-radius:14px;background:var(--ink);color:var(--paper);
  font-size:15px;line-height:1.45;box-shadow:0 18px 40px -18px rgba(16,17,26,.55);transition:opacity .35s ease,translate .35s ease;pointer-events:none;text-wrap:pretty}
.bigliettino.visibile{opacity:1;translate:-50% 0}

@media (prefers-reduced-motion:reduce){
  .cuore,.cuore svg,.top .mark svg path:last-child,.cuore-conto{animation:none!important}
  .cuore{transition:opacity .3s linear}
}