/* =========================================================
   SCROLL CONTAINER – JEDYNE ŹRÓDŁO SCROLLA
   ========================================================= */
.applications-scroll {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 10;

  pointer-events: auto;

  /* stabilizacja scrolla */
  -webkit-overflow-scrolling: touch;
}

.applications-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}



/* =========================================================
   PAGE – GENERUJE ZAKRES SCROLLA (BUFFER = PŁYNNOŚĆ)
   ========================================================= */
.applications-page {
  height: calc(100vh + 160px); /* 🔑 buffer = wolniejszy, cięższy ruch */
  pointer-events: none;
}



/* =========================================================
   OVERLAY – KONTROLOWANY WYŁĄCZNIE PRZEZ TRANSFORM
   ========================================================= */
.applications-overlay {
  position: fixed;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(14, 18, 28, 0.98),
    rgba(14, 18, 28, 0.92)
  );

  pointer-events: none;

  /* ❌ USUWAMY FLEXA */
  display: block;

  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}




/* =========================================================
   CONTENT – TYPOGRAFIA (CZYTELNA, MAGAZYNOWA)
   ========================================================= */
.applications-content {
  max-width: none;
  margin: 0 auto;

  padding-left: 10vw;
  padding-right: 10vw;

  color: #e8ebf2;

  column-count: 3;
  column-gap: 4vw;
  column-fill: balance;

  text-align: justify;
  text-justify: inter-word;

  hyphens: auto;
  line-height: 1.55;
  letter-spacing: 0.01em;
}


/* --- PARAGRAFY --- */
.applications-content p {
  font-size: clamp(15px, 1.1vw, 18px); /* mniejsze, stabilne */
  line-height: 1.7;                    /* komfort czytania */
  margin: 0 0 1.2em 0;
  font-weight: 400;
  break-inside: avoid;  
}

/* opcjonalny lead (jeśli używasz) */
.applications-content .lead {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.65;
  font-weight: 500;
  margin-bottom: 1.6em;
}

.applications-content-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;

  transform: translateY(-50%);
  pointer-events: none;
}


@media (max-width: 1200px) {
  .applications-content {
    column-count: 2;
  }
}

@media (max-width: 720px) {
  .applications-content {
    column-count: 1;
    max-width: 640px;
  }
}


/* =========================================================
   TITLE – ZOSTAJE JAK JEST (DROBNA KOREKTA TYLKO OPCJONALNA)
   ========================================================= */
/* wspólny anchor */
:root {
  --applications-title-top: 4vh;
}

.applications-title {
  position: absolute;
  left: 14vw;
  top: var(--applications-title-top);

  margin: 0;

  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;

  color: rgba(132, 170, 235, 0.88);

  transform: scale(1);
  transform-origin: left top;

  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.6s ease-out;

  pointer-events: none;
  will-change: transform, color;
}


body.nav-invert .applications-title {
  /* 🔹 prawie zlane z tłem */
  color: rgb(5, 7, 12, 0.2);

  /* 🔹 POWIĘKSZENIE – kinowe, ale subtelne */
  transform: scale(1.48);

  transition:
  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.48s,
  color 0.6s ease-out;

}

/* =========================================================
   SCROLL UNDERLINE – PRAWA STRONA → W KIERUNKU TYTUŁU
   ========================================================= */
.scroll-underline {
  position: absolute;

  /* zakotwiczenie PRAWEJ strony layoutu */
  right: 14vw;

  /* pionowo w osi tytułu */
  top: calc(var(--applications-title-top) + 0.85em);

  /* szerokość robocza w stronę tytułu */
  width: calc(100vw - 28vw - 32ch);
  height: 2px;

  background: linear-gradient(
    to left,
    rgba(132, 170, 235, 0.85),
    rgba(132, 170, 235, 0.15)
  );

  /* animacja ma iść W LEWO */
  transform-origin: right center;

  opacity: 1;
  pointer-events: none;

  will-change: transform, opacity;
}