/* ==========================================================================
   Karolina Godzińska — portfolio
   Arkusz stylów strony statycznej.

   Spis treści
   01. Zmienne
   02. Reset i typografia bazowa
   03. Elementy współdzielone (kontener, sekcja, nagłówki, przyciski, kafelki)
   04. Ekran powitalny
   05. Nagłówek, logo, nawigacja, menu mobilne
   06. Hero
   07. Portfolio
   08. O mnie + Wymiary
   09. Polaroids / Digitals
   10. Sesje
   11. Kontakt + formularz
   12. Stopka
   13. Modal polityki prywatności
   14. Animacje pojawiania się
   15. Dostępność i ograniczenie ruchu
   ========================================================================== */

/* ==========================================================================
   01. Zmienne
   ========================================================================== */

:root {
  /* Kolory */
  --kg-black: #0b0b0b;
  --kg-ink: #151515;
  --kg-white: #ffffff;
  --kg-ivory: #f7f5f0;
  --kg-beige: #c9ad7a;
  --kg-beige-dark: #ad8b55;
  --kg-cream: #ead9b6;
  --kg-line-light: rgba(255, 255, 255, 0.18);
  --kg-text-muted: #6e6b65;

  /* Wymiary */
  --kg-max: 1320px;
  --kg-pad: clamp(20px, 4vw, 68px);
  --kg-header-h: 82px;

  /* Odstęp między kafelkami. Stały na szerokich ekranach, bo od niego
     zależy wyliczenie kolumn górnego rzędu Portfolio. */
  --kg-gap: 16px;

  /* Typografia */
  --kg-display: "Gilda Display", "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", Georgia, serif;
  --kg-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Ruch */
  --kg-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Lustrzane odbicie krzywej powyżej. Dla cubic-bezier(x1,y1,x2,y2)
     odwrotnością jest cubic-bezier(1-x2, 1-y2, 1-x1, 1-y1). Potrzebne
     wszędzie tam, gdzie ruch ma zostać odegrany wstecz: sama zamiana
     wartości początkowej z końcową nie wystarcza, bo krzywa „szybki start,
     wolne dojście" użyta przy cofaniu nadal startuje szybko. */
  --kg-ease-wstecz: cubic-bezier(0.64, 0, 0.78, 0);
}

/* ==========================================================================
   02. Reset i typografia bazowa
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--kg-white);
  color: var(--kg-ink);
  font-family: var(--kg-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  width: 100%;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

/* Tekst widoczny wyłącznie dla czytników ekranu */
.kg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Link „przejdź do treści" musi być widoczny, gdy ktoś dojdzie do niego Tabem */
a.kg-sr-only:focus {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1400;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 18px;
  overflow: visible;
  clip-path: none;
  background: var(--kg-black);
  color: var(--kg-beige);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================================
   03. Elementy współdzielone
   ========================================================================== */

.kg-shell {
  width: min(var(--kg-max), calc(100% - (var(--kg-pad) * 2)));
  margin-inline: auto;
}

.kg-section {
  position: relative;
  scroll-margin-top: calc(var(--kg-header-h) + 6px);
}

.kg-section--light {
  background: var(--kg-white);
  color: var(--kg-ink);
}

.kg-section--ivory {
  background: var(--kg-ivory);
  color: var(--kg-ink);
}

.kg-section--dark {
  background: var(--kg-black);
  color: var(--kg-white);
}

.kg-section-pad {
  padding-block: clamp(88px, 11vw, 172px);
}

.kg-kicker {
  margin-bottom: 14px;
  color: var(--kg-beige-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
}

.kg-title {
  font-family: var(--kg-display);
  font-size: clamp(44px, 6vw, 94px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.kg-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: 26px;
  background: currentColor;
  opacity: 0.65;
}

.kg-copy {
  max-width: 690px;
  color: var(--kg-text-muted);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.8;
}

/* Na ciemnym tle akcenty przechodzą w złoto, tekst w przygaszoną biel */
.kg-section--dark .kg-kicker,
.kg-section--dark .kg-title {
  color: var(--kg-beige);
}

.kg-section--dark .kg-copy {
  color: rgba(255, 255, 255, 0.68);
}

/* Nagłówek sekcji: tytuł po lewej, opcjonalny opis po prawej */
.kg-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.55fr);
  gap: clamp(34px, 8vw, 120px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}

/* --- Kafelek ze zdjęciem -------------------------------------------------
   Proporcja kadru jest przypisana na stałe do miejsca w układzie, nie do
   pliku. Zdjęcie o innej proporcji zostanie przycięte, a układ zostanie
   nienaruszony.
   ------------------------------------------------------------------------ */

.kg-tile {
  position: relative;
  overflow: hidden;
  background: #ecebe8;
  box-shadow: 0 1.4rem 2.8rem rgba(0, 0, 0, 0.28);
}

.kg-tile img,
.kg-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--kg-ease), filter 0.55s ease;
}

.kg-tile:hover img {
  transform: scale(1.045);
  filter: saturate(0.92) contrast(1.03);
}

