/* ==========================================================================
   STANAG 6001 — ruch, galerie i diagramy
   Cały ruch wyłącza globalna reguła prefers-reduced-motion ze styl.css.
   Nie dopisuj tu animacji, bez których treść przestaje być czytelna.
   ========================================================================== */

/* --- Wchodzenie sekcji przy przewijaniu -------------------------------- */
.js-anim .rv { opacity: 0; transform: translateY(20px); }
.js-anim .rv-on {
  opacity: 1; transform: none;
  transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .3, 1);
}
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }
.rv-d4 { transition-delay: .32s; }
.rv-d5 { transition-delay: .40s; }

/* --- Hero: powolny najazd i obracająca się róża wiatrów ---------------- */
@keyframes kenburns {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.5%, -1.5%, 0); }
}
.hero__img { animation: kenburns 30s ease-in-out infinite alternate; }

@keyframes markspin {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
.hero__mark { animation: markspin 150s linear infinite; }

/* --- Karty: delikatne uniesienie --------------------------------------- */
.card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.card--link:hover, .card.bracket:hover { transform: translateY(-3px); }

/* --- Galeria zdjęć ----------------------------------------------------- */
.gallery {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 1.6rem 0 0;
}
.gallery figure {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--n-900);
}
.gallery img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.35) contrast(1.06);
  transition: transform .7s cubic-bezier(.2, .7, .3, 1), filter .7s ease;
}
.gallery figure:hover img,
.gallery figure:focus-within img { transform: scale(1.07); filter: none; }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .8rem .65rem;
  font-size: .78rem; line-height: 1.35; color: #f2f0e6;
  background: linear-gradient(transparent, rgba(10, 11, 8, .9));
}

/* --- Zdjęcie z ramką techniczną ---------------------------------------- */
.shot { position: relative; margin: 1.9rem 0; }
.shot img { width: 100%; display: block; }
.shot::before, .shot::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
}
.shot::before {
  top: -6px; left: -6px;
  border-top: 3px solid var(--br-400); border-left: 3px solid var(--br-400);
}
.shot::after {
  bottom: -6px; right: -6px;
  border-bottom: 3px solid var(--br-400); border-right: 3px solid var(--br-400);
}
.shot figcaption {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
  color: var(--muted); margin-top: .85rem;
}
.section--dark .shot figcaption { color: #a9a693; }

/* --- Liczniki ---------------------------------------------------------- */
.keyfigs b { font-variant-numeric: tabular-nums; }

/* --- Znacznik świeżości ------------------------------------------------ */
.fresh {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(43, 107, 75, .4); background: var(--ok-bg);
  color: var(--ok); padding: .42rem .85rem;
}
.fresh--light {
  border-color: rgba(219, 176, 75, .45);
  background: rgba(219, 176, 75, .12);
  color: var(--br-300);
}
.fresh .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
  animation: ping 2.6s ease-in-out infinite;
}
@keyframes ping {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  55%      { box-shadow: 0 0 0 7px transparent; opacity: .7; }
}

/* --- Pasek postępu testu ----------------------------------------------- */
.quiz__bar { height: 3px; background: rgba(255, 255, 255, .14); }
.quiz__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--br-500), var(--br-300));
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}

/* --- Diagram: profil językowy w słupkach ------------------------------- */
.bars { display: grid; gap: .75rem; margin: 1.4rem 0; }
.bars .bar {
  display: grid; grid-template-columns: minmax(90px, 118px) 1fr 42px;
  align-items: center; gap: .9rem;
}
.bars .lbl { font-size: .93rem; font-weight: 650; color: var(--n-800); }
.section--dark .bars .lbl { color: #ddd9c6; }
.bars .track { position: relative; height: 13px; background: var(--p-300); overflow: hidden; }
.section--dark .bars .track { background: rgba(255, 255, 255, .12); }
.bars .fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: linear-gradient(90deg, var(--br-600), var(--br-400));
  transition: width 1.1s cubic-bezier(.2, .7, .3, 1);
}
.bars .val {
  font-family: var(--mono); font-weight: 700; font-size: .95rem;
  text-align: right; color: var(--n-800);
}
.section--dark .bars .val { color: var(--br-300); }

/* --- Diagram: próg punktowy -------------------------------------------- */
.gauge { margin: 1.8rem 0 1.4rem; }
.gauge__track {
  position: relative; height: 46px;
  background: var(--p-300); border: 1px solid var(--line-2);
}
.section--dark .gauge__track {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18);
}
.gauge__zone { position: absolute; top: 0; bottom: 0; }
.gauge__zone--fail { left: 0;   width: 60%; background: rgba(165, 56, 42, .16); }
.gauge__zone--plus { left: 60%; width: 10%; background: rgba(134, 101, 28, .24); }
.gauge__zone--pass { left: 70%; right: 0;   background: rgba(43, 107, 75, .20); }
.gauge__mark { position: absolute; top: -7px; bottom: -7px; width: 2px; background: var(--n-900); }
.section--dark .gauge__mark { background: #fff; }
.gauge__mark span {
  position: absolute; top: -1.6rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  white-space: nowrap; color: var(--n-900);
}
/* Znaczniki 60% i 70% dzieli tylko 10% szerokości — na wąskim ekranie ich
   podpisy zachodziłyby na siebie, więc odsuwamy je na zewnątrz. */
.gauge__mark--l span { left: 0; transform: translateX(-100%) translateX(-4px); }
.gauge__mark--r span { left: 0; transform: translateX(4px); }
.section--dark .gauge__mark span { color: #fff; }
.gauge__labels {
  display: grid; grid-template-columns: 60% 10% 30%;
  margin-top: .7rem; text-align: center;
}
.gauge__labels b { display: block; font-family: var(--mono); font-size: .78rem; }
.gauge__labels span { color: var(--muted); font-size: .78rem; }
.section--dark .gauge__labels span { color: #9d9a87; }

/* --- Oś czasu ----------------------------------------------------------- */
.timeline { list-style: none; padding: 0; margin: 1.6rem 0; }
.timeline li {
  position: relative; padding: 0 0 1.5rem 2.6rem;
  margin: 0 0 0 .55rem; border-left: 2px solid var(--line-2);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: .35rem;
  width: 12px; height: 12px; background: var(--br-400);
  border: 2px solid var(--p-100); border-radius: 50%;
}
.section--dark .timeline li::before { border-color: var(--n-900); }
.timeline .t {
  display: block; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .1em; color: var(--br-600); margin-bottom: .15rem;
}
.section--dark .timeline .t { color: var(--br-300); }
.timeline b { display: block; color: var(--n-800); }
.section--dark .timeline b { color: #fff; }
.timeline p { margin: .2rem 0 0; font-size: .93rem; }

@media (max-width: 560px) {
  .bars .bar { grid-template-columns: 84px 1fr 38px; gap: .55rem; }
  .gauge__labels { font-size: .74rem; }
}

@media print {
  .rv { opacity: 1 !important; transform: none !important; }
  .gallery, .quiz__bar { display: none; }
}