body {
    background-color: #E7E7E7;


    background-image: radial-gradient(circle at center,
            transparent 0%,
            rgba(40, 40, 40, 0.05) 70%,
            rgba(10, 10, 10, 0.12) 100%);

    background-attachment: scroll;
    background-size: cover;
    background-repeat: no-repeat;

    color: #000000;
    font-family: 'Cabinet Grotesk', sans-serif;
    overflow-x: clip;
    overscroll-behavior: none;
    touch-action: pan-y;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Lenis */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}


/* Text Stroke Utility - Keep if needed for other areas, or remove if unused */
.stroke-text {
    -webkit-text-stroke: 1px #888;
    color: transparent;
}

/* Project Description */
.work-item {
    will-change: transform;
}

.image-wrapper {
    will-change: transform, opacity;
}

.project-image {
    will-change: transform, scale;
    /* Ensure image covers wrapper at all times */
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#webgl-canvas-container {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #f0f0f0;
    /* Light gray placeholder instead of white to see limits */
}

canvas {
    display: block;
    /* Fix standard canvas bottom margin issue */
}

/* --- THE INFINITE MARQUEE --- */
#marquee {
    user-select: none;
    cursor: default;
}

.marquee-item {
    font-size: 10vw;
    font-weight: 900;
    line-height: 1;
    padding: 0 1vw;
    color: transparent;
    -webkit-text-stroke: 1.5px #333;
    transition: color 0.4s ease, -webkit-text-stroke 0.4s ease;
    display: inline-block;
    white-space: nowrap;
}

.marquee-item.active {
    color: #000;
    -webkit-text-stroke: 1.5px #000;
}

/* --- THE ASYMMETRIC BIO --- */
.reveal-line {
    overflow: hidden;
    position: relative;
}

.reveal-line span {
    display: inline-block;
    transform: translateY(100%);
    will-change: transform;
}

.noise-overlay {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(#noiseFilter)"/></svg>');
    opacity: 0.15;
    animation: noise-move 0.2s infinite steps(2);
}

@keyframes noise-move {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -5%);
    }

    20% {
        transform: translate(-10%, 5%);
    }

    30% {
        transform: translate(5%, -10%);
    }

    40% {
        transform: translate(-5%, 15%);
    }

    50% {
        transform: translate(-10%, 5%);
    }

    60% {
        transform: translate(15%, 0);
    }

    70% {
        transform: translate(0, 10%);
    }

    80% {
        transform: translate(-15%, 0);
    }

    90% {
        transform: translate(10%, 5%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@media (max-width: 1024px) {
    .marquee-item {
        font-size: 15vw;
    }
}

/* --- THE FLUID THREAD (Experience) --- */
#experience {
    overflow: hidden;
}

/* Hide path until JS sets it up */
#timeline-path {
    visibility: hidden;
}


.experience-node {
    z-index: 20;
}

.node-trigger {
    background: rgba(255, 255, 255, 0.4);
}

.ripple {
    pointer-events: none;
    transform: scale(1);
}

@keyframes ripple-effect {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.ripple-active {
    animation: ripple-effect 1s cubic-bezier(0, 0, 0.2, 1) forwards;
}

.experience-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    opacity: 0;
    /* Hidden initially */
}

/* --- THE POOL (Footer) --- */
#footer {
    position: relative;
}

.big-statement {
    color: #F8FAFC;
    margin: 0;
    line-height: 0.85;
    will-change: transform, opacity;
}

/*
#footer-liquid {
     ****removed will-change: d to avoid artifacts 
}
*/
.big-statement-wrapper {
    overflow: hidden;
}

