/* Mascotte di Konnexa (Blu, Menta, Salvia, Ambra): blob SVG animato solo con CSS.
   Markup: templates/shared/_mascotte.html.twig. Interazioni: public/js/mascotte.js.
   Quattro strati annidati, ognuno con la sua animazione, tutte su transform/opacity:
     .pose  inclinazione verso chi parla, cenno, tilt durante il moto (landing)
     .rig   respiro con squash & stretch di tutto il corpo
     .ring  la corona di lobi oscilla attorno al nucleo, ogni lobo pulsa col suo tempo
     .face  occhi e bocca, dentro il corpo ma con un leggero ritardo
   I colori arrivano dal <div> (--mc corpo, --mm bocca, --ma accessorio): sono le
   variabili di colors.css, con ripiego esadecimale per le pagine che non la caricano. */

.mascotte {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
    flex: 0 0 auto;
    animation: mascotte-float 3.8s ease-in-out var(--fase, 0s) infinite;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}
.mascotte svg { display: block; width: 100%; height: auto; overflow: visible; }
.mascotte--interactive { cursor: pointer; }
.mascotte--interactive:focus-visible { outline: 3px solid var(--mc); outline-offset: 4px; border-radius: 50%; }

.mascotte .pose {
    transform-box: fill-box; transform-origin: 50% 88%;
    transform: rotate(var(--tilt, 0deg));
    transition: transform .45s cubic-bezier(.2, .9, .3, 1.2);
}
.mascotte.lean-right .pose { transform: rotate(9deg) translateX(8px); }
.mascotte.lean-left  .pose { transform: rotate(-9deg) translateX(-8px); }
.mascotte.nod .pose { animation: mascotte-nod .5s ease-in-out; }

.mascotte .rig {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: mascotte-breathe 3.6s ease-in-out var(--fase, 0s) infinite;
}
/* parlato: una pulsazione leggera sui lobi. Non tocca il respiro del corpo, così quando
   finisce non c'è nessuno scatto (le animazioni che si sostituiscono ripartono da zero). */
.mascotte.is-talking .lobes { transform-box: fill-box; transform-origin: 50% 100%; animation: mascotte-talkbob .34s ease-in-out infinite alternate; }
.mascotte.is-boing svg { animation: mascotte-boing .7s cubic-bezier(.3, .9, .3, 1.1); transform-box: fill-box; transform-origin: 50% 100%; }

.mascotte .ring { transform-box: fill-box; transform-origin: center; animation: mascotte-sway 5s ease-in-out var(--fase, 0s) infinite alternate; }
.mascotte .core { fill: var(--mc); transform-box: fill-box; transform-origin: center; animation: mascotte-core 3.6s ease-in-out var(--fase, 0s) infinite; }
.mascotte .lobe { fill: var(--mc); transform-box: fill-box; transform-origin: center; animation: mascotte-lobe var(--d, 3s) ease-in-out var(--o, 0s) infinite; }
.mascotte .lobe:nth-child(even) { animation-name: mascotte-lobe-b; }

.mascotte .face { transform-box: fill-box; transform-origin: center; animation: mascotte-facebob 3.6s ease-in-out calc(var(--fase, 0s) - .4s) infinite; }

