/* root.css                                          */
/* Bijgewerkt 30 mei 2026                            */

/*  DESIGN TOKENS */

:root {
  --zwart:        hsl(210, 21%, 6%);
  --donkergrijs:  hsl(214, 16%, 15%);
  --grijs:        hsl(206, 5%,  50%);
  --lichtgrijs:   hsl(206, 5%,  90%);
  --rood:         hsl(349, 100%,45%);
  --wit:          hsl(106, 19%, 95%);
  --donkergroen:  hsl(106, 19%, 33%);
  --lightgroen:   hsl(106, 19%, 52%);
  --antraciet:      #333333;
  --blauw:          #007bff;
  --donkerblauw:    #0056b3;
  --fotogrijs:      #e3e3e3;

  --text-shadow:
  1px 1px 0px rgba(0, 0, 0, 0.3),
  2px 2px 0px rgba(0, 0, 0, 0.25),
  3px 3px 0px rgba(0, 0, 0, 0.2),
  4px 4px 0px rgba(0, 0, 0, 0.15),
  5px 5px 0px rgba(0, 0, 0, 0.1),
  6px 6px 0px rgba(0, 0, 0, 0.05);

  --shadow-medium:
    0 4px 6px -1px rgba(0, 0, 0, 0.4),
    0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-photo:
    0 0 4vmin rgba(0, 0, 0, 0.75),
    0 0 0.5vmin rgba(0, 0, 0, 0.5);
  --shadow-lijst:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.8);
   /* Viewport fallback */
  --vh: 100vh;
}


/*  GLOBAL RESET */

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  height: 100%; /* Zorgt voor een stabiele basishoogte */
  -ms-overflow-style: none;  /* IE en Edge */
  scrollbar-width: none;
  padding-bottom: env(safe-area-inset-bottom);
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: #141419;
  min-height: 100%;
  overflow-x: hidden; /* Voorkomt dat animaties naar rechts de pagina breder maken */
  position: relative;
  -ms-overflow-style: none;  /* IE en Edge */
  scrollbar-width: none;  /* Firefox */
  padding-bottom: env(safe-area-inset-bottom);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari, Opera */
}

/*   ANIMATED GRADIENT BACKGROUND */

.gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    315deg,
    #141419  0%,
    #323237 25%,
    #646469 50%,
    #323237 75%,
    #141419 100%
  );
  background-size: 200% 200%;
  animation: moveBG 30s ease-in-out infinite;
}

@keyframes moveBG {
  0%,
  100% { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
}


/*   WAVE OVERLAY */

.wave-container {
  position: fixed; /* Voeg dit toe */
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.wave {
  background: rgb(200 200 210 / 15%);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 12em;
  border-radius: 1000% 1000% 0 0;
  opacity: 0.8;
  transform: translate3d(0, 0, 0);
  animation: wave 10s -3s linear infinite;

}

.wave:nth-of-type(2) {
  bottom: -1.25em;
  opacity: 0.8;
  animation: wave 18s linear reverse infinite;
}

.wave:nth-of-type(3) {
  bottom: -2.5em;
  opacity: 0.9;
  animation: wave 20s -1s linear reverse infinite;
}

@keyframes wave {
    2% { transform: translateX(0%);}
    25% { transform: translateX(-25%); }
    50% { transform: translateX(-50%); }
    75% { transform: translateX(-25%); }
    100% { transform: translateX(0%); }
}
/* ── COOKIE BANNER ──── */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--antraciet);
    color: white;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.cookie-banner p {
    margin: 0;
    font-size: 0.9rem;
}

#cookie-accept-btn,
#cookie-info-btn {
    background-color: var(--blauw);
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

#cookie-accept-btn:hover {
    background-color: var(--donkerblauw);
}