/* ===========================================================================
   High-Flyer — System identyfikacji wizualnej
   Zasoby: assets/fonts, assets/logo, assets/kolory, assets/slajdy, assets/social
   Skrypty: assets/app.js, assets/logo-sources.js
   =========================================================================== */

@font-face{
  font-family:'TT Supermolot Neue Trl Ext';
  src:url('fonts/TTSupermolotNeue-500-Italic.ttf') format('truetype');
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'TT Supermolot Neue Trl Ext';
  src:url('fonts/TTSupermolotNeue-800-Italic.ttf') format('truetype');
  font-weight:800; font-style:italic; font-display:swap;
}
@font-face{ font-family:'Bai Jamjuree'; src:url('fonts/BaiJamjuree-300.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bai Jamjuree'; src:url('fonts/BaiJamjuree-400.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bai Jamjuree'; src:url('fonts/BaiJamjuree-500.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bai Jamjuree'; src:url('fonts/BaiJamjuree-600.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bai Jamjuree'; src:url('fonts/BaiJamjuree-700.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --black:#000000;
  --gray-900:#101010;
  --gray-800:#222222;
  --gray-500:#555555;
  --gray-400:#9D9D9D;
  --gray-300:#cccccc;
  --gray-200:#dfdfdf;
  --gray-100:#f5f5f5;
  --white:#ffffff;
  --indigo:#5831FD;
  --sky:#84BEFF;
  --volt:#E2FF05;
  --d-red:#E20028; --d-orange:#FD9C20; --d-yellow:#F8EF00;
  --d-green:#00D16D; --d-purple:#C65DF5; --d-blue:#036AF6;
  --font-body:'Bai Jamjuree', -apple-system, sans-serif;
  --font-display:'TT Supermolot Neue Trl Ext', 'Bai Jamjuree', sans-serif;
  --container:1160px;
  --radius:12px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--white);color:var(--gray-900);font-family:var(--font-body);font-size:16px;line-height:1.6;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--indigo);}
button{font-family:inherit;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh;}
.sidebar{
  position:fixed;top:0;left:0;width:248px;height:100vh;
  background:var(--white);border-right:1px solid var(--gray-200);
  padding:28px 18px;display:flex;flex-direction:column;overflow-y:auto;z-index:40;
}
.sidebar nav{display:flex;flex-direction:column;gap:1px;}
.sidebar .nav-group{margin-bottom:18px;}
.sidebar .nav-group:last-child{margin-bottom:0;}
.sidebar .nav-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--gray-300);padding:0 12px;margin:0 0 6px;}
.sidebar nav a{
  display:block;padding:8px 12px;border-radius:8px;
  color:var(--gray-400);font-size:14px;font-weight:500;position:relative;
  transition:background .25s var(--ease), color .25s var(--ease);
  opacity:0;transform:translateX(-10px);
  animation:navIn .5s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * 40ms); /* kolejność wejścia: --i na linku */
}
@keyframes navIn{to{opacity:1;transform:translateX(0);}}
.sidebar nav a:hover,
.sidebar nav a.active{background:var(--gray-100);color:var(--gray-900);}
.sidebar nav a.active{font-weight:600;}

main.content{margin-left:248px;flex:1;min-width:0;}

@media(max-width:860px){
  .sidebar{position:static;width:100%;height:auto;flex-direction:row;align-items:center;padding:14px 20px;overflow:visible;border-right:none;border-bottom:1px solid var(--gray-200);}
  .sidebar nav{flex-direction:row;flex-wrap:wrap;gap:4px;}
  main.content{margin-left:0;}
  .layout{flex-direction:column;}
}

section{padding:64px 0;border-bottom:1px solid var(--gray-200);}
#slajdy,#galeria{padding-bottom:0;}
section:last-of-type{border-bottom:none;}

/* Delikatne pojawianie się sekcji podczas scrollowania (progresywne wzbogacenie —
   klasę "has-reveal" dokłada JS, więc bez JS strona wygląda normalnie od razu). */
