/* Low-contrast ambient light for the existing page sections. */
.atmosphere-section {
  position: relative;
  isolation: isolate;
}
.atmosphere-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .62;
  background:
    radial-gradient(ellipse 50% 72% at 12% 34%, rgba(205, 43, 102, .22), transparent 72%),
    radial-gradient(ellipse 42% 65% at 88% 72%, rgba(245, 67, 134, .13), transparent 70%),
    linear-gradient(132deg, transparent 0 47%, rgba(255, 100, 164, .025) 49%, rgba(255, 100, 164, .085) 50%, transparent 52% 100%);
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0) scale(1.02);
  animation: cardmorphSectionGlow 26s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.atmosphere-section.is-atmosphere-visible::before {
  animation-play-state: running;
}
#collection { --ambient-phase: -5s; }
#physical { --ambient-phase: -10s; }
#features { --ambient-phase: -15s; }
#how { --ambient-phase: -3s; }
#pricing { --ambient-phase: -12s; }
#faq { --ambient-phase: -7s; }
#collection::before,
#physical::before,
#features::before,
#how::before,
#pricing::before,
#faq::before { animation-delay: var(--ambient-phase, 0s); }
@keyframes cardmorphSectionGlow {
  from { transform: translate3d(-8px, 3px, 0) scale(1.02); }
  to { transform: translate3d(9px, -7px, 0) scale(1.045); }
}
@media (max-width: 760px) {
  .atmosphere-section::before {
    opacity: .42;
    background-size: 120% 100%, 110% 100%, 100% 100%;
    animation-duration: 32s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere-section::before {
    animation: none !important;
    transform: none;
    opacity: .42;
  }
}
@media (prefers-contrast: more) {
  .atmosphere-section::before { opacity: .22; }
}