/* aomt.world: tokeny i baza wspólna dla strony i Portalu Adepta.
   Źródło wartości: design system „AOMT Visual ID” (aomt/design_system/project/tokens.json).
   Motyw ekranowy: grafit. Księga jest kanciasta: zaokrąglenie 0, koło tylko w znaku i węzłach. */

@font-face { font-family: "Jost"; src: url("../fonts/jost.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-italic.woff") format("woff"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-italic.woff") format("woff"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/ebgaramond.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/ebgaramond-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/ebgaramond-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../fonts/cinzel-semibold.woff") format("woff"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  /* tożsamość */
  --grafit: #101a1e;
  --mosiadz: #e9c981;
  --crintex: #18b8ee;
  --papier: #eee5d4;
  /* powierzchnie (motyw grafit) */
  --tlo: #080f12;
  --pow: #101a1e;
  --pow-2: #141e22;
  --pow-noc: #10252d;
  --slad: #192d34;
  /* tekst */
  --tekst: #eee5d4;
  --tekst-tytul: #e9c981;
  --tekst-pom: #abc0c4;
  --tekst-stopka: #98aeb5;
  --etykieta: #18b8ee;
  --link: #48caf3;
  --na-mosiadzu: #101a1e;
  --linia: #485056;
  --linia-mocna: #5f635b;
  /* książka */
  --ks-papier: #f0eadc;
  --ks-tekst: #241f19;
  --ks-tytul: #2a2420;
  --ks-zloto: #a8842f;
  /* kroje */
  --f-display: "Jost", "Segoe UI", system-ui, sans-serif;
  --f-serif: "Alegreya", Georgia, "Times New Roman", serif;
  --f-ksiazka: "EB Garamond", Georgia, "Times New Roman", serif;
  --f-ksiazka-tytul: "Cinzel", Georgia, serif;
  /* rytm */
  --kontener: 1320px;
  --margines: clamp(16px, 4vw, 48px);
  --sekcja: clamp(72px, 10vw, 136px);
  --cien-strony: 0 12px 50px #00000044;
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* warstwy */
  --z-nav: 20;
  --z-szuflada: 40;
  --z-modal: 50;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--papier); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--etykieta); outline-offset: 2px; }
::selection { background: #18b8ee55; color: var(--papier); }
[hidden] { display: none !important; }

.kontener { width: 100%; max-width: var(--kontener); margin: 0 auto; padding: 0 var(--margines); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* typografia */
.naglowek { font-family: var(--f-display); font-weight: 500; letter-spacing: -.03em; line-height: 1.04; color: var(--tekst-tytul); margin: 0; text-wrap: balance; }
.naglowek--xl { font-size: clamp(44px, 6.4vw, 92px); letter-spacing: -.04em; }
.naglowek--l { font-size: clamp(34px, 4.4vw, 60px); }
.naglowek--m { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -.02em; line-height: 1.12; }
.naglowek--s { font-size: 22px; letter-spacing: -.01em; line-height: 1.2; }
.etykieta { font-family: var(--f-display); font-size: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--etykieta); margin: 0 0 16px; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--tekst); max-width: 60ch; margin: 0; }
.pomoc { color: var(--tekst-pom); font-size: 16px; }
.dane { font-family: var(--f-display); font-variant-numeric: tabular-nums; }

