/* hophop. strona zapowiedzi. Wartości z marka/tokens.json. */
:root {
  --atrament: #111a33; --granat: #2a3558; --papier: #f5f7fa; --biel: #ffffff;
  --szary: #5b6480; --linia: #dde2ea; --limonka: #c8f04f; --limonka-c: #a9d62f; --blad: #d93025;
  --noc-szary: #97a2c0;
  --sora: 'Sora', system-ui, sans-serif; --inter: 'Inter', system-ui, sans-serif;
  --bok: clamp(16px, 6vw, 96px);
  --ease: cubic-bezier(.2,.7,.2,1);
  --tr: -0.03em;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--atrament); font: 400 16px/1.5 var(--inter); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p { margin: 0; }
em { font-style: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Znak */
.znak { font: 800 19px/1 var(--sora); letter-spacing: -0.05em; text-decoration: none; color: var(--atrament); display: inline-flex; align-items: baseline; }
.znak .kropka { display: inline-block; width: .24em; height: .24em; border-radius: 50%; background: var(--limonka-c); margin-left: .03em; }

/* Pastylki menu */
.gora { position: fixed; z-index: 20; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.gora .prawo { display: flex; gap: 8px; }
.pas { pointer-events: auto; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 2px rgba(17,26,51,.06); font-size: 14px; font-weight: 600; color: var(--atrament); transition: background .2s; }
a.pas:hover { background: #fff; }
.pas.znak { font-size: 19px; }
.pas-dni { font-variant-numeric: tabular-nums; gap: 5px; display: none; }
.pas-dni b { font-weight: 700; }
.zjechal .pas-dni { display: inline-flex; }

/* Pierwszy ekran: samo hasło */
.haslo { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--bok) clamp(28px, 5vw, 56px); }
.haslo h1 { font: 800 clamp(44px, 11.4vw, 172px)/.96 var(--sora); letter-spacing: var(--tr); }
.haslo h1 .l { display: block; white-space: nowrap; }
.haslo h1 .kr { display: inline-block; width: .17em; height: .17em; border-radius: 50%; background: var(--limonka-c); margin-left: .03em; vertical-align: baseline; }
.haslo .dol { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(28px, 4vw, 56px); }
.haslo .pod { font: 500 clamp(17px, 1.6vw, 22px)/1.35 var(--inter); color: var(--szary); max-width: 24em; letter-spacing: -0.01em; }
.licznik { font: 600 15px/1.2 var(--inter); white-space: nowrap; color: var(--szary); }
.licznik b { font: 800 clamp(24px, 2.4vw, 32px)/1 var(--sora); letter-spacing: var(--tr); color: var(--atrament); margin-right: 4px; }

/* Kadry: jedno zdanie na ekran, krótko */
.kadr { position: relative; overflow: hidden; min-height: 64vh; display: flex; align-items: center; padding: 64px var(--bok); }
.kadr.caly { min-height: 100svh; }
.kadr .w { position: relative; z-index: 1; width: 100%; max-width: 1240px; }
.kadr p.z { font: 800 clamp(34px, 6.2vw, 100px)/.98 var(--sora); letter-spacing: var(--tr); max-width: 12.5em; color: var(--szary); text-wrap: balance; }
.kadr p.z em { color: var(--atrament); }
.kadr p.dop { font: 600 clamp(19px, 2vw, 28px)/1.3 var(--inter); letter-spacing: -0.02em; color: var(--szary); max-width: 26em; margin-top: clamp(20px, 3vw, 36px); text-wrap: pretty; }
.kadr.prawo .w { margin-left: auto; }
.kadr.prawo p.z { margin-left: auto; text-align: right; }

/* Ciemne pasy: ostre przejście, papier na atramencie */
.ciemny { background: var(--atrament); }
.ciemny .kadr p.z, .kadr.ciemny p.z, .kadr.ciemny p.dop { color: var(--noc-szary); }
.kadr.ciemny p.z em { color: var(--papier); }


/* Pojawianie się: raz, krótko */
.js .r { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .r.widac { opacity: 1; transform: none; }
.js .kadr p.z em { color: var(--szary); transition: color .6s var(--ease) .35s; }
.js .kadr.ciemny p.z em { color: var(--noc-szary); }
.js .kadr p.z.widac em { color: var(--atrament); }
.js .kadr.ciemny p.z.widac em { color: var(--papier); }
.statyczny .r { opacity: 1 !important; transform: none !important; }
.statyczny .kadr p.z em { color: var(--atrament) !important; }
.statyczny .kadr.ciemny p.z em { color: var(--papier) !important; }

/* Kadry z kulą: co drugi, kula po przeciwnej stronie zdania */
.kadr.z-kula .w { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 96px); }
.kadr.z-kula .tx { min-width: 0; flex: 1; }
.kadr.z-kula.prawo .w { flex-direction: row-reverse; }
.kula-k { flex: none; width: clamp(96px, 11vw, 168px); }
.kadr.prawo p.dop { margin-left: auto; text-align: right; }

/* Kula */
.kula { width: clamp(64px, 20vw, 280px); height: auto; filter: drop-shadow(0 24px 30px rgba(17,26,51,.18)); }
.kula.hop { animation: skok 1.2s cubic-bezier(.3,.7,.4,1) both; }
@keyframes skok { 0% { transform: none; } 18% { transform: translateY(-24%); } 34% { transform: scale(1.05,.95); } 52% { transform: translateY(-11%); } 68%, 100% { transform: none; } }
.kr.hop { animation: kropka 1.1s cubic-bezier(.3,.7,.4,1) .5s both; }
@keyframes kropka { 0% { transform: none; } 20% { transform: translateY(-.9em); } 38% { transform: scale(1.15,.85); } 56% { transform: translateY(-.4em); } 72%, 100% { transform: none; } }

/* Zapis: hasło po lewej, kula po prawej */
.zapis { min-height: 88vh; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 5vw, 96px); padding: 120px var(--bok) 96px; }
.zapis .kula { width: clamp(180px, 20vw, 280px); }
.zapis h2, .formularz h2 { font: 800 clamp(38px, 6.4vw, 108px)/.98 var(--sora); letter-spacing: var(--tr); max-width: 10.5em; color: var(--szary); text-wrap: balance; }
.zapis h2 em, .formularz h2 em, .haslo h1 em { color: var(--atrament); display: block; }
.zam-pod { font: 600 clamp(19px, 2vw, 28px)/1.3 var(--inter); letter-spacing: -0.02em; color: var(--atrament); margin-top: clamp(20px, 3vw, 32px); max-width: 24em; }
button, .przycisk { font: 700 16px/1 var(--inter); border: 0; cursor: pointer; padding: 18px 26px; border-radius: 999px; background: var(--atrament); color: var(--biel); white-space: nowrap; text-decoration: none; display: inline-block; transition: background .2s; }
button:hover, .przycisk:hover { background: var(--granat); }
.przycisk.limonka { background: var(--limonka); color: var(--atrament); }
.przycisk.limonka:hover { background: var(--limonka-c); }
.uwaga { font-size: 13px; color: var(--szary); margin-top: 12px; padding-left: 24px; }
.blad { font-size: 14px; color: var(--blad); margin-top: 8px; padding-left: 24px; }
.blad:empty { display: none; }
.dzieki { font: 600 clamp(19px, 2vw, 26px)/1.3 var(--inter); margin-top: 40px; }
.dzieki:focus { outline: none; }

/* Telefon na ciemnym pasie (film gościa, makieta partnera) */
.scena { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 72px 16px; background: var(--atrament); overflow: hidden; }
.scena::before { content: ''; position: absolute; left: 50%; top: 58%; width: min(760px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(200,240,79,.20), rgba(200,240,79,.06) 55%, rgba(200,240,79,0)); pointer-events: none; }
.scena > * { position: relative; }

/* Stopka */
footer { padding: 28px 0 36px; margin: 0 var(--bok); font-size: 13px; color: var(--szary); display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; border-top: 1px solid var(--linia); }
footer .znak { margin-right: auto; }
footer a { text-decoration: none; } footer a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .haslo { min-height: 80svh; justify-content: flex-start; padding-top: 34svh; padding-bottom: 32px; }
  .haslo h1 { font-size: 12.6vw; }
  .haslo .dol { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 32px; }
  .kadr.z-kula .w, .kadr.z-kula.prawo .w { flex-direction: column; align-items: flex-start; gap: 22px; }
  .kadr.z-kula .kula-k { order: -1; width: 72px; }
  .kadr.prawo p.dop { text-align: left; margin-left: 0; }
  .kadr { min-height: 60svh; padding: 64px var(--bok); }
  .kadr.caly { min-height: 100svh; }
  .kadr.prawo p.z { text-align: left; margin-left: 0; }
  .zapis { grid-template-columns: minmax(0, 1fr); padding-top: 104px; gap: 20px; align-content: center; }
  .zapis .kula { width: 64px; order: -1; }
        .uwaga, .blad { padding-left: 4px; }
  .pas { padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .kula.hop, .kr.hop { animation: none; }
}

/* Pola formularzy: duże, spokojne, etykieta w środku pola, która unosi się przy pisaniu */
.pole { position: relative; min-width: 0; }
.pole input { width: 100%; height: 68px; padding: 26px 22px 8px; font: 500 18px/1.2 var(--inter); color: var(--atrament); background: var(--biel);
  border: 1px solid var(--linia); border-radius: 18px; outline: none; -webkit-appearance: none; appearance: none;
  box-shadow: 0 8px 24px rgba(17,26,51,.05); transition: border-color .2s, box-shadow .2s; }
.pole label { position: absolute; left: 23px; top: 34px; transform: translateY(-50%); font: 500 17px/1 var(--inter); color: #737c98;
  pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 46px); transition: top .18s var(--ease), font-size .18s var(--ease); }
