body[data-gatekeeper-active] {
  overflow: hidden;
}

.gatekeeper-consumed {
  transform-origin: center;
  animation: gatekeeper-consume-page var(--gatekeeper-duration, 10s)
    steps(12, end) forwards;
  will-change: clip-path, filter, opacity, transform;
}

.gatekeeper-screen {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: #d8ded1;
  outline: none;
  animation: gatekeeper-screen-open var(--gatekeeper-duration, 10s)
    steps(8, end) both;
}

.gatekeeper-screen::before {
  position: absolute;
  z-index: 4;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgb(0 0 0 / 0.34) 2px,
    rgb(0 0 0 / 0.34) 3px
  );
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.gatekeeper-screen::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: radial-gradient(
    circle at center,
    transparent 34%,
    rgb(0 0 0 / 0.72) 118%
  );
  content: "";
  pointer-events: none;
}

.gatekeeper-terminal {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(38rem, calc(100vw - 3rem));
  overflow: hidden;
  border: 3px solid #141922;
  background: #d8d4e8;
  box-shadow:
    inset 2px 2px 0 #f5f2ff,
    inset -2px -2px 0 #776f86,
    0 0 0 1px #090d0b;
  color: #171923;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  transform: translate(-50%, -50%);
  animation: gatekeeper-terminal-failure var(--gatekeeper-duration, 10s)
    steps(8, end) forwards;
}

.gatekeeper-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2rem;
  border-bottom: 2px solid #141922;
  background: #263a66;
  color: #f2f0fb;
  padding-inline: 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gatekeeper-terminal-body {
  display: grid;
  min-height: 17rem;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.72fr);
  align-items: end;
  gap: 2rem;
  padding: clamp(1.5rem, 5vw, 3rem);
}

.gatekeeper-wordmark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.86;
  text-shadow: 2px 2px 0 #aaa2bd;
}

.gatekeeper-fields {
  display: grid;
  gap: 1rem;
  padding-bottom: 0.25rem;
}

.gatekeeper-fields span {
  display: block;
  height: 1.75rem;
  border: 2px inset #8d8799;
  background: #efedf5;
}

.gatekeeper-fields span:last-child {
  width: 58%;
  background: #b9b3c8;
}

.gatekeeper-corruption {
  position: absolute;
  z-index: 2;
  inset: 0;
  contain: strict;
  overflow: hidden;
  background: rgb(9 13 11 / 0.18);
}

.gatekeeper-error {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.gatekeeper-page-copy {
  position: absolute;
  top: calc(var(--gatekeeper-scroll-y) * -1);
  right: 0;
  left: 0;
  min-height: var(--gatekeeper-page-height);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000 0,
    #000 7vh,
    transparent 7vh,
    transparent 14vh
  );
  mask-image: repeating-linear-gradient(
    to bottom,
    #000 0,
    #000 7vh,
    transparent 7vh,
    transparent 14vh
  );
  animation: gatekeeper-scramble 10s steps(16, end) forwards;
  animation-duration: var(--gatekeeper-duration, 10s);
  will-change: filter, opacity, transform;
}

@keyframes gatekeeper-consume-page {
  0% {
    clip-path: inset(0);
    filter: none;
    opacity: 1;
    transform: none;
  }
  18% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 18%,
      0 23%,
      0 41%,
      100% 37%,
      100% 100%,
      0 100%
    );
    filter: blur(1px) contrast(1.4) saturate(1.7);
    transform: translateX(-6px);
  }
  36% {
    clip-path: polygon(
      0 7%,
      100% 3%,
      100% 31%,
      0 27%,
      0 62%,
      100% 69%,
      100% 92%,
      0 96%
    );
    filter: blur(2px) contrast(1.8) hue-rotate(38deg) saturate(2.3);
    transform: translateX(9px) skewX(-0.5deg);
  }
  58% {
    clip-path: polygon(
      0 15%,
      100% 26%,
      100% 38%,
      0 34%,
      0 77%,
      100% 71%,
      100% 82%,
      0 89%
    );
    filter: blur(3px) contrast(2.1) hue-rotate(-52deg) saturate(2.5);
    opacity: 0.82;
    transform: translateX(-4%) scaleY(0.82);
  }
  78% {
    clip-path: inset(13% 0 15% 0);
    filter: blur(5px) contrast(2.4) saturate(3);
    opacity: 0.6;
    transform: translateX(12%) scaleX(0.86);
  }
  100% {
    visibility: hidden;
    clip-path: inset(50%);
    filter: blur(6px) contrast(3) saturate(3);
    opacity: 0;
    transform: scaleX(0.02);
  }
}

@keyframes gatekeeper-scramble {
  0%,
  18% {
    opacity: 0;
    transform: none;
  }
  27% {
    filter: blur(1.5px) contrast(1.45) hue-rotate(18deg) saturate(1.7);
    opacity: 0.86;
    transform: translate3d(-3%, 0, 0) scaleX(1.04);
  }
  44% {
    filter: blur(3px) contrast(2) hue-rotate(42deg) saturate(2.5);
    opacity: 0.9;
    transform: translate3d(8%, 0, 0) scaleX(0.96);
  }
  63% {
    filter: blur(6px) contrast(2.6) hue-rotate(-58deg) saturate(3.4);
    opacity: 0.72;
    transform: translate3d(-18%, 0, 0) scaleX(1.22);
  }
  82% {
    filter: blur(4px) contrast(2.2) hue-rotate(64deg) saturate(3);
    opacity: 0.68;
    transform: translate3d(13%, 0, 0) scaleX(0.9);
  }
  100% {
    filter: blur(5px) contrast(2.3) hue-rotate(-36deg) saturate(3);
    opacity: 0.58;
    transform: translate3d(-11%, 0, 0) scaleX(1.18);
  }
}

@keyframes gatekeeper-screen-open {
  0%,
  10% {
    background-color: transparent;
  }
  24% {
    background-color: rgb(9 13 11 / 0.12);
  }
  42%,
  100% {
    background-color: rgb(9 13 11 / 0.28);
  }
}

@keyframes gatekeeper-terminal-failure {
  0% {
    clip-path: inset(0);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.97);
  }
  8%,
  31% {
    clip-path: inset(0);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  39% {
    clip-path: inset(0 0 54% 0);
    filter: blur(1px) hue-rotate(28deg) saturate(1.5);
    transform: translate(calc(-50% - 13px), -50%) scaleX(1.03);
  }
  47% {
    clip-path: inset(43% 0 16% 0);
    filter: blur(2px) hue-rotate(-38deg) saturate(1.9);
    opacity: 0.78;
    transform: translate(calc(-50% + 19px), -50%) scaleX(0.91);
  }
  58%,
  100% {
    visibility: hidden;
    clip-path: inset(49% 0);
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.05);
  }
}

@media (max-width: 38rem) {
  .gatekeeper-terminal-body {
    min-height: 14rem;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .gatekeeper-fields {
    gap: 0.65rem;
  }

  .gatekeeper-fields span {
    height: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gatekeeper-consumed {
    visibility: hidden;
    animation: none;
    opacity: 0;
  }

  .gatekeeper-screen,
  .gatekeeper-terminal {
    animation: none;
  }

  .gatekeeper-terminal {
    visibility: hidden;
    opacity: 0;
  }
}