/* ==========================================================================
   GLOBAL VARIABLES (SPACING & FILTERS)
   ========================================================================== */
:root {
    /* Πιο ισορροπημένο πράσινο rgb(141, 198, 63) για μαύρα/σκούρα SVGs */
    --svg-green-filter: brightness(0) saturate(100%) invert(69%) sepia(54%) saturate(400%) hue-rotate(44deg) brightness(80%) contrast(92%);
}

/* Global Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Display compatibility */
html {
    height: 100%;
}

/* Background & Global Body Style */
.zero-project {
    padding: 0;
    margin: 0;
    padding-top: 50px; /* Αποφυγή overlap με το fixed navbar */
    color: rgb(193, 203, 230);
    background: rgb(0, 21, 101);
    background-image: url('../interface/background/bottom.webp'), linear-gradient(to bottom, rgb(0, 0, 0) 11%, rgb(8, 40, 194) 60%, rgb(8, 40, 194) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: bottom, 100% 100%;
    background-attachment: fixed, fixed;
    background-size: 100%, 100%;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    text-shadow: 0px 0px 2px black;
}

/* ==========================================================================
   ΚΟΙΝΕΣ ΡΥΘΜΙΣΕΙΣ ΓΙΑ LINKS & ΣΤΟΙΧΕΙΑ (STATIC STATES)
   ========================================================================== */
a {
    color: rgb(132, 151, 208);
    text-decoration: none; 
    transition: color 0.3s ease-in-out;
}

/* Hover effect container - Inline block για σωστό bounding box */
.hover-effect {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

/* SVG crossfade layers for perfect color transitions */
.hover-effect .svg-green {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    opacity: 0;
    filter: var(--svg-green-filter);
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.hover-effect .svg-normal {
    display: block;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Απόλυτα smooth μετάβαση απευθείας πάνω στις εικόνες */
.hover-effect img {
    opacity: 1;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Custom Player Button - Smooth transition */
.zp-play-btn {
    transition: opacity 0.4s ease;
}

/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
#navigation {
    z-index: 10;
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0px 0px 8px 0px rgb(0, 0, 0);
    background-color: rgba(1, 1, 1, 0.8);
}

#navigation a {
    color: rgb(132, 151, 208);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    margin: 0 7.5px; /* Replaces gap for universal browser support */
}

#navigation a.active-nav {
    color: rgb(132, 151, 208);                 
    font-weight: normal;            
}

#navigation a.active-nav::before {
    content: "";              
    display: inline-block;
    width: 16px;                  
    height: 16px;                  
    margin-right: 3px;            
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238497D0'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.3s ease-in-out;
}

@supports (-webkit-mask-size: contain) or (mask-size: contain) {
    #navigation a.active-nav::before {
        background-image: none !important;
        background-color: currentColor; 
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / contain;
    }
}

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */
.main-container {
    width: 100%;
    margin: 0 auto;
    line-height: normal;
}

/* ==========================================================================
   INTERACTIVE STATES (HOVERS) - ΠΑΝΤΑ ΣΤΟ ΤΕΛΟΣ ΤΟΥ ΑΡΧΕΙΟΥ
   ========================================================================== */
@media (hover: hover) {
    /* Global link hover */
    a:hover {
        color: rgb(141, 198, 63);
        text-decoration: none;
    }

    /* Navigation link hovers */
    #navigation a:hover,
    #navigation a.active-nav:hover {
        color: rgb(141, 198, 63);
    }
    
    #navigation a.active-nav:hover::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238DC63F'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    }
    
    @supports (-webkit-mask-size: contain) or (mask-size: contain) {
        #navigation a.active-nav:hover::before {
            background-image: none !important;
        }
    }

    /* Ομαλό σβήσιμο (Fade) στις κλασικές εικόνες (JPG/PNG) */
    .hover-effect:hover img {
        opacity: 0.75;
    }

    /* Οι SVG εικόνες κάνουν crossfade (2 layers) για απόλυτα ομαλή αλλαγή χρώματος */
    .hover-effect:hover .svg-normal {
        opacity: 0;
    }
    
    .hover-effect:hover .svg-green {
        opacity: 1;
    }

    /* Player Button Hover */
    .zp-play-btn:hover {
        opacity: 0.7; 
    }
}