/* Safelight: strona zapowiedzi w klimacie ciemni.
   Czerwień to tylko światło i akcenty; tekst jest ciepłą bielą na prawie czarnym tle (kontrast WCAG AA i lepiej).
   Animacje: CSS sterowany przewijaniem (animation-timeline), bez bibliotek i bez JS. Bez obsługi albo przy
   „ogranicz ruch” strona pokazuje stan końcowy: wywołaną odbitkę i zaznaczoną stykówkę. Fonty systemowe (na Macu New York i SF). */
:root {
  --tlo: #0e0b0b;
  --tlo2: #161111;
  --karta: #1b1414;
  --linia: #3a2a28;
  --papier: #f3ece4;
  --papier2: #e3d9d0;
  --szary: #bcb0a8;
  --czerwien: #ff5a4e;      /* tekst i akcenty na ciemnym tle, kontrast ok. 6:1 */
  --lampa: #c9231d;         /* tło przycisku pod białym tekstem, kontrast ok. 5,6:1 */
  --lampa-hover: #a91c17;
  --olowek: #ff3b2f;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --szer: 1120px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--tlo); color: var(--papier); font: 17px/1.6 var(--sans); overflow-x: clip; }
/* Ziarno filmu: jedna mała nieruchoma warstwa nad całą stroną */
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background: url(/img/ziarno.webp); opacity: .06; }
img { max-width: 100%; display: block; }
a { color: var(--papier); text-decoration-color: var(--czerwien); text-underline-offset: 3px; }
a:hover { color: #fff; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.ukryty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.przejdz { position: absolute; left: 16px; top: -60px; background: var(--papier); color: var(--tlo); padding: 8px 14px; border-radius: 6px; z-index: 60; }
.przejdz:focus { top: 12px; }
.wnetrze { max-width: var(--szer); margin: 0 auto; padding: 0 20px; }
.nadtytul { color: var(--czerwien); font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }

/* Nagłówek strony: przyklejony, ciemnieje przy przewijaniu */
.gora { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: rgba(14, 11, 11, .9); }
.gora .wnetrze { display: flex; align-items: center; gap: 18px; padding-top: 12px; padding-bottom: 12px; }
.znak { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; text-decoration: none; color: var(--papier); }
.znak::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--czerwien); box-shadow: 0 0 10px 3px rgba(255, 70, 55, .55), 0 0 30px 10px rgba(255, 40, 30, .25); }
.gora nav { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: .95rem; }
.gora nav a { text-decoration: none; }
.gora nav a:hover { text-decoration: underline; }
.gora .na-liste { padding: 7px 14px; border-radius: 999px; background: var(--lampa); color: #fff; font-weight: 600; }
.gora .na-liste:hover { background: var(--lampa-hover); text-decoration: none; }

/* Pierwszy ekran: kuweta z wywoływaczem na pełnym ekranie. Lampa zapala się z mrugnięciem, odbitka wychodzi z papieru
   (ciemnia.js, WebGL), płyn faluje pod kursorem i palcem. Bez ruchu albo bez WebGL: gotowa odbitka. */
.start { position: relative; overflow: hidden; background: #000; }
.kadr { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: #000; touch-action: pan-y; }
.kadr img, .kadr canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.kadr .papier, .kadr canvas { opacity: 0; }
.kadr::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%); }
.kadr::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #000; opacity: 0; }
.podpowiedz { position: absolute; z-index: 4; right: 16px; bottom: 16px; margin: 0; font-size: .82rem; font-weight: 600; color: #fff; background: rgba(14, 11, 11, .78); border: 1px solid rgba(255, 90, 78, .5); padding: 6px 12px; border-radius: 999px; opacity: 0; pointer-events: none; }
.start .wnetrze { position: relative; z-index: 5; padding-top: 28px; padding-bottom: 56px; }
.start .tresc { max-width: 600px; }
.start h1 { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.3rem); line-height: 1.05; text-shadow: 0 2px 22px rgba(0, 0, 0, .9); }
.wstep { font-size: 1.08rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .95); }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 18px; }
.zachety { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; color: var(--papier2); }
.zachety li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--czerwien); box-shadow: 0 0 8px rgba(255, 60, 45, .8); vertical-align: 1px; }
@media (max-width: 899px) {
  .start { padding-top: 56px; }
  .start .wnetrze { margin-top: -40px; }
  .kadr::before { background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .85) 12%, rgba(0, 0, 0, 0) 34%); }
  .podpowiedz { top: 12px; bottom: auto; }
}
@media (min-width: 900px) {
  .start { min-height: 100svh; display: flex; align-items: center; }
  .kadr { position: absolute; inset: 0 0 0 28%; aspect-ratio: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  .kadr::before { background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .86) 24%, rgba(0, 0, 0, .4) 40%, rgba(0, 0, 0, 0) 54%), radial-gradient(120% 90% at 60% 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .6) 100%), linear-gradient(0deg, var(--tlo) 0%, rgba(0, 0, 0, 0) 18%); }
  .start .wnetrze { width: 100%; padding-top: 110px; }
  .start .tresc { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); }
}

