/* Hero strony głównej — wersja „kinowa” (2026-11-02). Markup: inc/hero.php, dźwięk: js/hero.js.
   Ruch (najazd kamery, mgiełka, światło) wyłącznie w CSS; prefers-reduced-motion = statyczne zdjęcie. */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 640px;
  height: min(760px, calc(100vh - 150px));
  display: flex;
  flex-direction: column;
  background: #18212e;
  color: #fff;
}

/* Dwa kadry: biuro (zespół przy laptopie) na start, po ~7 s przenika w halę i wraca.
   Każdy z wolnym najazdem kamery. Hala leży pod spodem, animuje się krycie biura. */
.hero-tlo {
  position: absolute;
  inset: -2%;
  z-index: -3;
  background-repeat: no-repeat;
  background-size: cover;
  animation: hero-najazd 26s ease-in-out infinite alternate;
}
.hero-tlo--hala {
  background-image: url(../images/hero-hala.webp?v=1);
  background-position: 72% 50%;
  transform-origin: 30% 45%;
}
.hero-tlo--biuro {
  background-image: url(../images/hero-tlo.webp?v=4);
  background-position: 100% 40%;
  background-color: #18212e;
  transform-origin: 70% 40%;
  animation: hero-najazd 26s ease-in-out infinite alternate, hero-przenikanie 26s ease-in-out infinite;
}
/* Domena bez marki platformy: to samo zdjęcie z zamalowanym logo na laptopie. */
.hero--bez-marki .hero-tlo--biuro { background-image: url(../images/hero-tlo-bm.webp?v=1); }
@keyframes hero-najazd {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -0.8%, 0); }
}
@keyframes hero-przenikanie {
  0%, 26%   { opacity: 1; }
  34%, 88%  { opacity: 0; }
  96%, 100% { opacity: 1; }
}

/* Mgiełka unosząca się w smugach światła */
.hero-mgla {
  position: absolute;
  inset: -20% -30%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 30% 40%, rgba(255, 244, 225, 0.16), transparent 70%),
    radial-gradient(30% 24% at 62% 26%, rgba(255, 255, 255, 0.10), transparent 70%),
    radial-gradient(26% 22% at 44% 72%, rgba(220, 232, 245, 0.08), transparent 70%);
  animation: hero-mgla 34s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes hero-mgla {
  from { transform: translate3d(-6%, 1%, 0); opacity: 0.7; }
  50%  { opacity: 1; }
  to   { transform: translate3d(6%, -2%, 0); opacity: 0.75; }
}

/* Przyciemnienie pod tekst: gęste z lewej, przezroczyste nad pracownikami */
.hero-woal {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 30, 46, 0.88) 0%, rgba(22, 33, 50, 0.74) 34%, rgba(24, 36, 54, 0.3) 60%, rgba(24, 36, 54, 0.04) 82%),
    linear-gradient(0deg, rgba(20, 30, 46, 0.5) 0%, rgba(20, 30, 46, 0) 30%);
}

.hero-rama {
  flex: 1;
  width: 100%; /* .rama ma margin:auto — w kolumnie flex skurczyłaby się do treści */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.hero-rama > * { max-width: 640px; }

.hero-h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: #e3e6eb !important;
  animation: hero-wejscie 0.9s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-h1-kreska { flex: 0 0 auto; width: 40px; height: 3px; background: var(--brand); }

.hero-haslo {
  margin: 0 0 24px !important;
  font-size: clamp(40px, 4.6vw, 66px) !important;
  font-weight: 800 !important;
  line-height: 1.03 !important;
  letter-spacing: -0.025em !important;
  color: #fff !important;
  text-wrap: balance;
  animation: hero-wejscie 0.9s 0.08s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-opis {
  margin: 0 0 34px !important;
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: #d3d7de !important;
  max-width: 600px;
  animation: hero-wejscie 0.9s 0.18s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hero-wejscie {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  animation: hero-wejscie 0.9s 0.28s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  border-radius: 12px;
  font: 600 16px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.hero-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hero-btn-glowny {
  padding: 0 28px;
  border: 0;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 30px rgba(239, 62, 54, 0.4);
}
.hero-btn-glowny:hover { background: var(--brand-dark); transform: translateY(-2px); }

.hero-lektor {
  padding: 0 22px 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-lektor:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); }
.hero-lektor-ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #101318;
}
.hero-ikona-pauza, .hero-lektor.gra .hero-ikona-play { display: none; }
.hero-lektor.gra .hero-ikona-pauza { display: block; }

/* Fala: spokojna w spoczynku, „mówi” podczas odtwarzania */
.hero-fala { display: flex; align-items: center; gap: 3px; height: 24px; }
.hero-fala i { display: block; width: 3px; height: 6px; border-radius: 2px; background: #fff; opacity: 0.55; }
.hero-fala i:nth-child(2) { height: 10px; } .hero-fala i:nth-child(3) { height: 14px; }
.hero-fala i:nth-child(4) { height: 9px; }  .hero-fala i:nth-child(5) { height: 16px; }
.hero-fala i:nth-child(6) { height: 11px; } .hero-fala i:nth-child(7) { height: 7px; }
.hero-lektor.gra .hero-fala i { opacity: 1; animation: hero-fala 0.9s ease-in-out infinite; }
.hero-lektor.gra .hero-fala i:nth-child(2n) { animation-delay: 0.15s; }
.hero-lektor.gra .hero-fala i:nth-child(3n) { animation-delay: 0.3s; }
.hero-lektor.gra .hero-fala i:nth-child(4n) { animation-delay: 0.45s; }
@keyframes hero-fala { 0%, 100% { height: 5px; } 50% { height: 22px; } }

.hero-linki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 22px;
  animation: hero-wejscie 0.9s 0.36s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-linki a {
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 4px;
}
.hero-linki a:hover { text-decoration-color: #fff; }

.hero-pasek {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(22, 32, 48, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-pasek-rama {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 56px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  font-size: 15px;
  color: #c9ced6;
}
.hero-pasek strong { color: #fff; font-weight: 600; }

/* Telefon: kadr na pracowników, przyciemnienie od dołu */
@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; }
  .hero-tlo--hala { background-image: url(../images/hero-hala-mobile.webp?v=1); background-position: 60% 30%; }
  .hero-tlo--biuro { background-image: url(../images/hero-biuro-mobile.webp?v=1); background-size: auto 62%; background-position: 70% 0; }
  .hero--bez-marki .hero-tlo--biuro { background-image: url(../images/hero-biuro-mobile-bm.webp?v=1); }
  .hero-woal {
    background: linear-gradient(180deg, rgba(20, 30, 46, 0.42) 0%, rgba(20, 30, 46, 0.8) 45%, rgba(22, 32, 48, 0.94) 100%);
  }
  .hero-rama { padding-top: 120px !important; padding-bottom: 32px !important; }
  .hero-opis { font-size: 17px !important; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-btn { justify-content: center; }
  .hero-pasek-rama { flex-direction: column; gap: 6px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-tlo, .hero-tlo--biuro, .hero-mgla, .hero-h1, .hero-haslo, .hero-opis, .hero-cta, .hero-linki,
  .hero-lektor.gra .hero-fala i { animation: none !important; }
}