/* Scene „Cały akt w projekcie” (Piotr 05.10, proposal _meta/plany/2026-10-05-scena-talia/propozycja.html): after the
   slogan a window is born from a point of light, the program drafts a deed in it, a deck of seven cards slides by the
   scroll, a curtain closes the picture to one strip of three sentences and the strip becomes the gold rule of the
   contact card. talia.js drives every value below from the scroll; this file is the resting look. */
/* The page ends 0.3 of a screen after the contact stands (talia.js: ZAMKNIECIE + 0.45 = 12.05, the last s = height / 100vh). */
.talia-przewijanie { position: relative; height: 1140vh; }   /* -95vh with KARTA0 3.1 -> 2.15 (05.10) */

.talia { position: fixed; inset: 0; z-index: 4; pointer-events: none; visibility: hidden; }
.talia.widoczna { visibility: visible; }
.talia-scena { position: absolute; inset: 0; will-change: filter, opacity; }
.talia .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The track: the hero window and the seven cards in one row, slid by --x card pitches. */
.tor {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: var(--szczelina);
  --w: clamp(520px, 40vw, 780px); --szczelina: clamp(16px, 1.4vw, 26px); --krok: calc(var(--w) + var(--szczelina));
  transform: translate3d(calc(var(--w) / -2 - var(--x, 0) * var(--krok)), -50%, 0);
  will-change: transform;
}
.bohater { position: relative; flex: 0 0 var(--w); }
.slowo-sceny {
  position: absolute; left: -20%; right: -20%; text-align: center; margin: 0;
  font-family: "Cinzel", Georgia, serif; font-weight: 600; letter-spacing: 0.05em; color: #f3eee6;
  font-size: clamp(40px, 4.4vw, 86px); line-height: 1; will-change: transform, opacity, filter;
  z-index: 0; opacity: 0;   /* under the window: talia.js slides each word out from behind it (as edolus.com) */
}
.slowo-sceny.gora { bottom: calc(100% + clamp(14px, 1.4vw, 24px)); }
.slowo-sceny.dol { top: calc(100% + clamp(10px, 1vw, 18px)); }
/* „projektu” in the slogan's slanted antiqua, lower case and in gold, as „notariatu” and „już tu jest” above it. */
.slowo-sceny .kursywa { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; letter-spacing: 0;
  font-size: 1.3em; color: #e4c07c; text-transform: none; }

/* Opaque and above the words, so they stay hidden behind it until they slide out. talia.js grows it from the seed
   with one scale (corners on the diagonals, the content scaled with it). */
.okno {
  position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(201, 165, 101, 0.38);
  background: radial-gradient(120% 90% at 28% 18%, #1d1710, #070605 70%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
  opacity: 0; transform: scale(0.002); transform-origin: 50% 50%; will-change: transform, opacity;
}
.zarodek { position: absolute; z-index: 2; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: #fff4dc; box-shadow: 0 0 14px 4px rgba(255, 214, 150, 0.6), 0 0 46px 10px rgba(255, 190, 110, 0.2);
  opacity: 0; will-change: transform, opacity; }

/* Inside the window: the drafting screen of the program, rebuilt on fictional data (a SYNT case, the notary and the
   office replaced by invented ones). Part names and the „n z N części” line come from the program (sporzadzanie.tsx:372). */
.sporzadzanie { position: absolute; inset: 0; display: grid; grid-template-columns: 38% 1fr; gap: 5%; padding: 5.5% 6%; align-items: stretch; }
.sporzadzanie .stan { display: flex; flex-direction: column; font-size: clamp(12px, 0.78vw, 14px); color: #c9c0b2; min-width: 0; }
.e-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #c9a565; }
.sporzadzanie .ile { font-family: "Cinzel", Georgia, serif; font-weight: 600; color: #f3eee6; font-size: clamp(16px, 1.25vw, 24px); margin: 0.5em 0 0.2em; font-variant-numeric: tabular-nums; }
.pasek-postepu { height: 3px; border-radius: 2px; background: #2b251d; overflow: hidden; margin: 0.4em 0 1em; }
.pasek-postepu i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #a77a36, #f3d79a); transform-origin: left; transform: scaleX(0); }
.czesci { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.32em; }
.czesci li { display: flex; align-items: center; gap: 0.6em; opacity: 0.4; transition: opacity 400ms var(--wejscie); }
.czesci li::before { content: ""; flex: 0 0 auto; width: 0.75em; height: 0.75em; border-radius: 50%; border: 1px solid #7d6c50; transition: background-color 300ms, border-color 300ms; }
.czesci li.trwa { opacity: 1; color: #f3eee6; }
.czesci li.trwa::before { border-color: #e4c07c; box-shadow: 0 0 8px rgba(228, 192, 124, 0.6); }
.czesci li.gotowa { opacity: 0.85; }
.czesci li.gotowa::before { background: #c9a565; border-color: #c9a565; }

/* The deed paper: the motif that runs through the deck, the deed growing card by card. */
.kartka { position: relative; background: #f7f3ea; color: #27231c; border-radius: 6px; overflow: hidden;
  font-family: "Newsreader", Georgia, serif; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.sporzadzanie .kartka { padding: 6% 7%; font-size: 12px; line-height: 1.55; }
.kartka .tyt { text-align: center; font-weight: 500; letter-spacing: 0.14em; margin: 0 0 0.9em; font-size: 1.05em; }
.kartka p { margin: 0 0 0.7em; text-align: justify; hyphens: auto; }
.kartka .fr { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--wejscie), transform 600ms var(--wejscie); }
.kartka .fr.jest { opacity: 1; transform: none; }

/* Cards */
.karta {
  flex: 0 0 var(--w); min-height: calc(var(--w) * 9 / 16); border-radius: 14px; position: relative; overflow: hidden;
  border: 1px solid rgba(201, 165, 101, 0.26);
  background: linear-gradient(150deg, rgba(42, 33, 22, 0.78), rgba(10, 9, 8, 0.9));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  display: grid; grid-template-columns: 44% 56%;
  opacity: calc(0.42 * var(--karty, 1)); transition: opacity 500ms var(--wejscie), border-color 500ms var(--wejscie);
}
/* Active: nearly opaque, so the gold waves behind do not run through the text. */
.karta.aktywna { opacity: var(--karty, 1); border-color: rgba(214, 172, 102, 0.55); background: linear-gradient(150deg, rgba(36, 29, 20, 0.95), rgba(10, 9, 8, 0.97)); }
.karta .opis { padding: clamp(20px, 2vw, 34px); display: flex; flex-direction: column; min-width: 0; }
.karta .etyk { min-height: 1.3em; }
.karta .etyk .karetka { display: inline-block; width: 0.55em; height: 1em; margin-left: 0.1em; vertical-align: -0.15em; background: #c9a565; opacity: 0; }
.karta.pisze .etyk .karetka { opacity: 1; }
.karta h3 { margin: 0.55em 0 0; font-family: "Cinzel", Georgia, serif; font-weight: 600; color: #f3eee6; letter-spacing: 0.02em;
  font-size: clamp(21px, 1.7vw, 32px); line-height: 1.14; text-wrap: balance; }
.karta h3 .kursywa { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; letter-spacing: 0; font-size: 1.16em; color: #e4c07c; }
.karta ul { margin: auto 0 0; padding: 0; list-style: none; font-size: clamp(13px, 0.86vw, 16px); line-height: 1.45; color: #c8bfb1; }
.karta li { position: relative; padding-left: 18px; margin-top: 0.5em; opacity: 0; transform: translateY(8px);
  transition: opacity 500ms var(--wejscie), transform 600ms var(--wejscie); }
.karta li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 9px; height: 1px; background: #c9a565; }
.karta.pokazana li { opacity: 1; transform: none; }
.karta.pokazana li:nth-child(2) { transition-delay: 70ms; }
.karta.pokazana li:nth-child(3) { transition-delay: 140ms; }
.karta .zrodlo { font-size: 12px; color: #8d8577; margin-top: 0.8em; }
.podglad { position: relative; margin: clamp(14px, 1.2vw, 20px) clamp(14px, 1.2vw, 20px) clamp(14px, 1.2vw, 20px) 0; min-width: 0; }
.podglad .kartka { position: absolute; inset: 0; padding: 7% 8%; font-size: clamp(12px, 0.7vw, 13px); line-height: 1.5; }

/* 2 · the same paragraph as two offices write it (two fictional SYNT cases, two offices' words) */
.dwie { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.dwie .kartka { position: relative; inset: auto; padding: 5% 7%; }
.dwie .kto { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.82em; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6a32; margin: 0 0 0.5em; }
/* 3 · the land-register entry types itself into the description */
.pisane-kw .kursor-tekstu { display: inline-block; width: 1px; height: 1.05em; background: #27231c; vertical-align: -0.15em; margin-left: 1px; }
.pisane-kw .kw { font-weight: 500; }
/* Left-aligned: typed word by word, justified lines opened half-line holes (reader 05.10). */
.pisane-kw p, .podglad .kartka p { text-align: left; }
/* 4 · costs fill in row by row */
.koszty { width: 100%; border-collapse: collapse; font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 1em; }
.koszty td { padding: 0.55em 0; border-bottom: 1px solid #e6dfd2; }
.koszty td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 1em; }
.koszty tr { opacity: 0.2; transition: opacity 400ms var(--wejscie); }
.koszty tr.jest { opacity: 1; }
.koszty tr.razem td { font-weight: 600; border-bottom: 0; padding-top: 0.8em; }
.koszty .gdzie { display: block; color: #8d8577; font-size: 0.82em; }
/* 5 · a gap field, then its value; the counter goes down */
.luka { display: inline-grid; vertical-align: baseline; }
.luka > span { grid-area: 1 / 1; transition: opacity 400ms var(--wejscie), transform 500ms var(--wejscie); }
.luka .pole { background: rgba(201, 165, 101, 0.2); outline: 1px solid #b8893f; border-radius: 3px; padding: 0 0.3em; color: #7a5a24; font-style: italic; }
.luka .wartosc { opacity: 0; transform: translateY(4px); }
.luka.wypelniona .pole { opacity: 0; transform: translateY(-4px); }
.luka.wypelniona .wartosc { opacity: 1; transform: none; }
.licznik-luk { position: absolute; right: 7%; bottom: 6%; font: 500 12px "Hanken Grotesk", system-ui, sans-serif; color: #7a5a24;
  background: #fff; border: 1px solid #e3d2ae; border-radius: 999px; padding: 4px 10px; font-variant-numeric: tabular-nums; }
/* 6 · the draft in a Word window, one word corrected */
.word { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; background: #f3f1ec; display: grid; grid-template-rows: auto auto 1fr; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.word .belka { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #2b579a; color: #fff; font: 500 12px "Hanken Grotesk", system-ui, sans-serif; }
.word .belka i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); }
.word .belka span { margin-left: 6px; }
.word .wstazka { height: 22px; background: #fff; border-bottom: 1px solid #ddd; }
.word .kartka { position: relative; inset: auto; margin: 10px 12% 0; border-radius: 0; box-shadow: 0 0 0 1px #e2ded6; padding: 7% 8%; }
.poprawka { position: relative; display: inline-grid; }
.poprawka > span { grid-area: 1 / 1; transition: opacity 300ms var(--wejscie), transform 400ms var(--wejscie); }
.poprawka .stare { background: transparent; transition: background-color 300ms var(--wejscie), opacity 300ms var(--wejscie); }
.poprawka.zaznaczone .stare { background: rgba(43, 87, 154, 0.25); }
.poprawka .nowe { opacity: 0; }
.poprawka.zmienione .stare { opacity: 0; }
.poprawka.zmienione .nowe { opacity: 1; }
/* 7 · PESEL leaves as a placeholder and comes back as the number */
/* Two boxes one above the other, the placeholder going down between them and the text coming back up. */
.pesel { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto auto; align-content: center; gap: 10px; }
.pesel .kartka { position: relative; inset: auto; padding: 5% 7%; }
.pesel .kartka-tyt { margin: 0 0 0.5em; font-size: 12px; letter-spacing: 0.14em; hyphens: none; }
.pesel .strzalka { font: 400 12px "JetBrains Mono", monospace; color: #c9a565; letter-spacing: 0.06em; display: flex; justify-content: center; gap: clamp(24px, 3vw, 56px); }
.pesel .strzalka b { display: inline-block; width: 1px; height: 14px; margin: 0 8px; vertical-align: middle; background: linear-gradient(180deg, transparent, #c9a565, transparent); }
.pesel .usluga { background: #15120e; color: #cfc6b8; border: 1px dashed #5c4f3b; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.pesel .usluga .kartka-tyt { color: #c9a565; }
.znacznik { font-family: "JetBrains Mono", monospace; font-size: 0.92em; background: rgba(201, 165, 101, 0.16); border-radius: 3px; padding: 0 0.3em; }
.pesel .fr { opacity: 0; transition: opacity 500ms var(--wejscie); }
.pesel .fr.jest { opacity: 1; }

/* Counter under the deck */
.wsk-talii { position: absolute; left: 50%; bottom: clamp(26px, 6vh, 64px); transform: translateX(-50%); display: flex; align-items: center; gap: 16px;
  font: 400 12.5px "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.18em; color: var(--tekst-cichy); opacity: 0; pointer-events: none;
  transition: opacity 500ms var(--wejscie); }
.wsk-talii.widoczny { opacity: 1; pointer-events: auto; }
.wsk-talii .kreska-postepu { width: clamp(140px, 12vw, 220px); height: 1px; background: rgba(201, 165, 101, 0.25); position: relative; overflow: hidden; }
.wsk-talii .kreska-postepu i { position: absolute; inset: 0; background: var(--zloto); transform-origin: left; transform: scaleX(0); }
.wsk-talii button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linia); background: none; color: var(--tekst);
  display: grid; place-items: center; transition: border-color 200ms ease, transform 160ms var(--wejscie); }
.wsk-talii button:active { transform: scale(0.94); }
.wsk-talii button:focus-visible { outline: 2px solid var(--zloto); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .wsk-talii button:hover { border-color: rgba(201, 165, 101, 0.7); } }
.wsk-talii svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The card break-up rendered in Blender, played by the scroll (talia.js, rozpad): over the deck, under the curtain. */
.rozpad-film { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
/* The light layer (glow and dust on black) is screened over the page: black leaves the sky as it is. Additive
   drawing inside one canvas wrote opaque black boxes over the live waves (wheel run 05.10). */
.rozpad-film.swiatlo { mix-blend-mode: screen; }
.uklad-lista .rozpad-film { display: none; }

/* Curtain: line one over the clear sky, two black bars close with the scroll, the punchline comes in halfway and
   the bars close over it (they come after the lines in the markup, so they paint over them); the seam where they
   meet becomes the gold rule of the contact. */
.kurtyna { position: fixed; inset: 0; z-index: 6; pointer-events: none; visibility: hidden; }
.kurtyna.widoczna { visibility: visible; }
/* 1 px past the middle each, so no hairline of sky stays between the closed bars. */
.kurtyna .belka { position: absolute; left: 0; right: 0; height: calc(50% + 1px); background: #000; will-change: transform; }
/* A gold edge on each bar: black on the black sky the closing could not be seen at all (wheel run 05.10). When the
   bars meet, the two edges become the seam that travels to the contact. */
.kurtyna .belka::after { content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #a77a36 18%, #f3d79a 50%, #c9a565 82%, transparent);
  box-shadow: 0 0 14px rgba(243, 215, 154, 0.35); opacity: calc(0.6 * var(--krawedz, 0)); }
.kurtyna .belka.g::after { bottom: 0; }
.kurtyna .belka.d::after { top: 0; }
.kurtyna .belka.g { top: 0; transform: translateY(-100%); }
.kurtyna .belka.d { bottom: 0; transform: translateY(100%); }
.kurtyna .zdanie { position: absolute; left: 0; right: 0; top: 50%; margin: 0; padding: 0 16px; text-align: center; transform: translateY(-50%);
  font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; color: #f3eee6;
  /* 2.9vw unclamped up to 1931 px: the Blender film of the dust writes this line for 1920, so the line must scale
     with the screen exactly as the film does (with a 54 px cap it stood 3 % off at 1440 and showed double). */
  font-size: clamp(28px, 2.9vw, 56px); line-height: 1.2; opacity: 0; will-change: opacity, transform, filter; }
.kurtyna .zdanie .zl { color: #e4c07c; }
/* The punchline at the size of line one (Piotr 05.10: „mają być tego samego rozmiaru”), in gold: one line simply
   replaces the other in the same place. */
.kurtyna .zdanie.puenta { color: #e4c07c; text-shadow: 0 0 40px rgba(228, 192, 124, 0.25); }

/* List layout: the content scrolls under the fixed corner logo, so a short shade sits behind the logo. */
.uklad-lista::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: clamp(72px, 10vh, 100px); z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0) 100%); }
/* Past the intro the sound button would sit over the cards and the contact on a phone (judge 05.10, round 2). */
.uklad-lista.poza-intro .dzwiek { opacity: 0; pointer-events: none; }
.uklad-lista .marka { z-index: 6; }
/* The sound button sits bottom right; on a phone it covered the address of the contact card (judge 05.10). */
.uklad-lista .dalej { padding-bottom: 110px; }

/* The invitation over the business card */

/* List layout: phone and reduced motion. No pinning, no slide; everything in one column, the scenes at their end state. */
.uklad-lista .talia-przewijanie { height: auto; }
.uklad-lista .talia, .uklad-lista .kurtyna { position: relative; inset: auto; visibility: visible; pointer-events: auto; z-index: 4; }
.uklad-lista .talia-scena { position: relative; padding: 18vh 16px 6vh; }
.uklad-lista .tor { position: relative; left: auto; top: auto; transform: none; flex-direction: column; gap: 28px; --w: min(100%, 720px); align-items: center; }
.uklad-lista .bohater { margin: 70px 0 60px; width: var(--w); }
.uklad-lista .okno { opacity: 1; transform: none; }
/* The 20 % overhang that lets the letters breathe beside the window pushed a phone page to 446 px: the browser
   zoomed out and the scroll hint fell under the bottom edge (05.10). In the column the words keep to it. */
.uklad-lista .slowo-sceny { left: 0; right: 0; opacity: 1; }
.uklad-lista .karta { opacity: 1; width: var(--w); aspect-ratio: auto; grid-template-columns: 1fr; }
.uklad-lista .karta li { opacity: 1; transform: none; }
.uklad-lista .podglad { height: 260px; margin: 0 16px 16px; }
.uklad-lista .wsk-talii { display: none; }
.uklad-lista .kurtyna { padding: 12vh 16px; display: grid; gap: 32px; }
.uklad-lista .kurtyna .belka { display: none; }
.uklad-lista .kurtyna .zdanie { position: relative; top: auto; transform: none; opacity: 1; }
@media (max-width: 760px) {
  .uklad-lista .sporzadzanie { grid-template-columns: 1fr; }
  .uklad-lista .sporzadzanie .stan { display: none; }
  .uklad-lista .okno { aspect-ratio: 4 / 5; }
  .uklad-lista .sporzadzanie .kartka { font-size: 12px; }
  .uklad-lista .podglad .kartka { font-size: 12px; }
}

/* Reduced motion: talia.js switches to the list layout (above); here the remaining transitions only shorten. */
@media (prefers-reduced-motion: reduce) {
  .karta, .karta li, .kartka .fr, .czesci li, .koszty tr, .pliki .fr, .luka > span, .poprawka > span, .wsk-talii { transition-duration: 1ms; }
}

/* Card 1 · documents of the case: files come in, then the facts read from them, each with its source. */
.pliki { position: absolute; inset: 0; border-radius: 8px; background: #12100d; border: 1px solid #2c261e; padding: 5%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.plik { background: #1d1a16; border: 1px solid #3a3227; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: #d4cbbd; }
.plik small { display: block; color: #8d8577; font-size: 12px; margin-top: 2px; }
.fakt { grid-column: 1 / -1; background: #f7f3ea; color: #26221c; border-radius: 8px; padding: 8px 10px; font: 12.5px/1.35 "Newsreader", Georgia, serif; display: flex; justify-content: space-between; gap: 12px; }
.fakt span { color: #8a6a32; font: 12px "Hanken Grotesk", system-ui, sans-serif; white-space: nowrap; }
.pliki .fr { opacity: 0; transform: translateY(8px); transition: opacity 450ms var(--wejscie), transform 550ms var(--wejscie); }
.pliki .fr.jest { opacity: 1; transform: none; }