/* Base settings matching React app */
body {
    cursor: none;
    /* Hide default cursor for custom cursor logic */
    min-height: 100vh;
    background-color: #fcf8ed;
    /* paper */
    color: #2c2825;
    /* ink */
}

/* Noise Texture Overlay */
.noise-bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 50;
    opacity: 0.4;
    mix-blend-mode: multiply;
}

/* Vignette */
.vignette::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.03) 100%);
    pointer-events: none;
    z-index: 49;
}

@media (pointer: coarse) {
    body {
        cursor: auto;
    }

    .custom-cursor {
        display: none !important;
    }
}

html {
    scroll-behavior: smooth;
}

/* --- CUSTOM CURSOR --- */

/* Il punto centrale (rimane invertito per visibilità) */
.cursor-dot {
    width: 10px;
    height: 10px;
    background-color: transparent;
    backdrop-filter: invert(1) grayscale(1);
    -webkit-backdrop-filter: invert(1) grayscale(1);
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* --- CUSTOM CURSOR --- */

/* Il punto centrale (rimane invertito per visibilità) */
.cursor-dot {
    width: 10px;
    height: 10px;
    background-color: transparent;
    backdrop-filter: invert(1) grayscale(1);
    -webkit-backdrop-filter: invert(1) grayscale(1);
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Il cerchio esterno (ORA SOLO CONTORNO) */
.cursor-ring {
    width: 30px;
    height: 30px;

    /* Sfondo trasparente e NESSUN filtro di inversione */
    background-color: transparent;

    position: fixed;
    pointer-events: none;
    z-index: 9998;
    border-radius: 50%;

    /* Bordo visibile */
    border: 1px solid #a8a29e;
    /* stone-400 */

    opacity: 0.6;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease-out, height 0.3s ease-out, border-color 0.3s;
}

.cursor-ring.hovering {
    width: 60px;
    height: 60px;
    border-color: #1b6e4b;
    /* primary color on hover */
}

/* Chat Widget Animations */
@keyframes pulse-custom {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

.animate-pulse-custom {
    animation: pulse-custom 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Typography Overrides */
.font-playfair { font-family: 'Playfair Display', serif; }
.font-serif { font-family: 'Lora', serif; }
.font-sans { font-family: 'Inter', sans-serif; }

/* Markdown Content Styling (Prose mirror) */
.prose p {
    margin-bottom: 1.5em;
    line-height: 1.75;
}

.prose strong {
    font-weight: 600;
    color: #2c2825;
}

/* --- NUOVO STILE NAVBAR ARTISTICA (Uniforme & Geometrico) --- */
.navbar-halftone-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    /* B&W e Contrasto alto */
    filter: grayscale(100%) contrast(140%) brightness(1.1);

    /* Resi più scuri/visibili */
    opacity: 0.65;

    /* Fusione color sabbia */
    mix-blend-mode: multiply;

    /* MASCHERA SINGOLA (Griglia perfetta) */
    mask-image:
        radial-gradient(circle, black 1.5px, transparent 1.6px),
        /* Puntini netti */
        linear-gradient(to bottom, black 20%, transparent 100%);
        /* Sfumatura */

    mask-size:
        5px 5px,
        /* Griglia uniforme */
        100% 100%;
       /* Sfumatura */

    mask-repeat: repeat, no-repeat;
    mask-composite: intersect;

    /* Webkit per Chrome/Safari */
    -webkit-mask-image:
        radial-gradient(circle, black 1.5px, transparent 1.6px),
        linear-gradient(to bottom, black 20%, transparent 100%);
    -webkit-mask-size:
        5px 5px,
        100% 100%;
    -webkit-mask-repeat: repeat, no-repeat;
    -webkit-mask-composite: source-in;
    /* Importante per Webkit */

    pointer-events: none;
}

/* =========================================
   EFFECT: Marker Highlight on Hover
   ========================================= */
.marker-highlight {
    position: relative;
    text-decoration: none;
    display: inline;

    /* Verde #1b6e4b con trasparenza (0.4 e 0.2) */
    background-image: linear-gradient(120deg, rgba(27, 110, 75, 0.4) 0%, rgba(27, 110, 75, 0.25) 100%);

    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: 0 88%;
    transition: background-size 0.4s ease-in-out;
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    cursor: text;
}

/* Attiva l'effetto al passaggio sul paragrafo */
p:hover .marker-highlight {
    background-size: 100% 100%;
}

/* Mobile: sempre visibile ma più leggero */
@media (pointer: coarse) {
    .marker-highlight {
        background-size: 100% 100%;
        /* Verde ancora più tenue per non disturbare la lettura su mobile */
        background-image: linear-gradient(120deg, rgba(27, 110, 75, 0.25) 0%, rgba(27, 110, 75, 0.15) 100%);
    }
}