:root {
  --site-texture-dot: rgba(26, 26, 30, 0.075);
  --site-texture-dot-soft: rgba(71, 74, 81, 0.045);
  --site-texture-dot-light: rgba(254, 254, 254, 0.86);
  --site-texture-dot-accent: rgba(239, 124, 0, 0.095);
  --site-texture-glow: rgba(254, 254, 254, 0.86);
  --site-texture-shadow: rgba(26, 26, 30, 0.05);
}

:is(
  .timeline,
  .projects,
  .brands,
  .differentials,
  .partners,
  .method,
  .processes,
  .products,
  .gallery,
  .founders,
  .location,
  .blog
) {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

:is(
  .timeline,
  .projects,
  .brands,
  .differentials,
  .partners,
  .method,
  .processes,
  .products,
  .gallery,
  .founders,
  .location,
  .blog
)::before,
:is(
  .timeline,
  .projects,
  .brands,
  .differentials,
  .partners,
  .method,
  .processes,
  .products,
  .gallery,
  .founders,
  .location,
  .blog
)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

:is(
  .timeline,
  .projects,
  .brands,
  .differentials,
  .partners,
  .method,
  .processes,
  .products,
  .gallery,
  .founders,
  .location,
  .blog
)::before {
  z-index: -2;
  opacity: 0.76;
  background:
    radial-gradient(circle at 1px 1px, var(--site-texture-dot) 1.05px, transparent 1.35px),
    radial-gradient(circle at 1px 1px, var(--site-texture-dot-soft) 1.2px, transparent 1.6px),
    radial-gradient(circle at 1px 1px, var(--site-texture-dot-accent) 1px, transparent 1.35px),
    radial-gradient(circle at 50% 50%, var(--site-texture-dot-light) 1px, transparent 1.35px);
  background-size: 18px 18px, 42px 42px, 74px 74px, 10px 10px;
  background-position: 0 0, 13px 17px, 31px 23px, 5px 7px;
}

:is(
  .timeline,
  .projects,
  .brands,
  .differentials,
  .partners,
  .method,
  .processes,
  .products,
  .gallery,
  .founders,
  .location,
  .blog
)::after {
  z-index: -1;
  opacity: 0.9;
  background:
    radial-gradient(circle at 18% 16%, var(--site-texture-glow), transparent 20%),
    radial-gradient(circle at 72% 68%, rgba(255, 255, 255, 0.48), transparent 24%),
    radial-gradient(circle at 82% 74%, var(--site-texture-shadow), transparent 28%);
  animation: site-texture-drift 18s ease-in-out infinite alternate;
}

.founders::before,
.founders::after {
  opacity: 0.5;
}

.products::before,
.gallery::before,
.location::before {
  opacity: 0.82;
}

@keyframes site-texture-drift {
  from {
    transform: translate3d(-0.7%, -0.5%, 0);
    opacity: 0.5;
  }
  to {
    transform: translate3d(0.8%, 0.65%, 0);
    opacity: 0.82;
  }
}

@media (max-width: 768px) {
  :is(
    .timeline,
    .projects,
    .brands,
    .differentials,
    .partners,
    .method,
    .processes,
    .products,
    .gallery,
    .founders,
    .location,
    .blog
  )::before {
    opacity: 0.68;
    background-size: 16px 16px, 36px 36px, 64px 64px, 9px 9px;
    background-position: 0 0, 9px 13px, 25px 19px, 4px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .timeline,
    .projects,
    .brands,
    .differentials,
    .partners,
    .method,
    .processes,
    .products,
    .gallery,
    .founders,
    .location,
    .blog
  )::after {
    animation: none;
    transform: none;
  }
}