/* ============================================================
   DYNAMICZNA WYSPA + LIQUID GLASS
   Dwa elementy:
   - .island__pill  - zwinięta wyspa (126 × 37 px jak w iPhonie 17), NIGDY nie zmienia rozmiaru,
   - .island__panel - rozwinięte menu, gotowe od początku; przy otwarciu „wyrasta” z wyspy
                      przez sprężyste skalowanie.
   Animowane są wyłącznie transform i opacity - liczy je karta graficzna, bez przeliczania
   układu strony w każdej klatce (to powodowało ścinanie w Safari na iPhonie).
   ============================================================ */
:root {
  --spring: cubic-bezier(.3, 1.25, .5, 1);
  --island-w: 126px;          /* wymiary Dynamic Island w iPhonie 17: ok. 126 × 37 pt */
  --island-h: 37px;
  --island-open-w: min(540px, calc(100vw - 20px));
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* tłumiona sprężyna (tłumienie 0,72): po 33 ms 6% drogi, po 100 ms 39%, przestrzelenie 3,8%.
       Poprzednia już po 90 ms miała 70% - na iPhonie wyglądało to jak przeskok, nie wzrost. */
    --spring: linear(0, .016, .058, .118, .191, .272, .355, .438, .519, .596, .666, .73, .788, .838, .881,
      .918, .949, .973, .993, 1.009, 1.02, 1.029, 1.034, 1.037, 1.038, 1.038, 1.037, 1.035, 1.032,
      1.029, 1.026, 1.023, 1.019, 1.017, 1.014, 1.011, 1.009, 1.007, 1.005, 1.004, 1);
  }
}

/* --- kontener: tylko pozycja, sam niczego nie rysuje --- */
.island {
  position: absolute; left: 50%; top: 16px; z-index: 3;
  width: var(--island-w); height: var(--island-h);
  transform: translateX(-50%);
}

/* --- pigułka (zwinięta wyspa) i wiersz „Zamknij” w panelu ---
   Siatka [slot] 1fr [napis] 1fr [slot]: napis zawsze na środku, logo i JKF przy bokach. */
.island__pill, .island__close {
  all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent;
  display: grid; grid-template-columns: 22px 1fr auto 1fr 22px; align-items: center;
  color: var(--on-dark); font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
}

/* --- tło kapsułki: JEDNO, identyczne dla wyspy i rozwiniętego panelu ---
   Płaski odcień + delikatne rozmycie, nałożone bezpośrednio na kapsułkę (bez osobnych
   warstw pod spodem - nic nie może wystawać przy rogach). Bez gradientów i odblasków,
   które przy skalowaniu wyglądałyby inaczej. Obwódka tylko w spoczynku. */
:root { --capsule-tint: rgba(16, 22, 18, .5); --capsule-blur: blur(10px) saturate(160%); }
.island__pill, .island__panel {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  background-color: var(--capsule-tint);
  -webkit-backdrop-filter: var(--capsule-blur);
          backdrop-filter: var(--capsule-blur);
  border: 1px solid rgba(255, 255, 255, .22);
}

/* --- pigułka --- */
.island__pill {
  width: 100%; height: 100%; padding: 0 10px; border-radius: calc(var(--island-h) / 2);
  transition: transform .6s var(--spring), opacity .12s ease, border-color .2s ease;
}
.island__pill:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
@media (hover: hover) { .island__pill:hover { transform: scale(1.05); } }
.island__pill:active { transform: scale(.96); }
/* W trakcie animacji i gdy menu jest otwarte pigułka traci tylko swoje tło (pod nią jest
   kapsułka o identycznym kształcie), a jej logo, napis i JKF zostają widoczne cały czas.
   Pigułka leży nad panelem, ale nie łapie kliknięć - trafiają do przycisku „Zamknij” pod nią. */
.island__pill { z-index: 2; }
.island__panel { z-index: 1; }
.island.pill-bare .island__pill {
  pointer-events: none; overflow: visible;
  background: transparent; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  /* obwódka pigułki znika od razu na starcie ruchu (bez wygaszania - inaczej zostaje
     jej widmo wokół napisu); płynnie wraca dopiero po zwinięciu */
  transition: transform .6s var(--spring), opacity .12s ease;
}
/* dwa napisy w tym samym miejscu: MENU przechodzi w ZAMKNIJ (przenikanie liczy skrypt) */
/* napisy zajmują cały wiersz (nad kolumnami logo i JKF), więc dłuższe tłumaczenie
   (np. „Schließen”) nie rozpycha układu i nie przesuwa logo ani JKF */