/* Delikatne przyciemnienie dołu kadru przy najechaniu */
.kg-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent 35%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.kg-tile:hover::after {
  opacity: 1;
}

.kg-tile--1x1  { aspect-ratio: 1 / 1; }
.kg-tile--3x4  { aspect-ratio: 3 / 4; }
.kg-tile--4x5  { aspect-ratio: 4 / 5; }
.kg-tile--2x3  { aspect-ratio: 2 / 3; }
.kg-tile--9x16 { aspect-ratio: 9 / 16; }

/* Pasek polaroidów pokazujemy w całości, bez kadrowania */
.kg-tile--wide {
  aspect-ratio: 1800 / 1012;
  background: transparent;
}

.kg-tile--wide img {
  object-fit: contain;
}

.kg-tile--wide:hover img {
  transform: scale(1.018);
  filter: none;
}

/* Kafelek z wideo — bez powiększania przy najechaniu */
.kg-tile--video {
  background: linear-gradient(135deg, #141414, #0a0a0a);
}

.kg-tile--video:hover video {
  transform: none;
}

.kg-tile--video::after {
  content: none;
}

/* Przyciski */
.kg-button {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 24px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.32s ease, border-color 0.32s ease, transform 0.32s var(--kg-ease);
}

/* Wypełnienie wjeżdżające od dołu przy najechaniu */
.kg-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kg-black);
  transform: translateY(101%);
  transition: transform 0.36s var(--kg-ease);
}

.kg-button:hover,
.kg-button:focus-visible {
  transform: translateY(-2px);
}

.kg-button:hover::before,
.kg-button:focus-visible::before {
  transform: translateY(0);
}

.kg-button--light {
  color: var(--kg-white);
}

.kg-button--solid {
  color: var(--kg-black);
  border-color: var(--kg-beige);
  background: var(--kg-beige);
}

.kg-button--light:hover,
.kg-button--light:focus-visible,
.kg-button--solid:hover,
.kg-button--solid:focus-visible {
  color: var(--kg-beige);
  border-color: var(--kg-beige);
}

/* ==========================================================================
   04. Ekran powitalny

   Element wstawia skrypt — w HTML go nie ma. Gdyby JavaScript się nie
   wykonał, strona pokaże się od razu, zamiast zostać zasłonięta na stałe.
   ========================================================================== */

.kg-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(252, 251, 249, 0.86);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.kg-intro__logo {
  width: min(150px, 23vw);
  height: auto;
  opacity: 0;
  transform: scale(0.86);
  will-change: transform, opacity;
}

/* Powiększanie startuje po jednej klatce, żeby przeglądarka zdążyła
   zarejestrować stan początkowy i faktycznie animowała przejście. */
.kg-intro.is-playing .kg-intro__logo {
  opacity: 1;
  transform: scale(1.1);
  transition:
    transform var(--kg-intro-czas, 1500ms) cubic-bezier(0.16, 0.84, 0.24, 1),
    opacity 520ms ease-out;
}

.kg-intro.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 480ms ease, visibility 0s 480ms;
}

.kg-intro.is-done .kg-intro__logo {
  transform: scale(1.14);
  transition: transform 480ms ease-out;
}

/* Dopóki gra ekran powitalny, strona pod spodem się nie przewija */
html.kg-intro-aktywne,
html.kg-intro-aktywne body {
  overflow: hidden;
}

/* ==========================================================================
   05. Nagłówek, logo, nawigacja, menu mobilne
   ========================================================================== */

.kg-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  height: var(--kg-header-h);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* Motyw dobierany do sekcji aktualnie pod nagłówkiem (patrz main.js) */
.kg-header[data-theme="dark"] {
  color: var(--kg-white);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3));
  border-bottom: 1px solid transparent;
}

.kg-header[data-theme="light"] {
  color: var(--kg-ink);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.kg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}

/* --- Logo w pasku menu ---------------------------------------------------
   Dwa warianty leżą jeden na drugim i przenikają się przy zmianie motywu
   nagłówka. Wysokość zadaje kontener, szerokość wynika z proporcji pliku.
   ------------------------------------------------------------------------ */

.kg-logo {
  position: relative;
  flex: 0 0 auto;
  display: block;
  height: 46px;
  aspect-ratio: 1 / 1;
}

.kg-logo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease;
}

/* Na ciemnym pasku widać wariant złoty, na jasnym czarny */
.kg-header[data-theme="dark"] .kg-logo__img--na-jasnym,
.kg-header[data-theme="light"] .kg-logo__img--na-ciemnym {
  opacity: 0;
}

.kg-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 36px);
}

.kg-nav__link {
  position: relative;
  padding-block: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.kg-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 1px;
  background: var(--kg-beige);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.32s var(--kg-ease);
}

.kg-nav__link:hover::after,
.kg-nav__link:focus-visible::after,
.kg-nav__link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.kg-nav__link:hover,
.kg-nav__link:focus-visible,
.kg-nav__link.is-active {
  color: var(--kg-beige);
}

/* --- Hamburger: trzy linie ----------------------------------------------
   Po otwarciu górna i dolna zbiegają się w krzyżyk, środkowa znika.
   Zamykanie odgrywa to samo wstecz, bo obie strony obsługuje przejście CSS.
   ------------------------------------------------------------------------ */

