/* Panel klienta DAPLO Crew, logowanie v2 (10.10.2026). Jedna scena zamiast podziału na pół:
   zdjęcie ekipy z hero strony w granacie + poświata („zorza”), żywa karta wyjazdu po lewej, szklana karta logowania po prawej.
   Barwy i kroje Crew (tokeny jak --cr-* w crew.css). Bursztyn tylko na ciemnym. CSP: wyłącznie ten plik, zero stylów w HTML. */

:root {
  --marka: #1E3150; --marka-hov: #16243A; --marka-tint: #E8EDF5; --glebia: #0E1A2B; --glebia-2: #16243A;
  --na-glebi-2: #A9B8D0; --obrys-ciemne: #34496D; --zorza-1: #5684C4; --zorza-2: #2CA0B2;
  --bursztyn: #F59E0B; --bursztyn-hov: #FBBF24; --kask: #F9BF00;
  --tlo: #FFFFFF; --papier: #F3F6FA; --papier-2: #E9EEF5; --tekst: #1F2B3D; --tekst-2: #5C6474;
  --linia: #D3DBE6; --obrys-ui: #6D7889; --biel: #FFFFFF;
  --zielony: #166534; --zielony-tlo: #DCFCE7; --brak: #B91C1C; --brak-tlo: #FEE2E2;
  --pole-tint: #FEF3C7; --pole-krawedz: #B45309;
  --f-nagl: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --f-tresc: "DM Sans", Arial, sans-serif;
  --krzywa: cubic-bezier(.2, .8, .2, 1);
  --boki: clamp(20px, 4vw, 56px);

  /* karta logowania: jasny motyw */
  --k-tlo: rgba(255, 255, 255, .95); --k-obrys: rgba(255, 255, 255, .7); --k-cien: 0 40px 80px -24px rgba(6, 12, 24, .55), 0 2px 6px rgba(6, 12, 24, .08);
  --k-tekst: var(--tekst); --k-tekst-2: var(--tekst-2); --k-nagl: var(--marka); --k-linia: var(--linia);
  --p-tlo: var(--tlo); --p-obrys: #C9D3E0; --p-obrys-hov: var(--obrys-ui); --p-ik: #8A95A6; --fokus: var(--marka);
  --b-tlo: var(--marka); --b-tlo-hov: var(--marka-hov); --b-tekst: var(--biel);
  --b2-obrys: var(--linia); --b2-tekst: var(--marka); --b2-hov: var(--papier);
  --link: var(--marka);
  --kom-tlo: var(--brak-tlo); --kom-tekst: var(--brak); --kom-obrys: #FCA5A5;
  --caps-tlo: var(--pole-tint); --caps-tekst: #92400E;
  --znak-tlo: var(--marka-tint);
  color-scheme: light;
}
:root[data-motyw="ciemny"] {
  --k-tlo: rgba(14, 26, 43, .86); --k-obrys: rgba(255, 255, 255, .09); --k-cien: 0 40px 80px -24px rgba(0, 0, 0, .7);
  --k-tekst: #E6ECF5; --k-tekst-2: var(--na-glebi-2); --k-nagl: var(--biel); --k-linia: rgba(255, 255, 255, .1);
  --p-tlo: rgba(255, 255, 255, .04); --p-obrys: var(--obrys-ciemne); --p-obrys-hov: var(--na-glebi-2); --p-ik: #7F8EA8; --fokus: var(--bursztyn);
  --b-tlo: var(--bursztyn); --b-tlo-hov: var(--bursztyn-hov); --b-tekst: var(--glebia);
  --b2-obrys: var(--obrys-ciemne); --b2-tekst: var(--biel); --b2-hov: rgba(255, 255, 255, .06);
  --link: var(--biel);
  --kom-tlo: rgba(185, 28, 28, .18); --kom-tekst: #FCA5A5; --kom-obrys: rgba(252, 165, 165, .35);
  --caps-tlo: rgba(245, 158, 11, .14); --caps-tekst: #FCD34D;
  --znak-tlo: var(--biel);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--glebia); color: var(--biel); font-family: var(--f-tresc); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--bursztyn); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- scena: zdjęcie + granat + poświata ---------- */
