/* ============================================================================
   App installabile (PWA): animazione di apertura e invito all'installazione.
   Tutte le classi hanno il prefisso pwa-. Sfondo, logo e card riprendono la home
   a tile e il login (Index.razor.css, Login.razor.css), temi dark e light compresi.
   ============================================================================ */

/* --- Animazione di apertura ---------------------------------------------------
   Il markup e' in App.razor e resta nascosto; lo mostra la classe pwa-splash-on
   su <html>, messa da uno script in <head> solo nell'app installata. */

.pwa-splash {
    display: none;
}

html.pwa-splash-on .pwa-splash {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);

    background: linear-gradient(145deg, #0a1a3a 0%, #0d2d6e 40%, #1a4fa8 75%, #1e63c8 100%);
    background-color: #0a1a3a;
    --pwa-splash-ink: #fff;
    --pwa-splash-divider: rgba(255, 255, 255, .25);

    transition: opacity .35s ease;
}

html.pwa-splash-on .pwa-splash.light {
    background: var(--neutral-layer-1, #fff);
    --pwa-splash-ink: var(--ds-primary);
    --pwa-splash-divider: lightgray;
}

/* La banda fissa in cima su iOS (app.css, body::before) prende il colore dell'animazione */
html.pwa-splash-on body {
    --status-band: transparent !important;
}

html.pwa-splash-out .pwa-splash {
    opacity: 0;
    pointer-events: none;
}

/* Il logo intero ha le proporzioni di images/grupposet.png */
.pwa-splash-logo {
    position: relative;
    width: min(72vw, 360px);
    aspect-ratio: 5493 / 1255;
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .25));
}

.pwa-splash.light .pwa-splash-logo {
    filter: none;
}

.pwa-splash-logo > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 1. la S si disegna come un tratto */
.pwa-splash-stroke {
    fill: none;
    stroke: var(--pwa-splash-ink);
    stroke-width: 205;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation:
        pwa-splash-draw .9s cubic-bezier(.65, 0, .35, 1) forwards,
        pwa-splash-hide .2s ease 1.45s forwards;
}

/* 2. il logo vero si scopre da sinistra e prende il posto del tratto */
.pwa-splash-wordmark {
    clip-path: inset(0 100% 0 0);
    animation: pwa-splash-reveal .7s cubic-bezier(.65, 0, .35, 1) .75s forwards;
}

/* 3. la linea sotto il logo, come nella home a tile */
.pwa-splash-divider {
    width: 48px;
    height: 2px;
    border-radius: 2px;
    background: var(--pwa-splash-divider);
    transform: scaleX(0);
    animation: pwa-splash-grow .4s ease-out 1.2s forwards;
}

@keyframes pwa-splash-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes pwa-splash-hide {
    to { opacity: 0; }
}

@keyframes pwa-splash-reveal {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes pwa-splash-grow {
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-splash-stroke {
        display: none;
    }

    .pwa-splash-wordmark {
        clip-path: none;
        animation: none;
    }

    .pwa-splash-divider {
        transform: none;
        animation: none;
    }
}

/* --- Invito all'installazione ----------------------------------------------------
   Lo crea js/pwa.js su Safari e Chrome da telefono o tablet, quando l'app non e'
   installata: un foglio dal basso con le istruzioni del browser in uso. */

.pwa-install {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pwa-install-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 26, 58, .45);
    animation: pwa-install-fade .2s ease-out;
}

.pwa-install-sheet {
    position: relative;
    width: min(440px, 100%);
    box-sizing: border-box;
    margin: 0 var(--safe-right) 0 var(--safe-left);
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + var(--safe-bottom));
    border-radius: 16px 16px 0 0;
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, .25);
    animation: pwa-install-rise .28s cubic-bezier(.2, .8, .2, 1);
}

.pwa-install-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.pwa-install-icon {
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 12px;
    border: 1px solid var(--ds-border);
}

.pwa-install-title {
    margin: 0 0 2px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
}

.pwa-install-lead {
    margin: 0;
    font-size: var(--fs-caption);
    line-height: 1.45;
    color: var(--ds-text-muted);
}

.pwa-install-steps {
    list-style: none;
    margin: 0 0 var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    border-radius: var(--ds-radius);
    background: var(--ds-surface-alt);
    font-size: var(--fs-body);
    line-height: 1.5;
}

.pwa-install-steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}

.pwa-install-num {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: var(--fw-bold);
    color: #fff;
    background: var(--ds-primary);
}

/* Icone del browser citate nel testo, alla stessa altezza delle lettere */
.pwa-install-glyph {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin: 0 2px;
    vertical-align: -.2em;
    color: var(--ds-primary);
}

/* Avviso per i browser che aggiungono solo un collegamento, non l'app */
.pwa-install-note {
    margin: calc(-1 * var(--sp-3)) 0 var(--sp-4);
    font-size: var(--fs-caption);
    line-height: 1.45;
    color: var(--ds-text-muted);
}

.pwa-install-actions {
    display: flex;
    gap: var(--sp-3);
}

.pwa-install-actions button {
    flex: 1;
    height: 44px;
    border-radius: 6px;
    font: inherit;
    font-weight: var(--fw-semibold);
    cursor: pointer;
}

.pwa-install-later {
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
}

.pwa-install-go {
    border: none;
    background: var(--ds-primary);
    color: #fff;
}

.pwa-install-go:hover {
    background: var(--ds-primary-hover);
}

.pwa-install-actions button:focus-visible {
    outline: 3px solid var(--ds-accent);
    outline-offset: 2px;
}

@keyframes pwa-install-fade {
    from { opacity: 0; }
}

@keyframes pwa-install-rise {
    from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-install-backdrop,
    .pwa-install-sheet {
        animation: none;
    }
}

/* --- Voci di menu solo per l'app installata -------------------------------------
   NavMenuItem aggiunge pwa-only alle voci con Params = 'pwaOnly' (es. Notifiche). */

@media not all and (display-mode: standalone) {
    .pwa-only {
        display: none !important;
    }
}