/* ============ DESIGN TOKENS ============ */
:root{
  --paper:#F6EFDC;
  --paper-2:#EFE2C2;
  --paper-3:#E7D9B4;
  --ink:#2B2015;
  --ink-soft:#6B5A42;
  --coral:#E24E28;
  --coral-ink:#B93A1B;
  --leaf:#4F8A2A;
  --leaf-light:#8CC63F;
  --sky:#2A6CA3;
  --plum:#7C4E9E;
  --sun:#EE9A2B;
  --teal:#16847E;
  --pink:#E85D80;
  --gold:#EFAF1E;
  --berry:#D6336C;
  --lilac:#9B6FD1;
  --card-shadow: 0 10px 0 -2px rgba(43,32,21,0.08), 0 14px 24px -10px rgba(43,32,21,0.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#221933;
    --paper-2:#2B2140;
    --paper-3:#352A4E;
    --ink:#F5EEDC;
    --ink-soft:#C7B9DE;
    --coral:#FF6E48;
    --coral-ink:#FFB08F;
    --leaf:#83CC4C;
    --leaf-light:#A9E06E;
    --sky:#6AA9E6;
    --plum:#C79CF0;
    --sun:#FFB358;
    --teal:#3FD1C8;
    --pink:#FF8AA8;
    --gold:#FFCE54;
    --berry:#FF7AA8;
    --lilac:#C3A6F5;
    --card-shadow: 0 10px 0 -2px rgba(0,0,0,0.25), 0 18px 30px -10px rgba(0,0,0,0.55);
  }
}
:root[data-theme="dark"]{
  --paper:#221933;
  --paper-2:#2B2140;
  --paper-3:#352A4E;
  --ink:#F5EEDC;
  --ink-soft:#C7B9DE;
  --coral:#FF6E48;
  --coral-ink:#FFB08F;
  --leaf:#83CC4C;
  --leaf-light:#A9E06E;
  --sky:#6AA9E6;
  --plum:#C79CF0;
  --sun:#FFB358;
  --teal:#3FD1C8;
  --pink:#FF8AA8;
  --gold:#FFCE54;
  --berry:#FF7AA8;
  --lilac:#C3A6F5;
  --card-shadow: 0 10px 0 -2px rgba(0,0,0,0.25), 0 18px 30px -10px rgba(0,0,0,0.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Baloo 2','Nunito',system-ui,sans-serif;
  text-wrap:balance;
}
.hand{ font-family:'Caveat','Nunito',cursive; }
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:20px; }
@media(min-width:768px){ .wrap{ padding-inline:32px; } }

/* ============ soft color washes behind sections ============ */
.wash{ position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none; z-index:0; }

/* ============ cascading entrance (stagger) ============ */
.stagger-item{
  opacity:0;
  transform:translateY(30px) scale(.94);
  transition:opacity .7s cubic-bezier(.22,1.12,.32,1), transform .7s cubic-bezier(.22,1.12,.32,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.stagger.in-view .stagger-item{ opacity:1; transform:none; }
.stagger-item.pop{ transform:translateY(14px) scale(.35) rotate(-22deg); }
.stagger.in-view .stagger-item.pop{ transform:none; }

/* ============ ambient decorative motion ============ */
@keyframes floaty{
  0%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-16px) rotate(calc(var(--r,0deg) + 4deg)); }
  100%{ transform:translateY(0) rotate(var(--r,0deg)); }
}
@keyframes floatySoft{
  0%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-9px) rotate(calc(var(--r,0deg) - 3deg)); }
  100%{ transform:translateY(0) rotate(var(--r,0deg)); }
}
@keyframes twinkle{
  0%,100%{ opacity:.55; transform:scale(.82) rotate(var(--r,0deg)); }
  50%{ opacity:1; transform:scale(1.18) rotate(calc(var(--r,0deg) + 10deg)); }
}
@keyframes drift{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(20px,-8px); }
  100%{ transform:translate(0,0); }
}
@keyframes sway{
  0%,100%{ transform:rotate(var(--r,0deg)); }
  50%{ transform:rotate(calc(var(--r,0deg) + 11deg)); }
}
.doodle{ animation:floaty 6s ease-in-out infinite; will-change:transform; }
.doodle.soft{ animation-name:floatySoft; }
.doodle.twinkle{ animation:twinkle 2.4s ease-in-out infinite; transform-origin:center; }
.doodle.drift{ animation:drift 9s ease-in-out infinite; }
.doodle.sway{ animation:sway 3.6s ease-in-out infinite; transform-origin:top center; }
.doodle.d1{ animation-delay:.2s; }
.doodle.d2{ animation-delay:1.1s; }
.doodle.d3{ animation-delay:.6s; }
.doodle.d4{ animation-delay:1.6s; }
.doodle.d5{ animation-delay:.9s; }
.doodle.d6{ animation-delay:1.9s; }
.doodle-wrap{ position:absolute; pointer-events:none; }

