/* ========== BASISLAYOUT ========== */
body {
  margin: 0;
  font-family: 'IM fell English', serif;
  background-color: white;
  overflow: scroll;
}

#canvas {
  width: 2000px;
  height: 1500px;
  position: relative;
}

.site-footer::before {
  content: "© 2025 Judith Caeyers   -   judithcaeyers@gmail.com   -   BE 0734 742 237";
  display: block;
  text-align: center;
  font-family: 'IM fell English', serif;
  font-size: 0.9rem;
  padding: 40px 20px;
  color: black;
}



/* ========== PROJECT-POSITIE ========== */
.project {
  position: absolute;
}

.p1 { top: 100px; left: 100px; }
.p2 { top: 100px; left: 450px; }
.p3 { top: 300px; left: 1000px; }
.p4 { top: 500px; left: 250px; }
.p5 { top: 400px; left: 700px; }
.p6 { top: 300px; left: 50px; }
.p9 { top: 100px; left: 900px; }

/* ========== BEELDEN + HOVER ========== */
.image-wrapper {
  position: relative;
  width: 300px;
  height: 300px;
}

.img-base,
.img-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.img-hover {
  opacity: 0;
  pointer-events: none;
}

.project:hover .img-hover {
  opacity: 1;
}

.project:hover .img-base {
  opacity: 0;
}

/* ========== ANIMATIES ========== */
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-500px); }
}

@keyframes flip {
  0%   { transform: translate(0, 0) rotate(0deg); }
  10%  { transform: translate(50px, -20px) rotate(50deg); }
  20%  { transform: translate(1000px, 20px) rotate(-50deg); }
  30%  { transform: translate(150px, -10px) rotate(40deg); }
  40%  { transform: translate(200px, 30px) rotate(-40deg); }
  50%  { transform: translate(250px, 0) rotate(0deg); }
  60%  { transform: translate(200px, -30px) rotate(30deg); }
  70%  { transform: translate(150px, 20px) rotate(-30deg); }
  80%  { transform: translate(1000px, -10px) rotate(2deg); }
  90%  { transform: translate(50px, 10px) rotate(-20deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes twist {
  0% {
    transform: translate(0, 0) rotateZ(0deg);
  }
  25% {
    transform: translate(300px, -150px) rotateZ(30deg);
  }
  50% {
    transform: translate(-150px, 100px) rotateZ(-30deg);
  }
  75% {
    transform: translate(120px, 80px) rotateZ(20deg);
  }
  100% {
    transform: translate(0, 0) rotateZ(0deg);
  }
}



@keyframes jump {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(100px, -500px); }
  60% { transform: translate(-500px, -150px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(2); }
}

@keyframes zigzag {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(400px, -20px); }
  40%  { transform: translate(-30px, 300px); }
  60%  { transform: translate(500px, 10px); }
  80%  { transform: translate(-20px, -40px); }
  100% { transform: translate(0, 0); }
}

@keyframes wander {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-80px, 300px); }
  50%  { transform: translate(400px, -20px); }
  75%  { transform: translate(-50px, 800px); }
  100% { transform: translate(0, 0); }
}

@keyframes dart {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(100px, 0); }
  20%  { transform: translate(-100px, 0); }
  30%  { transform: translate(80px, 0); }
  40%  { transform: translate(-80px, 0); }
  50%  { transform: translate(50px, 0); }
  60%  { transform: translate(-50px, 0); }
  70%  { transform: translate(250px, 0); }
  80%  { transform: translate(-25px, 100); }
  100% { transform: translate(0, 0); }
}

@keyframes swoop {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(100px, -200px); }
  50%  { transform: translate(-150px, 150px); }
  75%  { transform: translate(200px, -100px); }
  100% { transform: translate(0, 0); }
}

.zigzag {
  animation: zigzag 20s ease-in-out infinite;
}

.wander {
  animation: wander 10s ease-in-out infinite;
}

.dart {
  animation: dart 5s ease-in-out infinite;
}

.swoop {
  animation: swoop 12s ease-in-out infinite;
}


.bob {
  animation: bob 10s ease-in-out infinite;
}

.flip {
  animation: flip 12s ease-in-out infinite;
  transform-style: preserve-3d;
}