.kg-menu-toggle {
  position: relative;
  z-index: 3;
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kg-beige);
  cursor: pointer;
}

.kg-menu-toggle span {
  position: absolute;
  left: 10px;
  width: 26px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition:
    top 0.3s var(--kg-ease),
    transform 0.35s var(--kg-ease) 0.05s,
    opacity 0.2s ease,
    width 0.3s var(--kg-ease);
}

.kg-menu-toggle span:nth-child(1) { top: 15px; }
.kg-menu-toggle span:nth-child(2) { top: 22px; }
.kg-menu-toggle span:nth-child(3) { top: 29px; }

.kg-menu-toggle[aria-expanded="true"] span {
  /* Przy otwieraniu najpierw linie się schodzą, potem obracają */
  transition:
    top 0.3s var(--kg-ease),
    transform 0.35s var(--kg-ease) 0.28s,
    opacity 0.2s ease 0.1s,
    width 0.3s var(--kg-ease);
}

.kg-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}

.kg-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  top: 22px;
  width: 0;
  opacity: 0;
}

.kg-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

/* Pełnoekranowe menu mobilne */
.kg-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 850;
  display: grid;
  place-items: center;
  visibility: hidden;
  color: var(--kg-white);
  background: rgba(8, 8, 8, 0.82);
  opacity: 0;
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  transform: scaleY(0);
  transform-origin: top;
  filter: blur(16px);

  /* Zwijanie z rozmyciem - dokładne odwrócenie rozwijania: ten sam czas
     0,55 s dla wszystkich trzech właściwości i krzywa odbita lustrzanie.
     Wcześniej zamykanie używało tej samej krzywej co otwieranie, więc menu
     zapadało się gwałtownie w pierwszej dziesiątej sekundy, a potem ledwo
     pełzło. Do tego przezroczystość gasła w 0,42 s, czyli szybciej, niż
     kończyło się zwijanie, i końcówki ruchu w ogóle nie było widać. */
  transition:
    transform 0.55s var(--kg-ease-wstecz),
    filter 0.55s var(--kg-ease-wstecz),
    opacity 0.55s var(--kg-ease-wstecz),
    visibility 0.55s step-end;
}

/* Rozwijanie: rozmycie schodzi wolniej niż skala, a przezroczystość
   najszybciej — dzięki temu panel najpierw się „materializuje", a dopiero
   potem wyostrza. Ujednolicenie wszystkich trzech czasów i krzywych psuło
   ten efekt, bo rozmycie znikało razem ze skalą. */
.kg-mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1);
  filter: blur(0);
  transition:
    transform 0.55s var(--kg-ease),
    filter 0.5s ease,
    opacity 0.38s ease,
    visibility 0s;
}

.kg-mobile-menu__inner {
  width: min(560px, calc(100% - 48px));
  text-align: center;
}

.kg-mobile-menu__nav {
  display: grid;
  gap: 12px;
}

