/* Slow, fabric-inspired folds sit behind the content and never intercept input. */
.hero,
.supplier,
.story,
.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.hero::before,
.supplier::before,
.story::before,
.contact::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background: url("assets/fabric-lines.svg") center / cover no-repeat;
  opacity: .24;
  transform-origin: 70% 50%;
  animation: fabric-drift 3.6667s ease-in-out infinite alternate;
}

.hero::after,
.supplier::after,
.story::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 65%, rgba(152, 169, 144, .16), transparent 48%),
    radial-gradient(ellipse at 78% 25%, rgba(196, 168, 133, .17), transparent 45%);
  animation: fabric-light 3s ease-in-out infinite alternate;
}

.supplier::before,
.story::before {
  animation-delay: -1.5s;
  opacity: .17;
}

.contact::before {
  opacity: .28;
  animation-delay: -2.5s;
}

@keyframes fabric-drift {
  from { transform: translate3d(-2%, 1%, 0) rotate(-4deg) scale(1.02); }
  to { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.08); }
}

@keyframes fabric-light {
  from { transform: translate3d(-3%, 0, 0); opacity: .65; }
  to { transform: translate3d(4%, -3%, 0); opacity: 1; }
}

@media (max-width: 700px) {
  .hero::before,
  .supplier::before,
  .story::before { opacity: .18; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after,
  .supplier::before, .supplier::after,
  .story::before, .story::after,
  .contact::before { animation: none; }
}