.scena { position: relative; isolation: isolate; overflow: hidden; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.scena__foto { position: absolute; inset: 0; z-index: -3; }
.scena__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.scena__swiatlo { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 26, 43, .55) 0%, rgba(14, 26, 43, 0) 26%, rgba(14, 26, 43, 0) 70%, rgba(14, 26, 43, .7) 100%),
    linear-gradient(100deg, color-mix(in srgb, var(--marka) 96%, transparent) 0%, color-mix(in srgb, var(--marka) 86%, transparent) 42%, color-mix(in srgb, var(--marka) 62%, transparent) 68%, color-mix(in srgb, var(--glebia) 78%, transparent) 100%);
}
.scena__swiatlo::before { content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(34% 30% at 18% 22%, color-mix(in srgb, var(--zorza-1) 38%, transparent), transparent 72%),
    radial-gradient(30% 28% at 78% 78%, color-mix(in srgb, var(--zorza-2) 26%, transparent), transparent 72%);
  animation: zorza 26s ease-in-out infinite alternate;
}
@keyframes zorza { to { transform: translate3d(4%, -3%, 0) scale(1.05); } }

/* ---------- pasek górny ---------- */
.pasek { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px var(--boki); }
.pasek__logo img { height: 26px; width: auto; }
.pasek__prawa { display: flex; align-items: center; gap: 8px; }
.pasek__wroc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; color: rgba(255, 255, 255, .85); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: background-color 150ms var(--krzywa), color 150ms var(--krzywa); }
.pasek__wroc .i { width: 18px; height: 18px; transition: transform 200ms var(--krzywa); }
@media (hover: hover) and (pointer: fine) { .pasek__wroc:hover { background: rgba(255, 255, 255, .1); color: var(--biel); } .pasek__wroc:hover .i { transform: translateX(-3px); } }
@media (max-width: 559.98px) { .pasek__wroc span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pasek__wroc { padding: 0 12px; } }
.motyw { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--biel); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 150ms var(--krzywa), transform 150ms var(--krzywa); }
.motyw svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.motyw__sl, :root[data-motyw="ciemny"] .motyw__ks { display: none; }
:root[data-motyw="ciemny"] .motyw__sl { display: block; }
@media (hover: hover) and (pointer: fine) { .motyw:hover { background: rgba(255, 255, 255, .14); } }
.motyw:active { transform: scale(.94); }

/* ---------- układ: opowieść + karta ---------- */
.uklad { display: grid; gap: 28px; align-content: center; width: 100%; max-width: 1320px; margin: 0 auto; padding: 8px var(--boki) 32px; }
.opowiesc { display: grid; gap: 14px; justify-items: start; }
.etykieta { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; letter-spacing: .02em; color: var(--na-glebi-2); }
.etykieta__kw { width: 9px; height: 9px; background: var(--bursztyn); }
.opowiesc h1 { max-width: 15ch; font-family: var(--f-nagl); font-weight: 600; font-size: clamp(2.125rem, 7.5vw, 2.75rem); line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; }
.opowiesc__lead { display: none; }
.wyjazd { display: none; }
/* poniżej 1100 px jedna kolumna: nagłówek i karta na środku, jeden wspólny środek kompozycji */
@media (max-width: 1099.98px) {
  .opowiesc { justify-items: center; text-align: center; }
  .opowiesc h1 { max-width: 18ch; }
  .stopka { justify-items: center; text-align: center; }
}

@media (min-width: 1100px) {
  .uklad { grid-template-columns: minmax(0, 1fr) 448px; gap: clamp(48px, 7vw, 128px); align-items: center; padding-bottom: 40px; }
  .opowiesc { gap: 20px; }
  .opowiesc h1 { font-size: clamp(3.25rem, 4.4vw, 4.5rem); }
  .opowiesc__lead { display: block; max-width: 44ch; font-size: 1.1875rem; line-height: 1.55; color: color-mix(in srgb, var(--na-glebi-2) 40%, var(--biel)); }
  .wyjazd { display: block; }
}
/* niskie ekrany laptopów (np. 1280×800): mniejszy nagłówek, bez zdania pod nim, ciaśniejsza karta wyjazdu — całość mieści się bez przewijania */
@media (min-width: 1100px) and (max-height: 940px) {
  .opowiesc { gap: 14px; }
  .opowiesc h1 { font-size: clamp(2.75rem, 3.6vw, 3.5rem); }
  .opowiesc__lead { display: none; }
  .wyjazd { margin-top: 8px; padding: 14px 16px 12px; }
  .wyjazd__lista li { padding: 5px 4px; }
  .uklad { padding-bottom: 16px; }
}