.kg-mobile-menu__link {
  display: block;
  padding: 8px;
  font-family: var(--kg-display);
  font-size: clamp(38px, 12vw, 68px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  /* Zamykanie: krótsze przejście i krzywa wstecz, żeby pozycje zdążyły
     zniknąć razem z panelem */
  transition:
    opacity 0.3s ease,
    transform 0.34s var(--kg-ease-wstecz),
    filter 0.3s ease,
    color 0.25s ease;
}

.kg-mobile-menu.is-open .kg-mobile-menu__link {
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.5s ease,
    color 0.25s ease;
}

.kg-mobile-menu.is-open .kg-mobile-menu__link {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Pozycja odpowiadająca aktualnie oglądanej sekcji */
.kg-mobile-menu__link.is-active {
  color: var(--kg-beige);
}

.kg-mobile-menu__link span {
  display: inline-block;
  transition: color 0.25s ease, transform 0.35s var(--kg-ease);
}

.kg-mobile-menu__link:hover span,
.kg-mobile-menu__link:focus-visible span {
  color: var(--kg-beige);
  transform: translateX(8px);
}

/* Pozycje wjeżdżają kaskadowo, a przy zamykaniu znikają w odwrotnej kolejności */
.kg-mobile-menu__nav a:nth-child(1) { transition-delay: 0.08s; }
.kg-mobile-menu__nav a:nth-child(2) { transition-delay: 0.15s; }
.kg-mobile-menu__nav a:nth-child(3) { transition-delay: 0.22s; }
.kg-mobile-menu__nav a:nth-child(4) { transition-delay: 0.29s; }
.kg-mobile-menu__nav a:nth-child(5) { transition-delay: 0.36s; }
.kg-mobile-menu__nav a:nth-child(6) { transition-delay: 0.43s; }

/* --- Ikona Instagrama ----------------------------------------------------
   Ten sam rysunek w trzech miejscach: w menu na komputerze, w menu
   mobilnym i w stopce. Rozmiar bierze się z font-size rodzica, a kolor
   z currentColor, więc ikona sama dopasowuje się do motywu paska.
   ------------------------------------------------------------------------ */

.kg-ikona-ig {
  display: block;
  width: 1em;
  height: 1em;
}

.kg-nav__ig {
  display: flex;
  align-items: center;
  padding-block: 8px;
  padding-left: clamp(18px, 2.2vw, 36px);
  font-size: 18px;
  color: inherit;
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* Cienka kreska oddzielająca ikonę od pozycji tekstowych */
.kg-nav__ig::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 14px;
  margin-right: clamp(18px, 2.2vw, 36px);
  margin-left: calc(-1 * clamp(18px, 2.2vw, 36px));
  background: currentColor;
  opacity: 0.28;
}

.kg-nav__ig:hover,
.kg-nav__ig:focus-visible {
  color: var(--kg-beige);
}

/* W menu mobilnym ikona stoi pod pozycjami i wjeżdża jako ostatnia.
   Leży poza <nav>, żeby nie przesuwać kaskady nth-child pozycji menu. */
.kg-mobile-menu__ig {
  display: flex;
  justify-content: center;
  margin-top: 28px;
  font-size: 26px;
  color: inherit;
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition:
    opacity 0.3s ease,
    transform 0.34s var(--kg-ease-wstecz),
    filter 0.3s ease,
    color 0.25s ease;
  transition-delay: 0s;
}

.kg-mobile-menu.is-open .kg-mobile-menu__ig {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.5s ease,
    color 0.25s ease;
  transition-delay: 0.5s;
}

.kg-mobile-menu__ig:hover,
.kg-mobile-menu__ig:focus-visible {
  color: var(--kg-beige);
}

/* Opóźnienia przy zamykaniu muszą zmieścić się w 0,55 s razem z czasem
   przejścia, inaczej pozycje animują się jeszcze po zniknięciu panelu */
.kg-mobile-menu:not(.is-open) .kg-mobile-menu__nav a:nth-child(1) { transition-delay: 0.15s; }
.kg-mobile-menu:not(.is-open) .kg-mobile-menu__nav a:nth-child(2) { transition-delay: 0.12s; }
.kg-mobile-menu:not(.is-open) .kg-mobile-menu__nav a:nth-child(3) { transition-delay: 0.09s; }
.kg-mobile-menu:not(.is-open) .kg-mobile-menu__nav a:nth-child(4) { transition-delay: 0.06s; }
.kg-mobile-menu:not(.is-open) .kg-mobile-menu__nav a:nth-child(5) { transition-delay: 0.03s; }
.kg-mobile-menu:not(.is-open) .kg-mobile-menu__nav a:nth-child(6) { transition-delay: 0s; }

@media (max-width: 1100px) {
  .kg-nav {
    gap: 18px;
  }

  .kg-nav__link {
    font-size: 9px;
  }
}

@media (max-width: 900px) {
  :root {
    --kg-header-h: 70px;
  }

  .kg-logo {
    height: 40px;
  }

  .kg-nav {
    display: none;
  }

  .kg-menu-toggle {
    display: block;
  }
}

/* ==========================================================================
   06. Hero
   ========================================================================== */

.kg-hero {
  min-height: 100svh;
  /* Wideo tła jest lekko powiększone (scale 1.015), żeby paralaksa nie
     odsłaniała krawędzi — bez przycięcia wystawałoby poza szerokość okna */
  overflow: hidden;
  color: var(--kg-white);
  background: #050707;
}

/* Górna krawędź tła równa się dolnej krawędzi paska nawigacji - pasek
   niczego nie przykrywa. Wysokość paska jest jedną zmienną (--kg-header-h),
   więc na telefonie, gdzie pasek jest niższy, krawędź przesuwa się sama. */
.kg-hero__media,
.kg-hero__overlay,
.kg-hero__noise {
  position: absolute;
  top: var(--kg-header-h);
  right: 0;
  bottom: 0;
  left: 0;
}

.kg-hero__media {
  overflow: hidden;
  will-change: transform;
}

.kg-hero__media video {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.015);
}

.kg-hero__overlay {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.56) 35%, rgba(0, 0, 0, 0.13) 65%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.38) 0%, transparent 38%);
}

.kg-hero__noise {
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.kg-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: 96px;
  padding-bottom: 90px;
}

.kg-hero__text {
  width: min(590px, 62%);
}

/* Zapis z wielkiej litery tylko na początku wyrazu. Światło międzyliterowe
   jest tu dużo mniejsze niż przy wersalikach - rozstrzelone małe litery
   rozpadłyby się na pojedyncze znaki zamiast czytać się jako wyraz. */
