/* ===========================================================
   Mascotte "Zed" 2.0 — stili e animazioni
   -----------------------------------------------------------
   Componente: Shared/Mascot.razor. Tutto il colore arriva dalle
   variabili tema (--accent-*, --surface, --ink) definite in
   app.css per [data-vertical]: nessun colore di brand hardcoded.
   Gli occhi luminosi derivano dall'accent del tema e ciclano
   tinta tramite hue-rotate: restano coerenti col verticale.
   Namespace CSS: .zcd-mascot / .zm-* — nessuna collisione con
   le classi del design system Flow.
   =========================================================== */

/* Registrate come <color> per poterle animare in modo fluido (senza
   @property un'animazione su custom property "scatta" da un valore
   all'altro invece di sfumare). Usate dagli occhi/glow: qui gira
   davvero il ciclo giallo/arancione richiesto, non solo un hue-rotate
   (che partendo da un blu non arriva mai a un giallo/arancione vero). */
@property --zm-eye-core { syntax: '<color>'; inherits: true; initial-value: #DFF2FF; }
@property --zm-eye-edge { syntax: '<color>'; inherits: true; initial-value: #8FC6E8; }
@property --zm-glow     { syntax: '<color>'; inherits: true; initial-value: #8FC6E8; }

.zcd-mascot {
    --mascot-size: 120px;
    /* Valori di partenza (fallback se @property non supportato): tinta del
       verticale. L'animazione zcd-eye-color-cycle li porta poi su giallo/
       arancione e torna. */
    --zm-eye-core: color-mix(in srgb, var(--accent-light, #C99670) 32%, #FFFFFF);
    --zm-eye-edge: color-mix(in srgb, var(--accent-light, #C99670) 72%, #FFFFFF);
    --zm-glow: color-mix(in srgb, var(--accent-light, #C99670) 80%, #FFFFFF);
    animation: zcd-eye-color-cycle 9s ease-in-out infinite;
    display: inline-flex;
    align-items: flex-start;
    gap: 0.875rem;
    max-width: 100%;
}

.zcd-mascot__figure {
    width: var(--mascot-size);
    flex: none;
    filter: drop-shadow(0 6px 14px rgba(20, 16, 12, 0.12));
}

.zcd-mascot__figure svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Tutte le parti animate via transform usano il proprio bounding box */
.zm-float, .zm-head, .zm-eyes, .zm-eye, .zm-arm-r, .zm-shadow,
.zm-antenna, .zm-halo, .zm-chest, .zm-sheen {
    transform-box: fill-box;
    transform-origin: center;
}

/* ---------- Animazioni di base (idle) ---------- */

/* Fluttuazione: ampiezza 12px + micro-rollio, chiaramente percepibile */
.zm-float { animation: zcd-float 4.2s ease-in-out infinite; }

.zm-shadow { animation: zcd-shadow 4.2s ease-in-out infinite; }

/* Battito di ciglia: doppio blink ogni ~3.8s */
.zm-eye { animation: zcd-blink 3.8s ease-in-out infinite; }

/* Occhi: glow permanente + ciclo di tinta (hue-rotate) + drift dello sguardo.
   Il filter base garantisce il glow anche con reduced-motion. */
.zm-eyes {
    filter: drop-shadow(0 0 3px var(--zm-glow)) drop-shadow(0 0 9px var(--zm-glow));
    animation:
        zcd-look 8s ease-in-out infinite,
        zcd-eyeglow 6.5s ease-in-out infinite;
}

/* Led antenna, alone, nucleo petto, anelli pod: pulsano sfalsati */
.zm-antenna { animation: zcd-pulse 2.6s ease-in-out infinite; }
.zm-halo    { animation: zcd-halo 2.6s ease-in-out infinite; }
.zm-chest   { animation: zcd-core 2.2s ease-in-out infinite; }
.zm-ear     { animation: zcd-pulse 3.4s ease-in-out 0.8s infinite; }

/* Led di stato sul corpo: si accendono in sequenza */
.zm-led { opacity: 0.25; animation: zcd-led 1.8s ease-in-out infinite; }
.zm-led + .zm-led { animation-delay: 0.3s; }
.zm-led + .zm-led + .zm-led { animation-delay: 0.6s; }

/* Sheen diagonale che attraversa il visore ogni ~7s */
.zm-sheen { animation: zcd-sheen 7s ease-in-out infinite; }

/* La testa reagisce con una transizione morbida (hover, mood) */
.zm-head {
    transform-origin: 50% 90%;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reazione al passaggio del mouse ---------- */

.zcd-mascot:hover .zm-head { transform: rotate(-6deg) translateY(-2px); }

.zcd-mascot:hover .zm-arm-r {
    transform-origin: 50% 10%;
    animation: zcd-wave 1s ease-in-out;
}

.zcd-mascot:hover .zm-antenna { animation: zcd-pulse 0.7s ease-in-out infinite; }
.zcd-mascot:hover .zm-halo    { animation: zcd-halo 0.7s ease-in-out infinite; }

/* Gli occhi si illuminano di più quando ricevono attenzione */
.zcd-mascot:hover .zm-eyes {
    animation:
        zcd-look 8s ease-in-out infinite,
        zcd-eyeglow 2.5s ease-in-out infinite;
}

/* ---------- Mood ---------- */

/* Elementi condizionali: nascosti di default */
.zm-mouth-happy, .zm-cheek, .zm-think, .zm-question { opacity: 0; visibility: hidden; }

/* happy: sorriso e guance, niente grille */
.zcd-mascot--happy .zm-mouth-neutral { opacity: 0; visibility: hidden; }
.zcd-mascot--happy .zm-mouth-happy   { opacity: 1; visibility: visible; }
.zcd-mascot--happy .zm-cheek         { opacity: 0.55; visibility: visible; }

/* thinking: sguardo in alto fisso + puntini che si accendono in sequenza */
.zcd-mascot--thinking .zm-eyes {
    animation: zcd-eyeglow 6.5s ease-in-out infinite;
    transform: translate(3px, -4px);
}
.zcd-mascot--thinking .zm-think { opacity: 1; visibility: visible; }
.zcd-mascot--thinking .zm-think-dot { animation: zcd-think 1.8s ease-in-out infinite; }
.zcd-mascot--thinking .zm-think-dot:nth-child(2) { animation-delay: 0.3s; }
.zcd-mascot--thinking .zm-think-dot:nth-child(3) { animation-delay: 0.6s; }

/* confused: testa inclinata e punto interrogativo */
.zcd-mascot--confused .zm-head { transform: rotate(6deg); }
.zcd-mascot--confused:hover .zm-head { transform: rotate(-6deg) translateY(-2px); }
.zcd-mascot--confused .zm-question {
    opacity: 1;
    visibility: visible;
    animation: zcd-question 2.4s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

/* ---------- Fumetto ---------- */

.zcd-mascot__bubble {
    position: relative;
    align-self: center;
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--border, #E3DFD8);
    border-radius: var(--r-md, 14px);
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text, #2C2521);
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(20, 16, 12, 0.06));
    max-width: 34ch;
    animation: zcd-bubble-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* Coda del fumetto: punta verso la figura (a sinistra nel layout in riga) */
.zcd-mascot__bubble::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    background: inherit;
    border-left: 1px solid var(--border, #E3DFD8);
    border-bottom: 1px solid var(--border, #E3DFD8);
    transform: translateY(-50%) rotate(45deg);
}

/* ---------- Variante impilata (empty state, 404) ---------- */

.zcd-mascot--stack {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.zcd-mascot--stack .zcd-mascot__bubble { align-self: center; }

.zcd-mascot--stack .zcd-mascot__bubble::before {
    left: 50%;
    top: -5px;
    border: none;
    border-left: 1px solid var(--border, #E3DFD8);
    border-top: 1px solid var(--border, #E3DFD8);
    transform: translateX(-50%) rotate(45deg);
}

/* Mascotte "di sezione" (accanto ai titoli pagina/verticale): oscilla dolcemente
   e si illumina, come il nome "Zed" nell'assistente compatto. Il float agisce su un
   gruppo INTERNO all'SVG (.zm-float) e il bagliore è un filter sul wrap: nessuno dei
   due tocca il transform:scale che mascot-follow.js applica per posizionarla, quindi
   il movimento non interferisce con l'aggancio sopra l'icona del titolo. */
.zcd-mascot-anchor .zm-float {
    animation: zcd-float 4.2s ease-in-out infinite;
}

/* L'ombra di terra resta ferma: non ha senso pulsare sopra un'icona di titolo. */
.zcd-mascot-anchor .zm-shadow {
    animation: none;
}

.zcd-mascot-anchor .zcd-mascot-figure-wrap {
    animation: zcd-section-glow 2.6s ease-in-out infinite;
}

@keyframes zcd-section-glow {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50%      { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent, #A87545) 70%, transparent)); }
}

@media (prefers-reduced-motion: reduce) {
    .zcd-mascot-anchor .zm-float,
    .zcd-mascot-anchor .zcd-mascot-figure-wrap {
        animation: none;
    }
}

/* ---------- Contesti d'uso ---------- */

/* Login: mascotte di benvenuto — accanto alla card su desktop, impilata sopra su mobile/tablet */
.mascot-login {
    position: relative;
    z-index: 1;
    margin-inline-end: 2.5rem;
    align-self: center;
}

@media (max-width: 59.99em) {
    .mascot-login {
        margin-inline-end: 0;
        margin-block-end: 0.5rem;
        transform: scale(0.8);
    }
}

@media (max-width: 380px) {
    .mascot-login { transform: scale(0.68); }
}

/* Mascotte "di sezione": prende il POSTO dell'icona del titolo di ogni
   pagina (.page-header .mud-icon-root.mud-svg-icon), che viene nascosta via
   JS — non più "a fianco" del titolo, ma esattamente al suo posto, stessa
   dimensione. z-index alto: deve stare sopra le card come lo sfondo
   fluttuante. */
.zcd-mascot-anchor {
    position: fixed;
    z-index: 35;
    cursor: pointer;
    /* niente transition su top/left/opacity: l'ancora deve scattare ESATTAMENTE
       sopra l'icona reale ad ogni cambio pagina, uno spostamento animato
       farebbe vedere la mascotte "viaggiare" da un punto vecchio. Nascosta
       di default: mascot-follow.js la rende visibile SOLO dopo aver calcolato
       la posizione corretta sulla pagina corrente, così non si vede mai né
       nel punto della pagina precedente né "saltare" in quello nuovo. */
    opacity: 0;
}

/* Il wrap riceve lo scale calcolato via JS in base alla dimensione
   dell'icona sostituita: SEPARATO dall'anchor apposta, altrimenti anche il
   pannello/menu (fratello, sotto) si rimpicciolirebbe insieme alla figura. */
.zcd-mascot-figure-wrap {
    display: block;
    transform-origin: top left;
    transition: transform 0.15s ease-out;
}

.zcd-mascot-anchor .zcd-mascot__bubble,
.zcd-mascot-anchor .zcd-mascot-toast {
    position: absolute;
    top: calc(100% + 10px);
    /* Ancorato al bordo SINISTRO della mascotte: ora sta al posto
       dell'icona del titolo, quindi vicino al bordo SINISTRO dell'area di
       contenuto (accanto alla sidebar) — aprire verso destra (non più verso
       sinistra) evita che il pannello finisca nascosto dietro la sidebar. */
    left: 0;
    right: auto;
    white-space: normal;
    width: max-content;
    max-width: min(30ch, calc(100vw - 2.5rem));
}

.zcd-mascot-anchor .zcd-mascot__bubble::before {
    left: 14px;
    right: auto;
    top: -5px;
    border: none;
    border-left: 1px solid var(--border, #E3DFD8);
    border-top: 1px solid var(--border, #E3DFD8);
    transform: rotate(45deg);
}

/* Messaggio transitorio ("come se parlasse"): stessa forma del fumetto ma
   sparisce da sola dopo pochi secondi (gestito da MainLayout via MascotSignal),
   la mascotte resta al suo posto. */
.zcd-mascot-toast {
    background: var(--surface, #FFFFFF);
    border: 1px solid var(--accent-light, #C99670);
    border-radius: var(--r-md, 14px);
    padding: 0.55rem 0.8rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--accent-dark, #8B5D38);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(20, 16, 12, 0.12));
    animation: zcd-bubble-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    pointer-events: none;
}

/* Pagina 404 */
.zcd-notfound {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 1rem;
    text-align: center;
}

.zcd-notfound__home {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    border-radius: var(--r-sm, 10px);
    background: var(--accent, #A87545);
    color: var(--text-on-accent, #FFFFFF);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm, 0 2px 6px rgba(20, 16, 12, 0.06));
    transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.zcd-notfound__home:hover {
    background: var(--accent-dark, #8B5D38);
    transform: translateY(-1px);
}

.zcd-notfound__home:focus-visible {
    outline: 2px solid var(--accent-dark, #8B5D38);
    outline-offset: 2px;
}

/* Empty state generico con mascotte (Addons, ...) */
.zcd-empty-mascot {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

/* ---------- Keyframes ---------- */

@keyframes zcd-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(1.4deg); }
}

@keyframes zcd-shadow {
    0%, 100% { transform: scaleX(1);    opacity: 0.12; }
    50%      { transform: scaleX(0.78); opacity: 0.06; }
}

/* Doppio battito di ciglia, rapido e vivace */
@keyframes zcd-blink {
    0%, 86%, 100% { transform: scaleY(1); }
    88%, 90%      { transform: scaleY(0.06); }
    92%           { transform: scaleY(1); }
    94%, 96%      { transform: scaleY(0.06); }
    98%           { transform: scaleY(1); }
}

@keyframes zcd-look {
    0%, 30%, 100% { transform: translateX(0); }
    38%, 52%      { transform: translateX(5px); }
    60%, 88%      { transform: translateX(-5px); }
}

/* Glow degli occhi: intensità che respira (il COLORE non è più qui — vedi
   zcd-eye-color-cycle sotto, che cambia davvero --zm-glow/--zm-eye-*). */
@keyframes zcd-eyeglow {
    0%, 100% { filter: drop-shadow(0 0 3px var(--zm-glow)) drop-shadow(0 0 9px var(--zm-glow)) brightness(1); }
    35%      { filter: drop-shadow(0 0 5px var(--zm-glow)) drop-shadow(0 0 14px var(--zm-glow)) brightness(1.18); }
    70%      { filter: drop-shadow(0 0 4px var(--zm-glow)) drop-shadow(0 0 11px var(--zm-glow)) brightness(1.08); }
}

/* Ciclo di colore reale degli occhi: tinta del verticale -> giallo -> arancione
   -> tinta del verticale. Richiede @property qui sopra per interpolare invece
   di scattare da un colore all'altro. */
@keyframes zcd-eye-color-cycle {
    0%, 100% {
        --zm-eye-core: color-mix(in srgb, var(--accent-light, #C99670) 32%, #FFFFFF);
        --zm-eye-edge: color-mix(in srgb, var(--accent-light, #C99670) 72%, #FFFFFF);
        --zm-glow: color-mix(in srgb, var(--accent-light, #C99670) 80%, #FFFFFF);
    }
    30% { --zm-eye-core: #FFF3B0; --zm-eye-edge: #FFC53D; --zm-glow: #FFB300; }
    65% { --zm-eye-core: #FFDCB0; --zm-eye-edge: #FF9F45; --zm-glow: #FF7A1A; }
}

@keyframes zcd-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@keyframes zcd-halo {
    0%, 100% { opacity: 0.10; transform: scale(1); }
    50%      { opacity: 0.40; transform: scale(1.35); }
}

@keyframes zcd-core {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.18); }
}

@keyframes zcd-led {
    0%, 100% { opacity: 0.25; }
    30%, 50% { opacity: 1; }
}

@keyframes zcd-sheen {
    0%, 55%   { transform: translateX(-46px); }
    85%, 100% { transform: translateX(120px); }
}

@keyframes zcd-wave {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-44deg); }
    50%      { transform: rotate(-14deg); }
    75%      { transform: rotate(-36deg); }
}

@keyframes zcd-think {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 1; }
}

@keyframes zcd-question {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-4px) rotate(8deg); }
}

@keyframes zcd-bubble-in {
    from { opacity: 0; transform: translateY(6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* NOTA: nessuna regola prefers-reduced-motion qui (rimossa): richiesta
   esplicita del cliente, le animazioni (mascotte inclusa) restano sempre
   attive a prescindere dalle impostazioni di sistema — vedi lo stesso
   principio applicato in floating-bg.js. */