/* ===========================================
   ABOUT OVERLAY (redesign 2026)

   Pełnoekranowa, scrollowalna warstwa nieprzezroczysta nad dziełem.
   Layout 1:1 odpowiada frame'owi 1920×9136 z Figmy. Każdy element
   pozycjonowany absolutnie poprzez --u (jednostka skali = 1px @ 1920).

   Plansza pod spodem nie jest unmountowana — działa dalej, jest
   wyłącznie zasłonięta.
   =========================================== */

/* ---------- 1. Container + document-scroll mode ---------- */

#about.about-overlay {
  display: none;
  position: relative;
  z-index: 50;
  width: 100%;
  max-width: none;
  margin: 0;
  background: var(--about-bg-dark);
  container-type: inline-size;
  pointer-events: none;
  overscroll-behavior: contain;
}

body.about-active #about.about-overlay {
  display: block;
  pointer-events: auto;
}

body.about-active #app {
  max-width: none;
  align-items: stretch;
}

/* About is the only document content while active, so the browser scrollbar
   belongs to the About page rather than an internal overlay wrapper. */
body.about-active #header,
body.about-active .timeline-viewport,
body.about-active #below-plansza,
body.about-active #tuning-container,
body.about-active #day-story {
  display: none;
}

/* ---------- 2. Scroll wrapper + design-space stage ---------- */

.about-overlay .about-scroll {
  --about-u: calc(min(100cqw, var(--canvas-max-width)) / 1920);
  width: 100%;
  min-height: 100vh;
  overflow-y: visible;
  overflow-x: hidden;
  background: linear-gradient(
    to bottom,
    var(--about-bg-dark) 0,
    var(--about-bg-dark) calc(4652 * var(--about-u)),
    var(--about-bg-light) calc(4652 * var(--about-u)),
    var(--about-bg-light) 100%
  );
}

.about-overlay .about-stage {
  /* --u = 1 design-pixel; capped before the ultrawide header layout kicks in. */
  --u: var(--about-u);
  position: relative;
  width: min(100%, var(--canvas-max-width));
  height: calc(9136 * var(--u));
  margin: 0 auto;
  /* Min-height fallback dla sytuacji, gdy --u jest bardzo małe (mobile) */
  min-height: 100vh;
}

/* ---------- 3. Tła sekcji (dark / light split) ---------- */

.about-overlay .about-bg {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
}

.about-overlay .about-bg-dark {
  top: 0;
  height: calc(4755 * var(--u));
  background: var(--about-bg-dark);
}

.about-overlay .about-bg-light {
  top: calc(4652 * var(--u));
  bottom: 0;
  background: var(--about-bg-light);
}

/* ---------- 4. Sticky CLOSE pill ---------- */

