/* ==========================================================================
   AI Tools: hero animato, navigazione tra i tool, demo interattive.
   Caricato solo da pages/tools.html (insieme a js/tools.js).
   ========================================================================== */
.tl-sec{--tc:#0667b0;--tc-soft:#dcecf8;scroll-margin-top:130px}
.tl-slides-sec{--tc:#6b5bd6;--tc-soft:#ece8fb}
.tl-content-sec{--tc:#0d7b54;--tc-soft:#def4ea}
.tl-for{display:inline-block;background:var(--tc-soft);color:var(--tc);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.25rem .8rem;margin-bottom:.9rem}

/* hero */
.tl-hero .hero-grid .hero-media::before,.tl-hero .hero-grid .hero-media::after{display:none}
.tl-art{margin:0}
.tl-art svg{display:block;width:100%;height:auto;overflow:visible}
.tl-art .blob{transform-box:fill-box;transform-origin:center;animation:tl-blob 12s ease-in-out infinite alternate}
.tl-art .lbl,.tl-art .lbl text{font:600 13px var(--font);fill:#3d3e47}
.tl-art .core-t{font:800 15px var(--font);fill:#fff;letter-spacing:.08em}
.tl-art .links path{animation:tl-flow 1.6s linear infinite}
.tl-art .doc,.tl-art .out{transform-box:fill-box;transform-origin:center;animation:tl-bob 5s ease-in-out infinite}
.tl-art .d2{animation-delay:-1.4s}.tl-art .d3{animation-delay:-2.8s}
.tl-art .o-b{animation-delay:-1.8s}.tl-art .o-c{animation-delay:-3.4s}
.tl-art .ring,.tl-art .orbit{transform-box:view-box;transform-origin:280px 220px}
.tl-art .r1{animation:tl-rot 26s linear infinite}
.tl-art .r2{animation:tl-rot 38s linear infinite reverse}
.tl-art .o1{animation:tl-rot 8s linear infinite}
.tl-art .o2{animation:tl-rot 13s linear infinite reverse}
.tl-art .pulse{transform-box:fill-box;transform-origin:center;animation:tl-pulse 2.6s ease-out infinite}
.tl-art .spark{transform-box:fill-box;transform-origin:center;animation:tl-twinkle 3s ease-in-out infinite}
.tl-art .spark.s2{animation-delay:-1.4s}
/* ingresso: i pezzi arrivano in sequenza quando l'illustrazione compare */
.js .tl-hero-media:not(.in) .doc,.js .tl-hero-media:not(.in) .out,.js .tl-hero-media:not(.in) .core{opacity:0}
.js .tl-hero-media.in .doc{animation:tl-bob 5s ease-in-out infinite,tl-from-l .8s cubic-bezier(.2,.8,.2,1) backwards}
.js .tl-hero-media.in .d2{animation-delay:-1.4s,.15s}.js .tl-hero-media.in .d3{animation-delay:-2.8s,.3s}
.js .tl-hero-media.in .out{animation:tl-bob 5s ease-in-out infinite,tl-from-r .8s cubic-bezier(.2,.8,.2,1) .6s backwards}
.js .tl-hero-media.in .o-b{animation-delay:-1.8s,.75s}.js .tl-hero-media.in .o-c{animation-delay:-3.4s,.9s}
.js .tl-hero-media.in .core{transform-box:fill-box;transform-origin:center;animation:tl-core .9s cubic-bezier(.3,1.4,.5,1) .35s backwards}
@keyframes tl-blob{to{transform:scale(1.06) rotate(4deg)}}
@keyframes tl-flow{to{stroke-dashoffset:-30}}
@keyframes tl-bob{50%{transform:translateY(-7px)}}
@keyframes tl-rot{to{transform:rotate(360deg)}}
@keyframes tl-pulse{0%{transform:scale(1);opacity:.35}100%{transform:scale(1.5);opacity:0}}
@keyframes tl-twinkle{50%{transform:scale(.8) rotate(12deg);opacity:.75}}
@keyframes tl-from-l{from{opacity:0;transform:translateX(-30px)}}
@keyframes tl-from-r{from{opacity:0;transform:translateX(30px)}}
@keyframes tl-core{from{opacity:0;transform:scale(.4)}}

/* navigazione sticky tra i tool */
.tl-nav{position:sticky;top:68px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-block:1px solid var(--line)}
.tl-nav ul{list-style:none;margin:0;padding:.55rem 0;display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;justify-content:center}
.tl-nav ul::-webkit-scrollbar{display:none}
@media (max-width:640px){.tl-nav ul{justify-content:flex-start}}
.tl-pill{--tc:#0667b0;display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;text-decoration:none;color:var(--ink);font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:.45rem 1rem;background:#fff;transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s}
.tl-pill[data-tc=goodslides]{--tc:#6b5bd6}.tl-pill[data-tc=goodcontent]{--tc:#0d7b54}
.tl-pill:hover{transform:translateY(-2px);border-color:var(--tc)}
.tl-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--tc);transition:transform .3s}
.tl-tag{font-weight:500;font-size:.85rem;color:var(--muted);display:none}
@media (min-width:640px){.tl-tag{display:inline}}
.tl-pill[aria-current=true]{background:var(--tc);border-color:var(--tc);color:#fff;box-shadow:0 8px 20px -6px var(--tc)}
.tl-pill[aria-current=true] .tl-dot{background:#fff;transform:scale(1.35)}
.tl-pill[aria-current=true] .tl-tag{color:rgba(255,255,255,.85)}

/* finestre delle demo */
.tl-win{--tc:#0667b0;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px -18px rgba(21,24,36,.22);overflow:hidden;transition:transform .4s ease,box-shadow .4s ease}
.tl-win:hover{transform:translateY(-4px);box-shadow:0 30px 70px -18px rgba(21,24,36,.28)}
.tl-slides{--tc:#6b5bd6}
.tl-bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:var(--alt);border-bottom:1px solid var(--line)}
.tl-bar i{width:.7rem;height:.7rem;border-radius:50%;background:#d6dae0}
.tl-bar i:nth-child(1){background:#ff6b6b}.tl-bar i:nth-child(2){background:#ffc14d}.tl-bar i:nth-child(3){background:#4cd18b}
.tl-bar span{margin-left:.6rem;font-size:.82rem;font-weight:700;color:var(--muted)}

/* GoodAnswer */
.tl-body{display:grid}
@media (min-width:560px){.tl-body{grid-template-columns:190px 1fr}}
.tl-kb{padding:1rem;background:#f7fafd;border-bottom:1px solid var(--line)}
@media (min-width:560px){.tl-kb{border-bottom:0;border-right:1px solid var(--line)}}
.tl-kb h4{margin:0 0 .6rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tl-kb h4.dash-t{margin-top:1.1rem}
.tl-kb ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.tl-kb>ul:first-of-type li{display:flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:600;color:var(--tc);background:#fff;border:1px solid var(--line);border-radius:10px;padding:.35rem .55rem}
.js .tl-kb>ul:first-of-type li{opacity:0;transform:translateX(-12px);transition:all .5s ease calc(.3s + var(--i) * .15s)}
.js .reveal.in .tl-kb>ul:first-of-type li{opacity:1;transform:none}
.tl-dash li{font-size:.76rem;color:var(--text);display:grid;gap:.2rem}
.tl-dash span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tl-dash b{display:block;height:.4rem;background:#e3edf6;border-radius:99px;overflow:hidden}
.tl-dash i{display:block;height:100%;width:var(--w);background:var(--tc);border-radius:99px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.js .tl-dash i{width:0}
.js .reveal.in .tl-dash i{width:var(--w)}
.tl-chat{display:flex;flex-direction:column;height:470px;padding:1rem}
@media (max-width:559px){.tl-chat{height:520px}}
.tl-msgs{flex:1;display:flex;flex-direction:column;gap:.6rem;padding-bottom:.8rem;overflow-y:auto;min-height:0;scrollbar-width:thin;scroll-behavior:smooth}
.tl-m{margin:0;max-width:92%;padding:.65rem .9rem;border-radius:16px;font-size:.93rem;line-height:1.45;animation:tl-msg .45s cubic-bezier(.2,.8,.3,1) backwards}
.tl-m.u{align-self:flex-end;background:var(--tc);color:#fff;border-bottom-right-radius:4px}
.tl-m.a{align-self:flex-start;background:var(--alt);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink)}
.tl-m.a.none{background:#fff7e8;border-color:#f3d9a4}
.tl-m .src{display:inline-flex;align-items:center;gap:.3rem;margin-top:.5rem;background:var(--tc-soft,#dcecf8);color:var(--tc);font-weight:700;font-size:.76rem;border-radius:999px;padding:.12rem .6rem;animation:tl-msg .4s ease backwards}
.tl-m.none .src{background:#fdebc4;color:#8a5a00}
.tl-m .caret{display:inline-block;width:2px;height:1em;background:var(--tc);vertical-align:-.12em;margin-left:1px;animation:blink 1s steps(1) infinite}
.tl-typing{display:flex;gap:.28rem;width:3.4rem;justify-content:center;padding:.8rem}
.tl-typing i{width:.45rem;height:.45rem;border-radius:50%;background:#9aa7b6;animation:m-dot 1s infinite}
.tl-typing i:nth-child(2){animation-delay:.15s}.tl-typing i:nth-child(3){animation-delay:.3s}
.tl-ask{flex:none;margin:0 0 .5rem;font-size:.8rem;font-weight:700;color:var(--muted)}
.tl-qs{flex:none;display:grid;gap:.4rem}
.tl-q{font:inherit;font-size:.86rem;text-align:left;cursor:pointer;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:.45rem .8rem;color:var(--ink);transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.tl-q:hover{border-color:var(--tc);background:var(--tc-soft,#dcecf8);transform:translateX(4px)}
.tl-q.used{border-style:dashed;color:var(--muted)}
.tl-q:disabled{opacity:.55;cursor:wait;transform:none}
@keyframes tl-msg{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes tl-blink{50%{opacity:0}}
@keyframes tl-dot{50%{transform:translateY(-4px);opacity:.5}}
.tl-m .caret{animation-name:tl-blink}
.tl-typing i{animation-name:tl-dot}

/* GoodSlides */
.tl-sbody{position:relative;display:grid;gap:.9rem;padding:1rem}
@media (min-width:560px){.tl-sbody{grid-template-columns:76px 1fr}}
.tl-thumbs{list-style:none;margin:0;padding:0;display:flex;gap:.5rem}
@media (min-width:560px){.tl-thumbs{flex-direction:column}}
.tl-th{position:relative;width:64px;height:44px;display:block;cursor:pointer;background:#fff;border:2px solid var(--line);border-radius:8px;padding:6px;transition:border-color .25s,transform .25s,box-shadow .25s}
.tl-th b{position:absolute;left:-1px;top:-1px;font-size:.62rem;background:var(--line);color:var(--muted);border-radius:7px 0 6px 0;padding:0 .3rem;line-height:1.3}
.tl-th i{display:block;height:4px;border-radius:2px;background:#d9d0f0;margin:6px 0 0}
.tl-th i+i{width:60%;margin-top:4px}
.tl-th:hover{transform:translateX(3px);border-color:var(--tc)}
.tl-th[aria-pressed=true]{border-color:var(--tc);box-shadow:0 6px 16px -6px var(--tc)}
.tl-th[aria-pressed=true] b{background:var(--tc);color:#fff}
.tl-thumbs,.tl-stage{transition:opacity .6s ease,transform .6s ease}
.js .tl-slides:not(.ready) .tl-thumbs,.js .tl-slides:not(.ready) .tl-stage{opacity:0;transform:translateY(10px)}
.tl-stage{display:grid;gap:.8rem;min-width:0}
.tl-canvas{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#4b3fb5,#6b5bd6 55%,#8f84ec)}
.tl-canvas::before{content:"";position:absolute;right:-18%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.1)}
.tl-canvas::after{content:"";position:absolute;left:-10%;bottom:-45%;width:50%;aspect-ratio:1;border-radius:50%;background:rgba(49,180,133,.35)}
.tl-slide{position:absolute;inset:0;z-index:1;padding:6% 7%;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateX(24px);pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.tl-slide.on{opacity:1;transform:none;pointer-events:auto}
.tl-slide.out{transform:translateX(-24px)}
.tl-slide h4{margin:0 0 .7rem;color:#fff;font-size:clamp(1.05rem,2.4vw,1.5rem)}
.tl-slide ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:clamp(.78rem,1.6vw,1rem);width:100%;max-width:none}
.tl-slide li{padding-left:1.1rem;position:relative;opacity:0;transform:translateX(-10px);max-width:none}
.tl-slide li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
.tl-slide.on li{animation:tl-bul .5s ease calc(.25s + var(--i) * .22s) forwards}
.tl-count{position:absolute;right:7%;bottom:6%;font-size:.7rem;opacity:.75}
.tl-edit{position:absolute;z-index:2;left:.6rem;top:.6rem;font-size:.68rem;font-weight:700;background:rgba(255,255,255,.2);border-radius:999px;padding:.1rem .55rem;opacity:0;transition:opacity .3s}
.tl-canvas:hover .tl-edit{opacity:1}
@keyframes tl-bul{to{opacity:1;transform:none}}
.tl-script{background:#faf9fe;border:1px solid #e4defa;border-radius:12px;padding:.7rem .85rem}
.tl-script-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.tl-script-h b{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tc)}
.tl-script-h .opts{display:flex;gap:.3rem}
.tl-script .chip{font:inherit;font-size:.76rem;cursor:pointer;background:#fff;border:1.5px solid #ddd6f0;border-radius:999px;padding:.12rem .65rem;color:var(--ink);transition:all .2s}
.tl-script .chip[aria-pressed=true]{background:var(--tc);border-color:var(--tc);color:#fff}
.tl-script-t p{margin:0;font-size:.88rem;font-style:italic;color:var(--text);min-height:2.6em;animation:fadein .4s ease}
.tl-export{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;font-weight:600;color:var(--muted)}
.tl-export .btn{padding:.3rem .9rem;font-size:.82rem;border-radius:999px;border-color:var(--line);color:var(--ink)}
.tl-export .btn:hover{background:var(--tc);border-color:var(--tc);color:#fff}
.tl-exp-ok{font-style:normal;color:var(--accent-dark)}
/* generazione iniziale */
.tl-gen{position:absolute;inset:0;z-index:5;display:none;place-items:center;align-content:center;gap:1rem;background:#fff;text-align:center}
.js .tl-slides:not(.ready) .tl-gen{display:grid}
.tl-slides.tl-go .tl-gen .tl-file{animation:tl-drop .8s cubic-bezier(.3,1.3,.5,1) backwards}
.tl-file{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--tc);border:2px dashed var(--tc);border-radius:12px;padding:.6rem 1rem;background:#f6f4fd}
.tl-gen p{margin:0;display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--muted)}
.tl-spin{width:1.1rem;height:1.1rem;border-radius:50%;border:3px solid #e4defa;border-top-color:var(--tc);animation:tl-spin .8s linear infinite}
@keyframes tl-spin{to{transform:rotate(360deg)}}
@keyframes tl-drop{from{opacity:0;transform:translateY(-40px) rotate(-6deg)}}

/* GoodContent */
.tl-head{max-width:720px;margin-bottom:2.2rem}
.tl-pts{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tl-pts li{background:var(--tc-soft);color:var(--tc);font-weight:700;border-radius:999px;padding:.35rem .95rem;font-size:.92rem}
.tl-course .demo{max-width:900px;margin-inline:auto}

/* passaggi con filo che si riempie */
.tl-steps{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:2rem;position:relative}
@media (min-width:860px){
  .tl-steps{grid-template-columns:repeat(4,1fr);gap:1.5rem}
  .tl-steps::before,.tl-steps::after{content:"";position:absolute;left:12.5%;right:12.5%;top:34px;height:4px;border-radius:4px}
  .tl-steps::before{background:var(--line)}
  .tl-steps::after{background:linear-gradient(90deg,var(--primary),var(--accent));transform-origin:left;transform:scaleX(0);transition:transform 1.8s cubic-bezier(.3,.7,.2,1) .3s}
  .tl-steps.in::after{transform:scaleX(1)}
}
.tl-steps li{position:relative;text-align:center;z-index:1}
.tl-steps h3{margin-top:1rem}
.tl-steps p{color:var(--text);font-size:.95rem;margin:0}
.tl-ico{position:relative;display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:#fff;border:3px solid var(--primary);color:var(--primary);box-shadow:0 10px 24px -8px rgba(6,103,176,.45);transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.tl-steps li:nth-child(2) .tl-ico{border-color:#6b5bd6;color:#6b5bd6}
.tl-steps li:nth-child(3) .tl-ico{border-color:var(--accent);color:var(--accent-dark)}
.tl-steps li:nth-child(4) .tl-ico{border-color:#f0a13b;color:#a15c00}
.tl-steps li:hover .tl-ico{transform:scale(1.12) rotate(-6deg);background:var(--alt)}
.tl-ico b{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ink);color:#fff;font-size:.82rem}

/* fiducia */
.tl-trust{display:grid;gap:1.5rem;align-items:center}
@media (min-width:560px){.tl-trust{grid-template-columns:150px 1fr}}
.tl-shield{display:grid;justify-items:center;gap:.4rem;font-weight:700;color:var(--accent-dark);font-size:.88rem;text-align:center}
.tl-shield svg{width:130px;height:auto;overflow:visible}
.tl-shield .sh{transform-box:fill-box;transform-origin:center;animation:tl-shield 4s ease-in-out infinite}
.tl-shield .sr1,.tl-shield .sr2{transform-box:fill-box;transform-origin:center;animation:tl-ring 3.4s ease-out infinite}
.tl-shield .sr2{animation-delay:1.7s}
.tl-shield .ck{stroke-dasharray:1;stroke-dashoffset:0}
.js .reveal:not(.in) .tl-shield .ck{stroke-dashoffset:1}
.js .reveal.in .tl-shield .ck{transition:stroke-dashoffset .9s ease .6s}
@keyframes tl-shield{50%{transform:translateY(-5px)}}
@keyframes tl-ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.15);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .tl-art *,.tl-shield *,.tl-m,.tl-typing i{animation:none!important}
  .js .tl-hero-media:not(.in) .doc,.js .tl-hero-media:not(.in) .out,.js .tl-hero-media:not(.in) .core{opacity:1}
  .js .tl-slides:not(.ready) .tl-thumbs,.js .tl-slides:not(.ready) .tl-stage{opacity:1;transform:none}
  .js .tl-slides:not(.ready) .tl-gen{display:none}
  .tl-slide li{opacity:1;transform:none;animation:none!important}
  .tl-steps::after{transform:scaleX(1);transition:none}
  .tl-win,.tl-q,.tl-th,.tl-pill{transition:none}
  .js .tl-kb>ul:first-of-type li{opacity:1;transform:none;transition:none}
  .js .tl-dash i{width:var(--w);transition:none}
}