html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: fut-light;
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
  position: relative; /* parent voor absolute SVG */
}

html::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/bg-glass.svg") top center no-repeat;
  background-size: 100% auto;   /* width 100%, hoogte automatisch */
  opacity: 1;
  pointer-events: none;
  z-index: -1;
	background-color: #EBE3DB;
}

/* Track: vaste achtergrond */
#scroll-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #EBE3DB; /* track kleur */
  z-index: 7998; /* onder de progress bar */
}

/* Progress: bewegende lijn */
#scroll-progress {
  height: 2px;
  width: 0%;
  background-color: #1D5F83; /* jouw blauw */
  transition: width 0.1s ease;
  z-index: 7999; /* boven de track */
}

/* kleine, vaste cirkel */
#cursor-small {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #1D5F83; /* kleur van kleine cirkel */
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

/* standaard grote cirkel */
#cursor-large {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #1D5F83;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  mix-blend-mode: difference;
}

/* hover kleur wordt via border-color bepaald */
#cursor-large.hover {
  border-color: #1D90FF;  /* blauw bij hover */
  opacity: 20%;
}

#cursor-small, #cursor-large {
  mix-blend-mode: difference;
}

/* label */
#cursor-label {
  position: fixed;
  padding: 4px 10px;
  background-color: rgba(29, 95, 131, 0.9);
  color: white;
  font-size: 10px;
  font-family: sans-serif;
  border-radius: 10px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.2s ease;
  z-index: 10001;
  letter-spacing: 2px;
}

.grid {
  display: grid;
  gap: 0px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 40px auto;
  grid-template-columns: repeat(4, 1fr); /* 4 kolommen breed */
}

/* eerste 6 blokken: elk 50% breed (2 kolommen) */
.grid > :nth-child(-n+6) {
  grid-column: span 2;
}

/* aspect ratios */
.block.large {
  aspect-ratio: 16 / 9;
}

.block.small {
  aspect-ratio: 8 / 9;
}

.block {
  position: relative;
  overflow: hidden;
  margin: 2px;
  border-radius: 10px;
  transition: all 0.3s ease; /* kan later gespecificeerd worden */
}

/* link vult het hele blok */
.block a {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 3;
}

/* =========================
   GRADIENT OVERLAY (alleen vanaf tweede block)
========================= */
.block:not(:first-child)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(29, 95, 131, 0.3) 50%,
    rgba(29, 95, 131, 0.9) 100%
  );
  transition: opacity 0.25s ease;
  opacity: 1;
  z-index: 1;
}

.block:not(:first-child):hover::before {
  opacity: 0;
}

/* =========================
   BORDER ANIMATIE (alleen vanaf tweede block)
========================= */
.block:not(:first-child)::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0px solid #1D5F83;
  border-radius: inherit;
  pointer-events: none;
  transition: border-width 0.25s ease;
  z-index: 2;
}

.block:not(:first-child):hover::after {
  border-width: 5px;
}

.preview-video {
  cursor: pointer;
}

/* span is absoluut gepositioneerd binnen .block */
.block span {
  position: absolute;   /* blijft links-onder staan */
  left: 20px;
  bottom: 20px;
  color: white;
  font-size: 20px;
  padding: 5px 20px;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: rgba(29, 95, 131, 0.8);
  z-index: 2;           /* tekst en achtergrond blijven boven de stroke */
}

/* pseudo-element als ronde gradient-stroke rond de span */
.block span::before {
  content: "";
  position: absolute;
  inset: 0;                   /* vul de volledige span */
  border-radius: inherit;     /* neem dezelfde afgeronde hoeken */
  padding: 1px;               /* dikte van de stroke */
  background: linear-gradient(
    135deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.1) 100%
  );
  pointer-events: none;

  z-index: 1;                 /* onder de tekst (.span heeft z-index:2) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.tag {
  display: inline-block;
	font-size: 16px;
  padding: 2px 20px;
  border-radius: 30px;
  position: relative;
  color: #1D5F83;
	margin: 0 5px 10px 5px;
}

/* De gradient border-truc */
.tag::before {
  content: "";
  position: absolute;
  inset: 0; /* vult de hele span */
  border-radius: inherit;
  padding: 1px; /* dikte van de border */
  background: linear-gradient(135deg, rgba(29, 95, 131, 1), rgba(29, 95, 131, 0.1));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none; /* voorkomt dat het klikt */
}


