:root {
    --font-size-sm: 0.875rem;   /* klein, bijschriften */

    --font-size-base: 1rem;     /* normale lopende tekst */
    --font-family-base: "bely", serif;
    --font-style-base: normal;
    --font-weight-base: 400;
    /* --font-weight-base-bold: 700; */

    --font-size-lg: 1rem;    /*  h2 */
    --font-family-lg: "courier-prime", monospace;
    --font-style-lg: normal;
    --font-weight-lg: 400;

    --font-size-xxl: 4rem;     /* h1 */
    --font-family-xxl: "podium-soft-variable", sans-serif;  
    --font-width-xxl: "wdth" 64;
    --font-weight-xxl: 100;

    --background-color-light-mode: #F9FCE1;
    --text-color: #0D0125;
    --text-color-hover: #543FA4;
  

}



/* ALGEMENE STYLING */

body, header, nav {
 background-color: var(--background-color-light-mode);
}

h1 {

    font-size: clamp(1.75rem, 8vw, var(--font-size-xxl));
    font-family: var(--font-family-xxl);
    font-variation-settings: var(--font-width-xxl);
    font-weight: var(--font-weight-xxl);
    color: var(--text-color);
}

h2 {
    font-size: clamp(1rem, 8vw, var(--font-size-lg));
    font-family: var(--font-family-lg);
    font-weight: var(--font-weight-lg);
    font-style: var(--font-style-lg);
    text-transform: uppercase;
    max-width: 40rem;
    color: var(--text-color);
}

h1, h2, main > p {
    margin: 0;
}


nav {

    position:fixed;
    /* left:0; */
    right:0;
    top:0;
    bottom:0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
    padding: 30px;
    width: min(280px, 80vw);
    z-index: 10;
    translate:100% 0%;
    transition:translate .3s;
    }

 nav a {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    text-decoration: none;
    color: var(--text-color);
    }

nav a:hover {
    color: var(--text-color-hover);
    /* font-weight: var(--font-weight-base-bold); */
    font-style: var(--font-style-base);
    text-decoration: underline;

}
   


nav > button {
    align-self: flex-end;
}

nav.toonMenu {

  translate:0% 0%;
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top:0;
    padding: 20px 30px;

}




header > button:hover,
header > button:active,
nav > button:hover,
nav > button:active {
    color: var(--text-color-hover);
}

header button,
nav > button {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--text-color);
    background-color: var(--background-color-light-mode);
    border: none;
}





.hamburger-icoon {
    stroke: currentColor;
    stroke-width: 30;
    stroke-linecap: round;
    fill: none;

}

.hamburger-svg {
    width: 24px;
    height: 24px;
}

header > a {
    display: flex;
    align-items: center;
    gap: 0.5em;
}





main {
  display: flex;
  flex-direction: column;
  min-width: 20rem;
  max-width: 40rem;
  margin: 0 auto;
  padding: 10px 30px;
  gap: 1em; /* bewuste, consistente ruimte tussen alle directe kinderen */
  
}

main > p {
    font-size: clamp(1rem, 8vw, var(--font-size-base));
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    max-width: 30em; /* terug naar em, specifiek hier */




}

p > a {
    color: var(--text-color);
}

p > a:visited {
 color: var(--text-color);

}

p > a:hover {
 color: var(--text-color-hover);

}



footer > ul {
    display: flex;
    list-style-type: none;
    align-items: center;
    gap: 2em;
    margin: 0 auto;
    max-width: 40rem;
    padding: 30px;

}

footer a, p {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-base);
    font-style: var(--font-style-base);
    color: var(--text-color);


}


footer a:visited {
 color: var(--text-color);

}

footer a:hover {
 color: var(--text-color-hover);

}


/* Animatie van SVG's */
/* De buitenste doos: bepaalt de grootte en is het "ankerpunt" 
   voor de 4 afbeeldingen die er straks bovenop komen te liggen */

.oog-animatie {
    position: relative;
    display: inline-block;
    width: 150px;
    aspect-ratio: 3086.929 / 2182.677; /* verhouding uit de viewBox van mijn SVG's, zodat de hoogte automatisch klopt */
}

.oog-animatie img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0; /* standaard onzichtbaar, ook frame 1 */
}

/* frame 1 moet wel zichtbaar zijn in eerste instantie*/
.oog-animatie img:nth-child(1) {
    opacity: 1;
}
/* Alle frames delen dezelfde totale duur en houden hun eindstand vast */
.oog-animatie:hover img {
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* Elk frame heeft zijn eigen naam, gekoppeld aan zijn eigen @keyframes hieronder */
.oog-animatie:hover img:nth-child(1) { animation-name: frame1; }
.oog-animatie:hover img:nth-child(2) { animation-name: frame2; }
.oog-animatie:hover img:nth-child(3) { animation-name: frame3; }
.oog-animatie:hover img:nth-child(4) { animation-name: frame4; }

/* Frame 1: zichtbaar van 0% tot 24%, daarna weg (kwart van 0.8s = 0-0.2s) */
@keyframes frame1 {
    0%, 24%   { opacity: 1; }
    25%, 100% { opacity: 0; }
}

/* Frame 2: zichtbaar van 25% tot 49% (0.2-0.4s) */
@keyframes frame2 {
    0%, 24%   { opacity: 0; }
    25%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Frame 3: zichtbaar van 50% tot 74% (0.4-0.6s) */
@keyframes frame3 {
    0%, 49%   { opacity: 0; }
    50%, 74%  { opacity: 1; }
    75%, 100% { opacity: 0; }
}

/* Frame 4: verschijnt bij 75% (0.6s) en blijft daarna staan */
@keyframes frame4 {
    0%, 74%    { opacity: 0; }
    75%, 100%  { opacity: 1; }
}





@media (min-width:38em) {
  header > button {
    display:none;
  }
  
  nav {

    position:static;
    translate:unset;
    padding:0;
    width: auto; 
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;
    
  }
  
  nav button {

    display:none;
  }
}

  
 @media (hover: none) {
    .oog-animatie img:nth-child(1) { animation: frame1-loop 3s linear infinite; }
    .oog-animatie img:nth-child(2) { animation: frame2-loop 3s linear infinite; }
    .oog-animatie img:nth-child(3) { animation: frame3-loop 3s linear infinite; }
    .oog-animatie img:nth-child(4) { animation: frame4-loop 3s linear infinite; }
}

@keyframes frame1-loop {
    0%, 4%   { opacity: 1; }
    5%, 100% { opacity: 0; }
}
@keyframes frame2-loop {
    0%, 4%   { opacity: 0; }
    5%, 9%   { opacity: 1; }
    10%, 100% { opacity: 0; }
}
@keyframes frame3-loop {
    0%, 9%    { opacity: 0; }
    10%, 14%  { opacity: 1; }
    15%, 100% { opacity: 0; }
}
@keyframes frame4-loop {
    0%, 14%   { opacity: 0; }
    15%, 90%  { opacity: 1; }  /* blijft lang open staan */
    95%, 100% { opacity: 0; }  /* valt weer dicht vlak voor de cyclus herbegint */
}