.island__pill .island__label--menu, .island__pill .island__label--close {
  position: absolute; left: 50%; top: 50%; margin: 0; white-space: nowrap;
  grid-column: auto; grid-row: auto;   /* bez kolumny: pozycja liczona względem całej wyspy, nie kolumny siatki */
  /* środek widocznych liter: letter-spacing dokłada pustkę za ostatnią literą (pół odstępu) */
  transform: translate(calc(-50% + .085em), -50%);
}
.island__label--close { opacity: 0; }
.island__pill .island__logo, .island__pill .island__jkf { grid-row: 1; will-change: transform; }
/* wiersz „Zamknij” w panelu zostaje tylko przyciskiem - widoczny jest wiersz z pigułki */
.island__close > * { visibility: hidden; }

.island__logo, .island__jkf {
  justify-self: center; width: auto; pointer-events: none;
  filter: brightness(1.35) drop-shadow(0 1px 2px rgba(0, 0, 0, .7)) drop-shadow(0 0 8px rgba(0, 0, 0, .5));
}
.island__logo  { grid-column: 1; height: 18px; }
.island__label { grid-column: 3; margin-right: -.17em; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.island__jkf   { grid-column: 5; height: 7.5px; }

/* --- panel (rozwinięte menu) ---
   Kształt i ruch liczy wyspa.js: panel jest skalowany osobno w poziomie i pionie (to liczy
   karta graficzna - płynnie także w Safari), tak że zaczyna i kończy dokładnie jako pigułka
   wyspy. Zaokrąglenie jest korygowane w każdej klatce, żeby rogi były okrągłe, a zawartość
   skalowana odwrotnie, więc się nie rozciąga. Rozmycie leży na samym panelu, więc Safari
   przycina je do jego zaokrąglonych rogów. */
.island__panel {
  position: absolute; top: 0; left: 50%;
  width: var(--island-open-w); border-radius: 34px;
  transform-origin: 50% 0;
  transform: translateX(-50%);
  opacity: 0; pointer-events: none;     /* w spoczynku zwinięty panel jest niewidoczny */
  will-change: transform;
  transition: border-color .2s ease;
}
.island.is-open .island__panel { pointer-events: auto; }
/* obwódka tylko w spoczynku: przy skalowaniu 1-pikselowa linia rozciągałaby się nierówno */
.island.is-morphing .island__panel { border-color: transparent; transition: none; }
.island__content { transform-origin: 50% 0; will-change: transform, opacity; }

.island__close { width: 100%; height: 44px; padding: 0 22px; }
.island__close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -4px; border-radius: 30px; }

.island__menu {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .8rem;
  padding: .3rem 1.3rem 1.4rem;
}
.island__menu a {
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .3s ease, transform .5s var(--spring), background .25s;
  will-change: transform, opacity;
}
.island.is-open .island__menu a {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .7s var(--spring), background .25s;
  transition-delay: calc(.1s + var(--i, 0) * .04s);
}
.island__menu a:not(.btn) {
  display: flex; align-items: baseline; gap: .7rem; padding: .7rem .85rem; border-radius: 18px;
  text-decoration: none; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.3;
  color: var(--on-dark); text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.island__menu a:not(.btn) small { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; color: var(--gold-light); }
.island__menu a:not(.btn):hover, .island__menu a:not(.btn):focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
.island__menu a:not(.btn):focus-visible { box-shadow: inset 0 0 0 1px var(--gold-light); }
.island__menu .btn { grid-column: 1 / -1; text-align: center; margin-top: .7rem; }

/* --- wyspa jest menu przez cały czas, także po przewinięciu --- */
.nav, .burger { display: none !important; }
.topbar .brand { display: none; }
.topbar.is-scrolled .topbar__inner {
  height: 76px; margin-top: 0; margin-bottom: 0; max-width: calc(1180px + 32px); border-radius: 0;
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  background: none; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

@media (max-width: 760px) {
  .island { top: 11px; }
  .topbar.is-scrolled .topbar__inner { height: 64px; }
  .island__close { padding: 0 18px; }
  .island__menu { padding: .2rem .9rem 1.1rem; gap: .15rem .4rem; }
  .island__menu a:not(.btn) { font-size: 1.35rem; padding: .65rem .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .island__pill, .island__menu a { transition-duration: .01s !important; transition-delay: 0s !important; }
}