<!-- wp:html -->
<div class="pc-header" data-component="header-overlay-01"><button class="burger">Меню</button><div class="overlay"><a class="menu-item">Главная</a><a class="menu-item">О нас</a></div></div>
<!-- /wp:html -->
.pc-header .overlay{position:fixed;inset:0;clip-path:circle(0 at top right);background:#0f172a}.pc-header .menu-item{display:block;color:#fff;font-size:32px}
WPP.register('header-overlay-01', (root, gsap) => {
const tl = gsap.timeline({ paused: true })
.to(root.querySelector('.overlay'), { clipPath: 'circle(150% at top right)', duration: 0.6, ease: 'power3.inOut' })
.from(root.querySelectorAll('.menu-item'), { y: 40, opacity: 0, stagger: 0.06 }, '-=0.2');
root.querySelector('.burger').addEventListener('click', () => tl.reversed(!tl.reversed()));
});