/* PREMIUM LUXURY GOLD – elementy wspólne paneli i portalu lunchowego (VIS-01/02/03/04):
   czcionki, tokeny, logo 3D, hasła w górnym pasku, pojawianie przy przewijaniu, przejścia stron, ograniczenie ruchu.
   Ładowane w baza.html (panele) i lunche/_portal.html (portal) – jeden komponent, bez osobnych wersji. */

/* ---------- Czcionki (latin + latin-ext = polskie znaki) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonty/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonty/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonty/cormorant-garamond-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonty/cormorant-garamond-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonty/manrope-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonty/manrope-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonty/manrope-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonty/manrope-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonty/manrope-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* START-01: czcionka zastępcza o zbliżonej szerokości do Cormorant Garamond (pomiar: ok. 91% szerokości Times) –
   zanim dotrze właściwa czcionka, napisy mają prawie ten sam rozmiar, więc nie „skaczą” przy podmianie. */
@font-face { font-family: "Cormorant zastepczy"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"),
  local("Noto Serif"), local("DejaVu Serif"); size-adjust: 91%; ascent-override: 92%; descent-override: 29%; }
/* polskie litery (latin-ext) w wagach 500–700 */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonty/manrope-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02AF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonty/manrope-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonty/manrope-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF; }

/* ---------- Tokeny ---------- */
:root {
  --pg-czern: #0b0a08;
  --pg-czern-2: #12100d;
  --pg-powierzchnia: rgba(255, 248, 230, .035);
  --pg-powierzchnia-2: rgba(255, 248, 230, .06);
  --pg-ramka: rgba(214, 178, 98, .22);
  --pg-ramka-mocna: rgba(226, 194, 120, .55);
  --pg-tekst: #f2ece0;
  --pg-tekst-2: #b3aa98;
  --pg-tekst-3: #857d6e;
  --pg-zloto: #d6b262;
  --pg-zloto-jasne: #f4e2ae;
  --pg-zloto-metal: linear-gradient(118deg, #8c6a26 0%, #d9b766 18%, #f7e6b0 34%, #c99f4a 52%, #f1d999 70%, #a8822f 88%, #e4c67e 100%);
  --pg-zloto-przycisk: linear-gradient(180deg, #f3dd9f 0%, #d8b464 46%, #b38b38 100%);
  --pg-czerwony: #e5483a;
  --pg-czerwony-tlo: rgba(229, 72, 58, .14);
  --pg-zielony: #6fcf8e;
  --pg-zielony-tlo: rgba(111, 207, 142, .12);
  --pg-niebieski: #8fb6e8;
  --pg-niebieski-tlo: rgba(143, 182, 232, .12);
  --pg-cien: 0 1px 0 rgba(255, 240, 200, .05) inset, 0 18px 40px -18px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35);
  --pg-cien-zloty: 0 0 0 1px rgba(226, 194, 120, .35), 0 18px 44px -16px rgba(214, 178, 98, .28);
  --pg-promien: 18px;
  --pg-szeryf: "Cormorant Garamond", "Cormorant", "Cormorant zastepczy", Georgia, "Times New Roman", serif;
  --pg-bezszeryf: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pg-czas: .28s;
  --pg-krzywa: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Logo 3D (VIS-02): oryginalne logo jako złoty medalion – głębia z warstw, refleksy, wejście, ruch, kursor i dotyk ---------- */
/* Rysujemy w dużym rozmiarze (320 px) i zmniejszamy skalą – obracane warstwy pozostają ostre na ekranach 2K/4K. */
.logo3d { --l3d: 84px; --l3d-sk: .2625; position: relative; display: inline-block; width: var(--l3d); height: var(--l3d); flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.logo3d-male { --l3d: 42px; --l3d-sk: .13125; }
.logo3d-skala { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; display: block;
  transform: scale(var(--l3d-sk)); transform-style: preserve-3d; perspective: 1900px; --l3d-krok: 4px; }
.logo3d-poswiata { position: absolute; inset: -38%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232, 196, 112, .42) 0%, rgba(214, 178, 98, .14) 38%, transparent 68%);
  filter: blur(4px); animation: l3d-poswiata 5.5s ease-in-out infinite; }
.logo3d-scena { position: absolute; inset: 0; transform-style: preserve-3d;
  animation: l3d-wejscie 1.5s cubic-bezier(.2, .75, .25, 1) both, l3d-unoszenie 9s ease-in-out 1.5s infinite; }
/* START-01: pełne wejście logo tylko raz na otwarcie aplikacji; przy przechodzeniu między stronami logo stoi i się unosi */
.po-wejsciu .logo3d-scena { animation: l3d-unoszenie 9s ease-in-out infinite; }
.logo3d-bryla { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(var(--l3d-rx, 0deg)) rotateY(var(--l3d-ry, 0deg)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.logo3d.sledzi .logo3d-bryla { transition: transform .12s ease-out; }
.logo3d.obrot .logo3d-bryla { animation: l3d-obrot 1.25s cubic-bezier(.3, .7, .2, 1); }
.logo3d-warstwa, .logo3d-przod, .logo3d-blask, .logo3d-iskra { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.logo3d-przod { transform: translateZ(.6px); }
.logo3d-warstwa:nth-child(1) { transform: translateZ(calc(var(--l3d-krok) * -1)); filter: brightness(0.745) saturate(1.25); }
.logo3d-warstwa:nth-child(2) { transform: translateZ(calc(var(--l3d-krok) * -2)); filter: brightness(0.71) saturate(1.25); }
.logo3d-warstwa:nth-child(3) { transform: translateZ(calc(var(--l3d-krok) * -3)); filter: brightness(0.675) saturate(1.25); }
.logo3d-warstwa:nth-child(4) { transform: translateZ(calc(var(--l3d-krok) * -4)); filter: brightness(0.64) saturate(1.25); }
.logo3d-warstwa:nth-child(5) { transform: translateZ(calc(var(--l3d-krok) * -5)); filter: brightness(0.605) saturate(1.25); }
.logo3d-warstwa:nth-child(6) { transform: translateZ(calc(var(--l3d-krok) * -6)); filter: brightness(0.57) saturate(1.25); }
.logo3d-warstwa:nth-child(7) { transform: translateZ(calc(var(--l3d-krok) * -7)); filter: brightness(0.535) saturate(1.25); }
.logo3d-warstwa:nth-child(8) { transform: translateZ(calc(var(--l3d-krok) * -8)); filter: brightness(0.5) saturate(1.25); }
.logo3d-warstwa:nth-child(9) { transform: translateZ(calc(var(--l3d-krok) * -9)); filter: brightness(0.465) saturate(1.25); }
.logo3d-warstwa:nth-child(10) { transform: translateZ(calc(var(--l3d-krok) * -10)); filter: brightness(0.43) saturate(1.25); }
.logo3d-warstwa:nth-child(11) { transform: translateZ(calc(var(--l3d-krok) * -11)); filter: brightness(0.395) saturate(1.25); }
.logo3d-warstwa:nth-child(12) { transform: translateZ(calc(var(--l3d-krok) * -12)); filter: brightness(0.36) saturate(1.25); }
.logo3d-blask, .logo3d-iskra { pointer-events: none;
  -webkit-mask: url("logo.svg") center / contain no-repeat; mask: url("logo.svg") center / contain no-repeat; }
.logo3d-blask { transform: translateZ(1px);
  background: linear-gradient(108deg, transparent 36%, rgba(255, 246, 214, .0) 40%, rgba(255, 248, 225, .92) 49%, #fff 50%, rgba(255, 236, 190, .75) 52%, transparent 62%);
  background-size: 320% 100%; background-position: 140% 0; animation: l3d-refleks 6.5s ease-in-out 2.2s infinite; }
.logo3d-iskra { transform: translateZ(1.2px); opacity: .55; transition: opacity .3s;
  background: radial-gradient(circle at var(--l3d-px, 32%) var(--l3d-py, 24%), rgba(255, 252, 238, .9) 0%, rgba(255, 236, 180, .35) 16%, transparent 42%); }
.logo3d.sledzi .logo3d-iskra { opacity: .85; }

/* START-01: łagodne wejście – rozjaśnienie i lekki skręt (najwyżej 34°), bez przechodzenia przez krawędź („kreska” = mrugnięcie) */
@keyframes l3d-wejscie {
  0% { opacity: 0; transform: translateZ(-40px) rotateY(-34deg) rotateX(10deg) scale(.82); }
  45% { opacity: 1; }
  70% { transform: translateZ(6px) rotateY(7deg) rotateX(-2deg) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes l3d-unoszenie {
  0%, 100% { transform: none; }
  25% { transform: rotateY(11deg) rotateX(-4deg) translateY(-6px); }
  75% { transform: rotateY(-11deg) rotateX(4deg) translateY(4px); }
}
@keyframes l3d-obrot { from { transform: rotateY(0deg) scale(1); } 45% { transform: rotateY(200deg) scale(1.08); } to { transform: rotateY(360deg) scale(1); } }
@keyframes l3d-refleks { 0%, 55% { background-position: 140% 0; } 80%, 100% { background-position: -40% 0; } }
@keyframes l3d-poswiata { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
/* bez ruchu: statyczny medalion lekko skręcony, żeby była widoczna głębia */
@media (prefers-reduced-motion: reduce) { .logo3d .logo3d-bryla { transform: rotateY(-16deg) rotateX(6deg) !important; } .logo3d-iskra { opacity: .5; } }
.bez-animacji .logo3d .logo3d-bryla { transform: rotateY(-16deg) rotateX(6deg) !important; }

.logo3d-hero { --l3d: 150px; --l3d-sk: .46875; }
@media (max-width: 520px) { .logo3d-hero { --l3d: 118px; --l3d-sk: .36875; } }

/* ---------- Hasła w górnym pasku (VIS-04) ---------- */
/* Stała wysokość = brak przesuwania strony. Hasła nałożone na siebie; aktywne pojawia się (fade + lekkie uniesienie + wyostrzenie). */
.hasla { position: relative; display: block; height: var(--hasla-h, 2.7em); min-width: 0; overflow: hidden; pointer-events: auto; }
.hasla-tekst { position: absolute; inset: 0; display: flex; align-items: center; justify-content: var(--hasla-wyr, center); text-align: var(--hasla-wyr-tekst, center);
  opacity: 0; transform: translateY(.45em) scale(.985); filter: blur(3px);
  transition: opacity 1.1s var(--pg-krzywa), transform 1.1s var(--pg-krzywa), filter 1.1s var(--pg-krzywa); }
.hasla-tekst.aktywne { opacity: 1; transform: none; filter: none; }
.hasla-tekst.znika { opacity: 0; transform: translateY(-.4em) scale(.985); filter: blur(3px); }
.hasla-tekst > span {
  font-family: var(--pg-szeryf); font-weight: 600; font-size: var(--hasla-r, 1.15rem); line-height: 1.15; letter-spacing: .02em;
  font-variant-numeric: lining-nums; overflow-wrap: anywhere;
  background: var(--pg-zloto-metal); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pg-zloto-plynie 7s ease-in-out infinite alternate;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@keyframes pg-zloto-plynie { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ---------- Pojawianie przy przewijaniu (premium.js dodaje klasy tylko, gdy ruch jest dozwolony) ---------- */
html.js-pojaw .pg-pojaw { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--pg-krzywa), transform .8s var(--pg-krzywa); }
html.js-pojaw .pg-pojaw.pg-widoczne { opacity: 1; transform: none; }

/* ---------- Płynne przejścia między stronami (przeglądarki z View Transitions; pozostałe – zwykłe przejście) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .32s cubic-bezier(.4, 0, .2, 1) both pg-vt-wyjscie; }
::view-transition-new(root) { animation: .42s cubic-bezier(.2, .7, .2, 1) both pg-vt-wejscie; }
@keyframes pg-vt-wyjscie { to { opacity: 0; transform: scale(.992); } }
@keyframes pg-vt-wejscie { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Ograniczenie ruchu (ustawienie systemu albo przełącznik „Animacje”) ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .logo3d *, .logo3d, .hasla-tekst, .hasla-tekst * { animation: none !important; transition: none !important; }
}
.bez-animacji .logo3d *, .bez-animacji .hasla-tekst, .bez-animacji .hasla-tekst * { animation: none !important; transition: none !important; }

/* START-01: logowanie biometryczne – miejsce na przycisk i baner od pierwszej klatki (premium.js w <head> sprawdza obsługę),
   żeby treść nie przesuwała się w dół po załadowaniu skryptów. */
html.ma-klucze #szybkie-blok.ukryte, html.ma-klucze #pytanie-biometria.ukryte { display: block !important; }