:root {
    --primary-color: #333333;
    --secondary-color: #00AEEF; /* Voeg deze toe (of een andere kleur) */
    --brm: 1;/* fallback */
    --bg-image: url("{{ url_for('static', filename=(subject|default('default')) + '_' + (year|default('2024')) + '.png') }}");
}

html{
    min-height:100%;

}






body{
    min-height:100%;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size:14px;
    letter-spacing:1px;
    line-height:1.5;


    text-decoration: none;

}

/* Verberg de standaard cursor op de hele site */
body, a, button {
    cursor: none !important;
}

/* De custom cursor: een klein, flikkerend blokje (terminal stijl) */
#custom-cursor {
    width: 12px;
    height: 22px;
    background-color: var(--secondary-color);
    position: fixed;
    pointer-events: none; /* Zorg dat je overal doorheen kunt klikken */
    z-index: 5; /* Lager dan de HUD (die op 10 staat) */
    box-shadow: 0 0 8px var(--secondary-color);
    animation: terminal-blink 0.8s steps(1) infinite;
    transform: translate(-50%, -50%);
}

@keyframes terminal-blink {
    50% { opacity: 0; }
}

/* Zorg dat de HUD-alert een hogere z-index heeft */
.hud-alert {
    z-index: 10; /* Deze staat nu 'boven' de cursor */
}



.sticky-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center top;
    /* Als er een video is, maken we de foto bijna onzichtbaar of we laten hem eronder */
    opacity: 0.3;
    z-index: 1;
}

.sticky-background {
    opacity: 0; /* Begin onzichtbaar */
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    height: 100vh;
    background-image: var(--bg-image);
    animation: fadeInBackground 1.5s ease-out forwards;

    /* Zorg dat de foto niet vervormt */
    background-size: cover;

    /* DIT IS DE BELANGRIJKSTE: */
    /* 'top' zorgt dat het hoofd in beeld blijft bij uitsnijden */
    /* 'center' houdt haar horizontaal in het midden van die 30% kolom */
    background-position: center top;

    /* Voorkom herhaling als de kolom breder wordt dan de foto */
    background-repeat: no-repeat;

    z-index: -1;
    opacity: 0.5;
animation:
        smoothFadeIn 2s ease-out forwards,
        glitch-flicker 8s infinite 2s;
}

/* De animatie voor het vertrek */
.fade-out-active {
    opacity: 0 !important;
    filter: blur(10px) grayscale(100%);
    transition: opacity 0.8s ease-in, filter 0.8s ease-in;
}


@keyframes glitch-flicker {
    /* 0% tot 85%: Rustige fase */
    0%, 85% {
        opacity: 0.5;
        filter: brightness(1) contrast(1) grayscale(0%);
        transform: translateX(0);
    }

    /* 86%: De eerste 'tik' - beeld verspringt en wordt lichter */
    86% {
        opacity: 0.3;
        filter: brightness(1.5) contrast(1.2) grayscale(30%);
        transform: translateX(-5px);
    }

    /* 87%: Terug naar normaal maar met een kleur-glitch */
    87% {
        opacity: 0.5;
        filter: hue-rotate(90deg);
        transform: translateX(5px);
    }

    /* 88%: Korte 'blackout' of flinke ruis */
    88% {
        opacity: 0.1;
        transform: scale(1.02);
    }

    /* 90% tot 95%: Snelle trilling */
    90%, 92%, 94% {
        transform: translateX(-2px);
        opacity: 0.4;
    }
    91%, 93%, 95% {
        transform: translateX(2px);
        opacity: 0.6;
    }

    /* 100%: Herstel */
    100% {
        opacity: 0.5;
        filter: brightness(1);
        transform: translateX(0);
    }
}


@keyframes fadeInBackground {
    from {
        opacity: 0;
        filter: grayscale(100%) blur(5px); /* Start koud en wazig */
    }
    to {
        opacity: 0.5; /* Match dit met je gewenste eind-opacity */
        filter: grayscale(0%) blur(0px); /* Eindig scherp en in kleur */
    }
}

@keyframes smoothFadeIn {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(1.05); /* Licht inzoomen voor diepte */
    }
    100% {
        opacity: 0.5; /* Of de waarde die je in je :root hebt staan */
        filter: blur(0px);
        transform: scale(1);
    }
}



/* Zorg dat de rest van je content niet over de foto heen valt als dat niet de bedoeling is */
.page-wrapper {

}


img{
    vertical-align:middle;
    max-width:100%;
    display:inline-block;
}
h2{
    font-size:50px;
    letter-spacing: 4px;

    background: -webkit-linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );
        background: linear-gradient(
        to right,
        var(--primary-color),
        var(--secondary-color)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}