/* ---------- karta wyjazdu (statyczna dekoracja, stan „Komplet gotowy”) ---------- */
.wyjazd { width: min(100%, 440px); margin-top: 18px; padding: 18px 18px 16px; border-radius: 18px; background: var(--tlo); color: var(--tekst); box-shadow: 0 30px 60px -20px rgba(4, 10, 20, .6); transform: rotate(-1.2deg); }
.wyjazd__gora { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #E4E9F0; }
.wyjazd__ik { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 12px; background: var(--marka-tint); color: var(--marka); }
.wyjazd__t { display: grid; min-width: 0; line-height: 1.25; }
.wyjazd__t b { font-family: var(--f-nagl); font-size: 1.1875rem; font-weight: 600; color: var(--marka); }
.wyjazd__t small { font-size: .8125rem; color: var(--tekst-2); }
.wyjazd__stan { display: grid; margin-left: auto; justify-items: end; }
.st { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.st .i { width: 14px; height: 14px; stroke-width: 2.5; }
.st--gotowe { background: var(--zielony-tlo); color: var(--zielony); }
.wyjazd__lista { display: grid; gap: 4px; margin-top: 10px; }
.wyjazd__lista li { display: flex; align-items: center; gap: 12px; padding: 7px 4px; }
.av { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; border: 1px solid var(--linia); font-family: var(--f-nagl); font-size: .8125rem; font-weight: 700; color: var(--marka); }
.os { display: grid; min-width: 0; line-height: 1.25; }
.os b { font-size: .9375rem; font-weight: 600; }
.os small { font-size: .8125rem; color: var(--tekst-2); }
.ok { width: 26px; height: 26px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; background: var(--zielony); color: var(--biel); }
.ok .i { width: 15px; height: 15px; stroke-width: 2.75; }
.wyjazd__dol { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid #E4E9F0; }
.pasek-postepu { flex: 1; height: 6px; border-radius: 999px; background: #E4E9F0; overflow: hidden; }
.pasek-postepu i { display: block; height: 100%; border-radius: inherit; background: var(--zielony); transform-origin: left; }
.wyjazd__pdf { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--pole-tint); box-shadow: inset 0 -2px 0 var(--pole-krawedz); font-size: .75rem; font-weight: 700; color: var(--tekst); white-space: nowrap; }
.wyjazd__pdf .i { width: 15px; height: 15px; }

/* ---------- karta logowania (szkło) ---------- */
.karta { position: relative; width: 100%; max-width: 448px; justify-self: center; padding: 30px 24px 24px; border: 1px solid var(--k-obrys); border-radius: 24px; background: var(--k-tlo); color: var(--k-tekst); box-shadow: var(--k-cien); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
@media (min-width: 560px) { .karta { padding: 38px 40px 30px; } }
@media (min-width: 1100px) { .karta { justify-self: end; } }
.karta a { color: var(--link); font-weight: 600; text-underline-offset: .2em; }
.karta :focus-visible { outline-color: var(--fokus); }
.karta__glowa { display: flex; align-items: center; gap: 14px; }
.karta__znak { width: 52px; height: 52px; display: grid; place-items: center; flex: none; border-radius: 14px; background: var(--znak-tlo); }
.karta__znak img { width: 32px; height: 32px; }
.karta h2 { font-family: var(--f-nagl); font-weight: 600; font-size: 2rem; line-height: 1.05; color: var(--k-nagl); }
.karta__pod { margin-top: 3px; font-size: .9375rem; color: var(--k-tekst-2); }

#formularz { display: grid; gap: 18px; margin-top: 28px; }
.komunikat { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--kom-obrys); border-radius: 12px; background: var(--kom-tlo); color: var(--kom-tekst); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.komunikat .i { margin-top: 1px; }
.komunikat:focus { outline: none; }

.pole { display: grid; gap: 7px; }
.pole label { font-size: .9375rem; font-weight: 600; color: var(--k-tekst); }
.pole__ramka { position: relative; }
.pole__ik { position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--p-ik); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke 150ms var(--krzywa); }
.pole input { width: 100%; height: 54px; padding: 0 16px 0 46px; border: 1px solid var(--p-obrys); border-radius: 12px; background: var(--p-tlo); color: var(--k-tekst); font: inherit; font-size: 1.0625rem; transition: border-color 150ms var(--krzywa), box-shadow 150ms var(--krzywa), background-color 150ms var(--krzywa); }
.pole input::placeholder { color: var(--p-ik); opacity: 1; }
#haslo { padding-right: 56px; }
@media (hover: hover) and (pointer: fine) { .pole input:hover { border-color: var(--p-obrys-hov); } }
.pole input:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fokus) 18%, transparent); }
.pole__ramka:focus-within .pole__ik { stroke: var(--fokus); }
.pole--blad input, .pole--blad input:focus { border-color: var(--kom-tekst); }
.pole--blad input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--kom-tekst) 18%, transparent); }
.pole--blad .pole__ik { stroke: var(--kom-tekst); }
.pole__blad { font-size: .875rem; font-weight: 600; color: var(--kom-tekst); }
.pole__caps { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; border-radius: 8px; background: var(--caps-tlo); color: var(--caps-tekst); font-size: .8125rem; font-weight: 600; }
.pole__caps .i { width: 15px; height: 15px; }
.pole__oko { position: absolute; top: 5px; right: 5px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--p-ik); cursor: pointer; }
.pole__oko svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pole__oko .oko-zamkniete, .pole__oko[aria-pressed="true"] .oko-otwarte { display: none; }
.pole__oko[aria-pressed="true"] .oko-zamkniete { display: block; }
@media (hover: hover) and (pointer: fine) { .pole__oko:hover { color: var(--k-tekst); background: color-mix(in srgb, var(--p-ik) 12%, transparent); } }

