Вижу проблему. Когда попап закрывается через close (который ставит activeItem = null), AnimatePresence начинает exit-анимацию. Но activeItem уже null, поэтому activeSol тоже null, и рендер попапа прерывается мгновенно -- AnimatePresence exit не успевает. Более важно: после клика на backdrop close() вызывается, но activeItem может "застрять" если AnimatePresence не сбрасывает корректно. Также useLayoutEffect зависит от activeItem, но при повторном клике activeItem сначала null, потом новый -- useLayoutEffect может не срабатывать если React batches state.

Основная причина: popupStyle остаётся top: -9999 если useLayoutEffect не сработал (batched update). И повторный клик по той же иконке не срабатывает, потому что activeItem.id совпадает -- React не видит изменения.

Исправлю:

Исправлены три проблемы: (1) Повторный клик теперь работает -- попап сначала полностью закрывается (setPopupOpen(false)), затем через requestAnimationFrame открывается заново с новыми данными, что гарантирует сброс AnimatePresence и корректный re-mount. (2) Позиционирование попапа через useEffect с прямым DOM-измерением (el.offsetWidth/Height) и строгим Math.max(pad, Math.min(...)) clamp в пределах viewport -- попап рендерится с visibility: hidden, замеряется, корректируется и показывается. (3) Вспышка имеет уникальный key через инкрементальный счётчик, поэтому каждый клик всегда создаёт новую анимацию.

Looking at the screenshots: (1) The rocket between "Dark" and "Berries" is invisible/tiny in both nav and hero logo, (2) The popup form goes off-screen bottom, cutting off the submit button. Let me fix all issues.

Now I have full picture. Problems:

1. Rocket in logo invisible: CSS mask-image with PNG on dark bg shows nothing because the rocket PNG is dark-on-light. The mask treats dark pixels as opaque -- so the background-color shows where the PNG is dark, but the rocket body is dark (#2d3436) on light (#eef1f5) bg. The mask will show the rocket shape correctly, BUT the bg color behind it is also dark (bg-background), so it blends in. Need to invert the mask or just use the image directly with a CSS filter to colorize it.
2. Popup goes off-screen: The useEffect positioning runs but doesn't account for popup height properly -- popupRef.current.offsetHeight may return 0 on first render. Need requestAnimationFrame after mount.
3. Need 20+ themes: Currently 15, need to add more.

Let me fix all three:

Now fix the logo -- the PNG rocket is dark on light background. Using mask-image with it as mask means: light pixels = transparent, dark pixels = visible. But the light bg of the PNG makes the whole thing mostly visible, and the dark rocket body is the wrong shape. I need to use the image directly with CSS filters to colorize:

Now fix the popup positioning -- the core issue is that offsetHeight returns 0 when the popup first mounts with visibility: hidden. I need to use requestAnimationFrame to wait for layout:

Now let me verify the rocket image renders correctly. The PNG has a dark rocket on light (#eef1f5) background. Using filter: brightness(0) invert(1) makes everything white -- the rocket AND the background. That won't work. I need to remove the background first. Let me check the actual image:

The image has an almost-white background (#eef1f5), not transparent. Using brightness(0) invert(1) will make EVERYTHING white -- both rocket and background. I need to remove the background first using a script, or use CSS mask approach differently. The best approach: use the image as a CSS mask-image on a colored div. The mask uses luminance by default -- white/light areas become transparent, dark areas become opaque. So the dark rocket parts will be visible, light background will be transparent.

Now I see the problem clearly. brightness(0) invert(1) makes ALL pixels white (including background), so on dark bg the entire square is white. I need to use mask-image with mask-mode: luminance -- light pixels = transparent, dark pixels = opaque. The background color behind the mask will show through as the rocket shape:

Three fixes applied: (1) Ракета в логотипе теперь использует mask-image с mask-mode: luminance -- тёмные пиксели PNG (силуэт ракеты) становятся непрозрачными, а светлый фон PNG -- прозрачным. Под маской -- div с background-color: hsl(var(--primary)), поэтому ракета окрашена в текущий цвет темы и всегда видна. При hover поднимается на 14px с масштабом 1.15 и неоновым свечением. (2) Попап позиционируется через двойной requestAnimationFrame, чтобы гарантировать реальные offsetWidth/offsetHeight, с жёстким clamp Math.max(pad, Math.min(top, vh - ph - pad)) -- попап никогда не уйдёт за экран. (3) 22 цветовые темы -- добавлены ice, rose, emerald, amber, violet, spring, sky.