/* Effetti Betty: pennarello, stelle, titolo animato, cursore "Vedi", zoom, torna su, onda */
.fx-grad{background-size:260% 100% !important;animation:fxgrad 7s ease-in-out infinite alternate}
@keyframes fxgrad{0%{background-position:0% 50%}100%{background-position:100% 50%}}

.fx-mark{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.fx-mark svg{position:absolute;left:-3%;bottom:-.14em;width:106%;height:.5em;overflow:visible;pointer-events:none;z-index:-1}
.fx-mark path{fill:none;stroke:#e78a2e;stroke-width:9;stroke-linecap:round;opacity:.6;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.1s ease .3s}
.fx-mark.fx-on path{stroke-dashoffset:0}

.fx-star{display:inline-block;transition:color .4s var(--d,0ms),transform .5s var(--d,0ms) cubic-bezier(.34,1.56,.64,1)}
.fx-stars:not(.fx-on) .fx-star{color:#d1d5db !important;transform:scale(.55)}

#fx-cursor{position:fixed;left:0;top:0;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:999px;background:rgba(5,22,28,.88);color:#faf7ef;display:flex;align-items:center;justify-content:center;font:700 12px/1 "Manrope",sans-serif;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;z-index:80;opacity:0;scale:.3;transition:opacity .25s,scale .3s cubic-bezier(.34,1.56,.64,1)}
#fx-cursor.on{opacity:1;scale:1}
[data-fx-gal] > *{cursor:none !important}

#fx-top{position:fixed;left:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:45;width:46px;height:46px;border-radius:999px;background:#faf7ef;color:#05161c;border:0;box-shadow:0 8px 22px rgba(5,22,28,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .3s;pointer-events:none}
#fx-top.show{opacity:1;transform:none;pointer-events:auto}
#fx-top svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#fx-top .arrow{width:18px;height:18px}

.fx-rip{position:relative;overflow:hidden;isolation:isolate}
.fx-wave{position:absolute;border-radius:999px;pointer-events:none;background:currentColor;opacity:.25;transform:scale(0);animation:fxwave .65s ease-out forwards;z-index:-1}
@keyframes fxwave{to{transform:scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .fx-grad{animation:none}
  .fx-mark path{stroke-dashoffset:0;transition:none}
  .fx-star{transition:none}
  #fx-top{transition:none}
}