/* ============================================================
   Il Club dei Piccoli Lettori — design system
   Direzione "Fiaba della buonanotte"
   ============================================================ */
:root{
  /* palette */
  --notte:#243A6B; --notte-2:#1b2c52; --crema:#FBF3E4; --crema-2:#fff9ef;
  --oro:#E8B65A; --oro-scuro:#c8922f; --salvia:#8CA88E; --salvia-tenue:#e8efe8;
  --corallo:#E98B7B; --corallo-scuro:#b8472f; --inchiostro:#21314f; --grigio:#5b6678; --indaco:#1a2547;
  /* tipografia */
  --serif:'Fredoka',ui-rounded,'Nunito',system-ui,sans-serif;
  --sans:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* misure */
  --radius:18px; --radius-lg:26px; --maxw:1120px; --shadow:0 14px 40px rgba(36,58,107,.14);
}
*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);color:var(--inchiostro);background:var(--crema);line-height:1.65;
  -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--notte);}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem);}
h2{font-size:clamp(1.6rem,3.6vw,2.5rem);}
h3{font-size:clamp(1.15rem,2vw,1.4rem);}
p{margin-top:.6em;}
a{color:var(--notte);text-underline-offset:3px;}
img,svg{max-width:100%;height:auto;display:block;}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:22px;}
.section{padding:clamp(48px,8vw,84px) 0;}
.lead{font-size:clamp(1.05rem,2.2vw,1.3rem);color:var(--grigio);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* pulsanti */
.btn{display:inline-block;background:var(--oro);color:var(--notte-2);font-weight:800;
  font-family:var(--sans);padding:15px 30px;border-radius:999px;text-decoration:none;border:0;
  cursor:pointer;font-size:1.05rem;line-height:1.1;transition:transform .15s ease,box-shadow .15s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(36,58,107,.28);}
.btn:focus-visible{outline:3px solid var(--notte);outline-offset:3px;}
.btn--ghost{background:transparent;color:var(--notte);border:2px solid var(--notte);}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,243,228,.92);
  backdrop-filter:blur(6px);border-bottom:1px solid rgba(36,58,107,.08);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-block:14px;}
.brand{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--notte);text-decoration:none;
  display:flex;align-items:center;gap:10px;}

/* footer */
.site-footer{background:var(--notte);color:var(--crema);padding:40px 0;}
.site-footer a{color:var(--oro);}

/* reveal-on-scroll */
[data-reveal]{transition:opacity .55s ease,transform .55s ease;}
.js [data-reveal]{opacity:0;transform:translateY(18px);}
.js [data-reveal].in{opacity:1;transform:none;}

/* utility */
.center{text-align:center;}
.muted{color:var(--grigio);}
.eyebrow{color:var(--corallo);font-weight:800;letter-spacing:.4px;text-transform:uppercase;font-size:.85rem;margin:0 0 4px;}
.ticks{list-style:none;margin:16px 0;display:grid;gap:9px;}
.ticks li{padding-left:30px;position:relative;}
.ticks li::before{content:"✓";position:absolute;left:0;color:var(--salvia);font-weight:900;}

/* il regalo */
.regalo{background:var(--crema-2);}
.regalo-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,56px);align-items:center;}
.regalo-art img{max-width:250px;border-radius:12px;box-shadow:var(--shadow);transform:rotate(-3deg);margin-inline:auto;}

/* benefici */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:32px;}
.card{background:#fff;border:1px solid var(--salvia-tenue);border-radius:var(--radius);padding:26px 22px;box-shadow:0 6px 18px rgba(36,58,107,.06);}
.card .ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--salvia-tenue);color:var(--notte);font-size:1.25rem;margin-bottom:12px;}
.card h3{margin-bottom:6px;}

/* momenti */
.momenti{background:var(--salvia-tenue);}
.momenti-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,56px);align-items:center;}
.momenti-art svg{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%;}

