/* ============================================================
   Orzeł AI — widget maskotki
   Wygląd wg projektu w Figmie (node 11233:137).

   Kształt "squircle" jest zdefiniowany JEDEN raz, jako <clipPath>
   w jednostkach objectBoundingBox (JS, acquireShape). Obsługuje wszystkie
   zastosowania naraz:
     · obszar wideo   -> clip-path na .eagle-widget__stage
     · szkło pod wideo -> ten sam clip-path na .eagle-widget__glass::before
     · rant szkła      -> wariant "band" tej samej ścieżki (::after)
     · glow nad wideo  -> BEZ własnego kształtu; leży wewnątrz przyciętego
                          bąbla, więc dziedziczy przycięcie
     · cień            -> filter: drop-shadow na rodzicu przyciętego elementu,
                          sam obrysowuje sylwetkę
   ============================================================ */

.eagle-widget {
  /* --- konfiguracja --- */
  --eagle-size: 100px;          /* cały bąbel wraz ze szkłem (wideo = 90%) */
  --eagle-offset-x: 24px;
  --eagle-offset-y: 24px;

  --eagle-bg: #193f3a;          /* tło pod wideo — zgodne z tłem klipów */
  --eagle-glass: rgba(255, 255, 255, 0.7);
  --eagle-glass-blur: 8px;
  --eagle-glass-rim: #ffffff;

  --eagle-glow-color: 80, 195, 118;   /* #50C376 w składowych RGB */
  --eagle-glow-strength: 0.3;
  --eagle-glow-start: 73.88%;         /* od tego promienia glow zaczyna narastać */

  --eagle-focus: #193f3a;
  --eagle-video-scale: 1.06;    /* lekkie przybliżenie — krawędź klipu nie mignie */

  position: fixed;
  right: var(--eagle-offset-x);
  bottom: var(--eagle-offset-y);
  z-index: 2147483000;

  width: var(--eagle-size);
  height: var(--eagle-size);
  border-radius: 30%;           /* tylko pod obrys focusa — kształt robi clip-path */

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Tylko dla urządzeń z prawdziwym kursorem — na dotyku hover potrafi
   „przykleić się" po tapnięciu. */
@media (hover: hover) {
  .eagle-widget:hover {
    transform: scale(1.05);
  }
}

.eagle-widget:focus-visible {
  outline: 3px solid var(--eagle-focus);
  outline-offset: 4px;
}

/* Zapas dla przeglądarek bez :focus-visible — nigdy bez widocznego focusu. */
.eagle-widget:focus:not(:focus-visible) {
  outline: none;
}

/* --- tryb zadokowany (dolna nawigacja na mobile) ------------- */

/* Klasę przełącza JS wg opcji `breakpoint` (domyślnie 1000px).
   Awatar przestaje pływać w rogu i siada na środku paska, wystając
   ponad jego górną krawędź. --eagle-dock-bottom to odległość dolnej
   krawędzi awatara od dołu ekranu — dostrój do wysokości swojego paska. */
.eagle-widget--docked {
  --eagle-size: var(--eagle-dock-size, 80px);
  --eagle-dock-bottom: 37px;

  right: auto;
  left: 50%;
  bottom: var(--eagle-dock-bottom);
  transform: translateX(-50%);
}

/* W pasku nawigacji awatar nie powiększa się na najazd — to widok mobilny. */
.eagle-widget--docked:hover {
  transform: translateX(-50%);
}

/* zakładana na czas przełączania trybu, żeby zmiana pozycji nie była animowana */
.eagle-widget--no-transition {
  transition: none;
}

/* --- szkło pod wideo ---------------------------------------- */

/* Cień siedzi na tym elemencie, a przycięcie na pseudoelementach.
   Odwrotna kolejność nie zadziała: filter liczy się PRZED clip-path,
   więc clip-path obciąłby cień równo z krawędzią kształtu. */
.eagle-widget__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.eagle-widget__glass::before,
.eagle-widget__glass::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* wypełnienie szkła */
.eagle-widget__glass::before {
  background: var(--eagle-glass);
  -webkit-backdrop-filter: blur(var(--eagle-glass-blur)) saturate(1.2);
  backdrop-filter: blur(var(--eagle-glass-blur)) saturate(1.2);
  -webkit-clip-path: var(--eagle-clip);
  clip-path: var(--eagle-clip);
}

/* rant — ta sama ścieżka z wyciętym wnętrzem (evenodd) */
.eagle-widget__glass::after {
  background: var(--eagle-glass-rim);
  -webkit-clip-path: var(--eagle-clip-band);
  clip-path: var(--eagle-clip-band);
}

/* --- bąbel z wideo ------------------------------------------ */

.eagle-widget__stage {
  position: absolute;
  inset: 5%;                    /* wideo 90px w bąblu 100px */
  z-index: 1;
  background: var(--eagle-bg);
  isolation: isolate;
  -webkit-clip-path: var(--eagle-clip);
  clip-path: var(--eagle-clip);
}

.eagle-widget__poster,
.eagle-widget__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(var(--eagle-video-scale));
}

.eagle-widget__poster {
  background-color: var(--eagle-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.eagle-widget__video {
  object-fit: cover;
  opacity: 0;                   /* crossfade sterowany klasą .is-active */
  transition: opacity 120ms linear;
  z-index: 1;
  pointer-events: none;
  background: var(--eagle-bg);
}

.eagle-widget__video.is-active {
  opacity: 1;
  z-index: 2;
}

/* Klip ustępujący zostaje w pełni kryjący POD wchodzącym na czas przenikania.
   Gdy oba przechodziły opacity naraz, w połowie było 0.5 na 0.5, czyli 0.75
   krycia - przez tę dziurę przebijało --eagle-bg. Klasę zdejmuje _endFade()
   po CROSSFADE_MS, gdy nowy klip już w pełni kryje. Czasy bez zmian. */
.eagle-widget__video.is-holding {
  opacity: 1;
  transition: none;
  z-index: 1;
}

/* --- glow nad wideo ----------------------------------------- */

/* Bez własnego kształtu: leży w przyciętym bąblu, więc przycięcie dziedziczy.
   Elipsa 50x45 na 90px — proporcje gradientu wprost z projektu. */
.eagle-widget__glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55.56% 50% at 50% 50%,
    rgba(var(--eagle-glow-color), 0) var(--eagle-glow-start),
    rgba(var(--eagle-glow-color), var(--eagle-glow-strength)) 100%
  );
}

/* Podczas akcji glow delikatnie oddycha — bez dodatkowych elementów. */
.eagle-widget.is-action .eagle-widget__glow {
  animation: eagle-glow-breathe 2.4s ease-in-out infinite;
}

@keyframes eagle-glow-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* --- ograniczony ruch --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .eagle-widget,
  .eagle-widget__glow,
  .eagle-widget__video {
    transition: none;
    animation: none;
  }
  .eagle-widget:hover {
    transform: none;
  }
}

/* Ten sam efekt wymuszony z JS (setReducedMotion). */
.eagle-widget--reduced,
.eagle-widget--reduced .eagle-widget__glow {
  transition: none;
  animation: none;
}

.eagle-widget--reduced:hover {
  transform: none;
}