/* BeeScreen — animacja startu (web / WebView / Capacitor). 2,1 s. */
:root {
  --bee-honey: #f0b429;
  --bee-honey-deep: #e8a317;
  --bee-honey-shadow: #c98a12;
  --bee-graphite: #1d1f20;
  --bee-screen: #16181a;
  --bee-wing: #f7d9a0;
  --bee-paper: #f2f2f3;
}

.bee-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  background: var(--bee-screen);
  font-family: "Barlow Condensed", Barlow, system-ui, sans-serif;
}
.bee-splash[data-theme="light"] { background: var(--bee-paper); }
.bee-splash[data-done="true"] { animation: beeSplashOut 320ms ease-out both; }

.bee-splash__wordmark { font-size: 40px; line-height: .9; text-transform: uppercase; letter-spacing: .02em; color: #f2f2f3; animation: beeFadeUp 460ms cubic-bezier(.2,.8,.3,1) 1300ms both; }
.bee-splash__wordmark b { font-weight: 700; color: var(--bee-honey); }
.bee-splash[data-theme="light"] .bee-splash__wordmark { color: var(--bee-graphite); }
.bee-splash[data-theme="light"] .bee-splash__wordmark b { color: var(--bee-honey-shadow); }
.bee-splash__tagline { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #7d8286; animation: beeFadeUp 460ms ease-out 1520ms both; }

/* elementy znaku — nadaj te klasy ścieżkom w beescreen-mark.svg */
.bee-frame      { stroke-dasharray: 256; animation: beeDraw 620ms cubic-bezier(.6,0,.3,1) 120ms both; }
.bee-screenfill { animation: beeFadeIn 320ms ease-out 120ms both; }
.bee-bar        { transform-box: fill-box; transform-origin: center; }
.bee-bar--1     { animation: beeBarIn 300ms cubic-bezier(.2,.8,.3,1) 480ms both; }
.bee-bar--2     { animation: beeBarIn 300ms cubic-bezier(.2,.8,.3,1) 590ms both; }
.bee-bar--3     { animation: beeBarIn 300ms cubic-bezier(.2,.8,.3,1) 700ms both; }
.bee-scanline   { animation: beeScanline 900ms ease-in 620ms both; }
.bee-head       { transform-box: fill-box; transform-origin: center; animation: beeHeadDrop 560ms cubic-bezier(.3,1.5,.6,1) 660ms both; }
.bee-antennae   { animation: beeAntennae 380ms ease-out 820ms both; }
.bee-wing       { transform-box: fill-box; }
.bee-wing--l    { transform-origin: 88% 82%; animation: beeWingL 620ms cubic-bezier(.34,1.4,.5,1) 900ms both; }
.bee-wing--r    { transform-origin: 12% 82%; animation: beeWingR 620ms cubic-bezier(.34,1.4,.5,1) 900ms both; }
.bee-stand      { animation: beeFadeIn 260ms ease-out 800ms both; }

@keyframes beeDraw { from { stroke-dashoffset: 256; } to { stroke-dashoffset: 0; } }
@keyframes beeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes beeFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes beeBarIn { from { opacity: 0; transform: scaleX(.05); } to { opacity: 1; transform: scaleX(1); } }
@keyframes beeScanline { 0% { opacity: 0; transform: translateY(-6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(46px); } }
@keyframes beeHeadDrop {
  0% { opacity: 0; transform: translateY(-16px) scale(.7); }
  62% { opacity: 1; transform: translateY(2px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes beeAntennae { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes beeWingL {
  0% { opacity: 0; transform: scale(.2) rotate(14deg); }
  55% { opacity: 1; transform: scale(1.04) rotate(-5deg); }
  70% { transform: scale(1) rotate(3deg); }
  82% { transform: scale(1) rotate(-3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes beeWingR {
  0% { opacity: 0; transform: scale(.2) rotate(-14deg); }
  55% { opacity: 1; transform: scale(1.04) rotate(5deg); }
  70% { transform: scale(1) rotate(-3deg); }
  82% { transform: scale(1) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes beeSplashOut { to { opacity: 0; transform: scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  .bee-splash * { animation: beeFadeIn 200ms ease-out both !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Poniżej: warstwa tego wdrożenia. Powyżej — plik z pakietu marki, nietknięty
   (logo/splash/web/beescreen-splash.css).

   Pakiet kończy się wygaszeniem warstwy. Tutaj zamiast wygaszać, znak PRZELATUJE
   w lewy górny róg, dokładnie na miejsce logotypu w belce panelu, i dopiero
   wtedy pojawia się interfejs z oknem logowania.
   ───────────────────────────────────────────────────────────────────────── */

/* Tło splash-u bierzemy z aplikacji, nie z pakietu. Pakiet ma tam #16181A —
   u nas to kolor karty, nie strony; różnica byłaby widoczna jako skok tła
   w momencie odsłonięcia panelu. */
.bee-splash { background: #0B0E12; gap: 22px; }

/* Lockup ma te same proporcje co logotyp w belce (znak 34x37, odstęp 12,
   napis 26px), tylko 3,2 raza większy. Dzięki temu przelot do rogu jest
   czystym `translate + scale`, bez przebudowy układu w locie. */
.bee-splash__lockup {
  display: flex;
  align-items: center;
  gap: 38px;
  transform-origin: top left;
}
.bee-splash__mark { display: block; width: 109px; height: 118px; }
.bee-splash__wordmark { font-size: 83px; }

.bee-splash__lockup--leci {
  transition: transform 620ms cubic-bezier(.6, 0, .25, 1);
}

/* Tło wygasza się osobno od lockupu — on ma lecieć w róg, a nie zniknąć.
   Regułę taglinu zostawia pakiet; sam napis nie jest już wstawiany. */
.bee-splash--ladowanie {
  background: transparent;
  transition: background 420ms ease-out;
  /* Warstwa jeszcze przez chwilę wisi nad panelem, żeby lecący znak nie zniknął
     przed wywołaniem prawdziwego logotypu — ale nie może już łapać kliknięć. */
  pointer-events: none;
}

/* Interfejs czeka pod spodem, wyłącznie przezroczysty: MUSI być rozłożony,
   bo z jego belki odczytujemy docelowe położenie znaku. `display: none`
   albo `visibility: hidden` dałyby zerowe wymiary i przelot w lewy górny
   róg okna zamiast na logotyp. */
body.bee-splash-trwa app-root { opacity: 0; }
body.bee-splash-koniec app-root { animation: beeWejscie 420ms ease-out both; }

@keyframes beeWejscie {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Płynność: lecący lockup dostaje własną warstwę kompozytora. Bez tego
   przeglądarka przelicza go na wątku głównym, a ten jest w tym momencie zajęty
   parsowaniem bundla Angulara — przelot potrafił wtedy skakać. */
.bee-splash__lockup { will-change: transform; }

/* ── Redukcja ruchu ──────────────────────────────────────────────────────
   Pakiet zamienia tu CAŁY montaż na jedno `beeFadeIn 200ms` dla wszystkich
   elementów naraz i bez opóźnień — znak nie tyle się animuje, co wyskakuje.
   „Reduce motion" znaczy jednak „mniej RUCHU", a nie „bez animacji".

   Zostaje więc ta sama narracja i te same opóźnienia — rama, rzędy matrycy,
   głowa, skrzydła, logotyp — tylko wygaszone są przesunięcia, obroty, skale
   i odbicia. Linia skanująca znika w całości, bo sama jest ruchem i bez niego
   nie znaczy nic. Przelot w róg zostaje: to jedno gładkie przesunięcie, bez
   sprężynowania, czyli nie ten rodzaj ruchu, przed którym chroni ta opcja. */
@media (prefers-reduced-motion: reduce) {
  .bee-splash * { animation: none !important; }

  .bee-screenfill { animation: beeFadeIn 380ms ease-out 100ms both !important; }
  .bee-frame      { stroke-dashoffset: 0 !important;
                    animation: beeFadeIn 460ms ease-out 140ms both !important; }
  .bee-bar--1     { animation: beeFadeIn 300ms ease-out 520ms both !important; }
  .bee-bar--2     { animation: beeFadeIn 300ms ease-out 640ms both !important; }
  .bee-bar--3     { animation: beeFadeIn 300ms ease-out 760ms both !important; }
  .bee-scanline   { opacity: 0 !important; }
  .bee-stand      { animation: beeFadeIn 320ms ease-out 860ms both !important; }
  .bee-head       { animation: beeFadeIn 420ms ease-out 900ms both !important; }
  .bee-antennae   { animation: beeFadeIn 360ms ease-out 1060ms both !important; }
  .bee-wing--l    { animation: beeFadeIn 460ms ease-out 1140ms both !important; }
  .bee-wing--r    { animation: beeFadeIn 460ms ease-out 1220ms both !important; }

  .bee-splash__wordmark { animation: beeFadeIn 460ms ease-out 1420ms both !important; }
}