/* --- CUSTOM FONT: BLANKA --- */
@font-face {
    font-family: 'Blanka';
    /* Assicurati che il file si chiami esattamente Blanka.otf e sia nella cartella css */
    src: url('Blanka.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.font-blanka {
    font-family: 'Blanka', sans-serif;
    /* Aggiustamento opzionale se il font risulta troppo spaziato */
    letter-spacing: -0.02em; 
}

/* --- BASE STYLES --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: auto;
}

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* --- ANIMAZIONI DI ENTRATA (REVEAL) --- */
.reveal {
    opacity: 1;
    transform: none;
    transition: none;
}
@media (min-width: 768px) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease-out;
    }
    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* --- CURSORE PERSONALIZZATO --- */
#cursor-dot, #cursor-outline {
    position: fixed; top: 0; left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%; z-index: 9999; pointer-events: none;
    display: none;
}
#cursor-dot { width: 8px; height: 8px; background-color: #52525b; }
#cursor-outline {
    width: 40px; height: 40px;
    border: 1px solid rgba(134, 134, 139, 0.5);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
}
body.hovering #cursor-outline {
    width: 60px; height: 60px;
    background-color: rgba(82, 82, 91, 0.1);
    border-color: transparent;
}
@media (pointer: fine) {
    body { cursor: none; }
    #cursor-dot, #cursor-outline { display: block; }
}

/* --- GRADIENTE LUMINOSO (BLOBS) --- */
.gradient-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; overflow: hidden; pointer-events: none;
}
.blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
    animation: float 20s infinite ease-in-out alternate;
}
.blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: #e0e7ff; animation-delay: 0s; }
.blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: #f3e8ff; animation-delay: -5s; }
.blob-3 { top: 40%; left: 40%; width: 40vw; height: 40vw; background: #dbeafe; animation-delay: -10s; }
.dark .blob-1, .dark .blob-2, .dark .blob-3 { display: none; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* --- CARD EFFETTO GLOW --- */
.glow-card { position: relative; overflow: hidden; }
.glow-card::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(82, 82, 91, 0.05), transparent 40%);
    z-index: 1; opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.glow-card:hover::before { opacity: 1; }
.dark .glow-card::before {
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.05), transparent 40%);
}

/* --- HEADER DINAMICO --- */
#dynamic-header {
    transition: height 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
    overflow: hidden;
}
#menu-content { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
#dynamic-header.open #menu-content { opacity: 1; pointer-events: auto; transition-delay: 0.15s; }
#menu-icon { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
#dynamic-header.open #menu-icon { transform: rotate(45deg); }

/* --- MENU STRIKE EFFECT --- */
.nav-strike { position: relative; display: inline-block; }
.nav-strike::after {
    content: ''; position: absolute; width: 0; height: 2px; display: block;
    background: currentColor; transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    top: 55%; left: 0; transform: translateY(-50%); pointer-events: none;
}
.nav-strike:hover::after { width: 100%; }

/* --- GLASSMORPHISM --- */
.liquid-glass {
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.7); 
    border: 1px solid rgba(0, 0, 0, 0.02); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}
.dark .liquid-glass {
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
}

/* --- MODALI --- */
.modal-enter { opacity: 0; transform: translateY(40px) scale(0.95); }
.modal-active { opacity: 1; transform: translateY(0) scale(1); }
.modal-transition { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- REVIEWS CAROUSEL --- */
.review-slide {
    transition: opacity 0.8s ease-in-out;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; pointer-events: none;
}
.review-slide.active { opacity: 1; pointer-events: auto; position: relative; }

/* --- AURORA TEXT --- */
.aurora-text {
    background: linear-gradient(90deg, #007aff 0%, #5ac8fa 25%, #af52de 50%, #ff2d55 75%, #007aff 100%);
    background-size: 200% auto; color: #000; 
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; animation: aurora-flow 6s linear infinite;
}
.dark .aurora-text { color: #fff; }
@keyframes aurora-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* --- PARALLAX --- */
#hero-title { transition: transform 0.1s ease-out; will-change: transform; }

/* --- FILTRI PORTFOLIO --- */
.filter-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid rgba(0,0,0,0.1);
    background: transparent;
    color: #86868b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
.dark .filter-btn {
    border-color: rgba(255,255,255,0.1);
    color: #a1a1a6;
}
.filter-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #1d1d1f;
    transform: translateY(-1px);
}
.dark .filter-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.filter-btn.active {
    background: #1d1d1f;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dark .filter-btn.active {
    background: #fff;
    color: #000;
    box-shadow: 0 4px 12px rgba(255,255,255,0.1);
}