/* Miglioramenti grafici avanzati per pagine statiche (2026-10-07) */

/* 1. Animazione di entrata per il container principale
   2026-10-08: solo dissolvenza, SENZA lo spostamento di 20px verso l'alto: a ogni apertura tutta la
   pagina "saltava" su di 20px; inoltre il transform lasciato sul contenitore (forwards) lo rendeva
   riferimento per eventuali elementi position:fixed interni. */
.container {
    animation: twFadeUp 0.6s ease-out both;
}

@keyframes twFadeUp {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 2. Miglioramento Glassmorphism per il container */
.container {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

/* 3. Titoli con gradiente moderno e Mascheratura */
h1 {
    background: linear-gradient(135deg, #fff 0%, var(--secondary) 25%, #fff 50%, var(--primary) 75%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: textShimmer 6s linear infinite;
}

@keyframes textShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* 4. Effetto Hover per le card */
.tw-cards li {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease;
}

/* 2026-10-09: tolto su richiesta del titolare il limite "solo con mouse" messo il 2026-10-08:
   il sollevamento torna anche al tocco sul telefono. */
.tw-cards li:hover {
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(34, 211, 238, 0.4);
}

/* 5. Active States - Effetto Pressione */
.twc-btn:active, .tw-cards li:active, .tw-segretaria-cta:active, .cta:active {
    transform: scale(0.96) !important;
    transition: transform 0.1s ease;
}

/* 6. Miglioramento tabelle (Row highlight più morbido) */
.tw-rtable tr {
    transition: background 0.2s ease;
}

.tw-rtable tr:hover td {
    background: rgba(34, 211, 238, 0.08) !important;
}

/* 7. Effetto bagliore per le icone delle card */
.tw-ic {
    position: relative;
    z-index: 1;
}

.tw-ic::after {
    content: "";
    position: absolute;
    inset: -5px;
    background: var(--secondary);
    filter: blur(12px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

.tw-cards li:hover .tw-ic::after {
    opacity: 0.2;
}

/* 8. Floating Mobile Bar - Estetica App */
@media (max-width: 760px) {
    .twc-bar {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(15px) !important;
        background: rgba(5, 5, 5, 0.85) !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
    }
    
    body.twc-has-bar {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* 9. FAQ Accordion: animazione rotazione freccia */
.tw-acc[open] .tw-acc-q::after {
    transform: rotate(180deg);
}

/* 10. Floating background elements (blur decorativi) */
body::before, body::after {
    content: "";
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    z-index: -1;
    filter: blur(100px);
    opacity: 0.12;
    pointer-events: none;
}

body::before {
    top: -100px;
    right: -100px;
    background: var(--primary);
}

body::after {
    bottom: -100px;
    left: -100px;
    background: var(--secondary);
}

/* ------------------------------------------------------------------
   NUOVE MIGLIORIE (1, 2, 3) - 2026-10-07
   ------------------------------------------------------------------ */

/* 1. Border Beam (Luce rotante sui box importanti) */
.tw-inbreve, .tw-rtable, .twc-box {
    position: relative;
    overflow: hidden;
}

@keyframes borderBeam {
    0% { transform: translateX(-100%) translateY(-100%) rotate(0deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(360deg); }
}

.tw-inbreve::before, .twc-box::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(var(--beam-angle, 0deg), transparent 70%, var(--secondary), var(--primary));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.5;
    pointer-events: none;
    animation: beamRotate 8s linear infinite;
}

@keyframes beamRotate {
    from { --beam-angle: 0deg; filter: hue-rotate(0deg); }
    to { --beam-angle: 360deg; filter: hue-rotate(360deg); }
}

@property --beam-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* 2. Focus Words Highlight (Cambio colore parole chiave) */
/* 2026-10-08: esteso agli articoli del blog (.tw-art, prima non coperti); -webkit-text-fill-color
   perché i grassetti con color in linea (style="color:...") coprivano il gradiente; display inline +
   box-decoration-break al posto di inline-block (che spostava a capo interi gruppi di parole). */
.static-content p strong, .static-content p b,
.tw-art p strong, .tw-art p b {
    background: linear-gradient(90deg, #fff, var(--secondary), var(--primary), #fff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: focusWordFlow 10s linear infinite;
    font-weight: 800;
}

@keyframes focusWordFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* 3. Gradient Flow per i Pulsanti (Fondo animato) */
.twc-btn, .cta, .tw-segretaria-cta, .tw-sb-btn {
    background-size: 200% 200% !important;
    animation: btnGradientFlow 4s ease infinite !important;
}

@keyframes btnGradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Pulsante Chiama più vivido */
.twc-call {
    background: linear-gradient(-45deg, #f59e0b, #fbbf24, #f59e0b, #d97706) !important;
}

/* Pulsante WhatsApp più vivido */
.twc-wa {
    background: linear-gradient(-45deg, #25d366, #128c7e, #25d366, #075e54) !important;
}

/* Pulsante Segretaria più vivido */
.tw-segretaria-cta {
    background: linear-gradient(-45deg, #7c3aed, #db2777, #7c3aed, #a21caf) !important;
}

/* ------------------------------------------------------------------
   2026-10-08 — pagine che non saltellano
   ------------------------------------------------------------------ */
/* Contatore "95%" (pagine riparazione-pc): mentre conta da 0 a 95 la larghezza delle cifre
   cambiava e il resto della frase si spostava di lato. Cifre a larghezza fissa + spazio riservato. */
td[data-countup] { font-variant-numeric: tabular-nums; }
span[data-countup] {
    display: inline-block;
    min-width: 3.6ch;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Riflesso che attraversa il pulsante viola "Segretaria": l'animazione originale muoveva la proprietà
   "left" (da -45% a 120%), che Chrome e PageSpeed contano come spostamento del layout (CLS) ogni 3,8 s.
   Stesso movimento con transform: 165% della larghezza del pulsante = 434% della striscia (larga il 38%). */
@media (prefers-reduced-motion: no-preference) {
    .tw-segretaria-cta::before {
        left: -45%;
        animation-name: twSegretariaShineT;
    }
}
@keyframes twSegretariaShineT {
    0%, 70% { transform: translateX(0) skewX(-18deg); }
    88%, 100% { transform: translateX(434%) skewX(-18deg); }
}

/* Immagine del banner "gestione social" (caricamento differito): la figura è un contenitore flex,
   quindi prima dell'arrivo dell'immagine il <picture> era largo 0 e alto 0; all'arrivo la pagina si
   allungava di colpo di ~240 px. Il <picture> prende subito la larghezza finale (250/300 px come
   in social-banner.css) e width/height dell'<img> riservano l'altezza. */
.tw-sb-fig picture { width: 100%; max-width: 250px; }
@container (min-width: 600px) {
    .tw-sb-fig picture { max-width: 300px; }
}

/* 2026-10-08 (bis): tolto il blocco "prefers-reduced-motion" aggiunto in mattinata. Sui PC con
   "Effetti di animazione" disattivati (Windows) fermava TUTTI gli effetti: il titolare li vuole sempre attivi. */

/* 2026-10-10: logo (JPG leggero, 11 KB, non convertito in WebP) in cima agli articoli del blog, non cliccabile:
   l'utente scorre la pagina fino in fondo, dove c'e' il pulsante grande "Visita il mio sito web". */
.tw-blog-brand{display:flex;justify-content:center;margin:0 0 1.4rem}
.tw-blog-brand img{width:96px;height:auto;aspect-ratio:191/196;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35)}

/* 2026-10-10: riquadro "Guide utili" in fondo alle pagine /servizi/ (link interni verso le guide del blog). */
.tw-guide{margin:2rem 0 0;padding:1.1rem 1.2rem;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.03)}
.tw-guide-t{margin:0 0 .6rem;font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#94a3b8}
.tw-guide ul{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.tw-guide a{display:inline-block;padding:.35rem 0;color:#67e8f9;font-weight:700;text-underline-offset:3px}