/* ═══════════════════════════════════════════════════════════════
   SAMOUCZEK — oprowadzanie po aplikacji, prowadzi duszek

   Trzymamy się tych samych zasad, co reszta produktu: jeden akcent,
   dużo powietrza, zero ozdobników, które nie niosą informacji.
   Ruch jest tylko tam, gdzie coś znaczy — duszek unosi się i „mówi",
   bo to on prowadzi; reflektor przesuwa się, bo pokazuje, gdzie patrzeć.
   ═══════════════════════════════════════════════════════════════ */

/* ── POWITANIE ── */
.sw-tlo{position:fixed;inset:0;z-index:950;display:grid;place-items:center;
  background:rgba(8,12,18,.62);backdrop-filter:blur(3px);padding:24px;}
.sw-karta{background:var(--surface,#fff);border:1px solid var(--line,#e6e6e6);
  border-radius:22px;padding:40px 40px 32px;max-width:520px;width:100%;
  text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.3);}
.sw-karta .dz{--r:132px;margin:0 auto 8px;}
.sw-karta h3{font-size:1.5rem;line-height:1.25;margin:12px 0 10px;}
.sw-karta p{color:var(--ink-2,#5a636e);line-height:1.65;font-size:.95rem;margin:0 auto;max-width:40ch;}
.sw-wyb{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap;}

/* ── REFLEKTOR ──
   Jeden element z ogromnym cieniem zamiast czterech przesłon: dziura zawsze
   idealnie pasuje do elementu, bez szczelin przy zaokrąglonych rogach. */
.sam-tlo{position:fixed;inset:0;z-index:900;}
.sam-dziura{position:fixed;border-radius:14px;pointer-events:none;z-index:900;
  box-shadow:0 0 0 9999px rgba(8,12,18,.70);
  transition:top .34s cubic-bezier(.22,1,.36,1),left .34s cubic-bezier(.22,1,.36,1),
             width .34s cubic-bezier(.22,1,.36,1),height .34s cubic-bezier(.22,1,.36,1);}
.sam-ramka{position:fixed;border-radius:14px;pointer-events:none;z-index:901;
  border:2px solid var(--accent,#E8B658);transition:inherit;}
/* delikatny puls obwódki — przyciąga wzrok, nie miga */
.sam-ramka::after{content:"";position:absolute;inset:-5px;border-radius:18px;
  border:2px solid var(--accent,#E8B658);opacity:.35;animation:samPuls 2.1s ease-out infinite;}
@keyframes samPuls{0%{transform:scale(.985);opacity:.42}70%{transform:scale(1.045);opacity:0}100%{opacity:0}}
.sam-cel{position:relative;z-index:901;}

/* ── DYMEK ── */
.sam-dymek{position:fixed;z-index:902;width:min(430px,calc(100vw - 32px));
  background:var(--surface,#fff);color:var(--ink,#14181D);
  border:1px solid var(--line,#e6e6e6);border-radius:20px;padding:22px 24px 18px;
  box-shadow:0 20px 54px rgba(0,0,0,.3);
  transition:top .34s cubic-bezier(.22,1,.36,1),left .34s cubic-bezier(.22,1,.36,1);}
.sam-gora{display:flex;align-items:flex-start;gap:18px;}
/* duszek jest narratorem, więc ma prawo być duży */
.sam-dz{flex:none;--r:104px;margin-top:-6px;animation:samUnos 3.4s ease-in-out infinite;}
@keyframes samUnos{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
/* „mówi" — lekkie pulsowanie w rytm pojawiającego się tekstu */
.sam-dymek.mowi .sam-dz{animation:samMowi .42s ease-in-out infinite;}
@keyframes samMowi{0%,100%{transform:translateY(-2px) scale(1)}50%{transform:translateY(-5px) scale(1.035)}}

.sam-tresc{min-width:0;padding-top:4px;}
.sam-krok{font-family:var(--f-mono,monospace);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink,#B8860B);display:block;margin-bottom:6px;}
.sam-dymek h4{font-size:1.12rem;line-height:1.3;margin:0 0 8px;}
.sam-dymek p{font-size:.92rem;line-height:1.62;color:var(--ink-2,#5a636e);margin:0;min-height:3.2em;}
/* kursor pisania — znika, gdy zdanie się dopisze */
.sam-dymek p::after{content:"▍";color:var(--accent,#E8B658);opacity:0;margin-left:1px;}
.sam-dymek.mowi p::after{opacity:.7;animation:samKursor .9s steps(2) infinite;}
@keyframes samKursor{0%,49%{opacity:.7}50%,100%{opacity:0}}

.sam-stopka{display:flex;align-items:center;gap:14px;margin-top:20px;}
.sam-kropki{display:flex;gap:6px;margin-right:auto;}
.sam-kropki i{width:6px;height:6px;border-radius:50%;background:var(--line-2,#d9d9d9);
  transition:background .25s,transform .25s,width .25s;}
.sam-kropki i.on{background:var(--accent,#E8B658);width:18px;border-radius:3px;}
.sam-kropki i.byl{background:color-mix(in srgb,var(--accent,#E8B658) 45%,transparent);}
.sam-pomin{background:none;border:0;color:var(--ink-3,#8a929c);font-size:.85rem;
  cursor:pointer;padding:6px 2px;}
.sam-pomin:hover{color:var(--ink,#14181D);text-decoration:underline;}
.sam-dalej{background:var(--ink,#14181D);color:var(--bg,#fff);border:0;border-radius:999px;
  padding:10px 20px;font-size:.88rem;font-weight:600;cursor:pointer;transition:transform .15s,opacity .2s;}
.sam-dalej:hover{opacity:.9;transform:translateY(-1px);}

/* ── MOBILNIE: dymek jako pasek na dole, duszek mniejszy ── */
@media(max-width:760px){
  /* Dymek jako pasek u dołu. `inset` zamiast samego `left` zeruje też prawą
     krawędź, inaczej przy szerokim tekście wychodził poza ekran. Reflektor
     nie może sięgać pod dymek, stąd zapas na dole okna. */
  /* Dymek to kolumna: treść przewija się W ŚRODKU, a stopka z „Dalej"
     jest zawsze widoczna — wcześniej przewijał się cały dymek i przy
     dłuższym tekście przycisk uciekał poza ekran. */
  .sam-dymek{left:12px!important;right:12px!important;width:auto!important;
    top:auto!important;bottom:12px;max-height:46vh;
    display:flex;flex-direction:column;overflow:hidden;}
  .sam-gora{overflow:auto;min-height:0;flex:1;}
  .sam-stopka{flex:none;margin-top:12px;}
  .sam-gora{gap:12px;}
  .sam-dz{--r:76px;}
  .sw-karta{padding:28px 22px 24px;}
  .sw-karta .dz{--r:104px;}
}
@media(prefers-reduced-motion:reduce){
  .sam-dziura,.sam-ramka,.sam-dymek{transition:none;}
  .sam-dz,.sam-dymek.mowi .sam-dz,.sam-ramka::after,.sam-dymek.mowi p::after{animation:none;}
}

/* ── DUSZEK WSKAZUJE ──
   Przechył w stronę podświetlonego elementu. Sam dolot załatwia przejście
   pozycji dymka; przechył dokłada informację, gdzie patrzeć, zanim tekst
   zostanie przeczytany. Kąty celowo małe — to podpowiedź, nie gest. */
.sam-dz.wsk-lewo {animation:samLewo 3.4s ease-in-out infinite;}
.sam-dz.wsk-prawo{animation:samPrawo 3.4s ease-in-out infinite;}
.sam-dz.wsk-gora {animation:samGora 3.4s ease-in-out infinite;}
.sam-dz.wsk-dol  {animation:samDol 3.4s ease-in-out infinite;}
@keyframes samLewo {0%,100%{transform:translate(0,0) rotate(-7deg)}50%{transform:translate(-6px,-7px) rotate(-11deg)}}
@keyframes samPrawo{0%,100%{transform:translate(0,0) rotate(7deg)} 50%{transform:translate(6px,-7px) rotate(11deg)}}
@keyframes samGora {0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes samDol  {0%,100%{transform:translateY(0) rotate(2deg)}  50%{transform:translateY(8px) rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){
  .sam-dz.wsk-lewo,.sam-dz.wsk-prawo,.sam-dz.wsk-gora,.sam-dz.wsk-dol{animation:none;}
}

/* wybory trybu wskazówek na karcie powitalnej */
.sw-wybory{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.sw-wybory .btn{width:100%;}