/* ============================================================
   WF DESIGN KIT — ANIMATIONS (2D CSS)
   ------------------------------------------------------------
   Portato dal catalogo skill `wf-animazioni` (2d-css.md) e da
   head.ejs (reveal). Tutto usa le variabili-tema (wf-tokens.css)
   e rispetta SEMPRE prefers-reduced-motion.
   Nessuna libreria: peso ~0, performante.
   ============================================================ */

/* --- 0. Reveal allo scroll (gestito da wf-fx.js) -----------------
   Marca un elemento con  data-reveal  (e opzionale data-delay="1..4").
   Nei blocchi Gutenberg core: usa invece le classi .fx-* (sotto),
   perché i data-attribute non si aggiungono dall'editor. */
html.wf-anim [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--fx-out),transform .8s var(--fx-out);will-change:opacity,transform}
/* prefisso obbligatorio: vedi nota in wf-home.css sulla specificita' */
html.wf-anim [data-reveal].is-visible{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"]{transition-delay:.18s}
[data-reveal][data-delay="3"]{transition-delay:.27s}
[data-reveal][data-delay="4"]{transition-delay:.36s}
html.wf-reveal-all [data-reveal]{opacity:1!important;transform:none!important}

/* --- 1. Entrance keyframes riutilizzabili (classi, partono al load) --- */
@keyframes fx-fade-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fx-fade-in{from{opacity:0}to{opacity:1}}
@keyframes fx-zoom-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes fx-slide-left{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.fx-fade-up{animation:fx-fade-up var(--fx-slow,.8s) var(--fx-out) both}
.fx-fade-in{animation:fx-fade-in 1s ease both}
.fx-zoom-in{animation:fx-zoom-in .7s var(--fx-out) both}
.fx-slide-left{animation:fx-slide-left .8s var(--fx-out) both}
.fx-d1{animation-delay:.12s}.fx-d2{animation-delay:.24s}.fx-d3{animation-delay:.36s}.fx-d4{animation-delay:.48s}

/* --- 2. Card "premium" con hover (lift + bordo brand + glow) --- */
.fx-card{position:relative;border:1px solid var(--color-border);border-radius:16px;
  background:var(--color-bg-light);
  transition:transform var(--fx-base) var(--fx-out),box-shadow var(--fx-base) ease,border-color var(--fx-base) ease;
  will-change:transform}
.fx-card:hover{transform:translateY(-8px);border-color:var(--color-primary);
  box-shadow:0 24px 50px -18px rgba(var(--color-primary-rgb),.45)}
.fx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  transition:opacity var(--fx-base) ease;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,rgba(var(--color-primary-rgb),.12),transparent 60%)}
.fx-card:hover::after{opacity:1}

/* --- 3. Bottone con riempimento animato + shine --- */
.fx-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:var(--radius-button);font-weight:700;color:var(--color-on-primary);
  background:var(--color-primary);border:0;cursor:pointer;isolation:isolate;text-decoration:none;
  transition:transform var(--fx-fast) ease,box-shadow var(--fx-fast) ease}
.fx-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(var(--color-primary-rgb),.6)}
.fx-btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transition:transform .6s ease}
.fx-btn:hover::before{transform:translateX(120%)}

/* --- 4. Titolo con gradient animato (shine che scorre) --- */
@keyframes fx-shine{to{background-position:200% center}}
.fx-title-gradient{
  background:linear-gradient(90deg,var(--color-text) 0%,var(--color-primary) 25%,
    var(--color-accent) 50%,var(--color-primary) 75%,var(--color-text) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;animation:fx-shine 6s linear infinite}

/* --- 5. Sfondo sezione con gradient animato (aurora soft) --- */
@keyframes fx-aurora{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.fx-aurora-bg{position:relative;background-size:300% 300%;animation:fx-aurora 18s ease infinite;
  background-image:linear-gradient(120deg,var(--color-bg) 0%,rgba(var(--color-primary-rgb),.10) 35%,
    var(--color-bg-light) 65%,rgba(var(--color-primary-rgb),.08) 100%)}

/* --- 5b. Blob morbidi animati (decoro, no immagini) --- */
@keyframes fx-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.95)}}
.fx-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-blobs span{position:absolute;width:42vmax;height:42vmax;border-radius:50%;filter:blur(60px);opacity:.18}
.fx-blobs span:nth-child(1){background:var(--color-primary);top:-10%;left:-8%;animation:fx-blob 22s ease-in-out infinite}
.fx-blobs span:nth-child(2){background:var(--color-accent);bottom:-12%;right:-6%;animation:fx-blob 26s ease-in-out infinite reverse}

