KAGAMI · Огледалото

(а) Многократният промпт (EN, неутрален към марката)

Build a single-file homepage concept called "The Mirror": a live WebGL scene of the
brand's own 3D mark floating above a real-time reflective floor, with one huge
typographic statement in HTML over it. The idea: light puts chaos in order.
On load, a cloud of scattered particles is pulled by the light into the outline of
the mark; the mirror reflects the mark, the particles and the light. Touching the
mirror sends ripples through the reflection and scatters the particles, and the
light orders them again.

TRENDS: "Live 3D/WebGL hero" + "Huge headline, little text".

LAYOUT (desktop · phone stacks: mark on top, text below)
+---------------------------------------------------------------+
| [logo]                     Services  Private AI  Contact [CTA]|
|                                              /\  (3D mark)    |
| LABEL · MEANING OF THE NAME · CITY          /  \  + particles |
| HUGE SERIF HEADLINE  ACCENT.               /____\             |
| ================= gradient mirror edge ======================  |
| ~~ mirrored, rippling copy of the headline (CSS, aria-hidden) ~~|
| Supporting sentence, second half of the slogan.  \  /  reflection
| [Primary CTA ->]  email                [hint] [Pause motion]   |
+---------------------------------------------------------------+
| 01  motto as giant type, 2nd sentence as outline (stroke) text |
| 02  services as ruled rows: CODE | name + one line | price/time|
| 03  one product: giant word + two short sentences + quote rule |
| 04  one sourced number, giant, with a CSS reflection under it  |
| 05  contact: giant mailto link + CTA                           |
| footer: legal name · city · email · concept disclaimer         |
+---------------------------------------------------------------+

MUST
- All headings, nav, CTA and copy are semantic HTML above the canvas; the page is
  complete and readable with no JS / no WebGL (poster: the real logo image with a CSS
  reflection; it fades out after the first WebGL frame).
- Real planar reflection: render the scene from a mirrored camera into a half-res
  render target, sample it with projective texture coordinates in a custom shader;
  add ring ripples (uniform array of {x, z, start, strength}), Fresnel, a soft horizon
  line and a radial fade into the page background (no visible plane edge).
- Environment lighting built in code (emissive panels -> PMREM), no HDR files.
- Particles: one Points draw call, per-particle chaos position + target on the mark's
  outline, staggered morph by a seed, additive blending, colours from the brand gradient.
- Pointer moves a point light and leaves small ripples; click/tap = big ripple +
  scatter, then the light re-orders.
- A visible "Pause motion" toggle (aria-pressed). prefers-reduced-motion renders one
  static, fully ordered frame and stops all CSS animation.
- Pause the loop off-screen (IntersectionObserver) and in hidden tabs; cap DPR
  (1.5 phone / 1.75 desktop); load three.js after the content (dynamic import).
- Headline: fluid clamp() size, readable at 320 px, no negative tracking on Cyrillic
  beyond -0.02em, one h1, one primary button style, lang set, self-hosted fonts with
  the right locale forms.
- Only real, sourced content from the brand book; drop any section without it.

FORBIDDEN
- Text inside WebGL; navigation that depends on the scene; blocking loader;
  autoplay sound; endless loop without a control.
- Centred hero with three cards; purple/blue "AI" gradients; glass for its own sake;
  stock robots; invented numbers, clients, testimonials.
- External CDNs, Google Fonts, foreign photos.

TECH
- three.js 0.170 ES module from a shared local path; everything else inline.
- WCAG 2.2 AA; no horizontal scroll at 360 px; page < 1 MB without fonts.

(б) Брифът за KAGAMI

• Идея: „кагами“ значи огледало. Знакът на марката (рубинен триъгълник и хромирана рамка) виси над живо огледало. Светлината подрежда хаоса в контура на звездата; докосването на огледалото пуска вълни и разбърква, светлината подрежда наново.
• Заглавие (h1): „Не продаваме AI. Внедряваме го там, където създава добавена стойност.“ Първото изречение е огромно, с отражение под ръба на огледалото; второто е подзаглавие.
• Секции: 01 мото „Човекът проверява. Човекът решава.“ · 02 услугите B1 / REMAKE / B2 с цени и минути, Частен AI и Academy OS „по запитване“ · 03 Частен AI: на нашата машина GX10 във Варна, не в чужд облак; „Питаш документите си. Отговорът идва с цитат.“ · 04 „3 000+ обучени“ · 05 office@kagami.bg + „Запази среща“ (cal.com).
• Цветове (tokens.json): фон #08122B, втори фон #0D1B3E, текст #FFFFFF, второстепенен #B8CADE, акцент #0ABFB0, втори акцент #0B7EA8 (само декоративно: 4.1:1 върху фона), CTA #D85A30 с тъмен текст (4.8:1). Лентата е тюркоаз → синьо → злато (#E8A020): ръбът на огледалото, хоризонтът, цветът на частиците, долната лента. Червеното живее само в знака.
• Шрифтове: марката е Playfair, Manrope, JetBrains Mono и Montserrat. Playfair, JetBrains Mono и Montserrat са забранени по заданието (нямат българските форми), затова:
• заглавията са в Piazzolla 300/500 (сериф вместо Playfair; Piazzolla няма курсив, затова акцентната дума е с цвят на лентата, не в курсив);
• етикетите и кодовете на услугите са в Geologica (вместо JetBrains Mono; кодовете с наклон slnt -12, ехо на наклонения надпис);
• текстът е в Manrope (както в марката).
• Тема: само тъмна (марката е само тъмна).