.about-overlay .about-close-pill {
  position: fixed;
  top: var(--about-close-y, var(--about-close-top));
  left: var(--about-close-x, auto);
  right: var(--about-close-right-pos, var(--about-close-right));
  width: var(--about-close-pill-w, 140px);
  height: var(--about-close-pill-h, 72px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--about-text-on-dark);
  border-radius: var(--about-close-pill-radius, 44px);
  color: var(--about-text-on-dark);
  font-family: var(--font-primary);
  font-size: var(--about-close-pill-font-size, 17px);
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.about-active .about-overlay .about-close-pill {
  opacity: 1;
  pointer-events: auto;
}

/* Match the header ABOUT pill dimensions at every breakpoint. */
@media (max-width: 1500px) {
  .about-overlay .about-close-pill {
    --about-close-pill-w: 130px;
    --about-close-pill-h: 64px;
    --about-close-pill-radius: 40px;
    --about-close-pill-font-size: 16px;
  }
}

@media (max-width: 1300px) {
  .about-overlay .about-close-pill {
    --about-close-pill-w: 110px;
    --about-close-pill-h: 56px;
    --about-close-pill-radius: 36px;
    --about-close-pill-font-size: 14px;
  }
}

@media (max-width: 1100px) {
  .about-overlay .about-close-pill {
    --about-close-pill-w: 96px;
    --about-close-pill-h: 50px;
    --about-close-pill-radius: 32px;
    --about-close-pill-font-size: 13px;
  }
}

@media (max-width: 900px) {
  .about-overlay .about-close-pill {
    --about-close-pill-w: 80px;
    --about-close-pill-h: 42px;
    --about-close-pill-radius: 28px;
    --about-close-pill-font-size: 12px;
  }
}

@media (max-width: 700px) {
  .about-overlay .about-close-pill {
    --about-close-pill-w: 70px;
    --about-close-pill-h: 36px;
    --about-close-pill-radius: 24px;
    --about-close-pill-font-size: 11px;
  }
}

@media (max-width: 480px) {
  .about-overlay .about-close-pill {
    --about-close-pill-w: 60px;
    --about-close-pill-h: 32px;
    --about-close-pill-radius: 22px;
    --about-close-pill-font-size: 10px;
  }
}

@media (max-width: 360px) {
  .about-overlay .about-close-pill { --about-close-pill-w: 54px; }
}

.about-overlay .about-close-pill:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* CLOSE pill na jasnym tle (kiedy scroll przekroczy próg) */
.about-overlay .about-close-pill.is-on-light {
  border-color: var(--about-text-on-light);
  color: var(--about-text-on-light);
}

.about-overlay .about-close-pill.is-on-light:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* ---------- 5. Wspólne reguły dla elementów na stage ---------- */

.about-overlay .about-stage > :not(.about-bg) {
  position: absolute;
  z-index: 1;
  margin: 0;
}

/* Typografia — kolory w zależności od tła */
.about-overlay .about-hero,
.about-overlay .about-bigline,
.about-overlay .about-quote,
.about-overlay .about-people,
.about-overlay .about-legend-label {
  font-family: var(--font-secondary);
  color: var(--about-text-on-dark);
  font-weight: 400;
  font-style: normal;
}

.about-overlay .about-legend-label {
  font-family: var(--font-primary);
  font-size: calc(12 * var(--u));
  letter-spacing: 0.02em;
  text-align: center;
}

.about-overlay .about-hero,
.about-overlay .about-bigline {
  font-size: calc(96 * var(--u));
  line-height: var(--about-hero-line);
  text-align: center;
}

.about-overlay .about-quote {
  font-size: calc(31 * var(--u));
  line-height: var(--about-quote-line);
  text-align: center;
}

/* Min 12px dla narracyjnych akapitów. .a-quote-side w infografice świadomie
   pomijamy — designed scaling musi zostać, żeby nie rozbić kompozycji legend.
   max() dba o ciągłość: powyżej ~743px viewportu wygrywa designed (>12px),
   poniżej — wygrywa minimum. Bez breakpointu, bez skoku. */
.about-overlay .a-warsaw-intro,
.about-overlay .a-authors {
  font-size: max(calc(31 * var(--u)), 12px);
}

.about-overlay .about-people {
  font-size: calc(400 * var(--u));
  line-height: 1;
  text-align: center;
}

.about-overlay .about-bigline.a-bigline-3,
.about-overlay .a-people,
.about-overlay .a-authors {
  color: var(--about-text-on-light);
}

.about-overlay .about-quote a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-skip-ink: none;
}

.about-overlay .about-quote a:hover {
  opacity: 0.75;
}

/* ---------- 6. Pozycje sekcji (1920×9136 design space) ---------- */

/* A: Hero text — y=180, x=110, w=1692, h=861 */
.about-overlay .a-hero-1 {
  top: calc(180 * var(--u));
  left: calc(110 * var(--u));
  width: calc(1692 * var(--u));
  height: calc(861 * var(--u));
}

/* B: Mini-legendy */

.about-overlay .a-news-lbl       { top: calc(936 * var(--u));  left: calc(402 * var(--u));  width: calc(114 * var(--u)); }
.about-overlay .a-news-svg       { top: calc(971 * var(--u));  left: calc(474 * var(--u));  width: calc(26  * var(--u)); height: calc(86  * var(--u)); }

.about-overlay .a-temp-lbl       { top: calc(1024 * var(--u)); left: calc(957 * var(--u)); width: calc(114 * var(--u)); }
.about-overlay .a-temp-svg       { top: calc(997 * var(--u));  left: calc(500 * var(--u)); width: calc(582 * var(--u)); height: calc(582 * var(--u)); }

