/* Оконный Гид — HeroCircles: анимированные концентрические круги.
   CSS-адаптация компонента BackgroundCircles (framer-motion/Tailwind)
   под наш стек: вращение + пульсация колец, движущаяся сетка и тёплое
   радиальное свечение в фирменном терракоте. Уважает reduced-motion
   (анимации глушит глобальное правило в landing.css). */

function HeroCircles({ style }) {
  const rings = [
    { col: 'rgba(211,121,63,.60)', spin: 24, rev: false, pulse: 5 },
    { col: 'rgba(194,98,46,.50)', spin: 32, rev: true, pulse: 6 },
    { col: 'rgba(255,255,255,.22)', spin: 42, rev: false, pulse: 7 },
  ];
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none', ...style }}>
      <div className="okg-hero-grid-anim" />
      <div style={{ position: 'absolute', top: '50%', left: '60%', transform: 'translate(-50%,-50%)', width: 'min(96vw,720px)', height: 'min(96vw,720px)', background: 'radial-gradient(ellipse at center, rgba(194,98,46,.30), transparent 65%)', filter: 'blur(70px)' }} />
      <div style={{ position: 'absolute', top: '50%', left: '60%', transform: 'translate(-50%,-50%)', width: 'min(86vw,520px)', height: 'min(86vw,520px)' }}>
        {rings.map((r, i) => (
          <div key={i} style={{ position: 'absolute', inset: i * 22, animation: `${r.rev ? 'okgSpinRev' : 'okgSpin'} ${r.spin}s linear infinite` }}>
            <div style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: `2px solid ${r.col}`, background: 'linear-gradient(135deg, rgba(194,98,46,.22), transparent 60%)', mixBlendMode: 'screen', animation: `okgPulse ${r.pulse}s ease-in-out infinite` }} />
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { HeroCircles });