/* ---------- przyciski ---------- */
.przycisk { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin-top: 6px; padding: 0 22px; border: 1.5px solid var(--b-tlo); border-radius: 12px; background: var(--b-tlo); color: var(--b-tekst); font-size: 1.0625rem; font-weight: 600; cursor: pointer; transition: background-color 150ms var(--krzywa), border-color 150ms var(--krzywa), transform 150ms var(--krzywa), box-shadow 200ms var(--krzywa); }
.przycisk__strz { transition: transform 200ms var(--krzywa); }
@media (hover: hover) and (pointer: fine) {
  .przycisk:hover:not(:disabled) { background: var(--b-tlo-hov); border-color: var(--b-tlo-hov); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--b-tlo) 70%, transparent); }
  .przycisk:hover:not(:disabled) .przycisk__strz { transform: translateX(3px); }
}
.przycisk:active:not(:disabled) { transform: scale(.985); }
.przycisk:disabled { cursor: progress; }
.przycisk__krecik { display: none; width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: krec 700ms linear infinite; }
.przycisk--czeka .przycisk__krecik { display: block; }
.przycisk--czeka .przycisk__strz { display: none; }
.przycisk--drugi { margin-top: 24px; background: transparent; border-color: var(--b2-obrys); color: var(--b2-tekst); }
@media (hover: hover) and (pointer: fine) { .przycisk--drugi:hover:not(:disabled) { background: var(--b2-hov); border-color: var(--b2-obrys); box-shadow: none; } }
@keyframes krec { to { transform: rotate(360deg); } }

.karta__pomoc { display: grid; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--k-linia); font-size: .9375rem; line-height: 1.55; color: var(--k-tekst-2); }
.tel { white-space: nowrap; }

