/* ============================================================
   MAIN.CSS
   Wordt op ELKE pagina geladen (home, project, etc.).
   Bevat: basisstijlen, navbar, en de gedeelde afbeelding-effecten
   (cycle-img / chromatische glitch) die zowel de homepage-cards
   als de projectpagina-gallery gebruiken.
   ============================================================ */

body {
    font-family: Arial, sans-serif;
    background-color: #000;
    overflow-x: hidden;

    /* Zachte gloeiende kleurvlekken in 2 van de 3 merkkleuren, over
       de hele pagina. "fixed" zorgt dat de gloed op zijn plek
       blijft t.o.v. het scherm, ook tijdens scrollen. */
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(175, 0, 0, 0.25), transparent 70%),
        radial-gradient(ellipse at 100% 100%, rgba(12, 0, 116, 0.28), transparent 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}


.custom-font {
    font-family: 'Poppins', sans-serif;
}


.montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}


.normal-font {
    font-family: Arial, sans-serif;
    font-size: 0.85rem !important;
}


/* NAVBAR LOGO */

.navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}


/* LABEL-STIJL (bv. "Media Design 2", "Portfolio · Media Design")
   -- gebruikt op zowel de homepage-cards als de projectpagina. */
.project-meta {
    color: #ffa600;
    letter-spacing: 0.08em;
}



/* ============================================================
   GEDEELDE AFBEELDING-EFFECTEN
   Bootstrap's .ratio regelt zelf al positioning/breedte/hoogte
   van het kind-element. We overschrijven alleen de
   --bs-aspect-ratio variabele voor een staande (portret)
   verhouding, want Bootstrap's eigen presets (1x1, 4x3, 16x9,
   21x9) zijn allemaal liggend. Percentage = hoogte / breedte * 100.
   ============================================================ */

.img-tall {
    --bs-aspect-ratio: 133.33%;  /* 3:4 staand */
}

.img-square {
    --bs-aspect-ratio: 125%;     /* 4:5 staand */
}


/* Standaard alleen de eerste afbeelding zichtbaar; de overige
   liggen klaar (onzichtbaar) voor een snelle hover-cyclus, zowel
   op de homepage-cards als in de project-gallery. */
.cycle-img {
    opacity: 0;
    will-change: opacity;
}

.cycle-img:first-child {
    opacity: 1;
    will-change: transform, filter;

    /* Zachte auto-zweefbeweging + chromatische aberratie, zelfde
       kleuren als de titel-letters. */
    animation: chromaFloatImg 4s infinite ease-in-out;
}


@keyframes chromaFloatImg {

    0%, 100% {

        transform: translateY(0) scale(1);

        filter:
            drop-shadow(1px 0 0 rgba(255, 166, 0, 0.35))
            drop-shadow(-1px 0 0 rgba(175, 0, 0, 0.35))
            drop-shadow(0 2px 0 rgba(12, 0, 116, 0.35));

    }

    50% {

        transform: translateY(-8px) scale(1.015);

        filter:
            drop-shadow(4px 0 0 rgba(255, 166, 0, 0.6))
            drop-shadow(-4px 0 0 rgba(175, 0, 0, 0.6))
            drop-shadow(0 4px 0 rgba(12, 0, 116, 0.5));

    }

}


/* Razendsnelle wissel-cyclus tussen gestapelde afbeeldingen (elk
   0.2s van een 0.8s-cyclus als 4 afbeeldingen gebruikt worden). */
@keyframes imgCycle {

    0%, 24.9% {
        opacity: 1;
    }

    25%, 100% {
        opacity: 0;
    }

}


/* Chromatische glitch-jitter voor afbeeldingen (RGB-split via
   drop-shadow + skew/scale). Wordt getriggerd door pagina-
   specifieke hover-selectors in home.css / project.css. */
