/* //////////////////////////////////////////////////////////////////////////////////////////

Global Stylesheet:
HTML + Body

////////////////////////////////////////////////////////////////////////////////////////// */

html {
  min-height: 100%;
  background-color: #e30613;
}

body {
  margin: 0;
  background-color: #e30613;
  font-family: "Proxima Nova Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
}



/* //////////////////////////////////////////////////////////////////////////////////////////

Global Stylesheet:
Fonts

////////////////////////////////////////////////////////////////////////////////////////// */


/* Fonts */

/* /////////////////// */

/* Proxima Nova - Regular */

@font-face {
  font-family: 'Proxima Nova Regular';
  src: url('../fonts/Proxima-Nova-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+20AC;
}

/* /////////////////// */


/* Proxima Nova - Medium */

@font-face {
  font-family: 'Proxima Nova Medium';
  src: url('../fonts/Proxima-Nova-Medium.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+20AC;
}

/* /////////////////// */

/* Proxima Nova - Semibold */

@font-face {
  font-family: 'Proxima Nova Semibold';
  src: url('../fonts/Proxima-Nova-Semibold.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+20AC;
}

/* /////////////////// */

/* Proxima Nova - Bold */

@font-face {
  font-family: 'Proxima Nova Bold';
  src: url('../fonts/Proxima-Nova-Bold.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+20AC;
}

/* /////////////////// */

/* Proxima Intervlag - Extrabold */

@font-face {
  font-family: 'Proxima Intervlag Extrabold';
  src: url('../fonts/Proxima-Intervlag-Extrabold.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+20AC;
}



/* //////////////////////////////////////////////////////////////////////////////////////////

Global Stylesheet:
Images (Lazy Load Fade-in Effect)

////////////////////////////////////////////////////////////////////////////////////////// */

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

img[loading="lazy"].is-loaded {
  opacity: 1;
}



/* //////////////////////////////////////////////////////////////////////////////////////////

Global Stylesheet:
Page Leave Animation

////////////////////////////////////////////////////////////////////////////////////////// */

/* Primaire (fade) laag */
#page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Moet nu direct 100% zijn */
  background-color: #00000030; /* Semi-transparant zwart */
  z-index: 20000;
  
  opacity: 0; /* Begin volledig onzichtbaar */
  transition: opacity 0.25s ease; /* Animeer alleen de opacity */
  
  /* Zorgt ervoor dat je niet op elementen achter de div kunt klikken, zelfs als hij onzichtbaar is */
  pointer-events: none;
  will-change: opacity;
}

/* Secundaire (zwarte) laag (ongewijzigd) */
#page-transition-curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #e30613;
  transform: translateY(-100%);
  z-index: 20001;
  transition: transform 0.3s ease;
  will-change: transform;
}

/* Aangepaste 'animate-out' class voor de fade-laag */
#page-transition-overlay.animate-out {
  opacity: 1; /* Maak zichtbaar */
  pointer-events: auto; /* Maak de laag klikbaar/actief */
}

/* 'animate-out' class voor de zwarte balk-laag */
#page-transition-curtain.animate-out {
  transform: translateY(0);
}