.kg-hero__name {
  color: var(--kg-beige);
  font-family: var(--kg-display);
  font-size: clamp(26px, 3.38vw, 57px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

.kg-hero__name span {
  display: block;
}

.kg-hero__name span + span {
  margin-top: 0.12em;
}

.kg-hero__tagline {
  max-width: 46ch;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.7;
}

.kg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.kg-scroll-cue {
  position: absolute;
  left: var(--kg-pad);
  bottom: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.kg-scroll-cue:hover,
.kg-scroll-cue:focus-visible {
  color: var(--kg-beige);
}

.kg-scroll-cue::before {
  content: "";
  width: 1px;
  height: 34px;
  background: var(--kg-beige);
  transform-origin: top;
  animation: kg-scroll-line 2s ease-in-out infinite;
}

@keyframes kg-scroll-line {
  0%,
  100% {
    transform: scaleY(0.35);
    opacity: 0.45;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .kg-hero__text {
    width: min(720px, 100%);
  }
}

@media (max-width: 767px) {
  /* Na wąskim ekranie kadr 16:9 rozciągnięty na całą wysokość byłby mocno
     przybliżony. Tło kończy się więc w przerwie między przyciskami:
     108px odstępu od dołu + 48px dolnego przycisku + połowa 12px przerwy. */
  .kg-hero__media,
  .kg-hero__overlay,
  .kg-hero__noise {
    bottom: 162px;
  }

  .kg-hero__media video {
    height: 100%;
    object-position: 50% 42%;
  }

  .kg-hero__overlay {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.58) 46%, rgba(0, 0, 0, 0.14) 80%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 70%);
  }

  .kg-hero__content {
    align-items: flex-end;
    padding-top: 110px;
    padding-bottom: 108px;
  }

  .kg-hero__name {
    font-size: clamp(27px, 8.45vw, 44px);
    letter-spacing: 0.01em;
    line-height: 1.04;
  }

  .kg-hero__tagline {
    margin-top: 20px;
    font-size: 14px;
  }

  .kg-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .kg-button {
    width: 100%;
  }

  .kg-scroll-cue {
    left: 20px;
    bottom: 20px;
  }
}

/* Na najwęższych telefonach „GODZIŃSKA" z pełnym światłem międzyliterowym
   nie mieści się w jednej linii */
@media (max-width: 400px) {
  .kg-hero__name {
    font-size: clamp(17px, 6.83vw, 29px);
    letter-spacing: 0;
  }
}

/* ==========================================================================
   07. Portfolio

   Górny rząd ma trzy kolumny. Ich szerokości są dobrane tak, żeby kafelki
   o proporcjach 3:4, 9:16 oraz para 1:1 + 4:5 kończyły się na tej samej
   wysokości. Wyliczenie zakłada odstęp 16 px między kafelkami.
   ========================================================================== */

.kg-gallery__top {
  display: grid;
  grid-template-columns: 0.4293fr 0.3220fr 0.2487fr;
  gap: var(--kg-gap);
  align-items: start;
}

.kg-gallery__stack {
  display: grid;
  gap: var(--kg-gap);
}

.kg-gallery__bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kg-gap);
  margin-top: var(--kg-gap);
}

@media (max-width: 900px) {
  /* Dwie kolumny: duży kadr i pionowy obok siebie, reszta parami */
  .kg-gallery__top {
    grid-template-columns: 1fr 1fr;
  }

  .kg-gallery__stack {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
  }

  .kg-gallery__bottom {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  :root {
    --kg-gap: 10px;
  }

  .kg-gallery__top,
  .kg-gallery__stack,
  .kg-gallery__bottom {
    grid-template-columns: 1fr;
  }

  .kg-gallery__stack {
    grid-column: span 1;
  }
}

/* ==========================================================================
   08. O mnie + Wymiary
   ========================================================================== */

.kg-profile-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(320px, 1.12fr) minmax(260px, 0.78fr);
  align-items: stretch;
}

.kg-profile-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #090909;
}

.kg-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.kg-profile-content,
.kg-measurements {
  padding: clamp(64px, 7vw, 112px) clamp(34px, 5vw, 82px);
}

.kg-profile-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--kg-line-light);
}

.kg-profile-content .kg-title {
  font-size: clamp(48px, 5vw, 78px);
}

.kg-profile-content .kg-copy {
  margin-top: 34px;
}

/* Lista ukończonych szkoleń pod opisem w sekcji O mnie */
.kg-profile-content__etykieta {
  margin-top: 34px;
  margin-bottom: 14px;
}

.kg-szkolenia {
  margin: 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
}

.kg-szkolenia li {
  position: relative;
  padding-left: 22px;
}

.kg-szkolenia li + li {
  margin-top: 10px;
}

/* Złota kreska zamiast kropki - spójna z kreską pod nagłówkami sekcji */
.kg-szkolenia li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 12px;
  height: 1px;
  background: var(--kg-beige);
}

.kg-measurements {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kg-measurements__title {
  margin-bottom: 10px;
  color: var(--kg-beige);
  font-family: var(--kg-display);
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
}

/* --- Rozwijana lista wymiarów ------------------------------------------
   Panel rozsuwa się przez grid-template-rows 0fr -> 1fr. W odróżnieniu
   od max-height ta technika animuje do faktycznej wysokości treści,
   więc ruch jest równy niezależnie od liczby wierszy.
   ---------------------------------------------------------------------- */

.kg-measurements__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 14px 0;
  border: 0;
  background: transparent;
  color: var(--kg-beige);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s ease;
}

.kg-measurements__toggle:hover,
.kg-measurements__toggle:focus-visible {
  color: var(--kg-cream);
}

