/* Image.css
   3 lagen:
   1) body achtergrond: MetsaForest.webp
   2) vaste overlay:     MetsaLogo.webp
   3) bewegende overlay: Sense.webp
*/

:root{
     --login-offset: 3vh;
     --a: 3.2;
     --b: -60px;
}

/* Basis reset */
html, body {
  height: 100%;
  margin: 0;
}

.metsa-logo {
     padding-left: 2%;

}

.login {
     position: fixed;
     margin-top: calc((var(--a) * var(--a)) * var(--login-offset) + var(--b));
     margin-left: 7%;
     z-index: 30;
}
/* ============ 1) Achtergrond (vast) ============ */
body {
  /* Afbeelding */
  background-image: url("MetsaForest.webp");

  /* Gedrag */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;

  /* Voorkom scrollbars door animatie */
  overflow: hidden;
}

/* Container voor lagen (zet deze om je pagina-inhoud heen) */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Handig: alles erboven moet geen muiskliks blokkeren */
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ============ 2) Logo laag (vast) ============ */
.logo-layer {
  /* Afbeelding */
  background-image: url("MetsaLogo.webp");
  background-repeat: no-repeat;

  /* Positie */
  /* Voorbeelden: left top | center center | right bottom | 20% 30% */
  background-position: 60% 55%;

  /* Grootte */
  /* Voorbeelden: contain | cover | 300px auto | 25% auto */
  background-size: 30% auto;

  /* Transparantie */
  animation: logoPulse 6s ease-in-out infinite alternate;

  /* Extra effecten (optioneel) */
  /* filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25)); */
}

/* ============ 3) Sense laag (bewegend - breed canvas) ============ */
.sense-layer {
  top: 0vh;
  left: -50vw;
  width: 200vw;
  height: 98vh;

  background-image: url("Sense.webp");
  background-repeat: no-repeat;

  /* ipv center center */
  background-position: 30% top;

  background-size: 100% 100%;

  opacity: 1;
  pointer-events: none;

  animation: driftWide 30s ease-in-out infinite alternate;
}

.sense-logo {
    position: fixed;
    bottom: 2%;
    right: 2%;
    width: 10%;
    max-width: 160px;
}



/* Beweging: pas amplitude aan (kleiner = subtieler) */
@keyframes driftWide {
  from { transform: translateX(-5%); }
  to   { transform: translateX( 5%); }
}

@keyframes logoPulse {
  from { opacity: 0.10; }
  to   { opacity: 0.20; }
}

/* Optioneel: ook heel subtiel op/af (zet aan door animation te vervangen) */
/*
.sense-layer {
  animation: driftXY 110s ease-in-out infinite alternate;
}
@keyframes driftXY {
  from { transform: translate(-1.2%, -0.4%); }
  to   { transform: translate( 1.2%,  0.4%); }
}
*/

/* Respecteer OS instelling "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .sense-layer { animation: none; }
}