/* crea-home.css — il generatore in home (29/10/2026). Sezione #prova: testo e modulo a sinistra, a destra un sito
   che si monta da solo con tre tavolozze a turno (i colori presi dal logo). Fondo notte: la tinta la cambia scorre.js. */
.prova{position:relative;padding:clamp(80px,12vw,150px) 0;color:#fff;overflow:hidden;isolation:isolate}
.prova::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 85% 30%,rgb(17 92 250 / .45),transparent 70%),radial-gradient(40% 50% at 0% 100%,rgb(17 92 250 / .25),transparent 70%)}
.prova-griglia{display:grid;gap:56px;align-items:center}
@media (min-width:980px){.prova-griglia{grid-template-columns:1.05fr 1fr;gap:72px}}
.prova-occhiello{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:600 12px/1.4 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#9fc0ff}
.prova-occhiello i{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgb(61 220 132 / .6);animation:prova-onda 2s infinite}
@keyframes prova-onda{70%{box-shadow:0 0 0 10px rgb(61 220 132 / 0)}100%{box-shadow:0 0 0 0 rgb(61 220 132 / 0)}}
.prova h2{margin:0;font-size:clamp(38px,5.6vw,72px);line-height:1;letter-spacing:-.035em;font-weight:700;text-wrap:balance;color:#fff}
.prova-sfuma{background:linear-gradient(90deg,#fff 0%,#7fb0ff 60%,#3ddc84 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
.prova-sotto{max-width:34em;margin:22px 0 30px;font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:rgb(255 255 255 / .82)}

.prova-modulo{max-width:600px}
.prova-schede{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin-bottom:12px;border-radius:999px;background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .14)}
.prova-schede button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:rgb(255 255 255 / .78);font:600 14px/1 inherit;font-family:inherit;cursor:pointer;transition:background .2s,color .2s}
.prova-schede button[aria-selected="true"]{background:#fff;color:#0b1a3d}
.prova-barra{display:flex;gap:8px;padding:8px;border-radius:18px;background:#fff;box-shadow:0 30px 70px -30px rgb(0 0 0 / .6)}
.prova-barra input{flex:1;min-width:0;padding:0 14px;border:0;background:transparent;font:500 17px/1 inherit;font-family:inherit;color:#0b1a3d;outline:none}
.prova-barra input::placeholder{color:#7a879f}
.prova-barra button{flex:none;min-height:54px;padding:0 22px;border:0;border-radius:12px;background:var(--blu,#115cfa);color:#fff;font:700 16px/1 inherit;font-family:inherit;cursor:pointer;transition:transform .16s,background .2s}
.prova-barra button:hover{background:var(--blu-scuro,#0645d1)}
.prova-barra button:active{transform:scale(.97)}
.prova-barra:focus-within{outline:3px solid #7fb0ff;outline-offset:3px}
.prova-modulo.solo-bottone .prova-barra input{display:none}
.prova-modulo.solo-bottone .prova-barra{background:transparent;padding:0;box-shadow:none}
.prova-nota{margin:12px 0 0;font-size:13px;color:rgb(255 255 255 / .62)}
@media (max-width:560px){.prova-barra{flex-direction:column}.prova-barra input{min-height:50px}.prova-barra button{width:100%}}

.prova-passi{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:40px 0 0;padding:28px 0 0;border-top:1px solid rgb(255 255 255 / .14);font-size:14px;color:rgb(255 255 255 / .78)}
.prova-passi b{margin-right:8px;font:600 12px ui-monospace,"SF Mono",Menlo,monospace;color:#9fc0ff}

/* la scena: una finestra di browser in cui il sito si compone, poi cambia colori e ricomincia */
.prova-scena{position:relative;--a:#2E7D32;--c:#F3F7F1;--t:#14261A;animation:prova-tavolozza 18s steps(1) infinite}
@keyframes prova-tavolozza{0%{--a:#2E7D32;--c:#F3F7F1;--t:#14261A}33.33%{--a:#8E3B5B;--c:#F9F2F5;--t:#2A1220}66.66%{--a:#C65319;--c:#FBF5EE;--t:#24160D}}
@property --a{syntax:"<color>";inherits:true;initial-value:#2E7D32}
@property --c{syntax:"<color>";inherits:true;initial-value:#F3F7F1}
@property --t{syntax:"<color>";inherits:true;initial-value:#14261A}
.prova-finestra{border-radius:18px;overflow:hidden;background:var(--c);box-shadow:0 50px 100px -40px rgb(0 0 0 / .7),0 0 0 1px rgb(255 255 255 / .1);transform:perspective(1400px) rotateY(-8deg) rotateX(3deg);transition:background .6s}
.prova-barretta{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#e9edf3}
.prova-barretta i{width:10px;height:10px;border-radius:50%;background:#c9d1dd}
.prova-barretta span{margin-left:12px;padding:3px 12px;border-radius:999px;background:#fff;font:500 11px ui-monospace,Menlo,monospace;color:#6b7f9e}
.prova-pagina{padding:22px 26px 26px;color:var(--t)}
.prova-pagina > *{animation:prova-entra 6s var(--ease-out,ease) infinite both}
.pp-nav{display:flex;align-items:center;gap:10px;margin-bottom:28px;animation-delay:0s}
.pp-nav b{width:26px;height:26px;border-radius:7px;background:var(--a);transition:background .6s}
.pp-nav span{width:42px;height:6px;border-radius:3px;background:currentColor;opacity:.18}
.pp-nav span:first-of-type{margin-left:auto}
.pp-nav em{width:64px;height:24px;border-radius:7px;background:var(--a);transition:background .6s}
.pp-occhiello{width:120px;height:7px;border-radius:4px;margin-bottom:14px;background:var(--a);opacity:.7;animation-delay:.25s}
.pp-titolo{display:grid;gap:9px;margin-bottom:16px;animation-delay:.45s}
.pp-titolo span{height:clamp(22px,3vw,34px);border-radius:7px;background:var(--t);width:88%}
.pp-titolo span + span{width:56%;background:linear-gradient(90deg,var(--t),var(--a))}
.pp-dati{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:12px;color:var(--a);letter-spacing:.1em;animation-delay:.8s}
.pp-dati span + span{width:110px;height:6px;border-radius:3px;background:currentColor;opacity:.4}
.pp-bottoni{display:flex;gap:8px;margin-bottom:22px;animation-delay:1s}
.pp-bottoni span{width:110px;height:30px;border-radius:8px;background:var(--a)}
.pp-bottoni span + span{width:90px;background:transparent;border:1.5px solid rgb(0 0 0 / .15)}
.pp-foto{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;gap:10px;align-items:start;animation:none}
.pp-foto i{display:block;aspect-ratio:4/5;border-radius:10px;background:linear-gradient(140deg,color-mix(in srgb,var(--a) 70%,#fff),color-mix(in srgb,var(--a) 35%,#000));animation:prova-foto 6s var(--ease-out,ease) infinite both}
.pp-foto i:nth-child(2){aspect-ratio:1;margin-top:18px;animation-delay:1.35s;background:linear-gradient(200deg,#f4d9a8,color-mix(in srgb,var(--a) 60%,#000))}
.pp-foto i:nth-child(1){animation-delay:1.2s}
.pp-foto i:nth-child(3){aspect-ratio:3/4;animation-delay:1.5s;background:linear-gradient(160deg,#cfe3f5,color-mix(in srgb,var(--a) 50%,#123))}
.pp-foto i:nth-child(4){margin-top:30px;animation-delay:1.65s}
@keyframes prova-entra{0%{opacity:0;transform:translateY(14px);filter:blur(4px)}12%,88%{opacity:1;transform:none;filter:none}100%{opacity:0}}
@keyframes prova-foto{0%{opacity:0;transform:translateY(30px) scale(.9) rotate(-3deg)}14%,88%{opacity:1;transform:none}100%{opacity:0}}
.prova-etichetta{position:absolute;padding:8px 14px;border-radius:999px;background:#fff;color:#0b1a3d;font:600 12px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em;box-shadow:0 18px 40px -16px rgb(0 0 0 / .6);animation:prova-etichetta 6s var(--ease-out,ease) infinite both}
.prova-etichetta::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--a);vertical-align:-1px}
.e1{top:12%;left:-6%;animation-delay:.3s}
.e2{bottom:14%;right:-4%;animation-delay:1.3s}
.e3{top:44%;right:-8%;animation-delay:.9s}
@keyframes prova-etichetta{0%{opacity:0;transform:translateY(10px) scale(.9)}12%,85%{opacity:1;transform:none}100%{opacity:0}}
@media (max-width:979px){.prova-finestra{transform:none}.e1{left:4px}.e2{right:4px}.e3{right:4px}}
.prova.ferma *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.prova *,.prova-scena{animation:none!important}.prova-pagina > *,.pp-foto i,.prova-etichetta{opacity:1;transform:none;filter:none}}

/* invito nella hero */
.hero-prova{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:10px 18px 10px 12px;border-radius:999px;background:#fff;color:var(--notte,#0f2d6b);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 14px 34px -16px rgb(15 45 107 / .5);transition:transform .2s var(--ease-out,ease)}
.hero-prova:hover{transform:translateY(-2px)}
.hero-prova i{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgb(61 220 132 / .2)}
@media (max-width:560px){.hero-prova{font-size:14px;white-space:nowrap;padding:9px 16px 9px 12px}.prova-schede{display:flex;flex-wrap:nowrap}.prova-schede button{flex:1;padding:0 8px;font-size:13px;white-space:nowrap}}