:root {
  --motion-x: 50%;
  --motion-y: 20%;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; }

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='texture'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23texture)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

main > section:not(:first-child),
body > section:not(:first-of-type) {
  content-visibility: auto;
  contain-intrinsic-size: 760px;
}

section:not(.hero):not(.page-hero):not(.donate-hero) {
  position: relative;
  isolation: isolate;
}

section:not(.hero):not(.page-hero):not(.donate-hero)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(circle at var(--motion-x) var(--motion-y), rgba(212,19,103,.055), transparent 31%),
    radial-gradient(circle at calc(100% - var(--motion-x)) 85%, rgba(201,168,76,.035), transparent 27%);
  transition: opacity .6s ease;
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.992);
  filter: blur(5px);
  transition:
    opacity .8s var(--motion-ease),
    transform .9s var(--motion-ease),
    filter .8s var(--motion-ease);
}

.motion-ready .motion-reveal.motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.motion-ready .motion-card {
  transition: transform .35s var(--motion-ease), box-shadow .35s var(--motion-ease), border-color .35s ease;
}

@media (hover:hover) and (pointer:fine) {
  .motion-ready .motion-card:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 22px 55px rgba(26,20,16,.1);
  }
}

body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #fluid-canvas, #particles-canvas, .cursor-dot, .cursor-ring { display: none !important; }
  .motion-ready .motion-reveal { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 760px) {
  body::after { opacity: .018; }
  #fluid-canvas, #particles-canvas { display: none !important; }
  section:not(.hero):not(.page-hero):not(.donate-hero)::before { opacity: .25; }
}
