/* =====================================================================
   InternetCheck · theme-bold.css
   Layer di restyling "stravolgimento" — caricato DOPO style.css.
   Aurora animata, vetro con bordi gradiente, dial neon, tipografia
   display, micro-interazioni e mobile-first app-like.
   Nessuna modifica agli ID/classi usate da app.js e features.js.
   ===================================================================== */

:root {
    /* Accenti neon ad alta energia derivati dalla palette di marca */
    --neon-steel: #4aa3ff;
    --neon-amber: #ffc636;
    --neon-brick: #ff3d3d;
    --neon-violet: #7c5cff;

    /* Gradiente firma del brand */
    --grad-brand: linear-gradient(120deg, #3f88c5 0%, #4aa3ff 45%, #ffba08 100%);
    --grad-hot: linear-gradient(120deg, #ffba08 0%, #ff7a00 55%, #d00000 100%);
    --grad-cool: linear-gradient(135deg, #3f88c5, #7c5cff);

    /* Glow */
    --glow-steel: 0 0 32px rgba(74, 163, 255, 0.55);
    --glow-amber: 0 0 32px rgba(255, 186, 8, 0.5);

    /* Bordo gradiente riutilizzabile (mask trick) */
    --grad-border: linear-gradient(140deg,
            rgba(74, 163, 255, 0.55),
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 186, 8, 0.45));

    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

/* ---------------------------------------------------------------
   SFONDO AURORA ANIMATO (sostituisce le onde statiche)
   --------------------------------------------------------------- */
body.page-main {
    background:
        radial-gradient(1100px 700px at 50% -15%, rgba(63, 136, 197, 0.18), transparent 60%),
        linear-gradient(180deg, #0a121b 0%, #0c1824 55%, #090f16 100%);
    overflow-x: hidden;
}

body.page-main::before {
    content: "";
    position: fixed;
    inset: -35%;
    z-index: -2;
    height: auto;
    opacity: 1;
    background:
        radial-gradient(38% 38% at 22% 28%, rgba(74, 163, 255, 0.42), transparent 62%),
        radial-gradient(32% 32% at 82% 18%, rgba(255, 186, 8, 0.28), transparent 60%),
        radial-gradient(40% 40% at 75% 82%, rgba(208, 0, 0, 0.22), transparent 62%),
        radial-gradient(36% 36% at 18% 86%, rgba(124, 92, 255, 0.28), transparent 62%);
    filter: blur(70px) saturate(135%);
    animation: ic-aurora 26s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Velo a griglia sottile per profondità "tech" */
body.page-main::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(162, 174, 187, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(162, 174, 187, 0.04) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
    mask-image: radial-gradient(circle at 50% 30%, #000, transparent 78%);
    pointer-events: none;
}

@keyframes ic-aurora {
    0% {
        transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.08);
    }

    100% {
        transform: translate3d(5%, -3%, 0) rotate(-6deg) scale(1.04);
    }
}

/* ---------------------------------------------------------------
   TIPOGRAFIA DISPLAY
   --------------------------------------------------------------- */
h1,
h2,
h3,
.section-title,
.dial-go,
.dial-percent,
.metric-highlight,
.metric-value,
.quality-badge {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

.section-title {
    font-size: clamp(20px, 3.4vw, 28px);
    font-weight: 700;
    background: linear-gradient(100deg, var(--text-main), var(--neon-steel));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------
   SHELL & CARD — vetro con bordo gradiente + entrata animata
   --------------------------------------------------------------- */
.app-shell,
.card,
#history-card,
.legend-card {
    position: relative;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
        rgba(18, 30, 42, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow:
        0 24px 60px rgba(5, 11, 17, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* bordo gradiente via mask */
.app-shell::after,
.card::after,
.legend-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-border);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.9;
}

.app-shell {
    padding: 22px 22px 18px;
    animation: ic-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.card,
.legend-card,
#history-card {
    animation: ic-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ic-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------------------------
   HEADER — sticky vetroso e brand con bagliore
   --------------------------------------------------------------- */
header.app-header {
    border-bottom: 1px solid var(--border-subtle);
}

.brand-logo {
    filter: drop-shadow(0 6px 18px rgba(74, 163, 255, 0.35));
    transition: transform 0.3s ease;
}

.brand-logo:hover {
    transform: scale(1.04) rotate(-1deg);
}

/* ---------------------------------------------------------------
   DIAL — gauge neon con alone pulsante
   --------------------------------------------------------------- */
.dial-shell {
    width: clamp(210px, 64vw, 280px);
    height: clamp(210px, 64vw, 280px);
    background: radial-gradient(circle at 32% 0, #1d3a55, #070d14 74%);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(74, 163, 255, 0.18);
}

/* alone pulsante esterno */
.dial-shell::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--neon-steel), var(--neon-amber), var(--neon-brick), var(--neon-steel));
    filter: blur(22px);
    opacity: 0.45;
    z-index: -1;
    animation: ic-spin-slow 12s linear infinite;
}

@keyframes ic-spin-slow {
    to {
        transform: rotate(360deg);
    }
}

.dial-ring-fg {
    background:
        conic-gradient(from -90deg,
            var(--neon-steel) 0deg,
            #6cc4ff calc(var(--dial-progress) * 160deg),
            var(--neon-amber) calc(var(--dial-progress) * 300deg),
            var(--neon-brick) calc(var(--dial-progress) * 360deg),
            rgba(7, 13, 20, 1) calc(var(--dial-progress) * 360deg),
            rgba(7, 13, 20, 1) 360deg);
    box-shadow: 0 0 26px rgba(74, 163, 255, 0.7);
}

/* bottone GO — gradiente caldo, vibrante */
.dial-button {
    background:
        radial-gradient(circle at 32% 24%, #2a4660, #0a121b 76%);
    box-shadow:
        0 0 0 2px rgba(74, 163, 255, 0.45),
        0 14px 30px rgba(0, 0, 0, 0.6),
        0 0 36px rgba(74, 163, 255, 0.4);
}

.dial-button .dial-go {
    font-size: clamp(26px, 8vw, 32px);
    font-weight: 700;
    background: var(--grad-hot);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 22px rgba(255, 122, 0, 0.35);
}

.dial-button:hover {
    box-shadow:
        0 0 0 2px rgba(255, 186, 8, 0.7),
        0 18px 36px rgba(0, 0, 0, 0.65),
        0 0 44px rgba(255, 186, 8, 0.45);
}

/* stato in esecuzione: alone più intenso */
.dial-button.is-running {
    animation: ic-go-pulse 1.4s ease-in-out infinite;
}

@keyframes ic-go-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(74, 163, 255, 0.5),
            0 0 30px rgba(74, 163, 255, 0.45);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(255, 186, 8, 0.7),
            0 0 48px rgba(255, 186, 8, 0.55);
    }
}

.dial-percent {
    font-size: 16px;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------
   METRICHE — numeri giganti in gradiente, icone con chip glow
   --------------------------------------------------------------- */
.metric-card-large {
    position: relative;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
        rgba(14, 24, 34, 0.6);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.metric-card-large::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-brand);
    opacity: 0.85;
}

.metric-card-large:hover {
    transform: translateY(-3px);
    border-color: rgba(74, 163, 255, 0.5);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4), var(--glow-steel);
}

.metric-icon {
    color: var(--neon-steel);
    filter: drop-shadow(0 0 8px rgba(74, 163, 255, 0.5));
}

.metric-highlight {
    font-size: clamp(26px, 7vw, 38px);
    font-weight: 700;
    background: linear-gradient(100deg, #ffffff, var(--neon-steel));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* accenti per metrica */
.metric-card-large:nth-child(2) .metric-highlight {
    background: linear-gradient(100deg, #ffffff, #6cc4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-card-large:nth-child(3) .metric-highlight {
    background: linear-gradient(100deg, #fff, var(--neon-amber));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-card-large:nth-child(3) .metric-icon {
    color: var(--neon-amber);
    filter: drop-shadow(0 0 8px rgba(255, 186, 8, 0.5));
}

.quality-badge {
    background: var(--grad-cool);
    color: #fff;
    box-shadow: 0 0 18px rgba(124, 92, 255, 0.45);
}

/* ---------------------------------------------------------------
   PULSANTI / AZIONI — vibranti con glow e press
   --------------------------------------------------------------- */
.action-btn,
.btn-geo {
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.action-btn:hover,
.btn-geo:hover {
    transform: translateY(-2px);
    border-color: rgba(74, 163, 255, 0.6);
    box-shadow: var(--glow-steel);
    background: rgba(74, 163, 255, 0.12);
}

.action-btn:active,
.btn-geo:active,
.dial-button:active {
    transform: translateY(1px) scale(0.98);
}

.action-btn-accent {
    background: var(--grad-hot);
    border: none;
    color: #1a0c00;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(255, 122, 0, 0.35);
}

.action-btn-accent:hover {
    background: var(--grad-hot);
    color: #1a0c00;
    box-shadow: 0 12px 32px rgba(255, 122, 0, 0.5), var(--glow-amber);
}

/* ---------------------------------------------------------------
   STEP PILLS / CHIP — più vivaci
   --------------------------------------------------------------- */
.step-pill {
    border-radius: 999px;
    transition: all 0.25s ease;
}

.step-pill.active,
.step-pill.done {
    border-color: rgba(74, 163, 255, 0.6);
    box-shadow: 0 0 16px rgba(74, 163, 255, 0.35);
}

.step-pill .step-dot {
    box-shadow: 0 0 10px currentColor;
}

/* ---------------------------------------------------------------
   STEP BOX / TRUST / FAQ — coerenza col nuovo look
   --------------------------------------------------------------- */
.step-box {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.step-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4), var(--glow-steel);
}

.step-icon {
    background: var(--grad-cool);
    color: #fff;
    box-shadow: 0 8px 22px rgba(63, 136, 197, 0.4);
}

.trust-badge {
    border-radius: 999px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.trust-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 186, 8, 0.6);
}

.faq-question:hover {
    color: var(--neon-steel);
}

/* ---------------------------------------------------------------
   CONN BADGE — vetro evidenziato
   --------------------------------------------------------------- */
.conn-badge {
    background:
        linear-gradient(135deg, rgba(74, 163, 255, 0.1), rgba(255, 186, 8, 0.06)),
        rgba(14, 24, 34, 0.7);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
}

/* ---------------------------------------------------------------
   TOAST — pill galleggiante
   --------------------------------------------------------------- */
.toast {
    border-radius: 14px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}

/* =====================================================================
   MOBILE-FIRST / APP-LIKE  (rifinitura per webapp Android/iOS)
   ===================================================================== */
@media (max-width: 768px) {
    body.page-main {
        padding: 0;
    }

    .page-wrap {
        padding: calc(10px + var(--safe-top)) 10px calc(18px + var(--safe-bottom));
        gap: 12px;
    }

    /* header sticky in stile app */
    header.app-header {
        position: sticky;
        top: 0;
        z-index: 30;
        margin: -14px -12px 2px;
        padding: calc(8px + var(--safe-top)) 14px 6px;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        box-shadow: none;
    }

    .app-header .brand {
        justify-content: center;
        width: 100%;
    }

    .app-header .brand a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        box-shadow: none;
        border: 0;
        padding: 0;
        line-height: 0;
    }

    .brand-logo {
        max-height: 58px;
        filter: none;
        background: transparent;
    }

    .app-header .header-right {
        width: auto;
        flex-direction: row;
    }

    /* dial protagonista */
    .dial-shell {
        width: clamp(220px, 78vw, 300px);
        height: clamp(220px, 78vw, 300px);
    }

    /* card piene larghezza, raggio app */
    .app-shell,
    .card,
    .legend-card,
    #history-card {
        border-radius: 22px;
    }

    /* azioni risultato: griglia comoda al pollice */
    .result-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .action-btn,
    .action-btn-accent {
        justify-content: center;
        min-height: 50px;
        font-size: 14px;
    }

    .action-btn-accent {
        grid-column: 1 / -1;
    }

    /* target tattili generosi */
    .dial-button {
        min-width: 132px;
        min-height: 132px;
    }

    .faq-question {
        min-height: 52px;
    }

    /* banner cookie ancorato in basso, rispetta la notch */
    .cookie-banner {
        padding-bottom: calc(10px + var(--safe-bottom));
    }
}

@media (max-width: 420px) {
    .results-grid-compact {
        gap: 10px;
    }

    .metric-highlight {
        font-size: clamp(28px, 12vw, 40px);
    }

    .section-title {
        font-size: 20px;
    }
}

/* ---------------------------------------------------------------
   ACCESSIBILITÀ MOVIMENTO RIDOTTO
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    body.page-main::before,
    .dial-shell::before,
    .dial-button.is-running {
        animation: none !important;
    }

    .app-shell,
    .card,
    .legend-card,
    #history-card {
        animation: none !important;
    }
}