@font-face{font-family:Fraunces;src:url(fonts/Fraunces-var.ttf);font-weight:100 900;font-display:swap}
@font-face{font-family:Andika;src:url(fonts/Andika-Regular.ttf);font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Bold.ttf);font-weight:700;font-display:swap}
:root{--lavanda:#644A8D;--lilla:#8769A4;--oro:#EDBB7B;--oro-scuro:#D9A15C;--notte:#3B2F62;--inchiostro:#26222F;--carta:#FFF8E1;--nebbia:#E6DCF2;--grigio:#6B6478}
*{box-sizing:border-box}
body{margin:0;background:var(--carta);color:var(--inchiostro);font-family:Andika,sans-serif;font-size:18px;line-height:1.55}
body.notte{background:var(--notte)}
img{max-width:100%;height:auto;display:block}
a{color:var(--lavanda)}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.btn{display:inline-block;font-family:Poppins,sans-serif;font-weight:700;font-size:17px;letter-spacing:.02em;background:var(--lavanda);color:#fff;
 text-decoration:none;border:0;border-radius:999px;padding:16px 32px;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:var(--notte);transform:translateY(-1px)}
.btn.oro{background:var(--oro);color:var(--notte);box-shadow:0 6px 0 var(--oro-scuro)}
.btn.oro:hover{background:#F3C98E;transform:translateY(-2px)}
.btn:disabled{cursor:default}
.eyebrow{font-family:Poppins,sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* Landing */
.pagina{min-height:100vh;color:#fff;display:flex;flex-direction:column;
 background:radial-gradient(circle at 12% 18%,rgba(237,187,123,.35) 0 2px,transparent 3px),
  radial-gradient(circle at 78% 8%,rgba(255,255,255,.5) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 34% 92%,rgba(255,255,255,.4) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 94% 70%,rgba(237,187,123,.4) 0 2px,transparent 3px),
  radial-gradient(circle at 52% 24%,rgba(255,255,255,.35) 0 1px,transparent 2px),
  radial-gradient(circle at 6% 64%,rgba(255,255,255,.4) 0 1.5px,transparent 2.5px),
  radial-gradient(ellipse at 20% 45%,#7A5CA6 0,transparent 50%),
  linear-gradient(160deg,var(--notte) 0%,#4A3878 55%,var(--lavanda) 100%)}
.pagina .wrap{flex:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;padding-top:56px;padding-bottom:56px}
.copertina{justify-self:center;width:min(340px,100%)}
.copertina img{border-radius:6px 14px 14px 6px;transform:rotate(-3deg);box-shadow:0 30px 60px rgba(20,12,40,.55),-6px 0 0 #2B2150}
.pagina .eyebrow{color:var(--oro);margin:0 0 12px}
.pagina h1{font-family:Fraunces,serif;font-weight:800;font-size:clamp(34px,5vw,52px);line-height:1.06;margin:0 0 14px;color:#FFF8E1}
.pagina h1 em{font-style:italic;color:var(--oro)}
.pagina .lead{font-size:18px;color:#EDE6F7;margin:0 0 26px;max-width:540px}
.pagina footer{color:#CFC3E6;padding:0 16px 28px}

/* Modulo */
.modulo{background:#fff;color:var(--inchiostro);border-radius:22px;padding:26px 24px 22px;max-width:540px;box-shadow:0 24px 50px rgba(20,12,40,.4)}
.modulo h2{font-family:Fraunces,serif;font-weight:800;font-size:24px;color:var(--lavanda);margin:0 0 16px}
label{display:block;font-size:16px}
.modulo input[type=text],.modulo input[type=email]{width:100%;font:inherit;padding:12px 14px;border:2px solid #D8CBEA;border-radius:12px;margin:6px 0 14px;background:#fff}
.modulo input:focus{outline:3px solid var(--oro);outline-offset:1px;border-color:var(--lilla)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin-bottom:12px}
.check input{margin-top:5px;flex:none;width:18px;height:18px;accent-color:var(--lavanda)}
.consenso{font-size:14px;line-height:1.45;color:var(--grigio);margin:14px 0 0;text-align:center}
.modulo .btn{position:relative;display:block;width:100%;margin-top:18px;padding:16px;font-size:16px}
.errore{display:none;background:#FBEDED;color:#8A2D3B;border-radius:12px;padding:10px 14px;font-size:15px;margin:0 0 14px}
.errore.visibile{display:block}
.piccolo{font-size:14px;color:var(--grigio);margin:12px 0 0;text-align:center}
.nascosto{display:none}

/* Stelline al clic */
.stellina{position:fixed;left:0;top:0;pointer-events:none;z-index:50;line-height:1;will-change:transform,opacity;text-shadow:0 0 6px rgba(237,187,123,.8),0 2px 4px rgba(59,47,98,.35)}

footer{text-align:center;font-size:14px;color:var(--grigio);padding:40px 16px 48px}

/* Pagina di download (dopo il modulo) */
body.crema{background:#FEF8E0}
.festa{--k:1;min-height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative;background:#FEF8E0}

/* Cedar Hollow al mattino in alto, che sfuma nel crema */
.paese{position:absolute;top:0;left:50%;width:max(100%,640px);max-width:1500px;transform:translateX(-50%);pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent 96%);mask-image:linear-gradient(to bottom,#000 50%,transparent 96%)}
.paese img{width:100%;display:block;animation:respiro-paese 22s ease-in-out infinite alternate;transform-origin:72% 30%}
.paese .sole{position:absolute;left:72%;top:30%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle,rgba(255,224,150,.55) 0,rgba(255,224,150,0) 65%);animation:sole 6s ease-in-out infinite}
@keyframes respiro-paese{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes sole{0%,100%{opacity:.5}50%{opacity:1}}

.festa main{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(110px,22vw,250px) 16px 24px;position:relative;z-index:1}

/* Il pack che si apre a ventaglio */
.palco{position:relative;width:min(440px,92vw);aspect-ratio:440/360;margin:0 0 30px}
.palco .foglio{position:absolute;bottom:0;left:50%;border-radius:10px;box-shadow:0 18px 40px rgba(59,47,98,.25),0 2px 0 rgba(59,47,98,.06);
 transform-origin:50% 100%;will-change:transform}
.palco .copertina{width:41%;z-index:4;border-radius:8px}
.palco .mappa{width:39%;z-index:1}
.palco .linee{width:19%;z-index:2}
.palco .colori{width:19%;z-index:3}
@keyframes sale{from{transform:translate(-50%,30%) scale(.86);opacity:0}to{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes ventaglio-mappa{from{transform:translate(-50%,6%) rotate(0);opacity:0}to{transform:translate(-104%,-7%) rotate(-7deg);opacity:1}}
@keyframes ventaglio-linee{from{transform:translate(-50%,6%) rotate(0);opacity:0}to{transform:translate(-222%,2%) rotate(-15deg);opacity:1}}
@keyframes ventaglio-colori{from{transform:translate(-50%,6%) rotate(0);opacity:0}to{transform:translate(120%,-4%) rotate(16deg);opacity:1}}
@keyframes ondeggia{0%,100%{translate:0 0}50%{translate:0 -6px}}
.palco .copertina{animation:sale .7s cubic-bezier(.2,.8,.3,1) both,ondeggia 5s ease-in-out 1.6s infinite}
.palco .mappa{animation:ventaglio-mappa .8s cubic-bezier(.2,.8,.3,1) .45s both}
.palco .linee{animation:ventaglio-linee .8s cubic-bezier(.2,.8,.3,1) .6s both}
.palco .colori{animation:ventaglio-colori .8s cubic-bezier(.2,.8,.3,1) .75s both}

/* Gli oggetti del pack che escono e fluttuano */
.ogg{position:absolute;z-index:5;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--s) * var(--k) * 1px);height:auto;
 margin:calc(var(--s) * var(--k) * -.5px) 0 0 calc(var(--s) * var(--k) * -.5px);opacity:0;
 filter:drop-shadow(0 6px 8px rgba(59,47,98,.18));animation:fluttua var(--d) ease-in-out 2.6s infinite}
@keyframes fluttua{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:var(--r)}}

.festa h1{font-family:Fraunces,serif;font-weight:800;font-size:clamp(34px,6vw,54px);line-height:1.05;color:var(--notte);margin:0 0 12px;
 animation:compare .6s ease-out 1.1s both}
.festa h1 em{font-style:italic;color:var(--lavanda)}
.festa .sub{font-size:18px;color:var(--inchiostro);margin:0 0 26px;max-width:480px;animation:compare .6s ease-out 1.25s both}
@keyframes compare{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.scarica{display:inline-flex;align-items:center;gap:10px;font-family:Poppins,sans-serif;font-weight:700;font-size:17px;color:#fff;text-decoration:none;
 background:var(--lavanda);border-radius:999px;padding:16px 32px;box-shadow:0 6px 0 var(--notte),0 14px 30px rgba(59,47,98,.25);
 transition:transform .15s,background .15s;animation:compare .6s ease-out 1.4s both,respira 2.8s ease-in-out 2.4s infinite}
.scarica:hover{background:#563E7C;transform:translateY(-2px)}
.scarica svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes respira{0%,100%{box-shadow:0 6px 0 var(--notte),0 14px 30px rgba(59,47,98,.25),0 0 0 0 rgba(237,187,123,0)}
 50%{box-shadow:0 6px 0 var(--notte),0 14px 30px rgba(59,47,98,.25),0 0 0 7px rgba(237,187,123,.22)}}
.festa footer{position:relative;z-index:1}

@media (max-width:480px){.festa{--k:.72}.palco{width:84vw}.ogg{left:calc(clamp(6, var(--x), 94) * 1%)}}
@media (prefers-reduced-motion:reduce){
 .paese img,.paese .sole,.palco .foglio,.festa h1,.festa .sub,.scarica,.ogg{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
 .ogg{opacity:1}
}

/* Pagina semplice (privacy) */
main.semplice{max-width:680px;margin:0 auto;padding:48px 16px 24px;text-align:center}
main.semplice h1{font-family:Fraunces,serif;font-weight:900;font-size:clamp(34px,8vw,52px);line-height:1.05;color:var(--lavanda);margin:0 0 10px}
main.semplice .sub{color:var(--notte);margin:0 0 28px}
main.semplice .nota{font-size:15px;color:var(--lilla);margin:18px 0 0}
main.testo{text-align:left}
main.testo h2{font-family:Fraunces,serif;font-weight:800;font-size:22px;color:var(--lavanda);margin:28px 0 6px}

@media (max-width:860px){
 .pagina .wrap{grid-template-columns:1fr;gap:28px;align-content:start;padding-top:32px;padding-bottom:40px}
 .copertina{width:min(170px,48%)}
 .testo-modulo{display:contents}
 .intro-testo{text-align:center}
 .pagina .lead{margin:0 auto}
 .modulo{max-width:none;padding:24px 20px 20px}
}