/* --- 6. Marquee infinito (loghi/parole/animali che scorrono) --- */
@keyframes fx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fx-marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marquee__track{display:flex;gap:3rem;width:max-content;animation:fx-marquee 28s linear infinite}
.fx-marquee:hover .fx-marquee__track{animation-play-state:paused}

/* --- 7. Hover zoom su immagini (gallerie/schede animale) --- */
.fx-img-zoom{overflow:hidden}
.fx-img-zoom img{transition:transform .9s var(--fx-out)}
.fx-img-zoom:hover img{transform:scale(1.05)}

/* ============================================================
   REGOLA D'ORO: niente animazioni per chi le ha disattivate.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .fx-fade-up,.fx-fade-in,.fx-zoom-in,.fx-slide-left{animation:none!important}
  .fx-title-gradient{animation:none}
  .fx-aurora-bg{animation:none}
  .fx-blobs span{animation:none}
  .fx-marquee__track{animation:none}
  .fx-card{transition:none}.fx-card:hover{transform:none}
  .fx-btn:hover{transform:none}.fx-btn::before{display:none}
  .fx-img-zoom:hover img{transform:none}
}

/* ============================================================
   WF SIGNATURE — "percorso" con linea brand che si disegna.
   Porta 1:1 la signature-timeline di WebFactory (es. Lencioni
   "Dal 2009") al block theme. Cavalca il reveal del kit: nessun
   JS aggiuntivo (la linea si riempie quando .wf-sig__track riceve
   .is-visible dall'IntersectionObserver di wf-fx.js).
   Markup: .wf-sig > .wf-sig__track[data-reveal] (linea) +
           .wf-sig__nodes > .wf-sig__node[data-reveal][data-delay]
   ============================================================ */
.wf-sig{position:relative}
.wf-sig__track{position:absolute;left:0;right:0;top:46px;height:3px;background:rgba(26,26,26,.12);border-radius:3px;opacity:1!important;transform:none!important}
.wf-sig__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--brand-gradient);border-radius:3px;transition:width 1.6s var(--fx-out,cubic-bezier(.22,.61,.36,1))}
.wf-sig__track.is-visible .wf-sig__fill{width:100%}
.wf-sig__nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2rem)}
.wf-sig__node{position:relative;text-align:center}
.wf-sig__media{display:block;width:96px;height:96px;border-radius:50%;margin:0 auto .9rem;overflow:hidden;border:3px solid var(--color-base,#fff);box-shadow:0 8px 22px rgba(26,26,26,.16);position:relative;z-index:1}
.wf-sig__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--fx-out,ease)}
.wf-sig__node:hover .wf-sig__media img{transform:scale(1.08)}
.wf-sig__hab{font-size:1.12rem;margin:0 0 .25rem;color:var(--color-secondary,#4b6b26)}
.wf-sig__count{display:block;font-weight:700;font-size:1.25rem;color:var(--color-contrast,#1a1a1a);line-height:1.1}
.wf-sig__sub{display:block;font-size:.92rem;color:var(--color-contrast-2,#5c5c5c)}
@media (max-width:760px){
  .wf-sig__track{left:48px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .wf-sig__fill{width:100%!important;height:0;transition:height 1.6s var(--fx-out,ease)}
  .wf-sig__track.is-visible .wf-sig__fill{height:100%}
  .wf-sig__nodes{grid-template-columns:1fr;gap:1.4rem}
  .wf-sig__node{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:1rem;text-align:left}
  .wf-sig__media{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .wf-sig__fill{transition:none;width:100%}
}