/* Scroll trigger elements */
#bufferOne, #bufferTwo {
  width: 5px;
  aspect-ratio: 1 / 1;
  position: relative;
  flex-shrink: 0;
}

#headerSpine {
  width: 5px;
  height: 120rem;
  position: relative;
  display: border-box;
  flex-shrink: 0;
}

#bufferHeader {
  width: 5px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

/* Splash Screen */
#hkSplash {
  top: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  align-items: center;
  background-color: var(--header-bg);
  background-image: var(--splash-bg-image);
  background-position: var(--splash-bg-position);
  background-size: var(--splash-bg-size);
  background-repeat: no-repeat;
  mask-image: url(./../images/svgs/masks/headerMask.svg);
  mask-size: 100% 100%;
  mask-position: 0% 0%;
  mask-repeat: no-repeat;
  z-index: 11;
  flex-shrink: 0;
  transition: mask-position 1s linear;
  pointer-events: none;
}
#hkSplash * { 
  width: clamp(250px, 90vw, 75rem);
  height: 100vh;
}
#hkSplash path#H1F { fill: var(--header-fill-H1F) !important; }
#hkSplash path#H1B { fill: var(--header-fill-H1B) !important; }
#hkSplash path#A1F { fill: var(--header-fill-A1F) !important; }
#hkSplash path#A1B { fill: var(--header-fill-A1B) !important; }
#hkSplash path#S1F { fill: var(--header-fill-S1F) !important; }
#hkSplash path#S1B { fill: var(--header-fill-S1B) !important; }
#hkSplash path#H2F { fill: var(--header-fill-H2F) !important; }
#hkSplash path#H2B { fill: var(--header-fill-H2B) !important; }
#hkSplash path#K1F { fill: var(--header-fill-K1F) !important; }
#hkSplash path#K1B { fill: var(--header-fill-K1B) !important; }
#hkSplash path#E1F { fill: var(--header-fill-E1F) !important; }
#hkSplash path#E1B { fill: var(--header-fill-E1B) !important; }
#hkSplash path#E2F { fill: var(--header-fill-E2F) !important; }
#hkSplash path#E2B { fill: var(--header-fill-E2B) !important; }
#hkSplash path#P1F { fill: var(--header-fill-P1F) !important; }
#hkSplash path#P1B { fill: var(--header-fill-P1B) !important; }
#hkSplash path#E3F { fill: var(--header-fill-E3F) !important; }
#hkSplash path#E3B { fill: var(--header-fill-E3B) !important; }
#hkSplash path#R1F { fill: var(--header-fill-R1F) !important; }
#hkSplash path#R1B { fill: var(--header-fill-R1B) !important; }

/* Header Animation */
#hkHeader {
  top: 0;
  position: fixed;
  width:100vw;
  height: 100vh;
  background: var(--header-bg);
  justify-content: center;
  align-content: center;
  align-items: center;
  z-index: 5;
  opacity: 1;
  transition: opacity 1s linear;
  flex-shrink: 0;
  pointer-events: none;
}

#hkCryptog {
  --hkCryptog-dimensions: clamp(225px, 45vw, 600px);
  width: var(--hkCryptog-dimensions);
  height: var(--hkCryptog-dimensions);
}
#hkCryptog svg,
#hkCryptog svg * {
  width: 100%;
  height: auto;
  display: block;
}
#hkCryptog .stream > * {
  fill: var(--svg-stream-fill);
}

#hkCryptog path#lock { fill: var(--svg-lock-fill) }
#hkCryptog path#key { fill: var(--svg-key-fill) }
#hkCryptog path#book { fill: var(--svg-book-fill) }
#hkCryptog path#haze { fill: var(--svg-haze-fill) }

#hkCryptog path#key {
  animation: lockRotate 40s linear infinite;
  transform-origin: center;
  fill: var(--svg-key-fill);
}

#textHdr {
  width: clamp(300px, 65%, 750px);
  margin: 2rem 0 0 0;
  text-align: center;
  color: var(--heading-color);
  font-size: clamp(20px, 10vw, 38px);
  font-family: 'Metamorphous';
}