.hud-alert {
    position: relative;
    isolation: isolate;
    margin: 60px auto;
    width: 60%;
    padding: 60px;
    text-align: center;
    color: #333333 !important;
    z-index: 10;
    /* We halen de border hier weg en zetten hem op de witte laag */
    border: none;
    animation: hud-appear 1.5s ease-out forwards;

}

.hud-alert:hover ~ #custom-cursor,
.hud-alert-intake:hover ~ #custom-cursor {
    opacity: 0; /* Cursor verdwijnt volledig */
    transition: opacity 0.2s ease;
}
/* De Witte Achtergrond Laag */
.hud-alert::before {

    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff !important;
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    z-index: -1; /* Achter de tekst */
}

.hud-alert::after {
    content: "";
    position: absolute;
    /* Trek de gloed weer strak om het blok heen */
    inset: -5px;
    z-index: -2;
    border-radius: 40px;

    /* We animeren de hoek van de gradient direct */
    background: conic-gradient(
        from var(--glow-angle),
        color-mix(in srgb, var(--primary-color), transparent 40%) 0deg,
        color-mix(in srgb, var(--third-color), transparent 40%) 90deg,
        color-mix(in srgb, var(--secondary-color), transparent 40%) 180deg,
        color-mix(in srgb, var(--third-color), transparent 40%) 270deg,
        color-mix(in srgb, var(--primary-color), transparent 40%) 360deg
    );

    filter: blur(15px);
    opacity:0.4;
    pointer-events: none;

    /* Roep de nieuwe animatie aan */
    animation: rotate-gradient 6s linear infinite;
}


.hud-alert-grey {
    position: relative;
    font-family: "Open Sans", sans-serif;
    isolation: isolate;
    margin: 60px auto;
    width: 60%;
    padding: 60px;
    text-align: center;
    color: #333333 !important;
    z-index: 10;
    /* We halen de border hier weg en zetten hem op de witte laag */
    border: none;
}


.hud-alert-grey::before {

    content: "";
    position: absolute;
    inset: 0;
    background:  #C0C0C0 !important;
    z-index: -1; /* Achter de tekst */
}






.hud-footer {
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;

    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-variant: small-caps;
    opacity: 0.5;
    color: var(--secondary-color);
}

.hud-header {
    position: absolute;
    top: 15px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-variant: small-caps;
    opacity: 0.5;
    color: var(--secondary-color);
}



.hud-alert-intake::before {

    content: "";
    position: absolute;
    inset: 0;
    background: #90ccf2 !important;
    border: 1px solid #fff;
    border-radius: 20px;
    z-index: -1; /* Achter de tekst */
}

.hud-alert-intake {
    position: relative;
    isolation: isolate;
    margin: 60px auto;
    width: 60%;
    padding: 60px;
    text-align: center;
    color: #fff !important;
    z-index: 10;
    /* We halen de border hier weg en zetten hem op de witte laag */
    border: none;
    animation: hud-appear 1.5s ease-out forwards;

}

.hud-alert-intake::after {
    content: "";
    position: absolute;
    /* Trek de gloed weer strak om het blok heen */
    inset: -5px;
    z-index: -2;
    border-radius: 40px;

    /* We animeren de hoek van de gradient direct */
    background: conic-gradient(
        from var(--glow-angle),
        color-mix(in srgb, var(--primary-color), transparent 40%) 0deg,
        color-mix(in srgb, var(--third-color), transparent 40%) 90deg,
        color-mix(in srgb, var(--secondary-color), transparent 40%) 180deg,
        color-mix(in srgb, var(--third-color), transparent 40%) 270deg,
        color-mix(in srgb, var(--primary-color), transparent 40%) 360deg
    );

    filter: blur(15px);
    opacity:0.4;
    pointer-events: none;

    /* Roep de nieuwe animatie aan */
    animation: rotate-gradient 6s linear infinite;
}

.hud-footer-intake {
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between; /* Zet de een links en de ander rechts */

    /* Styling voor de tech-look */
    font-family: 'JetBrains Mono', monospace; /* Of Arial als je die niet hebt */
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase; /* Voor de smallcaps look */
    font-variant: small-caps;
    opacity: 0.5; /* Maakt het subtieler, minder aanwezig dan de hoofdtekst */
    color: #fff;
}
.hud-score{
    text-align: center;
    font-size:20px;
    color: green;
}

.hud-version {
    text-align: left;
}

.hud-status {
    text-align: right;
}

.hud-version-intake {
    text-align: left;
}

.hud-status-intake {
    text-align: right;
}


.hud-pulse {
    font-family: 'JetBrains Mono', monospace;
    font-weight: bold;
    color:var(--primary-color);
    animation: slow-blink 3s ease-in-out infinite;
    letter-spacing: 1px;
}