.about-overlay .a-sky-lbl        { top: calc(925 * var(--u));  left: calc(1278 * var(--u)); width: calc(114 * var(--u)); }
.about-overlay .a-sky-svg        { top: calc(956 * var(--u));  left: calc(1201 * var(--u)); width: calc(601 * var(--u)); height: calc(170 * var(--u)); }
.about-overlay .a-sky-mini       { top: calc(786 * var(--u));  left: calc(1531 * var(--u)); width: calc(26  * var(--u)); height: calc(86  * var(--u)); }

.about-overlay .a-wind-lbl       { top: calc(1413 * var(--u)); left: calc(341 * var(--u)); width: calc(114 * var(--u)); }
.about-overlay .a-wind-svg       { top: calc(1181 * var(--u)); left: calc(1534 * var(--u)); width: calc(39  * var(--u)); height: calc(29  * var(--u)); }
.about-overlay .a-wind-arrow     {
  top: calc(1450 * var(--u));
  left: calc(360 * var(--u));
  width: calc(99.083 * var(--u));
  height: calc(82 * var(--u));
  color: var(--about-text-on-dark);
}

.about-overlay .a-water-svg      { top: calc(1181 * var(--u)); left: calc(162 * var(--u)); width: calc(547 * var(--u)); height: calc(125 * var(--u)); }
.about-overlay .a-water-lbl      { top: calc(1281 * var(--u)); left: calc(361 * var(--u)); width: calc(114 * var(--u)); }

.about-overlay .a-stars-svg      { top: calc(1273 * var(--u)); left: calc(962 * var(--u)); width: calc(478 * var(--u)); height: calc(392 * var(--u)); }
.about-overlay .a-stars-lbl      { top: calc(1579 * var(--u)); left: calc(1164 * var(--u)); width: calc(114 * var(--u)); }

/* C: Side quote — y=1296, x=1201, w=629, h=408 */
.about-overlay .a-quote-side {
  top: calc(1296 * var(--u));
  left: calc(1201 * var(--u));
  width: calc(629 * var(--u));
  text-align: left;
}

/* D: Big closing line + decorative pill */
.about-overlay .a-pillbox {
  top: calc(1665 * var(--u));
  left: calc(157 * var(--u));
  width: calc(1579 * var(--u));
  height: calc(315 * var(--u));
  border: 1px solid var(--about-border-on-dark);
  border-radius: 9999px;
  pointer-events: none;
  z-index: 0;
}
.about-overlay .a-bigline-1 {
  top: calc(1721 * var(--u));
  left: calc(110 * var(--u));
  width: calc(1692 * var(--u));
}

/* E: mock1 bitmap — y=2086, full bleed 1920×1280 */
.about-overlay .a-mock1 {
  top: calc(2086 * var(--u));
  left: 0;
  width: 100%;
  height: calc(1280 * var(--u));
  object-fit: cover;
  display: block;
}

/* F: Big text 2 — y=3452, x=110, w=1692 */
.about-overlay .a-bigline-2 {
  top: calc(3452 * var(--u));
  left: calc(110 * var(--u));
  width: calc(1692 * var(--u));
}

/* G: Warsaw intro — y=4335, x=558, w=749 */
.about-overlay .a-warsaw-intro {
  top: calc(4335 * var(--u));
  left: calc(558 * var(--u));
  width: calc(749 * var(--u));
}

/* H: Big black text na jasnym — y=4864, x=137, w=1692 */
.about-overlay .a-bigline-3 {
  top: calc(4864 * var(--u));
  left: calc(137 * var(--u));
  width: calc(1692 * var(--u));
}

/* I: snapshot dzieła — y=6000, full 1920×1080 */
.about-overlay .a-grid {
  top: calc(6000 * var(--u));
  left: 0;
  width: 100%;
  height: calc(1080 * var(--u));
  object-fit: cover;
  display: block;
}

/* J: *People — y=7489, x=43, w=1692 */
.about-overlay .a-people {
  top: calc(7489 * var(--u));
  left: calc(43 * var(--u));
  width: calc(1692 * var(--u));
  z-index: 2;
}