.mascotte .eyes { transform-box: fill-box; transform-origin: center; transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .35s cubic-bezier(.3, .8, .3, 1); }
.mascotte .eye { fill: #fff; transform-box: fill-box; transform-origin: center; transition: opacity .15s; }
.mascotte .eyes.blink .eye { animation: mascotte-blink .18s ease-in-out; }
.mascotte .happy-eye { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .15s; }
.mascotte.is-happy .eye { opacity: 0; }
.mascotte.is-happy .happy-eye { opacity: 1; }
.mascotte.is-surprised .eye { transform: scale(1.35); }
.mascotte.is-surprised .smile { opacity: 0; }
.mascotte.is-surprised .mouth { opacity: 1; transform: scaleY(3.6) scaleX(.9); transition: transform .15s; }
.mascotte.is-spin svg { animation: mascotte-spin .75s cubic-bezier(.3, .8, .3, 1); transform-box: fill-box; transform-origin: 50% 60%; }
.mascotte.is-shiver svg { animation: mascotte-shiver .5s ease-in-out; }

.mascotte .smile { fill: none; stroke: var(--mm); stroke-width: 3; stroke-linecap: round; transition: opacity .15s; }
.mascotte .mouth { fill: var(--mm); transform-box: fill-box; transform-origin: center; opacity: 0; }
.mascotte.is-talking .smile { opacity: 0; }
.mascotte.is-talking .mouth { opacity: 1; animation: mascotte-talk .27s ease-in-out infinite alternate; }
.mascotte .acc { fill: var(--ma); }
.mascotte .acc-line { fill: none; stroke: var(--ma); stroke-width: 3.5; stroke-linecap: round; }

/* ---- Banner di benvenuto delle dashboard: mascotte + frase sulla stessa riga ---- */
.benvenuto-banner { display: flex; align-items: center; gap: .75rem; }

/* ---- Login: Blu e Menta affacciati sul bordo superiore della card ---- */
.login-container { position: relative; }
.login-mascotte { position: absolute; top: -44px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 1.25rem; pointer-events: none; }
.login-mascotte .mascotte { pointer-events: auto; }
.login-mascotte .mascotte:first-child { rotate: -6deg; }
.login-mascotte .mascotte:last-child { rotate: 7deg; margin-top: 6px; }

/* ---- Landing: mascotte appollaiata sull'angolo delle card dei ruoli ---- */
.net-node .mascotte { position: absolute; top: -38px; left: 1rem; width: 60px; }
.net-mob-item { display: grid; grid-template-columns: 44px 1fr; column-gap: .75rem; align-items: start; }
.net-mob-item .mascotte { grid-row: 1 / 3; width: 44px; margin-top: 2px; }

/* ---- Landing: scenette. Ogni scena ha i suoi personaggi (.posto): spuntano con un pop
   quando la scena entra in vista e restano lì. Dialoghi in mascotte-scene.js. ---- */
.scena {
    --salto: 272px;                   /* dal fianco sinistro del primo al fianco destro del secondo */
    display: flex; align-items: flex-end; justify-content: center;
    gap: clamp(.75rem, 3vw, 2rem);
    padding-top: 4.5rem;              /* spazio per i fumetti */
}
.posto { position: relative; width: 150px; opacity: 0; scale: .5; }
.posto .mascotte { width: 100%; }
.scena.is-on .posto { animation: attore-spunta .6s cubic-bezier(.2, .9, .3, 1.3) calc(var(--i, 0) * .15s) both; }
.scena--coro .posto { width: 110px; }
@media (max-width: 640px) {
    .posto { width: 108px; }
    .scena--coro .posto { width: 64px; }
    .scena { gap: .75rem; }
}

/* Testa di sezione con gli attori: una colonna per loro a sinistra, il testo a destra.
   Nessuna fascia in più: la scena è alta quanto il testo. Sotto i 1000px torna in colonna,
   con gli attori dopo il testo (nel DOM il testo viene sempre prima). */
.con-scena { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 3rem; align-items: end; }
.con-scena .scena { margin: 0; }
@media (min-width: 1000px) {
    .con-scena { grid-template-columns: 300px minmax(0, 1fr); }
    .con-scena .scena { grid-column: 1; grid-row: 1; justify-content: flex-start; padding-top: 3rem; }
    .con-scena-testo { grid-column: 2; grid-row: 1; }
    .con-scena--hub .hub-head { margin-inline: 0; text-align: left; }
    .con-scena--hub .hub-head p { margin-left: 0; }
}
/* coro della CTA: sopra il titolo, nello spazio della sezione */
.scena--coro { margin: calc(2.5rem - clamp(5rem, 12vw, 9rem)) 0 1rem; padding-top: 3rem; }   /* risale nel padding della sezione */
/* hero: sopra l'immagine, nel vuoto a sinistra della mano; sotto i 1000px non c'è */
.scena--hero { display: none; position: absolute; left: 2%; top: 12%; z-index: 2; padding-top: 3rem; }
@media (min-width: 1000px) { .scena--hero { display: flex; } }

@keyframes attore-spunta { 0% { opacity: 0; scale: .5; } 60% { opacity: 1; scale: 1.1; } 100% { opacity: 1; scale: 1; } }

.fumetto {
    position: absolute; bottom: calc(100% + 4px); left: 50%;
    min-width: 72px; max-width: 230px; width: max-content;
    padding: .55rem .8rem;
    background: #fff; color: #0f0f0f;
    border: 1px solid #e5e5e5; border-radius: 16px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .3);
    font-size: .95rem; font-weight: 500; line-height: 1.3; text-align: center; text-wrap: balance;
    opacity: 0; transform: translate(-50%, 10px) scale(.6);
    transform-origin: 50% 100%;
    transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), opacity .2s;
    pointer-events: none; z-index: 2;
    white-space: normal;
}
.fumetto::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; border: 1px solid #e5e5e5; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
.fumetto.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.fumetto .puntini { display: inline-flex; gap: 4px; height: 1.2em; align-items: center; }
.fumetto .puntini i { width: 6px; height: 6px; border-radius: 50%; background: #a3a3a3; animation: fumetto-puntino .9s ease-in-out infinite; }
.fumetto .puntini i:nth-child(2) { animation-delay: .15s; }
.fumetto .puntini i:nth-child(3) { animation-delay: .3s; }

.scena-oggetto {
    position: absolute; right: calc(100% - 22px); bottom: 28%; z-index: 1; pointer-events: none;
    opacity: 0; transition: opacity .35s, transform 1s cubic-bezier(.3, .9, .3, 1.1);
    animation: oggetto-fluttua 3.2s ease-in-out infinite;
}
.scena.is-on .scena-oggetto { opacity: 1; }
.scena-oggetto--foglio { width: 44px; transform: rotate(-8deg); }
.scena.prop-go .scena-oggetto--foglio { transform: translateX(var(--salto)) rotate(10deg); animation: foglio-salta 1s ease-out; }
.scena-oggetto--spunte { width: 54px; transform: rotate(-6deg); }
.scena-oggetto--spunte .spunta { stroke-dasharray: 14; stroke-dashoffset: 14; }
.scena.prop-go .scena-oggetto--spunte .spunta { animation: spunta-disegna .35s ease-out calc(var(--n, 0) * .45s) forwards; }
.scena-oggetto--orologio { width: 64px; }
.scena-oggetto--orologio .lancetta-ore, .scena-oggetto--orologio .lancetta-minuti { transform-box: fill-box; transform-origin: 50% 100%; }
.scena-oggetto--orologio .lancetta-ore { transform: rotate(60deg); }
.scena.is-on .scena-oggetto--orologio .lancetta-minuti { animation: lancetta-tic 12s steps(12) infinite; }
.scena.prop-go .scena-oggetto--orologio .lancetta-minuti { animation: lancetta-giro 1.1s cubic-bezier(.4, 0, .2, 1) 1; }
@media (max-width: 640px) { .scena { --salto: 188px; } }

@keyframes fumetto-puntino { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes foglio-salta { 0%, 100% { translate: 0 0; } 50% { translate: 0 -40px; } }
@keyframes oggetto-fluttua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes spunta-disegna { to { stroke-dashoffset: 0; } }
@keyframes lancetta-tic { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes lancetta-giro { from { transform: rotate(0); } to { transform: rotate(720deg); } }

/* ---- Landing: rompere la griglia. Scene sbilanciate a destra o a sinistra, con i
   personaggi a altezze e inclinazioni diverse (niente fila indiana). ---- */
.scena--duo .posto:nth-child(1) { margin-bottom: 4px; }
.scena--duo .posto:nth-child(2) { margin-bottom: 34px; margin-left: -1.75rem; }
.scena--coro .posto:nth-child(1) { margin-bottom: 10px; }
.scena--coro .posto:nth-child(2) { margin-bottom: 34px; }
.scena--coro .posto:nth-child(3) { margin-bottom: 0; }
.scena--coro .posto:nth-child(4) { margin-bottom: 22px; }

/* Salvia appesa a testa in giù dal bordo del blocco scuro; cliccata, cade e si rialza */
.hub { position: relative; }
.appeso {
    position: absolute; top: -4px; right: clamp(1rem, 8vw, 9rem); z-index: 3;
    transform-origin: 50% 0;
    animation: appeso-dondola 3.4s ease-in-out infinite;
    cursor: pointer;
}
.appeso .mascotte { width: 110px; rotate: 180deg; }
.appeso .fumetto { bottom: auto; top: calc(100% + 8px); }
.appeso .fumetto::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(-135deg); }
.appeso.is-caduto { animation: appeso-cade 1.1s cubic-bezier(.3, .8, .3, 1.15) forwards; }
.appeso.is-caduto .mascotte { rotate: 0deg; transition: rotate .4s .25s cubic-bezier(.3, .8, .3, 1.2); }
.appeso.is-risale { animation: appeso-risale 1.2s ease-in-out forwards; }
@media (max-width: 640px) { .appeso .mascotte { width: 72px; } }

/* Blu sbuca da fuori dal bordo destro dello schermo mentre sei su "Perché Konnexa" */
.sbircia {
    position: fixed; right: 0; bottom: 18vh; z-index: 40;
    transform: translateX(105%);
    transition: transform .7s cubic-bezier(.2, .9, .3, 1.25);
    cursor: pointer;
}
.sbircia.is-fuori { transform: translateX(42%) rotate(-14deg); }
.sbircia .mascotte { width: 150px; }
@media (max-width: 640px) { .sbircia .mascotte { width: 96px; } }

@keyframes appeso-dondola { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes appeso-cade {
    0% { transform: translateY(0) rotate(0); }
    55% { transform: translateY(150px) rotate(8deg) scale(1.15, .8); }
    75% { transform: translateY(120px) rotate(-3deg) scale(.95, 1.08); }
    100% { transform: translateY(136px) rotate(0) scale(1, 1); }
}
@keyframes appeso-risale {
    0% { transform: translateY(136px); }
    100% { transform: translateY(0) rotate(-7deg); }
}

/* ---- Landing: le animazioni delle mascotte nelle card partono quando la sezione appare ---- */
.reveal:not(.is-in) .mascotte, .reveal:not(.is-in) .mascotte * { animation-play-state: paused; }

/* ---- keyframes ---- */
@keyframes mascotte-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes mascotte-breathe {
    0%, 100% { transform: scale(1, 1); }
    30% { transform: scale(.955, 1.055) rotate(-1.2deg); }
    70% { transform: scale(1.06, .945) rotate(1.2deg); }
}
@keyframes mascotte-talkbob { from { transform: scale(1, 1); } to { transform: scale(1.035, .97); } }
@keyframes mascotte-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes mascotte-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mascotte-lobe {
    0%, 100% { transform: scale(1) translate(0, 0); }
    30% { transform: scale(1.24) translate(6px, -5px); }
    62% { transform: scale(.92) translate(-4px, 4px); }
}
@keyframes mascotte-lobe-b {
    0%, 100% { transform: scale(1.12) translate(-5px, 3px); }
    38% { transform: scale(.9) translate(4px, -5px); }
    72% { transform: scale(1.2) translate(3px, 5px); }
}
@keyframes mascotte-facebob { 0%, 100% { transform: translate(0, -3px) rotate(-2deg); } 50% { transform: translate(0, 3px) rotate(2deg); } }
@keyframes mascotte-blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.08); } }
@keyframes mascotte-talk {
    0% { transform: scaleY(1) scaleX(1); }
    35% { transform: scaleY(4.8) scaleX(.78); }
    60% { transform: scaleY(2.2) scaleX(1.1); }
    100% { transform: scaleY(4) scaleX(.9); }
}
@keyframes mascotte-boing {
    0% { transform: scale(1, 1); }
    25% { transform: scale(1.25, .72); }
    50% { transform: scale(.84, 1.24) translateY(-22px); }
    75% { transform: scale(1.1, .92); }
    100% { transform: scale(1, 1); }
}
@keyframes mascotte-spin { 0% { transform: rotate(0) scale(1, 1); } 40% { transform: rotate(200deg) scale(.9, 1.1); } 100% { transform: rotate(360deg) scale(1, 1); } }
@keyframes mascotte-shiver { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes mascotte-nod { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(6deg) translateY(5px); } 70% { transform: rotate(-3deg); } }

