/* Strona wejścia (logowanie) - wspólna dla wszystkich projektów. Zawsze ciemna. */

.entry {
  --e-bg: #06080A;
  --e-text: #E9EEF0;
  --e-muted: #7F8A90;
  --e-line: rgba(233, 238, 240, 0.14);
  --e-line-strong: rgba(233, 238, 240, 0.32);
  --e-accent: #7CF5C4;
  --e-accent-ink: #04130D;
  --e-danger: #FF7A6E;
  --mx: 50vw;
  --my: 40vh;
  color-scheme: dark;
}
.entry body {
  background: var(--e-bg);
  color: var(--e-text);
  min-height: 100dvh;
  overflow: hidden;
}

.field { position: fixed; inset: 0; z-index: 0; }
.glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(124, 245, 196, 0.07), transparent 60%);
}

.stage {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: grid; align-content: center; justify-items: center; gap: clamp(32px, 6vh, 64px);
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}

/* napis: rysują go cząsteczki na canvasie; tekst w środku to zapas bez JS */
.mark { width: min(820px, 92vw); height: clamp(64px, 15vw, 150px); display: grid; place-items: center; }
.mark-fallback {
  font: 800 clamp(40px, 11vw, 110px)/1 "Unbounded", sans-serif; letter-spacing: -0.02em;
  opacity: 0; transition: opacity 300ms ease;
}
.mark-fallback b { color: var(--e-accent); }
.no-canvas .mark-fallback { opacity: 1; }

