/*
 * Ritocco moderno del sito pubblico, sopra i fogli di stile della V1 (caricato per ultimo).
 * Non cambia l'impianto delle pagine: movimento, profondita' e cura dei dettagli.
 */

:root {
    --ind-viola: #9e81f0;
    --ind-viola-forte: #7c5ce6;
    --ind-inchiostro: #2b1d55;
    --ind-gradiente: linear-gradient(120deg, #b49cff 0%, #9e81f0 45%, #7c5ce6 100%);
    --ind-alone: rgb(124 92 230 / .38);
    --ind-ombra: 0 1px 2px rgb(43 29 85 / .05), 0 16px 36px -20px rgb(43 29 85 / .32);
    --ind-ombra-alta: 0 2px 4px rgb(43 29 85 / .05), 0 26px 50px -24px rgb(43 29 85 / .42);
    --ind-morbido: cubic-bezier(.2, .8, .2, 1);
}

/* Lettura */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, .banner_big_title, .titolo { text-wrap: balance; }
p, li { text-wrap: pretty; }
::selection { background: #e7defe; color: var(--ind-inchiostro); }

/* Il contorno di focus: la V1 lo toglieva ai pulsanti, chi naviga da tastiera non sapeva dov'era. */
:focus-visible {
    outline: 3px solid var(--ind-viola);
    outline-offset: 3px;
    border-radius: 8px;
}
.custom-button:focus-visible, .custom-button-2:focus-visible, .custom-button-outline:focus-visible {
    outline: 3px solid var(--ind-viola);
    outline-offset: 3px;
}

/* Testata: trasparente in cima, vetro scorrendo. Il vetro sta su un livello dietro la testata:
   un backdrop-filter sulla testata stessa farebbe da riferimento alle icone in position:fixed
   che contiene, spostandole. */
.indicoo-header {
    transition: padding .4s var(--ind-morbido);
}
.indicoo-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgb(255 255 255 / .8);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 1px 0 rgb(43 29 85 / .06), 0 12px 32px -22px rgb(43 29 85 / .45);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.indicoo-header.is-scorsa { padding: 44px 0 0; min-height: 116px; background-color: transparent !important; }
.indicoo-header.is-scorsa::before { opacity: 1; }
header .logo { transition: width .4s var(--ind-morbido); }
.indicoo-header.is-scorsa .logo { width: 160px; }
/* Il secondo logo della V1 era identico al primo: uno basta. */
header #logo-c { display: none; }

/* Avanzamento della lettura: sottile, a gradiente */
#progress-container { height: 3px; pointer-events: none; }
#progress-bar {
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--ind-gradiente);
    box-shadow: 0 0 10px var(--ind-alone);
    transition: none;
    will-change: transform;
}

/* Pulsanti: un filo di luce, alone e sollevamento */
.custom-button, .custom-button-2, .custom-button-outline, .accedi a, .iscriviti a, .pulsante-bianco, .pulsante-vuoto {
    transition: transform .25s var(--ind-morbido), box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, filter .25s ease;
}
.custom-button {
    background: var(--ind-gradiente);
    box-shadow: 0 10px 22px -12px var(--ind-alone), inset 0 1px 0 rgb(255 255 255 / .25);
}
.custom-button:hover, .custom-button:focus {
    background: var(--ind-gradiente);
    border-color: transparent;
    filter: brightness(1.05) saturate(1.05);
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -14px var(--ind-alone), inset 0 1px 0 rgb(255 255 255 / .3);
}
.custom-button:active, .custom-button-2:active, .custom-button-outline:active { transform: translateY(0) scale(.98); }
.custom-button:disabled, .custom-button:disabled:hover {
    background: #9e81f070;
    filter: none;
    transform: none;
    box-shadow: none;
}
.custom-button-2:hover, .custom-button-outline:hover, .pulsante-bianco:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px var(--ind-alone);
}

/* Schede: si sollevano al passaggio del mouse */
.question, .white-card, .white-card-alt, .bando-card, .cfi-card, .box-supporto, .membro-card,
.card-area-riservata, .storie-elenco a, .cfi-format-card {
    transition: transform .35s var(--ind-morbido), box-shadow .35s ease;
}
@media (hover: hover) {
    .question:hover, .white-card:hover, .white-card-alt:hover, .bando-card:hover, .cfi-card:hover,
    .box-supporto:hover, .membro-card:hover, .card-area-riservata:hover, .storie-elenco a:hover, .cfi-format-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ind-ombra-alta);
    }
}

/* Immagini delle storie: un lieve ingrandimento dentro la cornice */
.storia-copertina-wrap { overflow: hidden; }
.storia-copertina-img { transition: transform .8s var(--ind-morbido); }
@media (hover: hover) {
    .storia-copertina-wrap:hover .storia-copertina-img { transform: scale(1.035); }
}

/* Link del piede: una sottolineatura che si disegna */
footer a:not([class]) {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .3s var(--ind-morbido), color .2s;
}
footer a:not([class]):hover { background-size: 100% 1px; }

/* Blocchi che compaiono entrando nello schermo (sito.js). Senza JavaScript restano visibili. */
html.js-rivela .effetto-base {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ind-morbido), transform .7s var(--ind-morbido);
}
html.js-rivela .effetto-base.is-visibile { opacity: 1; transform: none; }

/* Campi dei moduli: bordo che si accende */
.form_item input, .form_item select, .form_item textarea {
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form_item input:focus, .form_item select:focus, .form_item textarea:focus {
    border-color: var(--ind-viola) !important;
    box-shadow: 0 0 0 4px rgb(158 129 240 / .18);
    outline: 0;
}

/* Versione della piattaforma nel piede */
.versione-piattaforma { opacity: .55; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    html.js-rivela .effetto-base { opacity: 1; transform: none; }
}