.twist {
  animation: twist 8s ease-in-out infinite;
}

.jump {
  animation: jump 11s ease-in-out infinite;
}

.pulse {
  animation: pulse 4s ease-in-out infinite;
}

/* ========== NAVIGATIEBALK ========== */
/* Navigatiecontainer gecentreerd bovenaan */
#top-nav {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  gap: 30px;
}

/* Gedeelde knopstijl + ook vorige volgende knop */
.nav-button {
  color: black;
  text-decoration: underline;
  background: none;
  border: none;
  font-size: 1rem;
  font-family: 'IM fell English', serif;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Hover/kleur-effecten */
.nav-button:hover {
  color: #f98cfe;
}

.nav-button:active {
  color: #f98cfe;
}


/* ========== RESPONSIVE ========== */
@media screen and (max-width: 768px) {
  #canvas {
    width: 1600px;
    height: 1200px;
  }

  .p1 { top: 100px; left: 100px; }
  .p2 { top: 200px; left: 300px; }
  .p3 { top: 300px; left: 150px; }
  .p4 { top: 400px; left: 400px; }
  .p5 { top: 500px; left: 250px; }
}

/* ========== PROJECTPAGINA OPMAAK ========== */
.project-detail h1 {
  margin-bottom: 10px; /* kleiner maken voor minder witruimte */
}

.project-detail img {
  margin-top: 20px;
  width: 100%;
  max-width: 650px;
  display: block;
}

.project-tekst p:first-child {
  margin-top: 0; /* voorkom dat eerste p een bovenmarge creëert */
}

.image-gallery {
  max-width: 650px;
  margin: 20px auto;
  padding: 0 20px;
}

.image-gallery img {
  width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
  display: block;
}


.image-gallery video {
  width: 100%;
  display: block;
  margin: 0 0 20px 0; /* géén top-margin */
  border: none;
}



.project-tekst {
  max-width: 650px;
  margin: 40px auto 50px;
  padding: 0 20px;
  font-size: 1.1rem;
  line-height: 1.6;
}

.twee-kolommen {
  column-count: 2;
  column-gap: 40px;
  text-align: justify;
}

.project-tekst h1 {
  column-span: all;
  display: block; /* <- dit helpt met compatibiliteit */
  margin-bottom: 0px;
}

.project-detail {
  max-width: 650px;
  margin: 150px auto 20px;
  padding: 0 20px;
}



/* ========== ACHTERGRONDKLEUREN OP PROJECTPAGINA'S ========== */
body.pittig-roze {
  background-color: #f98cfe;
}
body.zomer-blauw {
  background-color: #5abcec;
}


/* Container centreren */
/* ========== VORIGE / VOLGENDE KNOP ========== */
.project-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 60px auto 100px;
  padding: 0 20px;
}

/* ========== NAVIGATIEBALK ========== */
#top-nav {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  gap: 30px;
}

/* ========== NAVIGATIEBALK AANPASSEN OP GSM ========== */


/* Animaties uitschakelen als 'stil' actief is */
body.stil .image-wrapper {
  animation: none !important;
}

#motion-toggle-wrapper {
  position: fixed; /* vastzetten op het scherm */
  bottom: 50px; /* afstand vanaf de onderkant */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000; /* zorg dat hij altijd zichtbaar is */
}


@media screen and (max-width: 768px) {
  #top-nav {
    left: 0;
    right: 0;
    transform: none;
    justify-content: center;
    gap: 20px;
    width: 100%;
    padding: 0 10px;
  }
}

/* ========== PROJECTPAGINAS AANPASSEN OP GSM ========== */

/* Optioneel: voor mobiel terug naar 1 kolom */
@media screen and (max-width: 768px) {
  .twee-kolommen {
    column-count: 1;
  }
}

/* ========== VORMGEVING LINKS ========== */


.project-tekst a {
  color: #f886fc;
  text-decoration: none;
}

.project-tekst a:hover {
  text-decoration: underline;
}

/* HIGHLIGHT IN TEKST */

.highlight-roze {
  background-color: rgba(248, 134, 252, 0.4); /* pittig roze met transparantie */
  padding: 0.1em 0.2em;
  border-radius: 0.2em; /* optioneel voor een zachtere look */
}