@keyframes slow-blink {
    0%, 100% { opacity: 1; }
    30% { opacity: 0.2; }
}

.inline-block{
    max-width:100%;
    display: inline-block;
}
.page-wrapper{
    z-index: 0;
    position: relative;
}
.container{
    width:90vw;
    max-width:1360px;
    margin-left:auto;
    margin-right:auto;


}
/* De Data Card Design */

/* Verwijder de onderstreping van de link zelf */
.log-card-link {
    text-decoration: none !important; /* Forceer geen onderstreping */
    color: inherit;
    display: block;
    margin-bottom: 2rem;
    outline: none; /* Verwijdert ook de focus-omlijning als je dat wilt */
}

/* Zorg dat ook de tekst binnen de kaart nooit onderstreept wordt */
.log-card-link {
    text-decoration: none !important;
    display: block;
    margin-bottom: 2rem;
}

/* Optioneel: als je wilt dat de titel wel een effect heeft bij hover,
   doe dat dan met een border of kleur, niet met een standaard underline */
.log-data-card:hover .log-title {
    color: var(--primary-color);
}


.log-data-card {
    display: grid;
    grid-template-columns: 1fr 45px;
    background: transparent; /* Geen grijze vlakken meer */
    border-radius: 4px; /* Subtieler dan 8px */
    overflow: hidden;
    transition: all 0.3s ease;
    /* Geen standaard schaduw, dat maakt het druk */
    box-shadow: none;
}

.log-text {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.5;
    margin: 0;
}
.log-data-card:hover .log-action-bar {
    background: var(--secondary-color);
    color: white;
}
.log-info {
    padding: 1.2rem 1.5rem;
}
.log-metadata {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
    color: var(--primary-color);
    opacity: 0.7;
}

.log-action-bar {
    background: rgba(0, 0, 0, 0.02);
    color: rgba(0, 0, 0, 0.2); /* Pijltje heel licht */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-left: 1px solid rgba(0, 0, 0, 0.03);
}

.grace-asset-status {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 300; /* Extra dunne letters */
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 20px; /* Ruimte tussen status en de tekst */
    margin-top: -10px;    /* Iets dichter op de datum trekken */
    opacity: 0.8;
}

.status-value {
    font-weight: 700; /* De status uit de database mag iets vetter voor contrast */
    color: var(--secondary-color);
}

.margin-bottom-medium{
    margin-bottom:32px;
}
.paragraph-large{
    letter-spacing: -0.02em;
    font-size:14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-timeline-heading{   /* background-color:#fff;*/
}

.padding-vertical-xlarge{
    padding-top:80px;
    padding-bottom:80px;
}

.timeline-main_heading-wrapper{
    color: #333333;
    text-align: center;
    max-width: 640px;
    margin-left:auto;
    margin-right:auto;
}
.timeline-component{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1120px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    position:relative;
}
.timeline-item{
    z-index:2;
    grid-column-gap:0px;
    grid-row-gap:0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 180px 1fr;
    grid-auto-columns: 1fr;
    padding-top: 80px;
    padding-bottom: 80px;
    display:grid;
    position:relative;



}
.timeline_left {
display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;

}

.timeline_centre {
display: flex;
    justify-content: center;
    align-items: center;
}

.timeline_date_text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 1px;
    margin-bottom: 0.4rem;
    color: var(--primary-color);
    opacity: 0.7;



}

.timeline_text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px; /* Hoogte van de fade */
    background: linear-gradient(transparent, #fff); /* Match met je achtergrondkleur */
    pointer-events: none; /* Zorgt dat je nog op links kunt klikken eronder */
}



.timeline_text {
    color: #333333;
    font-size: 12px;
    font-weight: 500;
    line-height:1.3;
            max-height: 150px;
    overflow: hidden;
    position: relative; /* Nodig voor de fade-out overlay */


}

.timeline_text_full {
    color: #333333;
    font-size: 12px;
    font-weight: 500;
    line-height:1.3;

    overflow: hidden;
    position: relative; /* Nodig voor de fade-out overlay */


}

.timeline_circle {

        background: linear-gradient(
        to right,
        color-mix(in srgb, var(--primary-color), transparent 40%),
        color-mix(in srgb, var(--secondary-color), transparent 40%)
    );
    border-radius:5px;
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 2px;
    min-height: 2px;
    max-height: 2px;


}



.timeline-progress-bar{
    z-index:-1;


}
.section-timeline {
    z-index: -3;

    position: relative;
}

.timeline_link {
    opacity: 0.6;
    color:  var(--primary-color);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: 8px;
    align-items: center;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: opacity;
    display: flex;
}


.timeline_link:hover{
    opacity:1;
}

