@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;600&display=swap');

html, body { margin: 0; padding: 0; background-color: #000; font-family: 'Inter', sans-serif; color: white; -webkit-font-smoothing: antialiased; overflow-x: hidden; scroll-behavior: smooth; }

#bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

/* CV ICON BOX */
#mode-toggle { 
    position: fixed; top: 30px; right: 30px; z-index: 100; cursor: pointer; 
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; justify-content: center; 
}
.cv-icon-box {
    width: 38px; height: 38px; border: 1.5px solid rgba(255,255,255,0.4); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; letter-spacing: 0.05em; transition: all 0.4s ease;
}
#mode-toggle:hover .cv-icon-box { background: white; color: black; border-color: white; box-shadow: 0 0 20px rgba(255,255,255,0.3); }

.reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* VIOLET/INDIGO GRADIENT - ΠΑΝΤΟΥ ΤΟ ΙΔΙΟ */
.text-gradient {
    background: linear-gradient(to right, #6366f1 0%, #a5b4fc 50%, #6366f1 100%);
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; animation: shine 4s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

#current-date-target { 
    background: linear-gradient(to right, #ffffff 0%, #6366f1 100%); 
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; 
}

/* Timeline fix for Indigo color in Timeline mode */
.timeline-mode .text-gradient { background: linear-gradient(to right, #6366f1 0%, #a5b4fc 50%, #6366f1 100%); }
.timeline-mode #current-date-target { background: linear-gradient(to right, #ffffff 0%, #6366f1 100%); }

.project-card { transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid rgba(255,255,255,0.1); }
.project-card:hover { transform: translateY(-8px); border-color: #6366f1; }

.link-text { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.6; transition: 0.4s; }
.project-link:hover .link-text { opacity: 1; text-shadow: 0 0 8px rgba(255,255,255,0.4); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }


/* --- PREMIUM REVEAL: Πιο αργό και ατμοσφαιρικό --- */
.premium-reveal {
    opacity: 0;
    transform: translateY(15px); /* Ξεκινάει λίγο πιο χαμηλά */
    filter: blur(12px); /* Περισσότερο blur για πιο "dreamy" εφέ */
    /* 3.5 δευτερόλεπτα transition για απόλυτη ομαλότητα */
    transition: 
        opacity 3.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 3.5s cubic-bezier(0.22, 1, 0.36, 1),
        filter 3s cubic-bezier(0.22, 1, 0.36, 1);
    padding-right: 0.3em; /* Έξτρα χώρος για το italic 's' */
    will-change: transform, opacity, filter; /* Optimization για τον browser */
}

.premium-reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

/* --- SHINE EFFECT: Το διακριτικό γυάλισμα --- */
.text-gradient {
    background: linear-gradient(
        to right, 
        #818cf8 0%, 
        #818cf8 40%, 
        #ffffff 50%,  /* Το "φως" είναι τώρα λευκό για περισσότερο contrast */
        #818cf8 60%, 
        #818cf8 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    /* 6 δευτερόλεπτα διάρκεια για να είναι super slow */
    animation: shine 6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 2s; /* Ξεκινάει αφού έχει ήδη εμφανιστεί το όνομα */
}

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