body.has-reveal section{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
body.has-reveal section.in-view{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  body.has-reveal section{opacity:1;transform:none;transition:none;}
}
h2.section-title{font-family:var(--font-body);font-weight:700;font-size:32px;margin:0 0 32px;color:var(--black);}
.section-title.has-subtitle{margin-bottom:12px;}
.section-subtitle{font-size:16px;line-height:1.5;color:var(--gray-500);max-width:640px;margin:0 0 32px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;}
.section-head .section-title{margin-bottom:0;}
.empty-state{border:1px dashed var(--gray-300);border-radius:var(--radius);padding:56px 24px;text-align:center;color:var(--gray-500);font-size:14px;}

/* ---------- Hero ---------- */
.hero{padding:64px 0 56px;}
.hero h1{font-family:var(--font-body);font-weight:700;font-size:34px;margin:0 0 14px;color:var(--black);}
.hero p{font-size:17px;max-width:600px;color:var(--gray-400);margin:0;}

/* ---------- Wyróżnienie tekstu zakreślaczem ----------
   Ten sam zabieg co na grafikach reklamowych: limonkowe tło pod tekstem.
   box-decoration-break:clone sprawia, że po zawinięciu do kolejnej linii
   każdy fragment dostaje własne tło, a nie jeden pasek przez całą szerokość. */
.hl{
  background:var(--volt);color:var(--gray-900);
  padding:2px 7px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
a.hl{
  font-weight:600;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
/* Nadpisuje globalne a:hover{color:var(--indigo)} — na hover zamieniamy
   kolory miejscami: czarne tło, limonkowy tekst. */
a.hl:hover,
a.hl:focus-visible{background:var(--gray-900);color:var(--volt);}
/* Bai Jamjuree nie ma znaku "↗", ma "→" — obracamy go o 45°, dzięki czemu
   grubość kreski zgadza się z krojem tekstu na każdym systemie. */
.hl-arrow{display:inline-block;transform:rotate(-45deg);transition:transform .2s var(--ease);}
a.hl:hover .hl-arrow{transform:rotate(-45deg) translateX(2px);}

/* ---------- Ikona kopiowania / pobierania ----------
   Jeden komponent dla wszystkich kontekstów (logo, kolory, paski, fonty).
   Zawartość (svg kopiuj + svg check + tooltip) wstrzykuje app.js. */
.copy-icon{
  position:absolute;width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid color-mix(in srgb, currentColor 35%, transparent);
  background:transparent;
}
.copy-icon svg{width:16px;height:16px;display:block;}
.copy-icon .ci-copy,
.copy-icon .ci-check{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
}
.copy-icon .ci-copy{transform:scale(1);opacity:1;}
.copy-icon .ci-check{transform:scale(0);opacity:0;}
.copied-active .copy-icon .ci-copy{transform:scale(0);opacity:0;}
.copied-active .copy-icon .ci-check{transform:scale(1);opacity:1;}
.copied-active .copy-icon{pointer-events:none;}
.copy-icon .ci-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);
  background:#18181b;color:#fff;font-family:var(--font-body);font-weight:500;
  font-size:11px;line-height:1;padding:5px 8px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease, transform .15s ease;z-index:5;
}
.copy-icon:hover .ci-tooltip{opacity:1;transform:translate(-50%,0);}
/* Na dotyku nie ma najechania kursorem, więc dymki są bezużyteczne — a mimo
   przezroczystości zajmowały miejsce i wystawały poza ekran, przez co stronę
   dawało się przeciągnąć w bok o kilka pikseli. */
@media(max-width:640px){.copy-icon .ci-tooltip{display:none;}}

/* ---------- Logo ---------- */
.logo-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:5px;}
.logo-grid .logo-card:first-child{grid-row:1 / 3;}
.logo-grid .logo-card:not(:first-child){aspect-ratio:1;}
@media(max-width:860px){.logo-grid{grid-template-columns:1fr 1fr;}.logo-grid .logo-card:first-child{grid-row:auto;aspect-ratio:1;}}
@media(max-width:560px){.logo-grid{grid-template-columns:1fr;}}
.logo-card{
  position:relative;border:none;border-radius:5px;padding:36px 20px;background:var(--gray-100);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:0;text-align:center;cursor:pointer;font:inherit;color:inherit;
  transition:background .2s ease;
}
.logo-card:hover{background:var(--volt);}
/* Rozmiar logo jest zdefiniowany RAZ na kafel i obowiązuje oba warianty
   (jasny i ciemny) — dzięki temu dark mode nie może się rozjechać z light. */
