/* ============================================================
   Golden Key Africa — ruch
   Referencja: plan/ux-design-system.md §7

   Reguła nadrzędna, wynikająca z charakteru marki:
   treść wiarygodnościowa nie animuje wejścia. Cena, forma władania,
   wstęga faktów i pasek rejestrowy muszą być obecne w pierwszym
   malowaniu. Animujemy to, co wyjaśnia i potwierdza, nie to, co dowodzi.

   Krzywe: wyłącznie wyjściowe, wykładnicze. Bez odbić, bez elastyczności.
   Dokument nie sprężynuje.
   ============================================================ */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  --dur-tap:   90ms;
  --dur-ui:    180ms;
  --dur-panel: 260ms;
  --dur-reveal: 620ms;
}

/* --- Odsłona przy przewijaniu --------------------------------- */
/* Klasę nadaje JS, więc bez JS treść jest po prostu widoczna:
   brak skryptu nigdy nie może ukryć zawartości strony. */
.js-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out-expo),
    transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Po wejściu zdejmujemy will-change, żeby nie trzymać warstwy kompozytora
   dla kilkudziesięciu elementów naraz. */
.js-reveal.is-done { will-change: auto; }

/* --- Nagłówek: chowa się przy przewijaniu w dół ----------------- */
/* Na telefonie 72 px paska to realna strata wysokości ekranu.
   Wraca natychmiast przy przewijaniu w górę, bo tam jest nawigacja. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: transform var(--dur-panel) var(--ease-out-quart),
              box-shadow var(--dur-ui) var(--ease-out-quart);
}
.masthead[data-hidden="true"] { transform: translate3d(0, -100%, 0); }
.masthead[data-stuck="true"] { box-shadow: 0 1px 0 var(--border), 0 8px 24px -18px oklch(0.22 0.010 260 / .5); }
.admin-bar .masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar .masthead { top: 46px; } }

/* --- Przyciski: potwierdzenie dotknięcia ----------------------- */
.btn {
  transition:
    background var(--dur-ui) var(--ease-out-quart),
    border-color var(--dur-ui) var(--ease-out-quart),
    transform var(--dur-tap) var(--ease-out-quart);
}
.btn:active { transform: translate3d(0, 1px, 0); }

/* --- Karty: obraz oddycha, ramka reaguje ----------------------- */
.card { transition: border-color var(--dur-ui) var(--ease-out-quart); }
.card__media img { transition: transform 520ms var(--ease-out-expo); }
.card:hover .card__media img,
.card:focus-within .card__media img { transform: scale(1.03); }

/* --- Wiersze: podkreślenie wjeżdża, nie zapala się ------------- */
.row { transition: background var(--dur-ui) var(--ease-out-quart); }
.row__go {
  display: inline-block;
  transition: transform var(--dur-ui) var(--ease-out-quart);
}
.row--link:hover .row__go { transform: translate3d(4px, 0, 0); }

/* --- Akordeon FAQ: wysokość przez grid, nie przez height ------- */
/* height:auto nie da się animować; grid-template-rows 0fr→1fr owszem,
   i nie wymaga znajomości docelowej wysokości. */
.faq details .faq__body {
  display: grid;
  grid-template-rows: 1fr;
}
.faq details:not([open]) .faq__body { grid-template-rows: 0fr; }
.faq .faq__body > * { min-height: 0; }
.faq details[open] .faq__body { animation: gka-expand var(--dur-panel) var(--ease-out-quart); }
@keyframes gka-expand {
  from { grid-template-rows: 0fr; opacity: 0; }
  to   { grid-template-rows: 1fr; opacity: 1; }
}
.faq summary::after { transition: transform var(--dur-ui) var(--ease-out-quart); }

/* --- Menu mobilne: wjazd, nie przeskok ------------------------- */
.mobilenav {
  transition: opacity var(--dur-panel) var(--ease-out-quart),
              transform var(--dur-panel) var(--ease-out-expo);
}
.mobilenav[data-open="false"] {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
  pointer-events: none;
}
.mobilenav[data-open="true"] { opacity: 1; transform: none; }

/* --- Stempel na zdjęciu hero: jedyne wejście „na powitanie” ---- */
/* Wyjątek od reguły: stempel nie niesie danych oferty, tylko przepis
   konstytucyjny, który i tak powtarzamy w §02. Może się dosunąć. */
@media (prefers-reduced-motion: no-preference) {
  .stamp {
    animation: gka-stamp 720ms var(--ease-out-expo) 260ms both;
  }
}
@keyframes gka-stamp {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* --- Formularz: pola i komunikaty ------------------------------ */
.field input, .field select, .field textarea,
.calc__input input, .calc__input select, .roi__field input {
  transition: border-color var(--dur-ui) var(--ease-out-quart),
              background var(--dur-ui) var(--ease-out-quart);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); }
.formmsg { animation: gka-msg 420ms var(--ease-out-expo) both; }
@keyframes gka-msg {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* --- Serce: zapisanie oferty ----------------------------------- */
.card__save svg, .offer__tool svg { transition: transform var(--dur-ui) var(--ease-out-expo); }
.card__save[aria-pressed="true"] svg,
.offer__tool[aria-pressed="true"] svg { fill: currentColor; transform: scale(1.12); }

/* --- Zakładki galerii i chipy ---------------------------------- */
.gallery__tab, .chip, .collections a {
  transition: background var(--dur-ui) var(--ease-out-quart),
              color var(--dur-ui) var(--ease-out-quart),
              border-color var(--dur-ui) var(--ease-out-quart);
}

/* --- Wyłączenie całości dla osób wrażliwych na ruch ------------ */
@media (prefers-reduced-motion: reduce) {
  .js-reveal, .js-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .masthead[data-hidden="true"] { transform: none; }
  .stamp, .formmsg { animation: none; }
  .faq details[open] .faq__body { animation: none; }
  .card:hover .card__media img { transform: none; }
}