/* ---------- po zalogowaniu ---------- */
#widok-zalogowany:focus { outline: none; }
.sukces { width: 64px; height: 64px; margin-bottom: 18px; }
.sukces svg { width: 64px; height: 64px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sukces circle { stroke: var(--zielony); stroke-width: 2.5; fill: var(--zielony-tlo); }
.sukces path { stroke: var(--zielony); stroke-width: 3.5; stroke-dasharray: 34; stroke-dashoffset: 0; }
:root[data-motyw="ciemny"] .sukces circle { fill: rgba(22, 101, 52, .25); stroke: #4ADE80; }
:root[data-motyw="ciemny"] .sukces path { stroke: #4ADE80; }
.karta__konto { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--p-ik) 14%, transparent); font-size: .9375rem; font-weight: 600; color: var(--k-tekst); }
.karta__konto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karta__konto .i { width: 17px; height: 17px; }
.karta__info { display: grid; gap: 10px; margin-top: 20px; font-size: 1rem; line-height: 1.6; color: var(--k-tekst-2); }
.karta__info b { color: var(--k-tekst); }

/* ---------- stopka ---------- */
.stopka { display: grid; gap: 12px; width: 100%; max-width: 1320px; margin: 0 auto; padding: 18px var(--boki) 24px; color: rgba(255, 255, 255, .72); font-size: .875rem; }
.stopka__prawne a { text-decoration: none; }
.stopka__prawne a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- ruch: wejście, potrząśnięcie przy błędzie, rysowany znak sukcesu ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wej { animation: wej 600ms var(--krzywa) both; }
  .w1 { animation-delay: 60ms; } .w2 { animation-delay: 140ms; } .w3 { animation-delay: 220ms; }
  .karta { animation: wej-karta 700ms var(--krzywa) 120ms both; }
  .karta.weszla { animation: none; }
  .karta.weszla.trzes { animation: trzes 420ms var(--krzywa); }
  .sukces path { stroke-dashoffset: 34; animation: rysuj 520ms var(--krzywa) 180ms forwards; }
  .sukces circle { animation: wej-skala 420ms var(--krzywa) both; }
}
@keyframes wej { from { opacity: 0; transform: translateY(12px); } }
@keyframes wej-karta { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes trzes { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes rysuj { to { stroke-dashoffset: 0; } }
@keyframes wej-skala { from { opacity: 0; transform: scale(.6); } }
.sukces circle { transform-origin: center; transform-box: fill-box; }

@media (prefers-reduced-motion: reduce) {
  .scena__swiatlo::before, .przycisk__krecik { animation: none; }
  .przycisk__krecik { border-right-color: currentColor; opacity: .6; }
  .motyw, .przycisk, .pole input, .pasek__wroc { transition: none; }
}
@media (forced-colors: active) { .karta, .przycisk, .pole input, .motyw { border: 1px solid CanvasText; } }

/* ---------- wejście ze strony crew.daplo.eu (10.10): kurtyna = ostatnia klatka strony (granat + logo 176 × 32 na środku) ----------
   html.z-przejscia ustawia motyw.js, odsłania assets/przejscie.js; scena lekko się przybliża, elementy wchodzą dopiero po odsłonięciu. */
.kurtyna { display: none; }
.z-przejscia .kurtyna { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--marka); animation: kurtyna-awaryjna 0s linear 3s forwards; }
.kurtyna img { width: 176px; height: 32px; }
@keyframes kurtyna-awaryjna { to { visibility: hidden; } }
.z-przejscia .scena__foto img { transform: scale(1.06); }
.z-przejscia.odslona .scena__foto img { transform: none; transition: transform 1400ms cubic-bezier(.2, .8, .2, 1); }
.z-przejscia:not(.odslona) .wej, .z-przejscia:not(.odslona) .karta, .z-przejscia:not(.odslona) .wyjazd { animation-play-state: paused; }
.z-przejscia:not(.odslona) .wyjazd { opacity: 0; }
.z-przejscia.odslona .wyjazd { animation: wej-karta 800ms cubic-bezier(.2, .8, .2, 1) 380ms both; }
.z-przejscia .w1 { animation-delay: 260ms; } .z-przejscia .w2 { animation-delay: 340ms; } .z-przejscia .w3 { animation-delay: 420ms; }
.z-przejscia .karta { animation-delay: 300ms; }