/* Ekran logowania Forever. Osobny arkusz, żeby brama ważyła tyle co nic.
   Kolory i krój takie same jak na stronie. */

:root {
  --blue: #161CCF;
  --blue-glow: #4E55FF;
  --ink: #0A0A0F;
  --white: #ffffff;
  --paper: #F4F3EE;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --f-display: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--f-display);
  background: var(--ink);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

.wejscie {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 48px);
  overflow: hidden;
  isolation: isolate;
}

/* Tło: płótno z hero. Leży w zwykłym porządku malowania (bez ujemnego z-index),
   bo tylko wtedy rozmycie tła pod szklaną kartą ma co rozmywać. */
.wejscie__tlo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 62% 55%, rgba(78, 85, 255, 0.5), transparent 62%),
    linear-gradient(180deg, #0A0A0F 0%, #10113a 55%, #0A0A0F 100%);
}
.wejscie__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.wejscie__canvas.is-ready { opacity: 1; }

.wejscie__srodek {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 44px);
}

.wejscie__naglowek { margin: 0; text-align: center; }
/* Wejście: wordmark wyłania się większy i nieostry, skupia się, potem podjeżdża do góry,
   robiąc miejsce panelowi. Przesunięcie startowe to mniej więcej połowa wysokości panelu,
   więc na początku wordmark stoi w osi ekranu. */
.wejscie__wordmark {
  animation: wordmark-wejscie 3s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
  will-change: transform, opacity, filter;
}
@keyframes wordmark-wejscie {
  0% {
    opacity: 0;
    transform: translateY(120px) scale(1.5);
    letter-spacing: 0.52em;
    filter: blur(14px);
  }
  30% { opacity: 1; }
  52% {
    opacity: 1;
    transform: translateY(120px) scale(1.5);
    letter-spacing: 0.34em;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: 0.22em;
    filter: blur(0);
  }
}

.wejscie__wordmark {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.wejscie__wordmark sup {
  font-size: 0.32em;
  vertical-align: super;
  letter-spacing: 0;
  opacity: 0.65;
}

/* Karta na hasło */
.karta {
  animation: karta-wejscie 1.2s cubic-bezier(0.16, 1, 0.3, 1) 2.5s both;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 4.4vw, 34px);
  border-radius: 24px;
  /* Szkło: rozmyte tło pod spodem, jasny nalot na powierzchni i świetlista krawędź u góry. */
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.045) 42%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(120px) saturate(190%) contrast(0.62) brightness(1.25);
  backdrop-filter: blur(120px) saturate(190%) contrast(0.62) brightness(1.25);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  isolation: isolate;
}
/* Rozmyta kopia tła spod panelu. Rysuje ją szklo.js, tu tylko rozmywamy i skalujemy,
   żeby po rozmyciu nie było widać krawędzi kopii. */
.karta__szklo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  transform: scale(1.08);
  filter: blur(7px) saturate(130%) brightness(1.06);
  pointer-events: none;
}

/* Odblask w lewym górnym rogu, jak światło padające na taflę. */
.karta::before {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 150%;
  z-index: -1;
  background: radial-gradient(50% 60% at 22% 0%, rgba(255, 255, 255, 0.22), transparent 70%);
  pointer-events: none;
}
/* Po błędnym haśle strona wraca z serwera, więc sekwencji nie powtarzamy. */
.wejscie--od-razu .wejscie__wordmark { animation: none; }
.wejscie--od-razu .karta { animation: drgniecie 0.5s var(--ease); }
.karta--blad { animation: drgniecie 0.5s var(--ease); }

@keyframes karta-wejscie {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
}
@keyframes drgniecie {
  10%, 90% { transform: translateX(-3px); }
  30%, 70% { transform: translateX(5px); }
  50% { transform: translateX(-2px); }
}

.karta__etykieta {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.pole { position: relative; display: flex; align-items: center; }
.pole__input {
  width: 100%;
  padding: 17px 52px 17px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(6, 6, 14, 0.24);
  -webkit-backdrop-filter: blur(80px) saturate(160%) contrast(0.7) brightness(1.1);
  backdrop-filter: blur(80px) saturate(160%) contrast(0.7) brightness(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-family: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.pole__input::placeholder { color: rgba(255, 255, 255, 0.3); }
.pole__input:hover { border-color: rgba(255, 255, 255, 0.3); }
.pole__input:focus {
  outline: none;
  border-color: var(--blue-glow);
  background: rgba(6, 6, 14, 0.42);
  box-shadow: 0 0 0 4px rgba(78, 85, 255, 0.22);
}
.karta--blad .pole__input { border-color: rgba(226, 118, 105, 0.75); }

.pole__oko {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}
.pole__oko:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.pole__oko svg { width: 20px; height: 20px; }
.pole__oko .oko__zamkniete { opacity: 0; transition: opacity 0.2s; }
.pole__oko.is-pokazane .oko__zamkniete { opacity: 1; }

.karta__blad {
  margin: -4px 0 0;
  font-size: 0.9rem;
  color: #E27669;
}

/* Przycisk, ten sam kształt co „Zacznij czytać" na stronie */
.btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 6px 6px 6px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 0.5s var(--ease), background-color 0.3s;
}
.btn__ikona {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  transition: transform 0.45s var(--ease-out), background-color 0.3s;
}
.btn__ikona svg { width: 18px; height: 18px; }
.btn:hover { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 12px 40px rgba(22, 28, 207, 0.35); }
.btn:hover .btn__ikona { transform: translateX(3px); background: var(--blue-glow); }
.btn:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }


@media (prefers-reduced-motion: reduce) {
  .wejscie__wordmark, .karta, .karta--blad { animation: none; }
  }