.bg-01, .bg-02, .bg-03, .bg-04, .bg-05, .bg-06, .bg-07, .bg-08, .bg-09, .bg-10    {
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ebe5df;
}

.bg-01 {
  background-image: url('../images/showreel.png');
}

.bg-02 { background: url('../images/animatie.png') center/cover no-repeat; }
.bg-03 { background: url('../images/design.png') center/cover no-repeat; }
.bg-04 { background: url('../images/automation.png') center/cover no-repeat; }
.bg-05 { background: url('../images/lead.png') center/cover no-repeat; }
.bg-06 { background: url('../images/ai.png') center/cover no-repeat; }
.bg-07 { background: url('../images/editing.png') center/cover no-repeat; }
.bg-08 { background: url('../images/sound.png') center/cover no-repeat; }
.bg-09 { background: url('../images/development.png') center/cover no-repeat; }
.bg-10 { background: url('../images/werkplek.png') center/cover no-repeat; }

.block-content {
  width: 100%;
  max-width: 1200px;         /* ✅ maximale breedte van de content */
  margin: 0 auto;            /* ✅ centreert de hele sectie */
  padding: 40px 80px;
  box-sizing: border-box;
  overflow-x: hidden;
}

.content-copy {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  box-sizing: border-box;
	padding: 0;
	margin-bottom: 0px;
}

.content-copy > div {
  width: 50%;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 30px;
  color: #000;
	text-align: justify;
}

.content-tags {
	width: 100%;
	margin: 10px 0 30px 0;
	text-align: center;
}

.content-work {
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}

h1 {
  font-size: 64px;
	font-weight: 100;
  color: #1D5F83;
  display: block;
  margin: 0 0 20px 0;
	padding: 0;
	line-height: 64px;
}

h2 {
  font-size: 32px;
	font-weight: 100;
  color: #1D5F83;
  display: block;
  margin: 20px 0 20px 0;
	padding: 0;
	line-height: 32px;
}

p {
	margin: 0 0 20px 0;
	padding: 0;
}

.image-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 95, 131, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 8999;
}

.image-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* fade-out animatie */
.image-overlay.closing {
  opacity: 0;
  pointer-events: none;
}

/* media-elementen */
.image-overlay img,
.image-overlay video {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  display: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
  border-radius: 10px;
}

/* fade-in effect zodra zichtbaar */
.image-overlay img.show,
.image-overlay video.show {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.close-overlay {
  position: absolute;
	font-family: fut-light;
  top: 20px;
  right: 20px;
  background-color: #EBE3DB;
  border: 0px solid #000;
	font-size: 40px;
  color: #1D5F83;
  cursor: pointer;
  z-index: 9996;
	width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
	line-height: 1;
}

.close-overlay span {
	margin-top: -4px;
}



/* mobiel: alles onder elkaar */
@media (max-width: 768px) {
  .block span {
	  font-size: 14px;
	}
	.block-content {
	  padding: 40px 10px;
	}
  .grid {
    grid-template-columns: 1fr; /* start met 1 kolom */
  }

  /* grote blokken onder elkaar */
  .block.large {
    grid-column: 1 / -1;
  }

  /* kleine blokken in 2 kolommen */
  .block.small {
    grid-column: span 1;
  }

  .block {
    margin: 2px 10px;
  }

  /* pas grid aan voor 2 kolommen bij kleine blokken */
  .block.small:nth-of-type(7),
  .block.small:nth-of-type(8),
  .block.small:nth-of-type(9),
  .block.small:nth-of-type(10) {
    grid-column: span 1;
  }

  .block.small:nth-of-type(7),
  .block.small:nth-of-type(9) {
    margin: 2px 2px 2px 10px;
  }

  .block.small:nth-of-type(8),
  .block.small:nth-of-type(10) {
    margin: 2px 10px 2px 2px;
  }

  /* maak 2 kolommen specifiek voor small blocks */
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

	.content-copy {
    flex-direction: column;
		gap: 0px;
    padding: 0px 10px;
  }

  .content-copy > div {
    width: 100%;
  }
		h1 {
		  font-size: 48px;
			line-height: 48px;
      padding-left: 10px;
		}

		h2 {
		  font-size: 24px;
			line-height: 24px;
		}
		body, html, p, .tag {
			font-size: 18px;
		}

}

@media (hover: none) {
  #cursor-small,
  #cursor-large {
    opacity: 0;
  }
}