/* --- LIQUID GLASS BUTTON (DARK CAPSULE STYLE) --- */
#footer-cta {
    position: relative;
    display: inline-flex;
    /* Assicura il corretto sizing */
    align-items: center;
    justify-content: center;

    /* Dimensioni e forma */
    padding: 1.25rem 3.5rem;
    border-radius: 9999px;
    text-decoration: none;
    color: white;

    /* MATERIALE VETRO SCURO */
    /* Base quasi trasparente ma scura */
    background: rgba(10, 10, 10, 0.3);
    /* Sfocatura dello sfondo per l'effetto lente */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* BORDI E LUCI (Il cuore dell'effetto) */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Bordo fisico sottilissimo */

    box-shadow:
        /* 1. RIM LIGHT SUPERIORE (Il riflesso bianco netto in alto) */
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6),

        /* 2. TOP SHEEN (Bagliore diffuso nella parte alta) */
        inset 0 10px 20px -10px rgba(255, 255, 255, 0.15),

        /* 3. REFRACTION (Luce che 'esce' dal basso, tipica del vetro) */
        inset 0 -5px 15px -5px rgba(255, 255, 255, 0.3),

        /* 4. DEEP BODY (Ombra interna scura per dare volume/spessore) */
        inset 0 20px 40px 0px rgba(0, 0, 0, 0.8),

        /* 5. DROP SHADOW (Ombra esterna per staccarlo dal fondo) */
        0 25px 40px -10px rgba(0, 0, 0, 0.7);

    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, background 0.4s ease;
    will-change: transform;
}

/* HOVER: Il vetro cattura più luce */
#footer-cta:hover {
    transform: scale(1.05) translateY(-2px);
    background: rgba(20, 20, 20, 0.4);
    border-color: rgba(255, 255, 255, 0.15);

    box-shadow:
        /* Intensifica il riflesso superiore */
        inset 0 1px 0 0 rgba(255, 255, 255, 0.9),

        /* Più luce diffusa */
        inset 0 15px 25px -5px rgba(255, 255, 255, 0.25),

        /* Rifrazione inferiore più marcata */
        inset 0 -5px 15px -5px rgba(255, 255, 255, 0.5),

        /* Corpo sempre scuro */
        inset 0 20px 40px 0px rgba(0, 0, 0, 0.8),

        /* Ombra esterna più profonda */
        0 35px 60px -15px rgba(0, 0, 0, 0.8);
}

#footer-cta:active {
    transform: scale(0.98);
}

/* Aggiorniamo il flare interattivo per fondersi meglio */
#cta-interactive-flare {
    background: radial-gradient(circle 100px at var(--x, 50%) var(--y, 50%),
            rgba(255, 255, 255, 0.3),
            /* Più luminoso al centro */
            rgba(255, 255, 255, 0.05) 40%,
            transparent 70%);
    mix-blend-mode: overlay;
    z-index: 2;
    /* Sopra lo sfondo, sotto il testo */
}

#footer-cta:hover #cta-interactive-flare {
    opacity: 1;
}

/* Footer Grid */
#footer-floor {
    will-change: transform, opacity;
}

@media (max-width: 1024px) {

    .experience-card,
    .node-trigger {
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
}

@media (max-width: 1024px) {

    .experience-card,
    .node-trigger,
    #footer-sphere-container .absolute {
        /* Aggiungi anche la sfera se necessario */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
        /* Colore solido o quasi */
    }
}

/* --- HEADER & MENU OVERRIDES --- */
header {
    z-index: 60 !important;
    /* Keep Header (Logo + Burger) above Menu Overlay (z-55) */
}

/* Ensure Logo and Burger have distinct pointer events */
header>* {
    pointer-events: auto;
}

#menu-overlay {
    backdrop-filter: blur(10px);
    /* Optional: adds depth to the deep black if transparency is tweaked */
}

.menu-link {
    will-change: transform, color;
}

.magnetic-link {
    display: inline-block;
    /* Crucial for transform to work */
    will-change: transform;
}

/* --- MOUSE SCROLL ANIMATION --- */
.mouse-icon {
    width: 20px;
    height: 32px;
    border: 2px solid #000;
    /* Nero per contrasto su sfondo chiaro */
    border-radius: 12px;
    /* Forma a pillola */
    position: relative;
    display: flex;
    justify-content: center;
    /* Assicura che sia visibile e non interferisca con il layout */
    pointer-events: none;
}

.mouse-wheel {
    width: 4px;
    height: 6px;
    background-color: #000;
    /* Rotellina nera */
    border-radius: 2px;
    position: absolute;
    top: 6px;
    animation: scroll-wheel 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scroll-wheel {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
        /* Appare subito */
    }

    80% {
        transform: translateY(14px) scale(0.8);
        opacity: 0;
    }

    100% {
        transform: translateY(0) scale(1);
        /* Torna su istantaneamente (invisibile grazie a opacity 0) */
        opacity: 0;
    }
}

/* Responsive adjustment opzionale: nascondi su schermi molto piccoli se necessario */
@media (max-height: 600px) {
    .mouse-icon {
        display: none;
    }
}