/* Przyciski i formularz */
.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 9px; background: var(--lampa); color: #fff; font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 0 24px rgba(201, 35, 29, .4); }
.przycisk:hover { background: var(--lampa-hover); color: #fff; }
.przycisk.drugi { background: rgba(14, 11, 11, .6); border: 1px solid #6a4c46; box-shadow: none; }
.przycisk.drugi:hover { background: var(--karta); }
.lista { position: relative; background: rgba(22, 17, 17, .94); border: 1px solid var(--linia); border-radius: 14px; padding: 22px; margin-top: 28px; max-width: 680px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.pole { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pole label { font-size: .92rem; color: var(--szary); }
input[type=email], select { width: 100%; font: inherit; color: var(--papier); background: var(--tlo); border: 1px solid #5a4440; border-radius: 9px; padding: 12px 14px; min-height: 48px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--szary) 50%), linear-gradient(135deg, var(--szary) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--czerwien); outline-offset: 2px; }
.wiersz { display: flex; gap: 10px; flex-wrap: wrap; }
.wiersz .pole { flex: 1 1 240px; margin-bottom: 0; }
.wiersz .przycisk { flex: 0 0 auto; align-self: flex-end; }
.lista details { margin: 14px 0 4px; border-top: 1px solid var(--linia); padding-top: 12px; }
.lista summary { cursor: pointer; color: var(--szary); font-size: .95rem; padding: 4px 0; }
.lista details[open] summary { margin-bottom: 10px; }
.ptaszek { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--szary); margin: 12px 0 8px; cursor: pointer; }
.ptaszek input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--lampa); }
.drobne { font-size: .85rem; color: var(--szary); margin: 8px 0 0; }
.komunikat { border-radius: 9px; padding: 12px 14px; margin: 0 0 12px; font-weight: 600; }
.komunikat.ok { background: #1f2e1f; border: 1px solid #3d6b3d; }
.komunikat.blad { background: #3a1513; border: 1px solid #7a2a24; }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sceny: wywoływanie w kuwecie i stykówka z lupą */
.scena { position: relative; padding: 72px 0; }
.scena .wnetrze { max-width: 1360px; }
.scena-uklad { display: grid; gap: 28px; align-items: center; width: 100%; }
@media (min-width: 900px) {
  .scena-uklad { grid-template-columns: 4fr 8fr; gap: 56px; }
  .scena-uklad.odwrotnie { grid-template-columns: 8fr 4fr; }
  .scena-uklad.odwrotnie .scena-tekst { order: 2; }
}
.scena-tekst p:last-child { color: var(--papier2); margin-bottom: 0; }
.kuweta { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; box-shadow: 0 0 80px rgba(255, 30, 20, .18), 0 30px 60px rgba(0, 0, 0, .6); }
.kuweta .warstwa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kuweta .pusta, .kuweta .cienie { opacity: 0; }

.stykowka { position: relative; container-type: inline-size; border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); }
.stykowka > img { width: 100%; height: auto; }
.olowek { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.znak-olowek { fill: none; stroke: var(--olowek); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .92; filter: drop-shadow(0 0 3px rgba(255, 40, 25, .55)); }
.notka { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: clamp(10px, 1.75cqw, 15px); font-weight: 700; color: #fff; background: rgba(14, 11, 11, .9); border-left: 3px solid var(--olowek); padding: 3px 8px; border-radius: 3px; }
.notka.krzyz { color: #ffd9d4; }
.notka.prawa { transform: translateX(-78%); }
.legenda { display: none; list-style: none; padding: 0; margin: 14px 0 0; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--papier2); }
.legenda li::before { content: "◯"; color: var(--olowek); font-weight: 700; margin-right: 6px; }
.legenda li.krzyz::before { content: "✕"; }
@media (max-width: 599px) { .notka { display: none; } .legenda { display: flex; } }
.lupa { display: none; }

/* Karty, bonusy, pytania */
.sekcja { position: relative; padding: 72px 0; }
.sekcja + .sekcja { border-top: 1px solid #241a19; }
.cechy { display: grid; gap: 20px; }
@media (min-width: 820px) { .cechy { grid-template-columns: 1fr 1fr; } .cechy .szeroka { grid-column: 1 / -1; } }
.cecha { background: var(--karta); border: 1px solid #2c201f; border-radius: 14px; padding: 26px; }
.cecha .nr { display: block; font-family: var(--serif); color: var(--czerwien); font-size: .95rem; margin-bottom: 6px; }
.cecha p { color: var(--papier2); }
.cecha p:last-child { margin-bottom: 0; }
.powody { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; padding: 0; list-style: none; }
.powody li { font-size: .85rem; border: 1px solid #5a4440; border-radius: 999px; padding: 4px 12px; color: var(--papier); background: var(--tlo); }
.powody li::before { content: "● "; color: var(--czerwien); }
.suwaki { margin: 4px 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 420px; }
.suwaki li { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font-size: .85rem; color: var(--szary); }
.suwaki li span:last-child { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #3a2a28, #6b4d47); position: relative; }
.suwaki li span:last-child::after { content: ""; position: absolute; top: -6px; left: var(--x, 50%); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--papier); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

/* Zapis: lampa w ciemni rozjaśnia się, gdy formularz wchodzi na ekran */
.zapis { overflow: hidden; }
.zapis .wnetrze { position: relative; z-index: 1; }
.lampa { position: absolute; z-index: 0; left: 50%; top: -260px; width: 1100px; height: 900px; margin-left: -550px; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 45, 30, .5), rgba(255, 45, 30, .12) 55%, rgba(255, 45, 30, 0)); opacity: .9; }
.zapis-wstep { font-size: 1.08rem; max-width: 640px; }
.bonusy { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
@media (min-width: 820px) { .bonusy { grid-template-columns: repeat(3, 1fr); } }
.bonus { border: 1px solid #5a2e29; border-radius: 14px; padding: 22px; background: rgba(22, 17, 17, .88); }
.bonus h3 { color: #fff; font-size: 1.2rem; }
.bonus p { margin: 0; color: var(--papier2); }

.pytania details { border-bottom: 1px solid #2c201f; padding: 16px 0; }
.pytania summary { cursor: pointer; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::after { content: "+"; color: var(--czerwien); font-family: var(--sans); }
.pytania details[open] summary::after { content: "−"; }
.pytania details p { margin: 12px 0 0; color: var(--papier2); max-width: 760px; }

.dol { padding: 36px 0 48px; border-top: 1px solid #241a19; color: var(--szary); font-size: .92rem; }
.dol p { margin: 0 0 6px; }
.dol nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }

/* ---------- Ruch: tylko gdy ktoś nie prosi o ograniczenie ruchu ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Lampka w logo świeci jak żarówka ciemniowa: wolno pulsuje i co jakiś czas lekko mrugnie */
  .znak::before { animation: lampka 5.5s ease-in-out infinite; }
  @keyframes lampka { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: .72; transform: scale(.94); } 62% { opacity: 1; transform: scale(1); } 70% { opacity: .45; } 72% { opacity: 1; } 75% { opacity: .6; } 78% { opacity: 1; } }
  /* Wejście: ciemno, lampa zapala się z mrugnięciem, papier w kuwecie, potem tekst */
  .ruch .kadr .papier { opacity: 1; }
  .ruch .kadr .odbitka { opacity: 0; transition: opacity 3.2s ease-in-out 1.2s; }
  .ruch.bez-gl .kadr .odbitka { opacity: 1; }
  .ruch.gl-gotowe .kadr canvas { opacity: 1; }
  .ruch .kadr::after { animation: lampa-zapala 1.3s linear both; }
  @keyframes lampa-zapala { 0% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: .25; } 38% { opacity: .95; } 46% { opacity: .1; } 50% { opacity: .7; } 60% { opacity: 0; } 100% { opacity: 0; } }
  .ruch .kadr::before { animation: oddech 6s ease-in-out 1.4s infinite alternate; }
  @keyframes oddech { from { opacity: 1; } to { opacity: .72; } }
  .ruch .podpowiedz { animation: podpowiedz .6s ease-out 4.6s both; }
  @keyframes podpowiedz { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .ruch .tresc > * { animation: wejscie .9s cubic-bezier(.2, .7, .2, 1) both; }
  .ruch .tresc > :nth-child(1) { animation-delay: .9s; }
  .ruch .tresc > :nth-child(2) { animation-delay: 1.05s; }
  .ruch .tresc > :nth-child(3) { animation-delay: 1.3s; }
  .ruch .tresc > :nth-child(4) { animation-delay: 1.5s; }
  .ruch .tresc > :nth-child(5) { animation-delay: 1.65s; }
  @keyframes wejscie { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

  @supports (animation-timeline: view()) {
    html { timeline-scope: --wyw, --sel; }
    .gora { animation: nagl linear both; animation-timeline: scroll(root); animation-range: 0 220px; }
    @keyframes nagl { from { background: rgba(14, 11, 11, 0); } to { background: rgba(14, 11, 11, .92); } }


    /* Sceny przypięte: sekcja jest wysoka, ekran stoi, a przewijanie prowadzi animację */
    .scena { padding: 0; height: 260svh; }
    .scena .przypiete { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: 64px 0 24px; }
    .wywolywanie { view-timeline: --wyw block; }
    .selekcja { view-timeline: --sel block; }

    .kuweta .cienie { animation: wywolaj linear both; animation-timeline: --wyw; animation-range: contain 4% contain 46%; }
    .kuweta .pelna { animation: wywolaj linear both; animation-timeline: --wyw; animation-range: contain 40% contain 86%; }
    .kuweta .pusta { opacity: 1; }
    @keyframes wywolaj { from { opacity: 0; } to { opacity: 1; } }
    .kuweta { animation: zanurz linear both; animation-timeline: --wyw; animation-range: contain 0% contain 90%; }
    @keyframes zanurz { from { transform: scale(1.06); } to { transform: scale(1); } }

    .lupa { display: block; position: absolute; left: 0; top: 0; width: 24cqw; height: 24cqw; border-radius: 50%; overflow: hidden; border: 3px solid #e9e1d8; box-shadow: 0 10px 30px rgba(0, 0, 0, .7), inset 0 0 18px rgba(0, 0, 0, .5); animation: lupa-trasa linear both, lupa-znika linear both; animation-timeline: --sel, --sel; animation-range: contain 0% contain 100%, contain 93% contain 99%; }
    @keyframes lupa-znika { to { opacity: 0; } }
    .lupa img { position: absolute; left: 0; top: 0; width: 230cqw; max-width: none; height: auto; animation: lupa-obraz linear both; animation-timeline: --sel; animation-range: contain 0% contain 100%; }
    .znak-olowek { animation: rysuj linear both; animation-timeline: --sel; animation-range: contain calc(var(--od) - 1%) contain calc(var(--od) + 7%); }
    @keyframes rysuj { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    .notka { animation: notka linear both; animation-timeline: --sel; animation-range: contain calc(var(--od) + 3%) contain calc(var(--od) + 8%); }
    @keyframes notka { from { opacity: 0; } to { opacity: 1; } }

    .wjazd { animation: wjazd linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes wjazd { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

    .lampa { animation: zapal linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes zapal { from { opacity: .12; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }