.blueprint-intro {
  --scan-x: 50%;
  --scan-y: 50%;
  --drag-x: 0px;
  --drag-y: 0px;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #000;
  touch-action: none;
  cursor: grab;
}

.blueprint-intro.is-dragging { cursor: grabbing; }

.blueprint-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, .08) 63%, rgba(0, 0, 0, .34) 82%, rgba(0, 0, 0, .68) 100%);
  pointer-events: none;
}

.blueprint-intro > * {
  opacity: 1;
  transform: none;
}

html.blueprint-locked,
html.blueprint-locked body {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.blueprint-stage {
  position: absolute;
  inset: -4vh -4vw;
  z-index: 1;
  animation: blueprint-drift 30s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform;
  pointer-events: none;
}

.blueprint-field {
  position: absolute;
  inset: 0;
  background-image: url("./img/blueprint-intro/composite.webp");
  background-position: calc(50% + var(--drag-x)) calc(50% + var(--drag-y));
  background-repeat: repeat;
  background-size: 100vw auto;
}

.blueprint-field-base {
  opacity: .78;
  filter: brightness(.27) contrast(1.08);
}

.blueprint-field-light {
  z-index: 2;
  opacity: 0;
  transition: opacity 180ms ease;
  -webkit-mask-image: radial-gradient(circle 380px at var(--scan-x) var(--scan-y), #000 0 38%, rgba(0, 0, 0, .92) 58%, transparent 88%);
  mask-image: radial-gradient(circle 380px at var(--scan-x) var(--scan-y), #000 0 38%, rgba(0, 0, 0, .92) 58%, transparent 88%);
}

.blueprint-field-light {
  opacity: 1;
  filter: brightness(1.45) contrast(1.16) drop-shadow(0 0 6px rgba(255, 255, 255, .74));
}

.blueprint-intro.is-scanning .blueprint-field-light {
  opacity: 1;
}

.blueprint-intro > .blueprint-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .015em;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(82px, 15vw, 250px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: 0;
  text-shadow: 0 0 14px rgba(255, 255, 255, .22), 0 0 40px rgba(255, 255, 255, .08);
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
}

.blueprint-core-letter {
  display: block;
}

.blueprint-core-eye {
  --eye-x: 0px;
  --eye-y: 0px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  width: .72em;
  height: .78em;
  border-radius: 48%;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, .22), 0 0 40px rgba(255, 255, 255, .08);
}

.blueprint-core-eye::before,
.blueprint-core-eye::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: .52em;
  height: .305em;
  background: #fff;
  transition: transform 170ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.blueprint-core-eye::before {
  border-radius: 50% 50% 12% 12%;
  transform: translate(-50%, -205%);
}

.blueprint-core-eye::after {
  border-radius: 12% 12% 50% 50%;
  transform: translate(-50%, 105%);
}

.blueprint-eye-pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: .31em;
  height: .42em;
  border-radius: 50%;
  background: #000;
  transform: translate(-50%, -50%) translate(var(--eye-x), var(--eye-y));
  transform-origin: center;
  transition: transform 100ms ease-out;
  will-change: transform;
}

.blueprint-eye-blink {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 3;
  width: .28em;
  height: .035em;
  border-bottom: .014em solid #000;
  border-radius: 0 0 50% 50%;
  opacity: 0;
  transform: translate(-50%, -50%) translate(var(--eye-x), var(--eye-y));
  transition: opacity 60ms ease, transform 100ms ease-out;
  pointer-events: none;
}

.blueprint-core-eye.is-closed::before {
  transform: translate(-50%, -96%);
}

.blueprint-core-eye.is-closed::after {
  transform: translate(-50%, -4%);
}

.blueprint-core-eye.is-closed .blueprint-eye-blink {
  opacity: 1;
  transition-delay: 70ms;
}

.blueprint-intro > .blueprint-enter {
  position: absolute;
  left: 50%;
  bottom: max(36px, 5vh);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}

.blueprint-intro > .blueprint-enter::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 19px solid transparent;
  border-right: 19px solid transparent;
  border-top: 31px solid #fff;
}

.blueprint-intro > .blueprint-enter:hover::before,
.blueprint-intro > .blueprint-enter:focus-visible::before {
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, .55));
}

.blueprint-intro > .blueprint-enter:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

@keyframes blueprint-drift {
  0% { transform: translate3d(-1vw, -.7vh, 0) scale(1.01); }
  50% { transform: translate3d(.8vw, .9vh, 0) scale(1.018); }
  100% { transform: translate3d(1.5vw, -.3vh, 0) scale(1.01); }
}

@media (max-width: 760px) {
  .blueprint-intro {
    min-height: calc(100svh - 122px) !important;
  }

  .blueprint-stage {
    animation-duration: 34s;
  }

  .blueprint-field {
    background-size: 185vw auto;
  }

  .blueprint-field-light {
    -webkit-mask-image: radial-gradient(circle 220px at var(--scan-x) var(--scan-y), #000 0 36%, rgba(0, 0, 0, .9) 58%, transparent 88%);
    mask-image: radial-gradient(circle 220px at var(--scan-x) var(--scan-y), #000 0 36%, rgba(0, 0, 0, .9) 58%, transparent 88%);
  }

  .blueprint-intro > .blueprint-core {
    font-size: clamp(76px, 28vw, 122px);
  }

  .blueprint-intro > .blueprint-enter {
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blueprint-stage { animation-duration: 70s; }
}