/* =============== Layout Wrappers =============== */
#smooth-wrapper {
  position: relative;
  overflow-x: clip; /* clip prevents scrollbar without creating a scroll container */
  overflow-y: visible;
  width: 100%;
}
#smooth-content {
  will-change: transform;
}


/* =============== Ambient / Background =============== */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.ambient-orb {
  position: absolute;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  mix-blend-mode: screen;
}
.orb-1 {
  top: -15%;
  left: -10%;
  background: radial-gradient(
    circle,
    rgba(201, 168, 107, 0.45),
    transparent 70%
  );
  animation: float1 24s ease-in-out infinite;
}
.orb-2 {
  bottom: -20%;
  right: -15%;
  background: radial-gradient(circle, rgba(45, 90, 75, 0.9), transparent 70%);
  animation: float2 30s ease-in-out infinite;
}
@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(6vw, 8vh) scale(1.1);
  }
}
@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-8vw, -6vh) scale(1.15);
  }
}
.ambient-noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  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.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  padding: 0 var(--pad-x);
  pointer-events: none;
}
.bg-grid span {
  border-left: 1px solid var(--line);
}
.bg-grid span:last-child {
  border-right: 1px solid var(--line);
}