.kg-measurements__chevron {
  width: 12px;
  height: 8px;
  transition: transform 0.4s var(--kg-ease);
}

.kg-measurements__toggle[aria-expanded="true"] .kg-measurements__chevron {
  transform: rotate(180deg);
}

.kg-measurements__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows 0.5s var(--kg-ease),
    opacity 0.4s ease;
}

/* Dziecko musi mieć overflow: hidden, inaczej treść wystaje poza
   zwijający się wiersz siatki */
.kg-measurements__panel > * {
  min-height: 0;
  overflow: hidden;
}

.kg-measurements__panel.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}

.kg-measurements__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  padding: 13px 0;
  border-bottom: 1px solid var(--kg-line-light);
}

.kg-measurements__row dt {
  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.kg-measurements__row dd {
  color: var(--kg-white);
  font-size: 14px;
}

/* Na tablecie i telefonie zdjęcie trafia nad treść i staje się
   wyśrodkowaną kolumną o ograniczonej szerokości — rozciągnięte na całą
   szerokość ekranu przytłaczałoby tekst obok. */
@media (max-width: 1100px) {
  /* Odstęp nad zdjęciem jest paddingiem siatki, a nie marginesem zdjęcia.
     Przy display:block górny margines dziecka scala się z marginesem sekcji
     i wypada na zewnątrz - odstęp znikał. */
  .kg-profile-grid {
    display: block;
    padding-top: clamp(56px, 7vw, 90px);
  }

  .kg-profile-photo {
    width: min(420px, 78%);
    margin: 0 auto;
    aspect-ratio: 9 / 16;
  }

  .kg-profile-photo img {
    object-position: 50% 50%;
  }

  .kg-profile-content {
    border-right: 0;
    border-bottom: 1px solid var(--kg-line-light);
  }

  .kg-measurements {
    padding-top: 48px;
  }
}

@media (max-width: 767px) {
  /* Czarny odstęp nad zdjęciem równy czarnym paskom po jego bokach, czyli
     połowie tego, co ze szerokości ekranu zostaje poza zdjęciem. Powyżej
     szerokości telefonu paski rosną szybko, dlatego odstęp zatrzymuje się
     na 56 px - inaczej zdjęcie odjeżdżałoby od góry sekcji. */
  .kg-profile-grid {
    padding-top: min(calc((100% - min(340px, 82%)) / 2), 56px);
  }

  .kg-profile-photo {
    width: min(340px, 82%);
  }

  .kg-profile-content,
  .kg-measurements {
    padding: 70px 20px;
  }
}

/* ==========================================================================
   09. Polaroids / Digitals
   ========================================================================== */

.kg-digitals-head {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 0.55fr);
  gap: clamp(34px, 8vw, 110px);
  align-items: start;
  margin-bottom: clamp(46px, 6vw, 80px);
}

/* Opis wyrównany optycznie do dolnej krawędzi tytułu obok */
.kg-digitals-head > .kg-copy {
  margin-top: clamp(54px, 6vw, 92px);
}

.kg-digitals-note {
  margin-top: 18px;
  color: var(--kg-beige-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .kg-section-head,
  .kg-digitals-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .kg-digitals-head > .kg-copy {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .kg-section-head,
  .kg-digitals-head {
    gap: 28px;
    margin-bottom: 46px;
  }
}

/* ==========================================================================
   10. Sesje
   ========================================================================== */

.kg-sesje__top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}

.kg-sesje__bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
  margin-top: clamp(10px, 1.4vw, 20px);
}

@media (max-width: 767px) {
  .kg-sesje__top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .kg-sesje__top,
  .kg-sesje__bottom {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   11. Kontakt + formularz
   ========================================================================== */

.kg-contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(440px, 1.3fr);
  gap: clamp(52px, 9vw, 140px);
  align-items: start;
}

.kg-contact-title {
  color: var(--kg-beige);
  font-family: var(--kg-display);
  font-size: clamp(58px, 7vw, 104px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.83;
}

.kg-contact-title span {
  display: block;
}

.kg-contact-title span:last-child {
  color: var(--kg-cream);
  font-style: italic;
}

.kg-contact-intro {
  max-width: 460px;
  margin-top: 34px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 16px;
  line-height: 1.8;
}

.kg-contact-list {
  display: grid;
  gap: 22px;
  margin-top: 50px;
}

.kg-contact-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--kg-line-light);
}

.kg-contact-item__label {
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.kg-contact-item__value {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  overflow-wrap: anywhere;
  transition: color 0.25s ease;
}

a.kg-contact-item__value:hover,
a.kg-contact-item__value:focus-visible {
  color: var(--kg-beige);
}

/* Zdjęcie pod blokiem danych kontaktowych */
.kg-contact-photo {
  margin-top: clamp(34px, 4vw, 54px);
}

/* --- Formularz ----------------------------------------------------------- */

.kg-form-wrap {
  padding: clamp(30px, 4vw, 54px);
  border: 1px solid var(--kg-line-light);
  background: rgba(255, 255, 255, 0.025);
}

.kg-form-title {
  margin-bottom: 30px;
  color: var(--kg-beige);
  font-family: var(--kg-display);
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1;
}

.kg-field {
  margin-bottom: 18px;
}

.kg-field__label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.kg-field__label .kg-required {
  color: var(--kg-beige);
}

.kg-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.21);
  border-radius: 0;
  outline: none;
  background: rgba(255, 255, 255, 0.03);
  color: var(--kg-white);
  box-shadow: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

