/* ░░ O MNIE — sekcja bio (neon-retro): pulsujący avatar + punkty po kolei ░░
   Na tokenach z colors_and_type.css (--magenta, --cyan, --fg-*, --font-mono, --ease-out). */

.omnie{position:relative;overflow:hidden}
.omnie__inner{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,64px);align-items:center}

/* ── avatar (kółko + warstwy neonowe) ── */
.omnie__photo{position:relative;flex:none;justify-self:center;margin:0;
  width:clamp(200px,24vw,272px);aspect-ratio:1}
.omnie__img{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block;
  box-shadow:0 0 0 2px rgba(255,255,255,.06),0 18px 60px rgba(7,6,13,.6)}

/* pulsujące halo za zdjęciem (oddech) */
.omnie__halo{position:absolute;inset:-16%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(207,77,146,.55),rgba(63,176,204,.28) 62%,transparent 76%);
  filter:blur(18px);opacity:.55;animation:omnieHalo 4.2s ease-in-out infinite}
@keyframes omnieHalo{0%,100%{opacity:.4;transform:scale(.96)}50%{opacity:.82;transform:scale(1.05)}}

/* obracający się neonowy pierścień (conic), maska na samą obwódkę */
.omnie__ring{position:absolute;inset:-7%;z-index:1;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,var(--cyan,#3FB0CC),var(--magenta,#CF4D92),var(--cyan,#3FB0CC),var(--magenta,#CF4D92),var(--cyan,#3FB0CC));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  filter:drop-shadow(0 0 8px rgba(63,176,204,.5));opacity:.9;
  animation:omnieSpin 9s linear infinite}
@keyframes omnieSpin{to{transform:rotate(360deg)}}

/* miękki „ping" co kilka sekund — zaprasza wzrok */
.omnie__ping{position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;
  border:2px solid rgba(63,176,204,.6);opacity:0;animation:omniePing 4.6s ease-out infinite}
@keyframes omniePing{0%{transform:scale(1);opacity:.6}60%{transform:scale(1.18);opacity:0}100%{opacity:0}}

/* CRT-scanline clipnięty do koła (retro, jak hero) — STATYCZNY: animacja background-position
   (niekompozytowa) robiła ciągły repaint z blendem, a ruch 1px linii i tak był ledwo widoczny */
.omnie__scan{position:absolute;inset:0;z-index:3;border-radius:50%;pointer-events:none;
  mix-blend-mode:overlay;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
  -webkit-mask:radial-gradient(farthest-side,#000 98%,transparent);
          mask:radial-gradient(farthest-side,#000 98%,transparent)}

/* ── body / punkty ── */
.omnie__h{margin:.45rem 0 0}
.omnie__list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.95rem}
.omnie__pt{display:flex;align-items:flex-start;gap:.9rem}
/* ── scroll-reveal: cała sekcja wjeżdża PO KOLEI gdy wchodzi w viewport ──
   .is-in dokłada app.js (dedykowany IntersectionObserver na #omnie — niezależny
   od globalnego failsafe 900ms, więc efekt odpala się dopiero przy doscrollowaniu). */
html.js .omnie__photo,
html.js .omnie__eyebrow,
html.js .omnie__h,
html.js .omnie__pt,
html.js .omnie__cta{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease-out,cubic-bezier(.22,.61,.36,1)),
             transform .7s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
html.js .omnie__photo{transform:translateY(0) scale(.92)}
html.js .omnie.is-in .omnie__photo{opacity:1;transform:none;transition-delay:0ms}
html.js .omnie.is-in .omnie__eyebrow{opacity:1;transform:none;transition-delay:.12s}
html.js .omnie.is-in .omnie__h{opacity:1;transform:none;transition-delay:.2s}
html.js .omnie.is-in .omnie__pt{opacity:1;transform:none;transition-delay:calc(.32s + var(--i,0) * .1s)}
html.js .omnie.is-in .omnie__cta{opacity:1;transform:none;transition-delay:1.04s}
.omnie__n{flex:none;font-family:var(--font-mono,ui-monospace,monospace);font-size:.82rem;
  font-weight:600;line-height:1.7;letter-spacing:.04em;color:var(--cyan,#3FB0CC);
  padding-right:.9rem;position:relative}
.omnie__n::after{content:"";position:absolute;right:0;top:.18em;bottom:.18em;width:1px;
  background:linear-gradient(to bottom,var(--magenta,#CF4D92),transparent)}
.omnie__pt p{margin:0;font-size:clamp(1rem,1.3vw,1.12rem);line-height:1.5}
.omnie__pt strong{color:var(--fg-1,#f3f1fb);font-weight:600}
.omnie__pt em{font-style:normal;color:var(--cyan,#3FB0CC)}

/* ── CTA: „Pogadaj z Małpką ↓" (otwiera dock bota) ── */
.omnie__cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.7rem;
  padding:.62rem 1.15rem;border-radius:999px;cursor:pointer;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.82rem;letter-spacing:.03em;
  color:var(--fg-1,#f3f1fb);background:rgba(9,7,16,.6);border:1px solid rgba(63,176,204,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease}
.omnie__cta:hover{transform:translateY(-2px);border-color:rgba(207,77,146,.6);
  box-shadow:0 10px 30px rgba(207,77,146,.28)}
.omnie__cta-arrow{color:var(--cyan,#3FB0CC);font-weight:700;line-height:1;
  animation:omnieArrow 1.7s ease-in-out infinite}
@keyframes omnieArrow{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(4px);opacity:1}}

/* ── stopka: dane firmy (NIP/REGON) dyskretnie po prawej ── */
.footer__meta{display:flex;flex-direction:column;gap:5px;align-items:flex-end;text-align:right}
.footer__legal{color:var(--fg-3,#8E88A6);letter-spacing:.02em}   /* --fg-4+opacity dawało ~1.8:1 — nieczytelne */

@media (max-width:760px){
  .omnie__inner{grid-template-columns:1fr;gap:26px;justify-items:center;text-align:center}
  .omnie__photo{width:clamp(158px,46vw,208px)}
  .omnie__list{text-align:left;margin-top:1.2rem}
  .footer__meta{align-items:center;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .omnie__halo,.omnie__ring,.omnie__ping,.omnie__scan,.omnie__cta-arrow{animation:none}
  html.js .omnie__photo,html.js .omnie__eyebrow,html.js .omnie__h,html.js .omnie__pt,html.js .omnie__cta{opacity:1;transform:none;transition:none}
}