@media (prefers-reduced-motion: reduce) {
    .mascotte, .mascotte * { animation: none !important; transition: none !important; }
    .scena-oggetto, .scena-oggetto * { animation: none !important; transition: none !important; }
    .posto { opacity: 1; scale: 1; animation: none !important; }
    .scena-oggetto--spunte .spunta { stroke-dashoffset: 0; }
    .appeso, .appeso.is-caduto, .appeso.is-risale { animation: none !important; }
    .sbircia { transition: none !important; }
}

/* ---- Loading con la mascotte (shared/_loading.html.twig): al posto di spinner e rotelle.
   Il JS delle pagine mostra e nasconde il contenitore .kload (classe show oppure style.display):
   il layout sta tutto nel figlio .kload-corpo, così block e flex funzionano uguali. ---- */
.kload { display: none; }
.kload.show { display: block; }
.kload--pagina {
    position: fixed; inset: 0; z-index: 10050;
    background: var(--color-overlay-light, rgba(255, 255, 255, .8));
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.kload--blocco {
    position: absolute; inset: 0; z-index: 10; border-radius: inherit;
    background: var(--color-overlay-medium, rgba(255, 255, 255, .6));
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.kload--inline { padding: 2.5rem 1rem; }
.kload-corpo {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; width: 100%; height: 100%; text-align: center;
}
.kload-mascotte {
    position: relative; width: 92px; flex: 0 0 auto; margin: -4px 0 -12px;
    animation: kload-pop .55s cubic-bezier(.2, .9, .3, 1.3) both;
}
.kload-mascotte .mascotte { width: 100% !important; }
.kload-testo {
    font-size: .95rem; font-weight: 600; line-height: 1.45; max-width: 320px;
    color: var(--color-text-secondary, #475569);
}
.kload-testo strong { color: var(--color-text-primary, #1e293b); }

/* la mascotte pensa: occhi verso l'alto, dondola piano, nuvoletta con i puntini che salgono */
.mascotte.is-thinking .eyes { --lx: 5px; --ly: -6px; }
.mascotte.is-thinking .pose { animation: kload-pondera 2.6s ease-in-out infinite; }
.kload-pensiero {
    position: absolute; top: -10px; right: -34px;
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 46px; height: 30px; border-radius: 16px;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-light, #e2e8f0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    animation: kload-nuvola 2.6s ease-in-out infinite;
}
.kload-pensiero::before, .kload-pensiero::after {
    content: ""; position: absolute; border-radius: 50%;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-light, #e2e8f0);
}
.kload-pensiero::before { width: 10px; height: 10px; left: -5px; bottom: -7px; }
.kload-pensiero::after { width: 6px; height: 6px; left: -12px; bottom: -14px; }
.kload-pensiero i { width: 6px; height: 6px; border-radius: 50%; background: var(--kc, #3b82f6); animation: kload-puntino .9s ease-in-out infinite; }
.kload-pensiero i:nth-child(2) { animation-delay: .15s; }
.kload-pensiero i:nth-child(3) { animation-delay: .3s; }

@keyframes kload-pop { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kload-pondera { 0%, 100% { transform: rotate(-4deg) translateX(-2px); } 50% { transform: rotate(4deg) translateX(2px); } }
@keyframes kload-nuvola { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes kload-puntino { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }

@media (max-width: 576px) {
    .kload-mascotte { width: 64px; }
    .kload-pensiero { top: -8px; right: -26px; width: 38px; height: 24px; }
    .kload-testo { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) {
    .kload-mascotte, .kload-pensiero, .kload-pensiero i { animation: none !important; }
}