textarea.kg-input {
  min-height: 150px;
  resize: vertical;
}

.kg-input:focus {
  border-color: var(--kg-beige);
  background: rgba(255, 255, 255, 0.055);
}

.kg-input::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

/* Własna strzałka listy — natywna jest nieczytelna na ciemnym tle */
select.kg-input {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23c9ad7a' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

select.kg-input option {
  color: var(--kg-ink);
  background: var(--kg-white);
}

/* Zgoda RODO */
.kg-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  margin: 24px 0 22px;
}

.kg-consent input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 3px 0 0;
  accent-color: var(--kg-beige);
  cursor: pointer;
}

.kg-consent label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
}

/* Pole-pułapka na boty: niewidoczne dla ludzi, kuszące dla automatów */
.kg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kg-submit {
  min-height: 50px;
  padding: 14px 26px;
  border: 1px solid var(--kg-beige);
  border-radius: 0;
  background: var(--kg-beige);
  color: var(--kg-black);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.kg-submit:hover:not(:disabled),
.kg-submit:focus-visible:not(:disabled) {
  background: var(--kg-white);
  border-color: var(--kg-white);
  transform: translateY(-2px);
}

.kg-submit:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
}

/* Komunikaty walidacji i wysyłki */
.kg-field__error {
  display: block;
  margin-top: 6px;
  color: #ffb4b4;
  font-size: 11px;
  line-height: 1.5;
}

.kg-input[aria-invalid="true"] {
  border-color: #ffb4b4;
}

.kg-form-status {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.6;
}

.kg-form-status[hidden] {
  display: none;
}

.kg-form-status--ok {
  border-color: rgba(194, 170, 130, 0.6);
  background: rgba(194, 170, 130, 0.08);
  color: var(--kg-white);
}

.kg-form-status--error {
  border-color: rgba(255, 180, 180, 0.5);
  background: rgba(255, 120, 120, 0.08);
  color: #ffd8d8;
}

/* Cloudflare Turnstile — musi zmieścić się w kolumnie także na wąskich ekranach */
.cf-turnstile {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 4px 0 20px;
}

.cf-turnstile > div,
.cf-turnstile iframe {
  width: 100% !important;
  max-width: 100% !important;
}

.kg-privacy-note {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  line-height: 1.65;
}

.kg-privacy-trigger {
  position: relative;
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kg-beige-dark);
  font: inherit;
  cursor: pointer;
  transition: color 0.25s ease;
}

.kg-privacy-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--kg-beige);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.32s var(--kg-ease);
}

.kg-privacy-trigger:hover,
.kg-privacy-trigger:focus-visible {
  color: var(--kg-beige);
}

.kg-privacy-trigger:hover::after,
.kg-privacy-trigger:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 900px) {
  .kg-contact-grid {
    grid-template-columns: 1fr;
  }

  .kg-contact-photo {
    max-width: 520px;
  }
}

@media (max-width: 767px) {
  .kg-contact-title {
    font-size: clamp(62px, 18vw, 90px);
  }

  .kg-contact-list {
    margin-top: 38px;
  }

  .kg-contact-item {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .kg-form-wrap {
    padding: 24px 18px;
  }

  .kg-submit {
    width: 100%;
  }

  .cf-turnstile {
    margin-bottom: 18px;
  }
}

@media (max-width: 339px) {
  .cf-turnstile {
    width: 150px !important;
    margin-inline: auto;
  }

  .cf-turnstile > div,
  .cf-turnstile iframe {
    width: 150px !important;
    max-width: 150px !important;
  }
}

/* ==========================================================================
   12. Stopka
   ========================================================================== */

.kg-footer {
  padding: 34px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #050505;
  color: rgba(255, 255, 255, 0.55);
}

.kg-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.kg-footer__logo {
  flex: 0 0 auto;
  display: block;
  width: clamp(140px, 14vw, 190px);
  opacity: 0.9;
  transition: opacity 0.25s ease;
}

.kg-footer__logo:hover,
.kg-footer__logo:focus-visible {
  opacity: 1;
}

.kg-footer__logo img {
  width: 100%;
  height: auto;
}

.kg-footer__copy {
  font-size: 10px;
  letter-spacing: 0.06em;
}

.kg-footer__links {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.kg-footer__ig {
  display: flex;
  align-items: center;
  font-size: 17px;
}

.kg-footer__links a,
.kg-footer__privacy {
  transition: color 0.25s ease;
}

.kg-footer__links a:hover,
.kg-footer__links a:focus-visible,
.kg-footer__privacy:hover,
.kg-footer__privacy:focus-visible {
  color: var(--kg-beige);
}

.kg-footer__privacy {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

@media (max-width: 900px) {
  .kg-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
  }

  /* Na wąskich ekranach adres e-mail i przycisk polityki nie mieszczą się
     obok siebie — muszą móc się złamać do dwóch linii */
  .kg-footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
  }
}

/* ==========================================================================
   13. Modal polityki prywatności
   ========================================================================== */

.kg-privacy-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  visibility: hidden;
  padding: clamp(14px, 3vw, 42px);
  background: rgba(0, 0, 0, 0.74);
  opacity: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.32s ease, visibility 0.32s step-end;
}