@keyframes chromaGlitchImg {

    0% {

        transform: translate(0, 0) skewX(0deg) scale(1.06);

        filter:
            drop-shadow(2px 0 0 #ffa600)
            drop-shadow(-2px 0 0 #af0000)
            drop-shadow(0 2px 0 #0c0074);

    }

    15% {

        transform: translate(-5px, 2px) skewX(2deg) scale(1.08);

        filter:
            drop-shadow(-6px 1px 0 #ffa600)
            drop-shadow(6px -1px 0 #af0000)
            drop-shadow(3px 3px 0 #0c0074);

    }

    30% {

        transform: translate(4px, -3px) skewX(-3deg) scale(1.06);

        filter:
            drop-shadow(6px -2px 0 #ffa600)
            drop-shadow(-6px 2px 0 #af0000)
            drop-shadow(-3px -2px 0 #0c0074);

    }

    45% {

        transform: translate(-3px, -1px) skewX(1deg) scale(1.09);

        filter:
            drop-shadow(-4px 3px 0 #ffa600)
            drop-shadow(4px -3px 0 #af0000)
            drop-shadow(2px 4px 0 #0c0074);

    }

    60% {

        transform: translate(3px, 3px) skewX(-1deg) scale(1.06);

        filter:
            drop-shadow(5px 2px 0 #ffa600)
            drop-shadow(-5px -2px 0 #af0000)
            drop-shadow(0 -4px 0 #0c0074);

    }

    75% {

        transform: translate(-2px, -2px) skewX(2deg) scale(1.08);

        filter:
            drop-shadow(-3px -2px 0 #ffa600)
            drop-shadow(3px 2px 0 #af0000)
            drop-shadow(-2px 3px 0 #0c0074);

    }

    100% {

        transform: translate(0, 0) skewX(0deg) scale(1.06);

        filter:
            drop-shadow(2px 0 0 #ffa600)
            drop-shadow(-2px 0 0 #af0000)
            drop-shadow(0 2px 0 #0c0074);

    }

}

.glitch-border {
    position: relative;
    padding-left: 2rem;
    z-index: 5;
}

.glitch-border::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #ffffff;
    
    /* Bovenste laag garanderen */
    z-index: 10;
    pointer-events: none;
    will-change: filter, transform;
    
    /* 3-kleuren glitch schaduw met neon glow */
    filter: 
        drop-shadow(-4px -3.0px 0 #ffa600)
        drop-shadow(4px 3.0px 0 #af0000)
        drop-shadow(-3.2px 4.4px 0 #0c0074)
        drop-shadow(0 0 23px #ffa600);
    
    animation: glitchBorderAnim 0.6s infinite alternate ease-in-out;
}

@keyframes glitchBorderAnim {
    0% {
        filter: 
            drop-shadow(-4px -3.0px 0 #ffa600)
            drop-shadow(4px 3.0px 0 #af0000)
            drop-shadow(-3.2px 4.4px 0 #0c0074)
            drop-shadow(0 0 23px #ffa600);
        transform: translate(0, 0) scaleY(1);
    }
    30% {
        filter: 
            drop-shadow(-6px 4px 0 #af0000)
            drop-shadow(3px -4px 0 #ffa600)
            drop-shadow(-2px 2px 0 #0c0074)
            drop-shadow(0 0 23px #0c0074);
        transform: translate(2px, -1px) scaleY(0.98);
    }
    60% {
        filter: 
            drop-shadow(3px -4px 0 #0c0074)
            drop-shadow(-5px 3px 0 #ffa600)
            drop-shadow(4px 2px 0 #af0000)
            drop-shadow(0 0 23px #ffa600);
        transform: translate(-1px, 2px) scaleY(1.04);
    }
    100% {
        filter: 
            drop-shadow(-5px -2px 0 #ffa600)
            drop-shadow(5px 4px 0 #af0000)
            drop-shadow(-4px 2px 0 #0c0074)
            drop-shadow(0 0 23px #0c0074);
        transform: translate(0, 0) scaleY(1);
    }
}

/* Custom Navbar Styling */
.custom-navbar {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

/* Nav links styling & hover state */
.custom-navbar .nav-link {
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: color 0.25s ease, transform 0.25s ease;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active {
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Social icons styling */
.social-link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.15rem;
    transition: color 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.social-link:hover {
    color: #ffffff;
    transform: translateY(-2px);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* Mobile dropdown responsiveness */
@media (max-width: 767.98px) {
    .custom-navbar .navbar-collapse {
        background-color: #0a0a0a;
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 0.75rem;
    }
}