/* vetrina libri */
.books{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:30px;}
.book{background:#fff;border:1px solid var(--salvia-tenue);border-radius:var(--radius);padding:22px;text-align:center;box-shadow:0 8px 22px rgba(36,58,107,.07);display:flex;flex-direction:column;gap:10px;}
.book img{border-radius:10px;box-shadow:0 12px 26px rgba(0,0,0,.18);max-height:330px;width:auto;margin-inline:auto;}
.book .btn{margin-top:auto;}

/* contenuti */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px;}
.chips span{background:#fff;border:1px solid var(--oro);color:var(--notte);border-radius:999px;padding:10px 18px;font-weight:700;}

/* CTA finale */
.cta-finale{background:var(--notte);color:var(--crema);text-align:center;}
.cta-finale h2{color:#fff;}
.cta-finale .lead{color:#d6def0;max-width:560px;margin-inline:auto;}
.signup--center{margin-inline:auto;}

@media (max-width:760px){.regalo-grid,.momenti-grid{grid-template-columns:1fr;}}

/* hero */
.hero{background:var(--notte);color:var(--crema);position:relative;overflow:hidden;padding:clamp(40px,7vw,80px) 0 clamp(56px,8vw,96px);}
.hero h1{color:#fff;}
.hero .lead{color:#d6def0;}
.hero .kicker{color:var(--oro);font-weight:700;letter-spacing:.4px;margin:0 0 6px;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,56px);align-items:center;}
.moon{position:absolute;top:-70px;right:-50px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 38% 38%,#fbf3e4,#e8b65a 72%);opacity:.16;}
.signup{margin-top:22px;display:flex;flex-direction:column;gap:12px;max-width:440px;}
.signup input[type=email]{padding:15px 18px;border-radius:14px;border:0;font-size:1.05rem;font-family:var(--sans);width:100%;}
.signup .btn{width:100%;}
.signup .consent{font-size:.82rem;color:#c7d0e6;display:flex;gap:8px;align-items:flex-start;line-height:1.4;}
.signup .consent a{color:var(--oro);}
.signup .reassure{font-size:.85rem;color:#aab6d4;margin:0;}
.cover-frame{aspect-ratio:1/1.5;border-radius:14px;background:linear-gradient(160deg,#2f437a,#1b2c52);
  box-shadow:0 26px 60px rgba(0,0,0,.45);display:grid;place-items:center;max-width:330px;margin-inline:auto;
  border:1px solid rgba(232,182,90,.35);overflow:hidden;}
.cover-frame img{border-radius:14px;width:100%;}
.cover-ph{font-family:var(--serif);color:#9fb0d8;text-align:center;font-size:1.1rem;}
@media (max-width:760px){.hero-grid{grid-template-columns:1fr;}.hero-art{order:-1;}.signup{max-width:none;}.cover-frame{max-width:240px;}}

/* ============================================================
   Elevazione design (2026-06-22) — "la notte come protagonista"
   ============================================================ */

/* Cielo notturno dell'hero: gradiente profondo + campo stellato */
.hero{
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(232,182,90,.10), transparent 60%),
    linear-gradient(180deg, var(--indaco) 0%, var(--notte) 55%, #2a4178 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 28% 12%, #fdeecb 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 42% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 62% 16%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 73% 36%, #fdeecb 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 18% 46%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 52% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 33% 64%, #fdeecb 50%, transparent 51%);
  opacity:.7;animation:twinkle 6s ease-in-out infinite;
}
.hero .container{position:relative;z-index:1;}

/* Luna: il "signature element", ora luminosa e viva */
.moon{
  position:absolute;top:clamp(-30px,-2vw,12px);right:clamp(-24px,3vw,48px);
  width:clamp(130px,20vw,230px);height:auto;aspect-ratio:1;border-radius:50%;opacity:1;z-index:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(232,182,90,.30), transparent 62%),
    radial-gradient(circle at 38% 34%, #FFF8E8 0%, #FBEFC9 40%, #E8B65A 82%, #d29a36 100%);
  box-shadow:0 0 70px 18px rgba(232,182,90,.30);
  animation:moonFloat 8s ease-in-out infinite;
}
.moon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(176,131,52,.30) 0 6%, transparent 7%),
    radial-gradient(circle at 70% 60%, rgba(176,131,52,.22) 0 9%, transparent 10%),
    radial-gradient(circle at 40% 66%, rgba(176,131,52,.18) 0 5%, transparent 6%);
}

/* La copertina galleggia piano nella scena, con due scintille */
.hero-art{position:relative;z-index:1;}
.cover-frame{aspect-ratio:auto;height:auto;animation:coverFloat 9s ease-in-out infinite;}
.hero-art .sparkle{position:absolute;color:var(--oro);z-index:2;animation:twinkle 4s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(232,182,90,.6));}
.hero-art .sparkle svg{width:100%;height:auto;display:block;}
.hero-art .sparkle--1{top:2%;left:2%;width:28px;}
.hero-art .sparkle--2{bottom:8%;right:0;width:19px;animation-delay:1.2s;}

/* Occhiello: accento corallo più scuro, leggibile (WCAG AA) */
.eyebrow{color:var(--corallo-scuro);}

/* Sezione "momenti" resa notturna: la buonanotte si sente anche a metà pagina */
.momenti{background:var(--notte-2);position:relative;overflow:hidden;}
.momenti h2{color:#fff;}
.momenti p{color:#d6def0;}
.momenti .muted{color:#aab6d4;}
.momenti-art svg{box-shadow:0 24px 60px rgba(0,0,0,.45);border:1px solid rgba(232,182,90,.25);}

/* Illustrazione-dono al posto della copertina ripetuta */
.regalo-art svg{max-width:280px;margin-inline:auto;filter:drop-shadow(0 16px 30px rgba(36,58,107,.18));}

/* Icone illustrate (SVG) al posto dei glifi unicode */
.card .ic{background:radial-gradient(circle at 50% 38%, var(--salvia-tenue), #d8e4d8);}
.card .ic svg{width:27px;height:27px;display:block;}

/* Animazioni della scena (disattivate da prefers-reduced-motion, sotto) */
@keyframes moonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes coverFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:.92}}

/* ============================================================
   Animazioni del cielo (2026-06-22) — più vita notturna
   ============================================================ */

/* Stelle singole più luminose, ognuna con il suo ritmo */
.hero .sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.hero .star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.7);animation:starTwinkle 3.2s ease-in-out infinite;}
.hero .star.s1{top:15%;left:16%;}
.hero .star.s2{top:24%;left:68%;width:4px;height:4px;animation-delay:.7s;}
.hero .star.s3{top:42%;left:28%;animation-delay:1.5s;}
.hero .star.s4{top:18%;left:48%;width:2.5px;height:2.5px;animation-delay:2.1s;}
.hero .star.s5{top:52%;left:82%;animation-delay:1s;}

/* Stelle cadenti che attraversano il cielo ogni tanto */
.hero .shoot{position:absolute;top:10%;left:62%;width:130px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg, #fdeecb, #fff 32%, rgba(255,255,255,0));
  transform:rotate(-20deg);transform-origin:left center;filter:drop-shadow(0 0 4px rgba(255,255,255,.8));
  animation:shoot 9s ease-in infinite;}
.hero .shoot.shoot--2{top:30%;left:48%;width:95px;animation-duration:11s;animation-delay:5s;}

/* Luna: oltre al galleggio, un bagliore che pulsa piano */
.moon{animation:moonFloat 8s ease-in-out infinite, moonGlow 5.5s ease-in-out infinite;}

/* Scintille della copertina: ora tre, ognuna scintilla e ruota */
.hero-art .sparkle{animation:sparkleTwinkle 3.4s ease-in-out infinite;}
.hero-art .sparkle--2{animation-delay:1.1s;}
.hero-art .sparkle--3{top:44%;left:-5%;width:15px;animation-delay:2.1s;}

/* Anche la sezione "momenti" ha un cielo che brilla piano */
.momenti::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.3px 1.3px at 14% 28%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 82% 20%, #fdeecb 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 60% 58%, #fff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 30% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 46% 14%, #fff 50%, transparent 51%);
  opacity:.5;animation:twinkle 7s ease-in-out infinite;}
.momenti .container{position:relative;z-index:1;}

@keyframes starTwinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
@keyframes sparkleTwinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
@keyframes moonGlow{0%,100%{box-shadow:0 0 60px 14px rgba(232,182,90,.25)}50%{box-shadow:0 0 95px 28px rgba(232,182,90,.45)}}
@keyframes shoot{
  0%{opacity:0;transform:translate(0,0) rotate(-20deg) scaleX(.2)}
  4%{opacity:1}
  14%{opacity:1;transform:translate(-230px,95px) rotate(-20deg) scaleX(1)}
  20%{opacity:0;transform:translate(-275px,115px) rotate(-20deg) scaleX(1)}
  100%{opacity:0}
}

/* ============================================================
   Onda 1 — correzioni UI/UX (ui-ux-pro-max) + claymorphism + Fredoka
   ============================================================ */

/* Skip-link accessibile */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--oro);color:var(--notte-2);
  font-weight:800;padding:10px 16px;border-radius:10px;}
.skip-link:focus{left:10px;top:10px;}

/* Etichetta visibile del campo (non solo placeholder) */
.field-label{display:block;font-size:.82rem;font-weight:700;color:#d6def0;margin:0 0 2px 2px;}

/* Scintilla del kicker (SVG, non emoji) */
.kicker .spark{display:inline-block;width:1em;height:1em;vertical-align:-.18em;color:var(--oro);}
.kicker .spark svg{width:100%;height:100%;display:block;}

/* Focus visibile su tutti gli interattivi (non solo .btn) */
a:focus-visible{outline:3px solid var(--notte);outline-offset:2px;border-radius:4px;}
.signup input:focus-visible{outline:3px solid #fff;outline-offset:2px;}
.hero a:focus-visible,.cta-finale a:focus-visible,.site-footer a:focus-visible{outline-color:#fff;}

/* Target touch del consenso >=44px + cursore */
.signup .consent{cursor:pointer;min-height:44px;align-items:center;padding:4px 0;}
.signup .consent input[type=checkbox]{width:22px;height:22px;flex:0 0 auto;cursor:pointer;}

/* Bottoni: niente ritardo tap su mobile */
.btn{touch-action:manipulation;}

/* Amazon = azione secondaria (ghost) leggibile anche su card chiara */
.book .btn--ghost{color:var(--notte);border-color:var(--notte);}

/* Mobile: copy + form PRIMA, copertina dopo e piu piccola (form sopra la piega) */
@media (max-width:760px){
  .hero-art{order:0;}
  .cover-frame{max-width:clamp(220px,78vw,300px);}
  .hero-grid{gap:22px;}
}

/* === Claymorphism: superfici tattili, morbide, "da toccare" === */
.card,.book{border-radius:24px;border:3px solid #e6efe6;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.8), 0 14px 26px rgba(36,58,107,.14);}
.card .ic{box-shadow:inset 0 2px 5px rgba(255,255,255,.9), 0 6px 12px rgba(36,58,107,.12);}
.chips span{border-width:2px;box-shadow:0 4px 10px rgba(36,58,107,.10);}
.cover-frame{border-radius:26px;}
.btn{box-shadow:0 6px 0 -1px var(--oro-scuro), 0 12px 22px rgba(36,58,107,.18);}
.btn--ghost{box-shadow:0 6px 0 -1px rgba(36,58,107,.25);}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 -1px var(--oro-scuro), 0 16px 28px rgba(36,58,107,.22);}
.btn--ghost:hover{box-shadow:0 8px 0 -1px rgba(36,58,107,.3), 0 16px 28px rgba(36,58,107,.2);}
.btn:active{transform:translateY(3px) scale(.99);box-shadow:0 2px 0 -1px var(--oro-scuro), 0 6px 12px rgba(36,58,107,.16);}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important;}
  [data-reveal]{opacity:1!important;transform:none!important;}
}