.kg-privacy-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.32s ease, visibility 0s;
}

.kg-privacy-modal__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(900px, 100%);
  max-height: min(88svh, 940px);
  overflow: hidden;
  border: 1px solid rgba(194, 170, 130, 0.34);
  background: #11100e;
  color: var(--kg-white);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.48);
  transform: translateY(22px) scale(0.985);
  transition: transform 0.48s var(--kg-ease);
}

.kg-privacy-modal.is-open .kg-privacy-modal__panel {
  transform: none;
}

.kg-privacy-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: clamp(24px, 4vw, 48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kg-privacy-modal__eyebrow {
  margin-bottom: 9px;
  color: var(--kg-beige);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.kg-privacy-modal__title {
  font-family: var(--kg-display);
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.kg-privacy-modal__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: transparent;
  color: var(--kg-white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.kg-privacy-modal__close:hover,
.kg-privacy-modal__close:focus-visible {
  border-color: var(--kg-beige);
  background: rgba(194, 170, 130, 0.15);
  color: var(--kg-beige);
  transform: rotate(90deg) scale(1.08);
}

.kg-privacy-modal__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(26px, 4vw, 48px);
  scrollbar-color: var(--kg-beige-dark) rgba(255, 255, 255, 0.06);
  scrollbar-width: thin;
}

.kg-privacy-modal__lead {
  max-width: 720px;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.8;
}

.kg-privacy-modal__sections {
  display: grid;
  gap: 30px;
}

.kg-privacy-modal__section {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kg-privacy-modal__section:first-child {
  padding-top: 0;
  border-top: 0;
}

.kg-privacy-modal__section h3 {
  margin-bottom: 12px;
  color: var(--kg-white);
  font-family: var(--kg-display);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.15;
}

.kg-privacy-modal__section p,
.kg-privacy-modal__section li {
  color: rgba(255, 255, 255, 0.67);
  font-size: 13px;
  line-height: 1.75;
}

.kg-privacy-modal__section p + p {
  margin-top: 12px;
}

.kg-privacy-modal__section ul {
  margin: 0;
  padding-left: 20px;
}

.kg-privacy-modal__section a {
  position: relative;
  color: var(--kg-beige-dark);
  transition: color 0.25s ease;
}

.kg-privacy-modal__section a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--kg-beige);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.32s var(--kg-ease);
}

.kg-privacy-modal__section a:hover,
.kg-privacy-modal__section a:focus-visible {
  color: var(--kg-beige);
}

.kg-privacy-modal__section a:hover::after,
.kg-privacy-modal__section a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.kg-privacy-modal__updated {
  margin-top: 34px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .kg-privacy-modal {
    padding: 0;
    place-items: stretch;
  }

  .kg-privacy-modal__panel {
    width: 100%;
    height: 100svh;
    max-height: 100svh;
    border: 0;
  }

  .kg-privacy-modal__header {
    padding: 22px 20px 18px;
  }

  .kg-privacy-modal__body {
    padding: 26px 20px 42px;
  }

  .kg-privacy-modal__title {
    font-size: clamp(36px, 12vw, 52px);
  }

  .kg-privacy-modal__close {
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   14. Animacje pojawiania się
   ========================================================================== */

.kg-reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(8px);
  transition:
    opacity 0.8s var(--kg-ease),
    transform 0.9s var(--kg-ease),
    filter 0.8s var(--kg-ease);
}

.kg-reveal[data-delay="1"] { transition-delay: 0.08s; }
.kg-reveal[data-delay="2"] { transition-delay: 0.16s; }
.kg-reveal[data-delay="3"] { transition-delay: 0.24s; }
.kg-reveal[data-delay="4"] { transition-delay: 0.32s; }

.kg-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Bez JS nic nie może zostać ukryte na stałe */
.no-js .kg-reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ==========================================================================
   15. Dostępność i ograniczenie ruchu
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--kg-beige);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Bez animacji wjazdu — treść jest widoczna od razu */
  .kg-reveal,
  .kg-mobile-menu__link {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* Zamknięte menu nadal musi pozostać ukryte */
  .kg-mobile-menu:not(.is-open) {
    transform: none;
    filter: none;
  }

  /* Ekran powitalny bez powiększania — samo wygaszenie */
  .kg-intro__logo,
  .kg-intro.is-playing .kg-intro__logo,
  .kg-intro.is-done .kg-intro__logo {
    opacity: 1;
    transform: none;
  }

  .kg-intro.is-done {
    transition: opacity 300ms ease, visibility 0s 300ms !important;
  }
}