/* =====================================================================
   THE INVISIBLE WORLDS — Scarabocchi animati
   Disegnini stilizzati "fatti da un bambino bravo": tratto irregolare,
   macchia di colore volutamente fuori dai bordi, animazioni lente.
   Sono decorazione pura: iniettati da js/doodles.js, mai cliccabili,
   invisibili agli screen reader, spenti se l'utente chiede meno movimento.
   ===================================================================== */

/* ---------------------------------------------------------------------
   PALETTE PASTELLI
   Ogni disegno riceve --c1 (il tratto) e --c2 (la macchia di colore).
   Colori da pastelli a cera, più caldi e "sporchi" di quelli del brand.
   --------------------------------------------------------------------- */
.pal-verde  {--c1:#2f7d5b;--c2:#8ddcb0}
.pal-viola  {--c1:#5b3fd0;--c2:#bda9ff}
.pal-rosa   {--c1:#c93b73;--c2:#ffb4ce}
.pal-arancio{--c1:#cf6420;--c2:#ffc68f}
.pal-azzurro{--c1:#2f76b8;--c2:#a6d7f8}
.pal-giallo {--c1:#c2900f;--c2:#ffe291}
.pal-prugna {--c1:#9b3fae;--c2:#eab2f4}
.pal-rosso  {--c1:#c0392b;--c2:#ffb5a9}

/* Sui fondi notte il tratto scuro sparirebbe: i due toni si scambiano,
   il chiaro passa al tratto e lo scuro alla macchia. */
.su-scuro.pal-verde  {--c1:#8ddcb0;--c2:#2f7d5b}
.su-scuro.pal-viola  {--c1:#bda9ff;--c2:#5b3fd0}
.su-scuro.pal-rosa   {--c1:#ffb4ce;--c2:#c93b73}
.su-scuro.pal-arancio{--c1:#ffc68f;--c2:#cf6420}
.su-scuro.pal-azzurro{--c1:#a6d7f8;--c2:#2f76b8}
.su-scuro.pal-giallo {--c1:#ffe291;--c2:#c2900f}
.su-scuro.pal-prugna {--c1:#eab2f4;--c2:#9b3fae}
.su-scuro.pal-rosso  {--c1:#ffb5a9;--c2:#c0392b}

/* ---------------------------------------------------------------------
   CONTENITORE
   Due livelli annidati per non far litigare le trasformazioni:
   .doodle  -> parallasse mosso dal JS allo scroll
   .dd-anim -> animazione CSS in loop
   --------------------------------------------------------------------- */
.doodle-host{position:relative}
/* IL PUNTO CHIAVE: ogni contenitore di contenuto della sezione viene alzato
   di un livello, il disegno resta a quota zero. Così un disegno può anche
   passare sopra la zona del testo: passa comunque DIETRO alle lettere.
   Esclusi .bg e .veil, che sono gli sfondi fotografici: devono restare sotto,
   altrimenti coprirebbero i disegni. */
.doodle-host > *:not(.doodle):not(.bg):not(.veil){position:relative;z-index:1}
/* la larghezza arriva da --w, impostata dal JS per ogni disegno */
.doodle{position:absolute;z-index:0;pointer-events:none;width:var(--w,90px);aspect-ratio:1;
  will-change:transform;transition:transform .18s linear}

/* ---------------------------------------------------------------------
   DISEGNI "FILIGRANA"
   Sono quelli liberi di vagare anche sopra la colonna del testo: più tenui,
   e sempre in movimento, così non restano mai fermi sopra la stessa parola.
   Il testo ci passa sopra opaco, quindi la leggibilità non cala.
   --------------------------------------------------------------------- */
.doodle.dd-ghost{opacity:.36}
.su-scuro.dd-ghost{opacity:.42}
.dd-anim{display:block;width:100%;height:100%}
/* variante in griglia: usata dalla pagina di prova, dove i disegni non sono
   appesi ai bordi di una sezione ma allineati in una vetrina */
.doodle.dd-static{position:static;display:block;width:100%}
.doodle svg{display:block;width:100%;height:100%;overflow:visible}

/* Tratto e macchia */
.doodle .dd-line{fill:none;stroke:var(--c1,#5b3fd0);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.doodle .dd-thin{stroke-width:2.4}
.doodle .dd-bold{stroke-width:6}
.doodle .dd-blob{fill:var(--c2,#bda9ff);stroke:none;opacity:.45}
.doodle .dd-fill{fill:var(--c1,#5b3fd0);stroke:none}

/* ---------------------------------------------------------------------
   COMPARSA: il disegno si "disegna" da solo quando entra in vista.
   pathLength="100" su ogni tratto rende la lunghezza uniforme, così un
   solo valore di dasharray funziona su qualunque curva.
   --------------------------------------------------------------------- */
.doodle .dd-line{stroke-dasharray:100;stroke-dashoffset:100}
.doodle .dd-blob,.doodle .dd-fill{opacity:0}
.doodle.dd-in .dd-line{animation:dd-draw 1.1s cubic-bezier(.4,0,.2,1) forwards}
.doodle.dd-in .dd-line:nth-of-type(2){animation-delay:.12s}
.doodle.dd-in .dd-line:nth-of-type(3){animation-delay:.24s}
.doodle.dd-in .dd-line:nth-of-type(4){animation-delay:.36s}
.doodle.dd-in .dd-line:nth-of-type(5){animation-delay:.46s}
.doodle.dd-in .dd-blob{animation:dd-pop .8s .45s cubic-bezier(.2,.9,.3,1.4) forwards}
.doodle.dd-in .dd-fill{animation:dd-pop .6s .6s cubic-bezier(.2,.9,.3,1.4) forwards}
@keyframes dd-draw{to{stroke-dashoffset:0}}
@keyframes dd-pop{from{opacity:0;transform:scale(.4)}to{opacity:.45;transform:none}}
/* la macchia resta traslucida, il pieno no */
.doodle.dd-in .dd-fill{animation-name:dd-pop-full}
@keyframes dd-pop-full{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------------
   MOVIMENTI IN LOOP (sul livello .dd-anim, così non toccano la parallasse)
   --------------------------------------------------------------------- */
.dd-float{animation:dd-float 6s ease-in-out infinite}
.dd-sway{animation:dd-sway 7s ease-in-out infinite}
.dd-bob{animation:dd-bob 4.5s ease-in-out infinite}
.dd-beat{animation:dd-beat 2.2s ease-in-out infinite}
.dd-grow{transform-origin:50% 92%;animation:dd-grow-in 1.4s .3s cubic-bezier(.2,.9,.3,1.2) both,dd-sway 8s 1.7s ease-in-out infinite}
/* ---------------------------------------------------------------------
   VAGABONDAGGIO
   Percorsi lunghi e lenti (30–50 secondi) con quattro tracciati diversi,
   così due disegni vicini non si muovono mai all'unisono. Una sola
   animazione per elemento: due animazioni sulla stessa trasformazione non
   si sommano, l'ultima vincerebbe e basta.
   --------------------------------------------------------------------- */
.dd-drift-a{animation:dd-drift-a 34s ease-in-out infinite}
.dd-drift-b{animation:dd-drift-b 43s ease-in-out infinite}
.dd-drift-c{animation:dd-drift-c 38s ease-in-out infinite}
.dd-drift-d{animation:dd-drift-d 50s ease-in-out infinite}
@keyframes dd-drift-a{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(30px,-22px) rotate(7deg)}
  50%{transform:translate(10px,-42px) rotate(-5deg)}
  75%{transform:translate(-24px,-16px) rotate(4deg)}}
@keyframes dd-drift-b{
  0%,100%{transform:translate(0,0) rotate(0)}
  30%{transform:translate(-34px,18px) rotate(-8deg)}
  60%{transform:translate(-14px,44px) rotate(5deg)}
  85%{transform:translate(22px,16px) rotate(-3deg)}}
@keyframes dd-drift-c{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(26px,20px) rotate(6deg)}
  45%{transform:translate(40px,-14px) rotate(-6deg)}
  70%{transform:translate(-18px,-26px) rotate(8deg)}}
@keyframes dd-drift-d{
  0%,100%{transform:translate(0,0) rotate(0)}
  35%{transform:translate(-28px,-30px) rotate(9deg)}
  65%{transform:translate(24px,-38px) rotate(-7deg)}
  88%{transform:translate(30px,10px) rotate(3deg)}}

@keyframes dd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes dd-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes dd-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes dd-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.1)}24%{transform:scale(1)}36%{transform:scale(1.07)}}
@keyframes dd-grow-in{from{transform:scaleY(.15) scaleX(.7)}to{transform:none}}

/* ---------------------------------------------------------------------
   MOVIMENTI INTERNI AI SINGOLI DISEGNI
   --------------------------------------------------------------------- */
/* raggi del sole che girano piano */
.dd-rays{transform-origin:50px 50px;animation:dd-spin 34s linear infinite}
@keyframes dd-spin{to{transform:rotate(360deg)}}

/* gocce di pioggia che cadono, sfasate */
.dd-drop1,.dd-drop2,.dd-drop3{animation:dd-fall 1.7s ease-in infinite}
.dd-drop2{animation-delay:.35s}
.dd-drop3{animation-delay:.7s}
@keyframes dd-fall{0%{transform:translateY(-4px);opacity:0}25%{opacity:1}100%{transform:translateY(16px);opacity:0}}

/* ali che sbattono */
.dd-wing{transform-origin:52px 44px;animation:dd-flap .38s ease-in-out infinite alternate}
.dd-wing2{transform-origin:56px 44px;animation:dd-flap .38s .05s ease-in-out infinite alternate}
@keyframes dd-flap{from{transform:rotate(-14deg) scaleY(.9)}to{transform:rotate(12deg) scaleY(1.05)}}

/* scia tratteggiata dell'ape */
.dd-trail{stroke-dasharray:5 7!important;stroke-dashoffset:0!important;animation:dd-march 1.6s linear infinite!important;opacity:.7}
@keyframes dd-march{to{stroke-dashoffset:-24}}

/* fumo del comignolo che sale */
.dd-smoke{animation:dd-smoke 3.4s ease-in-out infinite}
@keyframes dd-smoke{0%{transform:translateY(2px);opacity:.25}45%{opacity:.9}100%{transform:translateY(-10px);opacity:0}}

/* pesciolino che nuota avanti e indietro */
.dd-fish{animation:dd-swim 7s ease-in-out infinite}
@keyframes dd-swim{0%,100%{transform:translateX(-8px)}50%{transform:translateX(10px) translateY(-3px)}}

/* petali che respirano */
.dd-petals{transform-origin:50px 52px;animation:dd-breathe 5s ease-in-out infinite}
@keyframes dd-breathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.07) rotate(6deg)}}

/* cuore che batte dentro un disegno più grande */
.dd-beat-in{transform-origin:50% 55%;animation:dd-beat 2s ease-in-out infinite}

/* tracciato del battito che corre in continuo.
   Regola scritta DOPO quella di comparsa, così vince a pari specificità. */
.doodle.dd-in .dd-ecg{animation:dd-trace 3s ease-in-out .2s infinite}
@keyframes dd-trace{0%{stroke-dashoffset:100}55%,100%{stroke-dashoffset:0}}

/* persone che dondolano a turno */
.dd-p1{animation:dd-bob 3.6s ease-in-out infinite}
.dd-p2{animation:dd-bob 3.6s .45s ease-in-out infinite}
.dd-p3{animation:dd-bob 3.6s .9s ease-in-out infinite}

/* arcobaleno multicolore: gli archi si disegnano a scalare */
.dd-arc{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.doodle.dd-in .dd-arc{animation:dd-draw 1.3s cubic-bezier(.4,0,.2,1) forwards}
.doodle.dd-in .dd-arc.a2{animation-delay:.16s}
.doodle.dd-in .dd-arc.a3{animation-delay:.32s}
.doodle.dd-in .dd-arc.a4{animation-delay:.48s}
.dd-arc.a1{stroke:#e0563f}
.dd-arc.a2{stroke:#f0a83e}
.dd-arc.a3{stroke:#3fae7a}
.dd-arc.a4{stroke:#4a86e0}

/* persone multicolore: tre pastelli diversi nello stesso disegno */
.dd-c-a{--c1:#c93b73}
.dd-c-b{--c1:#2f76b8}
.dd-c-c{--c1:#2f7d5b}
.dd-c-a .dd-line,.dd-c-b .dd-line,.dd-c-c .dd-line{stroke:var(--c1)}
.dd-c-a .dd-fill,.dd-c-b .dd-fill,.dd-c-c .dd-fill{fill:var(--c1)}

/* =====================================================================
   SFILATA: la striscia di disegni che scorre di lato
   ===================================================================== */
.doodle-parade{position:relative;overflow:hidden;background:var(--cream);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
/* sfumatura ai lati: i disegni entrano ed escono senza tagliarsi di netto */
.doodle-parade::before,.doodle-parade::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.doodle-parade::before{left:0;background:linear-gradient(90deg,var(--cream),transparent)}
.doodle-parade::after{right:0;background:linear-gradient(270deg,var(--cream),transparent)}
.dp-track{display:flex;align-items:center;gap:clamp(34px,5vw,64px);width:max-content;
  animation:dp-scroll 42s linear infinite}
.dp-track .dp-item{flex:none;width:clamp(48px,6vw,66px);aspect-ratio:1}
.dp-track .dp-item svg{display:block;width:100%;height:100%;overflow:visible}
/* dentro la sfilata i tratti sono già disegnati: non c'è comparsa da attendere */
.dp-track .dd-line{stroke-dasharray:none;stroke-dashoffset:0;fill:none;
  stroke:var(--c1);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.dp-track .dd-thin{stroke-width:2.4}
.dp-track .dd-bold{stroke-width:6}
.dp-track .dd-blob{fill:var(--c2);opacity:.45;stroke:none}
.dp-track .dd-fill{fill:var(--c1);stroke:none;opacity:1}
.dp-track .dd-arc{stroke-dasharray:none;stroke-dashoffset:0}
.doodle-parade:hover .dp-track{animation-play-state:paused}
@keyframes dp-scroll{to{transform:translateX(-50%)}}

/* =====================================================================
   POSIZIONE NEI MARGINI LATERALI
   Il testo vive in una colonna larga al massimo 1180px (.wrap). Un disegno
   messo a "right:1%" sembra stare nel margine, ma il margine dipende dalla
   finestra: a 1280px vale 50px e un disegno da 90px entrerebbe nel testo.
   Perciò l'aggancio è al BORDO DELLA COLONNA (590px dal centro) più uno
   stacco fisso: così il disegno è fuori dal testo per costruzione, a
   qualunque larghezza.
   ===================================================================== */
.doodle.dd-side-r{left:calc(50% + 590px + 14px);right:auto}
.doodle.dd-side-l{right:calc(50% + 590px + 14px);left:auto}

/* =====================================================================
   RESPONSIVE
   Servono 1180 + 2×(disegno + stacco) ≈ 1440px perché i disegni laterali
   stiano nei margini senza toccare niente. Sotto quella soglia spariscono.
   Restano quelli su fondo scuro (testata, fascia finale, CTA): lì il testo
   è una colonna strettissima e lo spazio libero c'è comunque.
   ===================================================================== */
/* Fascia intermedia (portatili da 1366): il margine basta solo per disegni
   piccoli, tipo adesivo. Meglio piccoli che spariti di colpo. */
@media (min-width:1312px) and (max-width:1439px){
  .doodle.dd-side-r,.doodle.dd-side-l{width:52px}
  .doodle.dd-side-r{left:calc(50% + 590px + 8px)}
  .doodle.dd-side-l{right:calc(50% + 590px + 8px)}
}
/* Sotto i 1312px nel margine non ci sta più niente: restano solo i disegni
   sui fondi scuri, dove il testo è una colonna stretta e centrata. */
@media (max-width:1311px){
  .doodle.dd-side-r,.doodle.dd-side-l{display:none}
}
@media (max-width:1200px){
  .doodle.dd-keep{width:74px}
}
/* Su tablet e telefono spariscono solo i disegni "pieni" ancorati ai margini,
   che senza margine non hanno dove stare. Le filigrane restano: vagano dietro
   al testo, rimpicciolite e più trasparenti. Esclusi quelli in griglia
   (.dd-static) della pagina di prova, che sono il contenuto della pagina. */
@media (max-width:1023px){
  .doodle:not(.dd-static):not(.dd-ghost){display:none}
  .doodle.dd-ghost{width:calc(var(--w,90px) * .62);opacity:.28}
  .su-scuro.dd-ghost{opacity:.34}
}
@media (max-width:560px){
  .doodle.dd-ghost{width:calc(var(--w,90px) * .52);opacity:.24}
  .su-scuro.dd-ghost{opacity:.3}
}
@media (max-width:760px){
  .doodle-parade{padding:16px 0}
}

/* =====================================================================
   MENO MOVIMENTO: i disegni restano, fermi e già completi.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  /* senza movimento una filigrana resterebbe ferma sopra le stesse parole:
     si abbassa ancora, fino a diventare un velo appena percepibile */
  .doodle.dd-ghost{opacity:.16}
  .doodle .dd-line,.doodle .dd-arc{stroke-dashoffset:0;animation:none!important}
  .doodle .dd-blob{opacity:.45;animation:none!important}
  .doodle .dd-fill{opacity:1;animation:none!important}
  .dd-anim,.dd-rays,.dd-wing,.dd-wing2,.dd-drop1,.dd-drop2,.dd-drop3,.dd-smoke,
  .dd-fish,.dd-petals,.dd-beat-in,.dd-p1,.dd-p2,.dd-p3,.dp-track{animation:none!important}
  .doodle{transition:none}
}