@tailwind base;
@tailwind components;
@tailwind utilities;

/* =========================================
   IMPORTAZIONE FONT PERSONALIZZATO (CAZELA)
   ========================================= */
@font-face {
    font-family: 'Cazela';
    src: url('./assets/CAZELA.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Garantisce che il testo sia visibile mentre carica il font */
}

/* Animazione comparsa elementi on scroll (Reveal) */
.reveal { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); 
}

.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Animazione icona mouse fluttuante per lo scorrimento */
.mouse-scroll { 
    width: 24px; 
    height: 36px; 
    border: 1px solid; 
    border-radius: 12px; 
    position: relative; 
}

.mouse-scroll::before { 
    content: ''; 
    width: 2px; 
    height: 6px; 
    position: absolute; 
    top: 6px; 
    left: 50%; 
    transform: translateX(-50%); 
    border-radius: 2px; 
    animation: scroll 1.5s infinite; 
}

@keyframes scroll { 
    0% { top: 6px; opacity: 1; } 
    100% { top: 20px; opacity: 0; } 
}

/* Sfumatura elegante dal basso verso l'alto sopra le immagini */
.img-overlay-elegant::after { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to top, rgba(62,67,86,0.5) 0%, rgba(62,67,86,0) 60%); 
    pointer-events: none;
}

.filter-blue-dark {
    filter: brightness(0) saturate(100%) invert(24%) sepia(16%) saturate(1078%) hue-rotate(187deg) brightness(95%) contrast(88%);
}