/* Subtle 8mm overlay — dust + hairlines only, low opacity, quiet motion */

.container {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  --bg-image: url("assets/background1.png");
  --bg-position: center;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.82)),
    var(--bg-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--bg-position);
  /* -webkit-transition: all ease-in-out 5s;
  transition: all ease-in-out 5s; */
  filter: sepia(0.5);
  box-shadow: 0 0 150px black inset;
}

.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* Fine grain — visible texture, soft shuffle */
.overlay::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  animation: grain 0.28s steps(5) infinite;
}

/* Hairlines + dust — more frequent flashes */
.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(
      90deg,
      transparent calc(42% - 0.5px),
      rgba(255, 255, 255, 0.7) 42%,
      transparent calc(42% + 0.5px)
    ),
    linear-gradient(
      90deg,
      transparent calc(71% - 0.5px),
      rgba(0, 0, 0, 0.5) 71%,
      transparent calc(71% + 0.5px)
    ),
    linear-gradient(
      90deg,
      transparent calc(18% - 0.4px),
      rgba(255, 255, 255, 0.4) 18%,
      transparent calc(18% + 0.4px)
    ),
    radial-gradient(circle at 22% 30%, rgba(0, 0, 0, 0.85) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 78% 55%, rgba(0, 0, 0, 0.75) 0 1.2px, transparent 2px),
    radial-gradient(ellipse 7px 1.4px at 55% 18%, rgba(0, 0, 0, 0.6) 0 50%, transparent 70%),
    radial-gradient(circle at 40% 82%, rgba(0, 0, 0, 0.8) 0 1.1px, transparent 1.8px),
    radial-gradient(circle at 12% 60%, rgba(0, 0, 0, 0.7) 0 1px, transparent 1.6px),
    radial-gradient(ellipse 9px 1.2px at 88% 40%, rgba(0, 0, 0, 0.55) 0 40%, transparent 70%),
    radial-gradient(circle at 63% 12%, rgba(0, 0, 0, 0.65) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 91% 75%, rgba(0, 0, 0, 0.7) 0 1px, transparent 1.6px);
  background-repeat: no-repeat;
  animation: artifacts 1.7s steps(1) infinite;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1.5%, 1%);
  }
  50% {
    transform: translate(1%, -1.5%);
  }
  75% {
    transform: translate(-0.5%, 0.5%);
  }
}

/* Brief flashes of lines/dust — a few times per cycle */
@keyframes artifacts {
  0%,
  6% {
    opacity: 0;
    transform: translateX(0);
  }
  7% {
    opacity: 0.8;
    transform: translateX(-10%);
  }
  11% {
    opacity: 0;
  }
  24% {
    opacity: 0;
  }
  25% {
    opacity: 0.55;
    transform: translateX(18%);
  }
  29% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0.4;
    transform: translateX(-5%);
  }
  46% {
    opacity: 0;
  }
  58% {
    opacity: 0;
  }
  59% {
    opacity: 0.85;
    transform: translateX(28%);
  }
  64% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  81% {
    opacity: 0.6;
    transform: translateX(-22%);
  }
  85%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overlay::before,
  .overlay::after {
    animation: none;
  }

  .overlay::before {
    opacity: 0.08;
  }

  .overlay::after {
    opacity: 0;
  }
}