/* Pixel surround, optical iris: this layer deliberately excludes the film. */
.hero-vision,
.grid-edition .hero-vision {
  --pixel-paper: #c7c5bd;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--pixel-paper);
  background-image:
    linear-gradient(90deg, rgba(43,45,40,.07) 1px, transparent 1px),
    linear-gradient(rgba(43,45,40,.07) 1px, transparent 1px),
    conic-gradient(from 90deg, rgba(48,50,44,.035) 25%, transparent 0 50%, rgba(48,50,44,.035) 0 75%, transparent 0);
  background-size: 32px 32px, 32px 32px, 8px 8px;
  box-shadow: inset 0 0 0 8px rgba(72,73,66,.055);
}
.hero-vision::before {
  content: "";
  position: absolute;
  inset: 18px auto auto 18px;
  width: 6px;
  height: 6px;
  background: #44473e;
  box-shadow: 6px 0 #44473e, 12px 0 #44473e, 0 6px #44473e, 0 12px #44473e,
    24px 0 #94968a, 30px 0 #94968a, 24px 6px #94968a, 0 24px #94968a;
  pointer-events: none;
}
.hero-vision::after { display: none; }
.hero-eye-stage { background: transparent; }
.hero-eye-stage::before { display: none; }
.hero-eye-stage canvas.eye-render-canvas {
  z-index: 1;
  image-rendering: auto;
  pointer-events: none;
}
.hero-eye-stage .eye-pixel-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.hero-eye-stage:not(.rendered) .eye-pixel-rim { visibility: hidden; }
.hero-eye-stage .hero-eye-fallback {
  left: 17%;
  right: 17%;
  top: 28%;
  height: 43%;
  transform: none;
  border: 0;
  border-radius: 0;
  background: #ddddd6;
  clip-path: polygon(0 44%,8% 44%,8% 30%,18% 30%,18% 18%,30% 18%,30% 8%,
    42% 8%,42% 0,58% 0,58% 8%,70% 8%,70% 18%,82% 18%,82% 30%,92% 30%,
    92% 44%,100% 44%,100% 56%,92% 56%,92% 70%,82% 70%,82% 82%,70% 82%,
    70% 92%,58% 92%,58% 100%,42% 100%,42% 92%,30% 92%,30% 82%,18% 82%,
    18% 70%,8% 70%,8% 56%,0 56%);
}
.hero-eye-stage .hero-eye-fallback img {
  position: absolute;
  width: auto;
  max-width: none;
  height: 135%;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--eye-look-x, 0px)), calc(-50% + var(--eye-look-y, 0px)));
  image-rendering: auto;
  border-radius: 50%;
}
.hero-vision .hero-vision-caption {
  position: relative;
  color: #4a4d43;
  border-top-color: #a5a79b;
  background: transparent;
  letter-spacing: 1.6px;
}
@media (max-width: 720px) {
  .grid-edition .hero-vision { padding: 14px 18px 0; }
  .hero-vision::before { inset: 12px auto auto 12px; }
  .hero-vision .hero-vision-caption { font-size: 8px; letter-spacing: 1px; }
}