/* przyciski: jedyny przycisk systemu = mosiądz, bez zaokrągleń */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-display); font-size: 18px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  padding: 14px 26px; min-height: 52px; border: 1px solid var(--mosiadz); border-radius: 0; cursor: pointer;
  background: var(--mosiadz); color: var(--na-mosiadzu); text-decoration: none;
  transition: transform .15s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.przycisk:hover { background: #f3d99d; color: var(--na-mosiadzu); }
.przycisk:active { transform: translateY(1px); }
.przycisk--kontur { background: transparent; color: var(--mosiadz); }
.przycisk--kontur:hover { background: #e9c98114; color: var(--mosiadz); }
.przycisk--maly { font-size: 16px; min-height: 42px; padding: 9px 18px; }
.przycisk[disabled], .przycisk[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.przycisk svg { width: 20px; height: 20px; }

.ikona { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ikona-przycisk {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linia);
  background: transparent; color: var(--tekst); cursor: pointer; border-radius: 0;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.ikona-przycisk:hover { border-color: var(--mosiadz); color: var(--mosiadz); }
.ikona-przycisk:active { transform: translateY(1px); }
.ikona-przycisk[aria-pressed="true"] { border-color: var(--crintex); color: var(--crintex); }

/* pola formularzy */
.pole { display: grid; gap: 8px; }
.pole label, .pole .pole__etykieta { font-family: var(--f-display); font-size: 15px; font-weight: 500; color: var(--tekst); }
.pole input[type="email"], .pole input[type="text"] {
  height: 52px; padding: 0 16px; border: 1px solid var(--linia-mocna); border-radius: 0;
  background: var(--pow-2); color: var(--tekst); font-family: var(--f-display); font-size: 17px;
}
.pole input::placeholder { color: #8fa3a8; }
.pole input:focus-visible { outline: 2px solid var(--etykieta); outline-offset: 0; border-color: var(--etykieta); }
.pole__pomoc { font-size: 14px; color: var(--tekst-pom); font-family: var(--f-display); }
.pole__blad { font-size: 14px; color: #ffb4a8; font-family: var(--f-display); }
.zgoda { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--tekst-pom); font-family: var(--f-display); line-height: 1.45; }
.zgoda input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--mosiadz); }

/* znacznik trybu demonstracyjnego (uczciwy stan prototypu) */
.demo-znacznik {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 13px;
  letter-spacing: .04em; color: var(--tekst-pom); border: 1px dashed var(--linia-mocna); padding: 6px 10px;
}

/* faktura lnu pod ciemnymi powierzchniami */
.len { position: relative; isolation: isolate; }
.len::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../../media/img/len.webp") repeat; background-size: 320px; opacity: .03; mix-blend-mode: screen;
}

/* odsłanianie przy przewijaniu (IntersectionObserver w JS) */
@media (prefers-reduced-motion: no-preference) {
  .odslon { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .odslon.jest { opacity: 1; transform: none; }
}

/* komunikat (toast) */
.komunikat {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-modal);
  background: var(--pow-noc); color: var(--tekst); border: 1px solid var(--linia-mocna); box-shadow: var(--cien-strony);
  font-family: var(--f-display); font-size: 16px; padding: 14px 20px; max-width: min(92vw, 520px);
}

/* ---------- migoczące znaki crintexu ---------- */
.runy img { display: block; opacity: .16; filter: drop-shadow(0 0 0 #18b8ee00); transition: opacity .5s var(--ease); }
.runy img.zapal { animation: zaplon 2.4s steps(1, end) both, poswiata 2.4s var(--ease) both; }
@keyframes zaplon {
  0% { opacity: .16; } 6% { opacity: .9; } 9% { opacity: .25; } 13% { opacity: 1; } 17% { opacity: .5; } 21% { opacity: 1; }
  78% { opacity: 1; } 86% { opacity: .6; } 100% { opacity: .16; }
}
@keyframes poswiata {
  0%, 12% { filter: drop-shadow(0 0 0 #18b8ee00); }
  24%, 76% { filter: drop-shadow(0 0 6px #18b8eecc) drop-shadow(0 0 18px #18b8ee66); }
  100% { filter: drop-shadow(0 0 0 #18b8ee00); }
}
.runy--gwiazdozbior { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.runy--gwiazdozbior img { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto; transform: translate(-50%, -50%); }
.runy--pas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; }
.runy--pas img { height: 42px; width: auto; }
.runy--siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: center; justify-items: center; padding: 18px; background: var(--pow-noc); border: 1px solid var(--linia); }
.runy--siatka img { width: 100%; max-width: 64px; height: auto; opacity: .3; }
@media (max-width: 700px) { .runy--gwiazdozbior img:nth-child(n+6) { display: none; } .runy--pas img { height: 34px; } }
@media (prefers-reduced-motion: reduce) { .runy img { opacity: .4; filter: drop-shadow(0 0 5px #18b8ee88); } .runy img.zapal { animation: none; } }

/* ---------- znaki crintexu w nawigacji: przygaszone, zapalają się przy najechaniu, świecą przy bieżącym miejscu ---------- */
.nav-runa { width: 30px; height: 22px; object-fit: contain; flex: none; opacity: .5; filter: drop-shadow(0 0 0 #18b8ee00); transition: opacity .3s var(--ease), filter .3s var(--ease); }
a:hover > .nav-runa, a:focus-visible > .nav-runa, button:hover > .nav-runa, button:focus-visible > .nav-runa,
[aria-current] > .nav-runa { opacity: 1; filter: drop-shadow(0 0 4px #18b8eecc) drop-shadow(0 0 12px #18b8ee55); }
@media (prefers-reduced-motion: no-preference) {
  a:hover > .nav-runa, a:focus-visible > .nav-runa, button:hover > .nav-runa, button:focus-visible > .nav-runa { animation: zaplon-nav .9s steps(1, end) both; }
  [aria-current] > .nav-runa { animation: oddech 4.8s ease-in-out infinite; }
  .nav-runa.budzi { animation: zaplon-nav 1.1s steps(1, end) both, poswiata-nav 1.6s var(--ease) both; }
}
@keyframes zaplon-nav { 0% { opacity: .5; } 10% { opacity: 1; } 18% { opacity: .3; } 28% { opacity: 1; } 36% { opacity: .6; } 46%, 100% { opacity: 1; } }
@keyframes poswiata-nav { 0% { filter: drop-shadow(0 0 0 #18b8ee00); } 30% { filter: drop-shadow(0 0 5px #18b8eecc) drop-shadow(0 0 14px #18b8ee66); } 100% { filter: drop-shadow(0 0 0 #18b8ee00); } }
@keyframes oddech { 0%, 100% { filter: drop-shadow(0 0 3px #18b8eeaa) drop-shadow(0 0 8px #18b8ee44); } 50% { filter: drop-shadow(0 0 6px #18b8eedd) drop-shadow(0 0 16px #18b8ee77); } }