.pole input:focus + label, .pole input:not(:placeholder-shown) + label { top: 19px; font-size: 12px; font-weight: 600; color: var(--szary); }
.pole input:focus { border-color: var(--atrament); box-shadow: 0 0 0 4px rgba(17,26,51,.07); }
.pole input[aria-invalid] { border-color: var(--blad); }
.pole .blad { padding-left: 22px; }
.wiersz-zapis { display: flex; gap: 10px; align-items: flex-start; margin-top: clamp(32px, 4vw, 48px); max-width: 640px; }
.wiersz-zapis .pole { flex: 1; }
.wiersz-zapis button { height: 68px; border-radius: 18px; padding: 0 28px; font-size: 17px; }
.siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 880px; margin-top: clamp(32px, 4vw, 48px); }
.wyslij { margin-top: 22px; }
.wyslij .przycisk { height: 68px; border-radius: 18px; padding: 0 44px; font-size: 18px; }
.wyslij .uwaga, .zapis .uwaga { padding-left: 0; margin-top: 12px; }
.wyslij .uwaga { padding-left: 2px; }
.zapis .uwaga { padding-left: 2px; }

/* Strona partnera */
.partner .haslo h1 { font-size: clamp(42px, 9vw, 140px); max-width: 10.5em; color: var(--szary); text-wrap: balance; }
.partner .haslo .dol .przycisk { flex: none; height: 64px; display: inline-flex; align-items: center; border-radius: 18px; padding: 0 36px; font-size: 17px; }

@media (max-width: 640px) {
  .wiersz-zapis { flex-direction: column; align-items: stretch; }
  .wiersz-zapis button, .wyslij .przycisk { width: 100%; }
  .siatka { grid-template-columns: 1fr; gap: 12px; }
  .partner .haslo h1 { font-size: 10.6vw; }
}
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; }