/* K: Authors — y skorygowany pod rzeczywiste metryki webfontu */
.about-overlay .a-authors {
  top: calc(7924 * var(--u));
  left: calc(586 * var(--u));
  width: calc(748 * var(--u));
  z-index: 1;
}

/* L: Portrety — y=8204, split 988/932 × 932 */
.about-overlay .a-photos {
  top: calc(8204 * var(--u));
  left: 0;
  width: calc(1920 * var(--u));
  height: calc(932 * var(--u));
  display: grid;
  grid-template-columns: calc(988 * var(--u)) calc(932 * var(--u));
  gap: 0;
}
.about-overlay .a-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 7. RWD ----------
   About jest skalowanym frame'em Figmy; geometria nie zmienia się breakpointami. */

.about-overlay .a-photos img:first-child {
  object-position: center top;
}

/* ---------- 7b. Mobile/portrait: layout pod min font 12px ----------
   Min font (12px) zaaplikowany globalnie w sekcji 5. Tutaj dokładamy:

   1. Widening kontenerów warsaw-intro/authors z 749 do 1500 design-px,
      żeby zbumpowany tekst zwinął się do 3–6 linii zamiast 8–11.
   2. Pchnięcie granicy dark/light w dół, żeby warsaw-intro nie zalał
      się w jasną sekcję jako biały tekst na białym.
   3. Translacje w dół dla wszystkiego pod warsaw-intro/authors, żeby
      absorbować ich przyrost wysokości.

   Shifty skalowane przez clamp() z viewportem: max przy 320px, 0 przy
   progach gdzie overflow naturalnie znika (dzięki widening tekst przy
   szerszych viewportach jest krótszy niż w oryginale). To eliminuje
   pusty dark gap pod warsaw-intro przy ~600–700px viewportach.

   Progi clamp() (gdzie shift = 0) wynikają z analizy:
   - darklight: warsaw-intro nie przekracza granicy >= 480px viewportu
   - warsaw_growth: warsaw nie przekracza bigline-3 >= 360px viewportu
   - authors_growth: authors nie przekracza photos >= 580px viewportu */
@media (max-width: 700px) {
  .about-overlay {
    --about-darklight-shift: clamp(0px, calc((480px - 100vw) * 0.32), 50px);
    --about-warsaw-growth:   clamp(0px, calc((360px - 100vw) * 0.5),  20px);
    --about-authors-growth:  clamp(0px, calc((580px - 100vw) * 0.31), 80px);
  }

  .about-overlay .a-warsaw-intro,
  .about-overlay .a-authors {
    left: calc(210 * var(--u));
    width: calc(1500 * var(--u));
  }

  .about-overlay .about-bg-dark {
    height: calc(4755 * var(--u) + var(--about-darklight-shift));
  }
  .about-overlay .about-bg-light {
    top: calc(4652 * var(--u) + var(--about-darklight-shift));
  }

  .about-overlay .a-bigline-3,
  .about-overlay .a-grid,
  .about-overlay .a-people,
  .about-overlay .a-authors {
    transform: translateY(
      calc(var(--about-warsaw-growth) + var(--about-darklight-shift))
    );
  }

  .about-overlay .a-photos {
    transform: translateY(
      calc(
        var(--about-warsaw-growth)
        + var(--about-darklight-shift)
        + var(--about-authors-growth)
      )
    );
  }

  .about-overlay .about-stage {
    height: calc(
      9136 * var(--u)
      + var(--about-warsaw-growth)
      + var(--about-darklight-shift)
      + var(--about-authors-growth)
    );
  }
}

/* ---------- 8. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #about.about-overlay,
  body.about-active #header,
  body.about-active .timeline-viewport,
  body.about-active #below-plansza,
  body.about-active #tuning-container,
  body.about-active #day-story,
  .about-overlay .about-close-pill {
    transition-duration: 0.05s !important;
  }
}

/* ---------- 9. Header morpfing podczas about-active (ABOUT pill ukryty) ---------- */

body.about-active .header-about {
  display: none;
}