/* formularz */
.entry-form {
  width: min(400px, 100%);
  display: grid; gap: 28px;
}
.entry-form > * { opacity: 0; transform: translateY(14px); animation: rise 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.entry-form > :nth-child(1) { animation-delay: 650ms; }
.entry-form > :nth-child(2) { animation-delay: 730ms; }
.entry-form > :nth-child(4) { animation-delay: 810ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

.entry-form label {
  display: block; margin-bottom: 10px;
  font: 500 11px/1 "Unbounded", sans-serif; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--e-muted);
}


.phone input {
  display: block; width: 100%; height: 52px; padding: 0 2px;
  border: 0; border-bottom: 1px solid var(--e-line-strong); border-radius: 0; outline: 0;
  background: transparent; color: var(--e-text);
  font: 500 26px/1 "Unbounded", sans-serif; letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.phone input:focus-visible { outline: none; border-color: var(--e-accent); box-shadow: 0 1px 0 0 var(--e-accent), 0 10px 24px -14px rgba(124, 245, 196, 0.8); }
.phone input[aria-invalid="true"] { border-color: var(--e-danger); }
.hint { margin-top: 8px; font-size: 13px; color: var(--e-muted); }

/* PIN: 6 komórek; prawdziwe pole leży na nich (przezroczyste), więc działa wklejanie i podpowiedź SMS */
.code { position: relative; }
.cells { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
/* "Lampa" = kursor. --lx/--ly (-1..1) to kierunek do światła; cienie padają w przeciwną stronę.
   Pusta komórka jest wypukła, wypełniona - wciśnięta. */
.cells { --lx: 0; --ly: -0.6; }
.cells span {
  position: relative; aspect-ratio: 3 / 4; border-radius: 12px;
  border: 1px solid rgba(233, 238, 240, 0.07);
  background: linear-gradient(calc(180deg + var(--lx) * 40deg), #161B1F, #0E1215);
  box-shadow:
    calc(var(--lx) * -7px) calc(var(--ly) * -7px) 16px rgba(0, 0, 0, 0.6),
    inset calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
  transition: border-color 200ms ease, transform 220ms cubic-bezier(0.23, 1, 0.32, 1), background 220ms ease;
}
.cells span.on {
  transform: translateY(1px) scale(0.98);
  background: #080B0D;
  border-color: rgba(124, 245, 196, 0.32);
  box-shadow:
    inset calc(var(--lx) * -5px) calc(var(--ly) * -5px) 10px rgba(0, 0, 0, 0.85),
    inset calc(var(--lx) * 2px) calc(var(--ly) * 2px) 2px rgba(124, 245, 196, 0.08);
}
.cells span::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px;
  border-radius: 50%; background: var(--e-accent);
  box-shadow: 0 0 18px 2px rgba(124, 245, 196, 0.7);
  transform: scale(0); transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cells span.on::before { transform: scale(1); }
.cells span.cur { border-color: var(--e-line-strong); }
.cells span.cur::after {
  content: ""; position: absolute; left: 50%; top: 28%; bottom: 28%; width: 2px; margin-left: -1px;
  background: var(--e-text); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* dłuższe hasło (admin) - komórki zamieniają się w jeden pasek */
.cells .bar {
  position: absolute; inset: 0; display: none; align-items: center; gap: 8px; padding: 0 18px;
  border-radius: 14px; border: 1px solid rgba(124, 245, 196, 0.45); background: rgba(124, 245, 196, 0.06);
  overflow: hidden;
}
.cells .bar i {
  display: block; height: 10px; border-radius: 5px;
  background: radial-gradient(circle, var(--e-accent) 4px, transparent 5px) 0 0 / 16px 10px repeat-x;
  filter: drop-shadow(0 0 6px rgba(124, 245, 196, 0.7));
}
.cells.long span { opacity: 0; }
.cells.long .bar { display: flex; }

.code input {
  position: absolute; left: 0; right: 0; bottom: 0; top: 21px; width: 100%;
  opacity: 0; border: 0; font-size: 16px; color: transparent; caret-color: transparent; background: transparent;
  cursor: text;
}
.code:focus-within .cells span.cur { border-color: var(--e-accent); box-shadow: 0 0 0 3px rgba(124, 245, 196, 0.12); }
.code:not(:focus-within) .cells span.cur::after { display: none; }

.cells.shake { animation: shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.cells.shake span, .cells.shake .bar { border-color: var(--e-danger); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.entry-form > .entry-error { color: var(--e-danger); font-size: 15px; margin-top: -12px; animation: none; opacity: 1; transform: none; }

.go {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; border: 0; border-radius: 16px; cursor: pointer; overflow: hidden;
  background: var(--e-accent); color: var(--e-accent-ink);
  font: 500 14px/1 "Unbounded", sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 10px 40px -10px rgba(124, 245, 196, 0.55);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms ease;
}
.go svg { width: 18px; height: 18px; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.go::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
}
@media (hover: hover) and (pointer: fine) {
  .go:hover { box-shadow: 0 14px 50px -10px rgba(124, 245, 196, 0.75); }
  .go:hover svg { transform: translateX(4px); }
  .go:hover::after { transform: translateX(120%); transition: transform 700ms ease; }
}
.go:active { transform: scale(0.97); }
.go:focus-visible { outline: 2px solid var(--e-text); outline-offset: 3px; }
.go[disabled] { pointer-events: none; }
.go.busy svg { animation: nudge 800ms ease-in-out infinite; }
/* w trakcie sprawdzania: jasna kreska biegnie po górnej krawędzi */
.go::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(4, 19, 13, 0.75), transparent);
  transform: translateX(-100%); opacity: 0;
}
.go.busy::before { opacity: 1; animation: scan 900ms cubic-bezier(0.77, 0, 0.175, 1) infinite; }
@keyframes scan { to { transform: translateX(250%); } }
@keyframes nudge { 50% { transform: translateX(5px); } }

/* wyjście po udanym logowaniu */
.leaving .entry-form, .leaving .glow { opacity: 0; transform: scale(0.98); transition: opacity 350ms ease, transform 350ms ease; }

@media (max-width: 420px) {
  .cells { gap: 8px; }
  .phone input { font-size: 22px; letter-spacing: 0.1em; }
  .cells span { border-radius: 10px; }
  .cells span::before { width: 10px; height: 10px; margin: -5px; }
}

@media (prefers-reduced-motion: reduce) {
  .entry-form > * { animation: none; opacity: 1; transform: none; }
  .cells span { transition: none; }
  .cells span::before { transition: none; }
}