.link-icon{
    width:20px;
    height:20px;
    margin-left:8px;
}

.inline-block{
    display: inline-block;
}
.text-colour-lightgrey{
    color: #ffffffa6;
}

.overlay-fade-top{
  /*  background-image: linear-gradient(#fff, #fff); */
    color: #333333;
    height: 80px;
    position: absolute;
    inset: 0% 0% auto;
}


.overlay-fade-bottom{
  /*  background-image: linear-gradient(#fff, #fff); */
  color: #333333;
    height: 80px;
    position: absolute;
    inset: 0% 0% auto;
}

.read-more-btn {
    position: absolute;
    bottom: 00%;
    right: -5%;
    transform: translateX(-50%);



    z-index: 9999;

    color: #333 !important; /* Forceer witte pijl */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 2px 2px 5px  color-mix(in srgb, var(--primary-color), transparent 80%);
    transition: all 0.3s ease;
}



@media screen and (max-width: 767px) {
    h2 {
        font-size:40px;
    }
    .paragraph-large{
        font-size:18px;
    }
    .padding-vertical-xlarge: {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .timeline-item {
        align-items: start;
        grid-template-columns: 64px 1fr;
        width:100%;
    }
    .timeline_left{
        text-align: left;
        grid-area: 1/2/2/3;
    }
    .timeline-right{
        grid-area: span 1/ span 1 / span 1 / span 1;
    }
    .timeline_centre{
        justify-content: flex-start;
        grid-area: 1/1/3/2;
    }
    .timeline_date_text{
        margin-bottom: 24px;
        font-size: 36px;
    }
    .timeline_text {
        font-size: 20px;
    }
    .timeline-progress{
        left: 6px;
    }
    .margin-bottom-xlarge {
        margin-bottom:48px;
    }





}


@supports (corner-shape: squircle) {
  :root {
    --brm: 2;
  }
}



.story-content {
    color: #333333;
    line-height: 1.8;
    font-size: 18px;
}


.sticky-back-nav {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

    /* ZET DIT HEEL HOOG */
    z-index: 9999;

    /* Zorg dat de knop een kleur heeft die opvalt */

    color: #333 !important; /* Forceer witte pijl */

    width: 30px;
    height: 30px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    box-shadow: 2px 2px 5px  color-mix(in srgb, var(--primary-color), transparent 80%);
    transition: all 0.3s ease;

}





/* Zorg dat de icoon goed zichtbaar is */
.sticky-back-nav i {
    font-size: 12px;
    pointer-events: none;
}


.sticky-back-nav:hover {
    color: #fff;
    transform: translateX(calc(-50% - 5px));

}
.persona-nav {
    position: -webkit-sticky;
    position: sticky;
    top: -1px; /* Zet op -1px zodat de observer 'ziet' dat hij plakt */
    z-index: 9999 !important;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
}

.nav-flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Standaard afstand */
    padding: 15px 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.persona-nav a.nav-link {
    letter-spacing: 6px !important;
    /* De ultieme 'geen lijn' garantie */
    text-decoration: none !important;

    color: var(--secondary-color) !important;
    transition: all 0.3s ease;
    display: inline-block;
}

/* De staat als de balk 'plakt' */
.persona-nav.is-sticky .nav-flex-container {
    gap: 60px; /* De namen schuiven breed uit elkaar */
    padding: 10px 0; /* Optioneel: maak de balk iets smaller voor meer schermruimte */
}

/* Zorg dat de links zelf ook soepel meebewegen */
.nav-link {
    transition: all 0.3s ease;
}

.persona-nav a.nav-link:hover,
.persona-nav a.nav-link:focus {
    text-decoration: none !important;
    color: var(--primary-color) !important;
}

.persona-nav a.nav-link.active {
    color: var(--primary-color) !important;

    text-decoration: none !important;
    /* Alleen hier mag een lijntje, als je dat wilt */
}

.nav-divider {
    color: rgba(0, 0, 0, 0.1);
    margin: 0 5px;
    user-select: none;
}



/* De verschijning van het hele blok (1x ease-in) */
@keyframes hud-appear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}



@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotate-gradient {
    from { --glow-angle: 0deg; }
    to { --glow-angle: 360deg; }
}

@media screen and (max-width: 767px) {
    .sticky-background {
        width: 100%; /* Vul het hele scherm op mobiel */
        opacity: 0.25; /* Maak de foto iets transparanter zodat de tekst eroverheen leesbaar blijft */
        background-position: center top; /* Houd het hoofd bovenin beeld */
        z-index: -1; /* Zorg dat hij echt achter de tekst blijft */
    }

    /* Zorg dat de container op mobiel de volle breedte pakt */
    .container {
        width: 95vw;
        padding-left: 10px;
        padding-right: 10px;
    }
}