/* ============ buttons ============ */
.btn{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  display:inline-flex; align-items:center; gap:.5em;
  border-radius:999px;
  padding:.85em 1.7em;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .2s ease;
  box-shadow:0 6px 0 0 rgba(0,0,0,.18);
}
@keyframes btnHop{
  0%{ transform:translateY(0) scale(1) rotate(0deg); }
  40%{ transform:translateY(-13px) scale(1.08,.92) rotate(-5deg); }
  65%{ transform:translateY(-3px) scale(.96,1.05) rotate(3deg); }
  85%{ transform:translateY(-8px) scale(1.02,.99) rotate(-1.5deg); }
  100%{ transform:translateY(-5px) scale(1) rotate(-1deg); }
}
.btn:hover{ animation:btnHop .55s cubic-bezier(.34,1.56,.64,1) both; }
.btn:active{ transform:translateY(4px) !important; animation:none; box-shadow:0 2px 0 0 rgba(0,0,0,.18); }
.btn-primary{ background:var(--coral); color:#fff; }
.btn-primary:hover{ background:var(--coral-ink); }
.btn-outline{ background:transparent; color:var(--ink); border:3px solid var(--ink); box-shadow:0 6px 0 0 rgba(0,0,0,.12); }

@keyframes wiggle{
  0%,100%{ transform:rotate(0deg) translateY(0); }
  25%{ transform:rotate(-9deg) translateY(-2px); }
  75%{ transform:rotate(9deg) translateY(-2px); }
}
.wiggle-hover:hover{ animation:wiggle .5s ease-in-out; }

/* ============ cards ============ */
.card{ transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; position:relative; }
@keyframes cardHop{
  0%{ transform:translateY(0) rotate(0deg) scale(1); }
  40%{ transform:translateY(-18px) rotate(-3.5deg) scale(1.03); }
  65%{ transform:translateY(-6px) rotate(2.5deg) scale(.98); }
  100%{ transform:translateY(-11px) rotate(-1.5deg) scale(1.015); }
}
@keyframes cardHopAlt{
  0%{ transform:translateY(0) rotate(0deg) scale(1); }
  40%{ transform:translateY(-18px) rotate(3.5deg) scale(1.03); }
  65%{ transform:translateY(-6px) rotate(-2.5deg) scale(.98); }
  100%{ transform:translateY(-11px) rotate(1.5deg) scale(1.015); }
}
.card:hover{ animation:cardHop .55s cubic-bezier(.34,1.56,.64,1) both; box-shadow:var(--card-shadow); }
.card:nth-child(even):hover{ animation-name:cardHopAlt; }
.card:hover .icon-circle{ animation:wiggle .5s ease-in-out; }

.speech::after{
  content:"";
  position:absolute; left:38px; bottom:-16px;
  width:28px; height:28px;
  background:inherit;
  clip-path:polygon(0 0, 100% 0, 0 100%);
  border-radius:0 0 0 6px;
}

/* ============ coloring page ============ */
.fillable{ cursor:pointer; transition:filter .15s ease; }
.fillable:hover{ filter:brightness(0.94); }
.fillable:active{ filter:brightness(0.86); }

.swatch{
  width:46px; height:46px;
  border-radius:50%;
  border:3px solid var(--paper-3);
  cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, box-shadow .2s ease;
  flex:0 0 auto;
  padding:0;
}
.swatch:hover{ transform:scale(1.08); }
.swatch.selected{
  border-color:var(--ink);
  transform:scale(1.14);
  box-shadow:0 3px 0 0 rgba(0,0,0,.18);
}
.swatch-eraser{
  background-color:#fff;
  background-image:
    linear-gradient(45deg, var(--paper-3) 25%, transparent 25%, transparent 75%, var(--paper-3) 75%),
    linear-gradient(45deg, var(--paper-3) 25%, transparent 25%, transparent 75%, var(--paper-3) 75%);
  background-size:12px 12px;
  background-position:0 0, 6px 6px;
}

.brush-size{
  width:44px; height:44px;
  border-radius:50%;
  border:3px solid transparent;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, background .2s ease;
  flex:0 0 auto;
  padding:0;
}
.brush-size span{
  display:block;
  border-radius:50%;
  background:var(--ink-soft);
  transition:background .2s ease;
}
.brush-size:hover{ transform:scale(1.08); }
.brush-size.selected{
  border-color:var(--ink);
  background:var(--paper-2);
}
.brush-size.selected span{ background:var(--ink); }

@media print{
  header, footer, .no-print{ display:none !important; }
  body{ background:#fff !important; }
  section{ background:#fff !important; }
}

/* ============ form fields (contatti) ============ */
.field-label{
  font-family:'Baloo 2',sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:block;
  margin-bottom:.4em;
}
.field{
  width:100%;
  background:var(--paper);
  border:2px solid var(--paper-3);
  border-radius:14px;
  padding:.75em 1em;
  font-family:'Nunito',sans-serif;
  color:var(--ink);
  transition:border-color .2s ease;
}
.field:focus{ outline:none; border-color:var(--coral); }

/* ============ simple content pages (chi siamo, contatti, legal) ============ */
.page-hero{ background:radial-gradient(ellipse 120% 80% at 50% -10%, var(--paper-2), var(--paper) 60%); }
.legal-content h2{ font-size:1.3rem; margin-top:2em; margin-bottom:.6em; }
.legal-content p{ margin-bottom:1em; line-height:1.7; }
.legal-content ul{ list-style:disc; padding-left:1.4em; margin-bottom:1em; }
.legal-content li{ margin-bottom:.5em; line-height:1.7; }
.legal-content table{ width:100%; border-collapse:collapse; margin-bottom:1.5em; }
.legal-content th{ text-align:left; font-family:'Baloo 2',sans-serif; padding:.6em; border-bottom:2px solid var(--paper-3); }
.legal-content td{ padding:.8em .6em; border-bottom:1px solid var(--paper-3); vertical-align:top; line-height:1.6; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .doodle{ animation:none !important; }
  .stagger-item{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn:hover, .card:hover, .wiggle-hover:hover{ animation:none !important; transform:none !important; }
  .card:hover .icon-circle{ animation:none !important; }
  [data-parallax]{ transform:none !important; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}