/* Ring Particles Effect for Hero Section */
#hero-section {
  position: relative;
  min-height: 70vh;
  overflow: visible;
  /* Add gradient background to hero section itself */
  background: linear-gradient(to bottom, rgb(248 250 252), rgb(255 255 255));
  /* Ensure particles are behind content but above background */
  isolation: isolate;
}

/* Fallback gradient animation for browsers without Paint API support */
#hero-section::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(59, 130, 246, 0.15) 0%,
    rgba(147, 51, 234, 0.1) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#hero-section > * {
  position: relative;
  z-index: 1;
}

@supports (background: paint(something)) {
  #hero-section {
    --ring-radius: 150;
    --ring-thickness: 800;
    --particle-count: 120;
    --particle-rows: 30;
    --particle-size: 3;
    --particle-color: #3b82f6;
    --particle-min-alpha: 0.2;
    --particle-max-alpha: 0.8;
    --seed: 200;
    --ring-x: 50;
    --ring-y: 50;
    --ring-interactive: 0;
    --animation-tick: 0;
  }

  /* Override fallback with Paint API */
  #hero-section::before {
    background: none;
    background-image: paint(ring-particles);
    inset: 0;
    animation: none;
  }

  @property --animation-tick {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }

  @property --ring-radius {
    syntax: '<number> | auto';
    inherits: false;
    initial-value: auto;
  }

  @property --ring-x {
    syntax: '<number>';
    inherits: false;
    initial-value: 50;
  }

  @property --ring-y {
    syntax: '<number>';
    inherits: false;
    initial-value: 50;
  }

  @property --ring-interactive {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }

  @keyframes ripple {
    0% {
      --animation-tick: 0;
    }
    100% {
      --animation-tick: 1;
    }
  }

  @keyframes ring {
    0% {
      --ring-radius: 150;
    }
    100% {
      --ring-radius: 250;
    }
  }

  #hero-section {
    animation: ripple 6s linear infinite, ring 6s ease-in-out infinite alternate;
  }

  #hero-section {
    transition: --ring-x 3s ease, --ring-y 3s ease;
  }
}