/**
 * 404 page — Architect-style body pattern band + illustration sizing.
 * Complements utilities already in style.css (py-80, fs-18, mt-32, btn-primary).
 */

@keyframes scrollBg {
  from { background-position: 0 0; }
  to { background-position: -100% 0; }
}

.bg-pattern,
.bg-pattern-3 {
  position: relative;
}

.bg-pattern::after,
.bg-pattern-3::after {
  content: "";
  background-image: url(../icons/pattern-bg.png);
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  height: 32px;
  background-size: auto;
  background-repeat: repeat-x;
  background-position: bottom;
  animation: scrollBg 20s linear infinite;
  pointer-events: none;
}

@media (max-width: 767px) {
  .bg-pattern::after,
  .bg-pattern-3::after {
    animation: scrollBg 1s linear infinite;
  }
}

.page-404 .image img {
  max-width: 458px;
  width: 100%;
  height: auto;
}