@charset "UTF-8";
/* ==========================================================================
   FARTEC — Libreria effetti d'entrata (.anim + .fx-*)
   Fonte unica usata sia dal sito sia dall'anteprima del CMS.
   var(--ease, …) ha un fallback così funziona anche dove --ease non è definita.
   ========================================================================== */
.anim {
  opacity: 0; will-change: opacity, transform, filter;
  transition: opacity .9s var(--ease, cubic-bezier(.22,.61,.36,1)),
              transform .9s var(--ease, cubic-bezier(.22,.61,.36,1)),
              filter .9s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.anim.in { opacity: 1; transform: none; filter: none; }
.anim.d1 { transition-delay: .08s; } .anim.d2 { transition-delay: .16s; }
.anim.d3 { transition-delay: .24s; } .anim.d4 { transition-delay: .32s; }

/* --- Base --- */
.fx-up { transform: translateY(40px); }
.fx-down { transform: translateY(-40px); }
.fx-left { transform: translateX(-60px); }
.fx-right { transform: translateX(60px); }
.fx-scale { transform: scale(.88); }
.fx-blur { filter: blur(16px); transform: scale(1.04); }
.fx-rotate { transform: perspective(900px) rotateX(12deg) translateY(30px); transform-origin: top; }
.fx-fade { transform: none; }

/* --- Avanzati / "spinti" --- */
/* Rimbalzo elastico dal basso (easing con overshoot) */
.fx-bounce { transform: translateY(80px) scale(.95); }
.anim.fx-bounce { transition: opacity .55s ease, transform .9s cubic-bezier(.34,1.56,.64,1); }

/* Inclinazione dinamica */
.fx-skew { transform: translateY(50px) skewY(7deg); }

/* Flip 3D orizzontale (cardine a sinistra) */
.fx-flip-x { transform: perspective(1200px) rotateY(72deg); transform-origin: left center; }

/* Ribaltamento 3D dal basso */
.fx-flip-up { transform: perspective(1200px) rotateX(-78deg); transform-origin: center bottom; }

/* Zoom + rotazione con molla */
.fx-zoom-spin { transform: scale(.2) rotate(-22deg); }
.anim.fx-zoom-spin { transition: opacity .6s ease, transform .9s cubic-bezier(.22,.9,.3,1.12); }

/* Tendina dal basso (clip-path) */
.fx-clip-up { clip-path: inset(100% 0 0 0); transform: translateY(24px); }
.anim.fx-clip-up { transition: opacity .6s ease, transform .8s var(--ease, cubic-bezier(.22,.61,.36,1)),
              clip-path .9s var(--ease, cubic-bezier(.22,.61,.36,1)); }
.anim.fx-clip-up.in { clip-path: inset(0 0 0 0); }

/* Pop elastico (keyframe) */
.anim.fx-pop { transition: none; }
.anim.fx-pop.in { animation: fxPop .85s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes fxPop {
  0% { opacity: 0; transform: scale(.3); }
  55% { opacity: 1; transform: scale(1.06); }
  75% { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   WOW — effetti da keynote (keyframe multi-step)
   ========================================================================== */
/* Reveal a cerchio che si espande dal centro */
.anim.fx-iris { transition: none; }
.anim.fx-iris.in { animation: fxIris .95s var(--ease, cubic-bezier(.22,.61,.36,1)) both; }
@keyframes fxIris {
  0% { opacity: 0; clip-path: circle(0% at 50% 50%); transform: scale(1.06); }
  100% { opacity: 1; clip-path: circle(150% at 50% 50%); transform: scale(1); }
}

/* Zoom cinematografico: arriva grande e sfocato, mette a fuoco */
.anim.fx-cinematic { transition: none; }
.anim.fx-cinematic.in { animation: fxCinematic 1.05s cubic-bezier(.16,1,.3,1) both; }
@keyframes fxCinematic {
  0% { opacity: 0; transform: scale(1.55); filter: blur(26px); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Apertura come un pannello 3D */
.anim.fx-unfold { transition: none; transform-origin: top center; }
.anim.fx-unfold.in { animation: fxUnfold 1s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fxUnfold {
  0% { opacity: 0; transform: perspective(1100px) rotateX(-96deg); }
  60% { opacity: 1; transform: perspective(1100px) rotateX(14deg); }
  100% { opacity: 1; transform: perspective(1100px) rotateX(0); }
}

/* Pendolo: oscilla appeso dall'alto */
.anim.fx-swing { transition: none; transform-origin: top center; }
.anim.fx-swing.in { animation: fxSwing 1.05s cubic-bezier(.3,.6,.4,1) both; }
@keyframes fxSwing {
  0% { opacity: 0; transform: rotate(-16deg) translateY(-16px); }
  40% { opacity: 1; transform: rotate(11deg); }
  62% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
  92% { transform: rotate(-2deg); }
  100% { opacity: 1; transform: rotate(0); }
}

/* Barrel roll: rotola entrando da sinistra */
.anim.fx-roll { transition: none; }
.anim.fx-roll.in { animation: fxRoll .95s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fxRoll {
  0% { opacity: 0; transform: translateX(-150px) rotate(-230deg); }
  100% { opacity: 1; transform: none; }
}

/* Glitch digitale */
.anim.fx-glitch { transition: none; }
.anim.fx-glitch.in { animation: fxGlitch .7s linear both; }
@keyframes fxGlitch {
  0% { opacity: 0; transform: translate(-14px, 7px) skewX(9deg); clip-path: inset(0 0 62% 0); }
  18% { opacity: 1; transform: translate(11px, -5px) skewX(-7deg); clip-path: inset(44% 0 0 0); }
  36% { transform: translate(-7px, 4px); clip-path: inset(0 32% 28% 0); }
  54% { transform: translate(5px, -3px); clip-path: inset(22% 0 0 22%); }
  72% { transform: translate(-3px, 2px); clip-path: inset(0 0 8% 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0); }
}

/* Neon glow: entra con un alone luminoso che si spegne */
.anim.fx-neon { transition: none; }
.anim.fx-neon.in { animation: fxNeon 1s ease both; }
@keyframes fxNeon {
  0% { opacity: 0; transform: scale(.9); filter: brightness(1.9) drop-shadow(0 0 0 rgba(91,157,255,0)); }
  50% { opacity: 1; filter: brightness(1.4) drop-shadow(0 0 24px rgba(91,157,255,.9)); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(91,157,255,0)); }
}

/* Senza JS: gli effetti d'entrata non nascondono mai il contenuto (SEO + resilienza). */
html:not(.js) .anim { opacity: 1 !important; transform: none !important; filter: none !important;
  clip-path: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .anim, .anim.in { opacity: 1 !important; transform: none !important; filter: none !important;
    clip-path: none !important; animation: none !important; transition: none !important; }
}