/* Mascotte di Konnexa (Blu, Menta, Salvia, Ambra): blob SVG animato solo con CSS.
   Portate dall'app (Konnexa/public/css/mascotte.css) tenendo solo ciò che serve a un sito
   statico: il personaggio e le scenette. Il markup lo generano js/mascotte.js e
   js/mascotte-scene.js; dove stanno nella pagina lo decide la pagina che le usa.
   Quattro strati annidati, ognuno con la sua animazione, tutte su transform/opacity:
     .pose  inclinazione verso chi parla, cenno
     .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. */

.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); }
/* Le misure dell'occhio stanno anche qui, non solo negli attributi del <rect>: su un
   elemento SVG width e height sono proprietà CSS, quindi una .eye globale definita da
   un'altra parte vincerebbe sugli attributi e l'occhio diventerebbe un rettangolone
   bianco. Con --ew/--eh (li scrive js/mascotte.js) il selettore più specifico è il nostro. */
.mascotte .eye { fill: #fff; width: var(--ew); height: var(--eh); 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; }

/* ---- Scenette: i personaggi spuntano quando la scena entra in vista e restano lì,
   poi si parlano. Regia in js/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) {
    .scena { gap: .75rem; --salto: 188px; }
    .posto { width: 108px; }
    .scena--coro .posto { width: 64px; }
}

@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; }

/* oggetto a tema: sta sul primo attore e alla battuta segnata "via" passa al secondo */
.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; }

@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); } }

/* rompere la griglia: altezze e rientri diversi, 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; }

/* ---- 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; }
}