.logo-card img{width:auto;max-width:100%;height:auto;margin:auto;display:block;}
.logo-card[data-svg="horizontal"] img{max-height:44px;}
.logo-card[data-svg="avatar"] img{max-height:38px;}
.logo-card[data-svg="sygnet"] img{max-height:34px;}
.logo-card[data-svg="vertical"] img{max-height:82px;}
.logo-card[data-svg="text"] img{max-width:77%;}
.logo-card .logo-img-dark{display:none;}
#logo.dark-mode .logo-card{background:#1a1a1a;}
#logo.dark-mode .logo-card:hover{background:var(--indigo);}
#logo.dark-mode .logo-card .copy-icon{color:#fff;}
#logo.dark-mode .logo-card .logo-img-light{display:none;}
#logo.dark-mode .logo-card .logo-img-dark{display:block;}
.logo-card .copy-icon{
  left:50%;bottom:20px;transform:translateX(-50%);color:var(--gray-500);
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.logo-card:hover .copy-icon{opacity:1;pointer-events:auto;}
.logo-card.copied-active .copy-icon{opacity:1;pointer-events:none;}

/* ---------- Przełącznik motywu ---------- */
.theme-switch{border:none;background:none;padding:0;cursor:pointer;flex:none;}
.theme-switch .ts-track{
  display:inline-block;width:80px;height:36px;border-radius:999px;background:var(--gray-200);
  position:relative;transition:background .3s ease;
}
.theme-switch .ts-icon{
  position:absolute;top:50%;transform:translateY(-50%) scale(1.1);width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;z-index:2;
  transition:color .2s ease-out, transform .2s ease-out;
}
.theme-switch .ts-icon svg{width:16px;height:16px;display:block;}
.theme-switch .ts-icon-sun{left:10px;color:#000000;}
.theme-switch .ts-icon-moon{right:10px;color:#FFFFFF;transform:translateY(-50%) scale(1);}
.theme-switch.active .ts-icon-sun{color:#FFFFFF;transform:translateY(-50%) scale(1);}
.theme-switch.active .ts-icon-moon{color:#FFFFFF;transform:translateY(-50%) scale(1.1);}
.theme-switch .ts-thumb{
  position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);z-index:1;
  transition:transform .3s var(--ease), background .3s ease;
}
.theme-switch.active .ts-thumb{transform:translateX(44px);background:var(--gray-900);}

/* ---------- Kolory ---------- */
.pal-label{
  font-size:12.5px;font-weight:400;color:var(--gray-400);margin:0 0 14px;
  border:0.5px solid var(--gray-200);padding:5px 20px;border-radius:99px;display:inline-block;
}
.pal-label.spaced{margin-top:44px;}

.main-color-stack{display:flex;}
.main-color-stack .swatch.main-color{flex:1 1 0%;transition:flex .45s var(--ease);}
.main-color-stack:has(.swatch.main-color:hover) .swatch.main-color:not(:hover){flex:1 1 0%;}
.main-color-stack .swatch.main-color:hover{flex:0 0 419px;}
@media(max-width:860px){.main-color-stack{display:grid;grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.main-color-stack{display:grid;grid-template-columns:1fr;}}
.swatch.main-color{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;text-align:left;border:none;border-radius:0;padding:22px 20px;
  height:619px;cursor:pointer;font-family:var(--font-body);overflow:visible;
}
.main-color .mc-top{display:flex;flex-direction:column;gap:14px;}
.main-color .mc-name{
  display:inline-block;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-family:var(--font-display);font-style:italic;font-weight:800;
  font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:0.01em;
}
.main-color .mc-meta{font-size:13px;font-weight:500;font-style:italic;opacity:0.85;line-height:1.6;text-align:right;}
.main-color .mc-bottom{
  display:flex;flex-direction:column;align-items:flex-end;align-self:flex-end;
  opacity:0;transition:opacity .2s ease;
}
.main-color:hover .mc-bottom{opacity:1;}
.main-color .mc-photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .2s ease;z-index:0;
}
.main-color:hover .mc-photo{opacity:1;}
.main-color .mc-top,
.main-color .mc-bottom{position:relative;z-index:1;}
.main-color .copy-icon{position:relative;margin-bottom:8px;}

.swatch-bar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px 0;}
@media(max-width:760px){.swatch-bar-grid{grid-template-columns:repeat(3,1fr);}}
.swatch.swatch-bar{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  background:none;border:none;border-radius:0;padding:0;cursor:pointer;font-family:var(--font-body);
  position:relative;width:100%;overflow:visible;
}
.swatch-bar .bar{width:100%;height:5px;flex:none;}
.swatch-bar .label{margin-top:10px;padding-right:16px;}
.swatch-bar .name{font-size:13.5px;font-weight:700;color:var(--gray-900);transition:color .15s ease;}
.swatch-bar:hover .name{color:var(--gray-500);}
.swatch-bar .hex,
.swatch-bar .rgb{font-size:11.5px;color:var(--gray-400);margin-top:2px;}
.swatch-bar .copy-icon{
  right:5px;bottom:0;width:22px;height:22px;border:none;border-radius:6px;color:var(--gray-500);
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.swatch-bar .copy-icon svg{width:13px;height:13px;}
.swatch-bar:hover .copy-icon,
.swatch-bar.copied-active .copy-icon{opacity:1;}
.swatch-bar:hover .copy-icon{pointer-events:auto;}

/* ---------- Typografia ---------- */
.type-card{border:1px solid var(--gray-200);border-radius:5px;padding:30px 28px;margin-bottom:16px;position:relative;}
.type-card .copy-icon{
  top:16px;right:16px;color:var(--gray-900);border-color:var(--gray-300);cursor:pointer;
  transition:border-color .2s ease;
}
.type-card .copy-icon:hover{border-color:var(--gray-500);}
.sample-display{font-family:var(--font-display);font-style:italic;font-size:clamp(18px,2.9vw,29px);margin:0 0 8px;line-height:1.2;white-space:nowrap;overflow-x:auto;}
.sample-body{font-family:var(--font-body);font-size:clamp(17px,2.5vw,24px);margin:0 0 8px;line-height:1.4;white-space:nowrap;overflow-x:auto;}
.meta{font-size:13px;color:var(--gray-400);}

.weights-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
/* "Obramowanie" chipa to inset box-shadow, nie border: box-shadow nie bierze udziału
   w modelu pudełkowym, więc jego zniknięcie na hover/active nie przesuwa przycisku. */
.weight-chip{
  border:none;border-radius:99px;padding:10px 16px;font-size:13px;color:var(--gray-800);
  background-color:var(--white);cursor:pointer;
  box-shadow:inset 0 0 0 0.5px var(--gray-200);
  transition:box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.weight-chip:hover{box-shadow:none;background-color:var(--gray-100);}
.weight-chip:active,
.weight-chip.active{box-shadow:none;background-color:var(--gray-200);}

/* ---------- Slajdy ---------- */
.slide-band{background:#000;}
.slide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
@media(max-width:860px){.slide-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.slide-grid{grid-template-columns:1fr;}}
.slide-card{overflow:hidden;}
.slide-card img{
  /* height:auto jest konieczne: zdjęcia mają w HTML atrybuty width/height
     (potrzebne przy loading="lazy"), a przeglądarka traktuje je jak wartości
     CSS. Bez tej linii atrybut height wygrywa z aspect-ratio i kafle robią
     się pionowe. */
  aspect-ratio:16/9;object-fit:cover;width:100%;height:auto;display:block;
  opacity:0.2;transform:scale(1);
  transition:opacity .1s ease, transform .3s cubic-bezier(.25,.8,.25,1);
}
.slide-card img:hover{opacity:1;transform:scale(1.05);}

/* ---------- Karuzele ---------- */
.carousel-block{margin-bottom:40px;}
.carousel-block:last-child{margin-bottom:0;}
.carousel-title{
  font-size:13px;font-weight:400;color:var(--gray-400);margin:0 0 14px;
  border:0.5px solid var(--gray-200);padding:5px 20px;border-radius:99px;display:inline-block;
}
.carousel{
  display:flex;gap:5px;overflow-x:auto;cursor:grab;user-select:none;
  padding-left:calc(32px + max(0px, (100vw - 248px - var(--container)) / 2));
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  width:100%;overscroll-behavior-x:contain;
}
.carousel.dragging{cursor:grabbing;}
/* max-width:none wyłącza globalne img{max-width:100%} — bez tego na wąskim
   ekranie szerokie zdjęcie ściskało się do szerokości okna przy zachowanej
   wysokości, czyli deformowało proporcje. Ma wystawać poza kadr i dać się
   przewinąć. */
.carousel img{height:420px;width:auto;max-width:none;flex:none;display:block;-webkit-user-drag:none;}
.carousel::-webkit-scrollbar{display:none;}
/* Wyjątek tylko dla karuzeli "Przyrządy pokładowe": mniejsze ikony, większy odstęp. */
#carousel-przyrzady{gap:25px;}
#carousel-przyrzady img{height:336px;}
@media(max-width:640px){.carousel img{height:280px;} .carousel{padding-left:20px;}}

.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;}
.carousel-dashes{display:flex;gap:6px;flex-wrap:wrap;}
.carousel-dash{
  width:60px;height:5px;border:none;padding:0;cursor:pointer;background:var(--gray-200);
}
.carousel-dash:hover{background:var(--gray-300);}
.carousel-dash.active{background:var(--gray-900);}
.carousel-arrows{display:flex;gap:8px;flex:none;}
.carousel-arrow{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--gray-200);background:var(--white);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--gray-800);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.carousel-arrow:hover{background:var(--gray-100);border-color:var(--gray-300);}
.carousel-arrow.disabled{opacity:0.3;pointer-events:none;}
.carousel-arrow svg{width:15px;height:15px;}
@media(max-width:640px){.carousel-dashes{display:none;}}

/* ---------- Stopka ---------- */
footer{padding:40px 0;}
footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
footer img{height:16px;}
footer .meta{font-size:12.5px;color:var(--gray-500);}