/* Ekrany konta – logowanie, zmiana hasła, pierwsze konto (_wejscie.html; Norbert 20.10.2026, wzór: panel logowania
   WordPressa HorecArt od AdWise). Z lewej wizytówka:
   przenikające się zdjęcia kuchni z realizacji HorecArt (powolne przybliżanie), grafitowa poświata, pływające kwadraty
   z ikonami kuchni i hasło firmy z horecart.pl. Z prawej formularz. Tylko kolory z palety HorecArt (styl.css, :root);
   przezroczystości to te same kolory z kanałem alfa. Ruch wyłącza ustawienie systemu „ogranicz ruch”. */

body.strona-wejscia { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); min-height: 100vh;
                        font-size: 14px; }

/* ---- wizytówka z lewej ---- */
.wizytowka { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
             padding: 52px 56px 40px; background: #2D3237; color: #FFFFFF; isolation: isolate; }
.wizytowka .zdjecia, .wizytowka .zdjecia span, .wizytowka .poswiata, .wizytowka .kwadraty { position: absolute; inset: 0; }
.wizytowka .zdjecia { z-index: -3; }
.wizytowka .zdjecia span { background: center / cover no-repeat; opacity: 0; animation: przenikanie 28s linear infinite; }
.wizytowka .zdjecia .z1 { background-image: url("logowanie/kuchnia-1.jpg"); animation-delay: -1.4s; }
.wizytowka .zdjecia .z2 { background-image: url("logowanie/kuchnia-2.jpg"); animation-delay: 5.6s; }
.wizytowka .zdjecia .z3 { background-image: url("logowanie/kuchnia-3.jpg"); animation-delay: 12.6s; }
.wizytowka .zdjecia .z4 { background-image: url("logowanie/kuchnia-4.jpg"); animation-delay: 19.6s; }
/* każde zdjęcie: wyłania się, stoi ok. 6 s, powoli się przybliża i znika pod następnym */
@keyframes przenikanie {
  0% { opacity: 0; transform: scale(1.02); }
  5% { opacity: 1; }
  25% { opacity: 1; }
  31% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}
/* grafit od dołu i z lewej – napisy są czytelne na każdym zdjęciu, zdjęcie prześwituje z prawej u góry */
.wizytowka .poswiata { z-index: -2;
  background: linear-gradient(115deg, rgba(45, 50, 55, .94) 0%, rgba(45, 50, 55, .80) 45%, rgba(45, 50, 55, .55) 100%),
              linear-gradient(0deg, rgba(45, 50, 55, .85) 0%, rgba(45, 50, 55, 0) 45%); }

/* pływające kwadraty: przezroczyste złoto i miód, część z ikoną kuchni; każdy pływa w swoim tempie */
.wizytowka .kwadraty { z-index: -1; pointer-events: none; }
.kwadrat { position: absolute; display: grid; place-items: center; border-radius: 6px; background: rgba(214, 172, 99, .10);
           border: 1px solid rgba(230, 198, 154, .22); color: #E6C69A; animation: plyniecie 18s ease-in-out infinite alternate; }
.kwadrat .ikona { width: 38%; height: 38%; stroke-width: 1.4; opacity: .85; }
.kwadrat.pelny { background: rgba(214, 172, 99, .18); border-color: transparent; }
.kwadrat.cien { background: rgba(250, 249, 246, .05); border-color: rgba(250, 249, 246, .10); }
.kwadrat.k1 { width: 120px; height: 120px; top: 7%; left: 62%; --obrot: 8deg; animation-duration: 17s; }
.kwadrat.k2 { width: 76px; height: 76px; top: 24%; left: 86%; --obrot: -12deg; animation-duration: 21s; animation-delay: -6s; }
.kwadrat.k3 { width: 150px; height: 150px; top: 66%; left: 74%; --obrot: 14deg; animation-duration: 24s; animation-delay: -3s; }
.kwadrat.k4 { width: 58px; height: 58px; top: 88%; left: 52%; --obrot: -6deg; animation-duration: 15s; animation-delay: -9s; }
.kwadrat.k5 { width: 96px; height: 96px; top: 13%; left: 38%; --obrot: -16deg; animation-duration: 19s; animation-delay: -12s; }
.kwadrat.k6 { width: 44px; height: 44px; top: 34%; left: 70%; --obrot: 20deg; animation-duration: 13s; animation-delay: -4s; }
.kwadrat.k7 { width: 190px; height: 190px; top: 82%; left: 86%; --obrot: -10deg; animation-duration: 27s; animation-delay: -15s; }
.kwadrat.k8 { width: 70px; height: 70px; top: 74%; left: 10%; --obrot: 10deg; animation-duration: 20s; animation-delay: -7s; }
@keyframes plyniecie {
  0% { transform: translate(0, 0) rotate(var(--obrot)); }
  50% { transform: translate(14px, -26px) rotate(calc(var(--obrot) + 6deg)); }
  100% { transform: translate(-10px, 18px) rotate(calc(var(--obrot) - 5deg)); }
}

.wizytowka .logo { display: block; width: 190px; height: auto; filter: brightness(0) invert(1); }   /* czarne logo na biało */
.wizytowka .haslo { margin: 0; font-size: 44px; line-height: 1.12; font-weight: 700; letter-spacing: -.01em; }
.wizytowka .haslo span { display: block; color: #D6AC63; }
.wizytowka .podpis { margin: 18px 0 0; max-width: 430px; color: #F2EFE9; font-size: 15px; line-height: 1.55; }
.wizytowka .prawa-autorskie { margin: 0; color: #E5DED4; font-size: 12px; letter-spacing: .02em; }

/* ---- formularz z prawej ---- */
.panel-wejscia { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: none;
                   margin: 0; padding: 48px 32px; background: #FAF9F6; }
/* formularz bez animacji wejścia – w karcie otwartej w tle przeglądarka ją wstrzymuje i formularz zostawał blady */
.formularz-wejscia { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 400px; }
.formularz-wejscia h1 { margin: 0; font-size: 32px; font-weight: 700; text-align: center; }
.formularz-wejscia .wstep { margin: -10px 0 8px; color: #41484E; text-align: center; }
.formularz-wejscia .komunikat-ust { margin: 0; }
.formularz-wejscia label { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; font-weight: 600; }
.formularz-wejscia label small { display: inline; margin-left: 4px; font-size: 12px; font-weight: 400; }
.formularz-wejscia input { width: 100%; height: 46px; padding: 0 14px; font-size: 14.5px; background: #FFFFFF;
                             border: 1px solid #E5DED4; border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.formularz-wejscia input:focus { outline: 0; border-color: #D6AC63; box-shadow: 0 0 0 3px rgba(214, 172, 99, .28); }
.formularz-wejscia .z-oczkiem { position: relative; }
.formularz-wejscia .z-oczkiem input { padding-right: 46px; }
.formularz-wejscia .oczko { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: grid;
                              place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px;
                              background: none; color: #41484E; cursor: pointer; }
.formularz-wejscia .oczko:hover { background: #F2EFE9; }
.formularz-wejscia .oczko .ikona { width: 18px; height: 18px; }
.formularz-wejscia button.glowny { justify-content: center; height: 48px; margin-top: 6px; border-radius: 8px;
                                     font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; }
.formularz-wejscia button.glowny .ikona { width: 16px; height: 16px; }
.formularz-wejscia .podpowiedz { margin: 0; color: #41484E; font-size: 12.5px; text-align: center; }
.formularz-wejscia .na-strone, .formularz-wyjscia .na-strone { align-self: center; padding: 0; border: 0;
        border-bottom: 1px solid transparent; border-radius: 0; background: none; color: #41484E; font-size: 12.5px;
        text-decoration: none; cursor: pointer; }
.formularz-wejscia .na-strone:hover, .formularz-wyjscia .na-strone:hover { border-bottom-color: #D6AC63; }
/* „Wyloguj” przy obowiązkowej zmianie hasła – osobny formularz pod głównym */
.formularz-wyjscia { display: flex; justify-content: center; width: 100%; max-width: 400px; margin-top: 18px; }
.panel-wejscia .nazwa-programu { margin: 40px 0 0; color: #41484E; font-size: 12px; letter-spacing: .02em; }
.panel-wejscia .nazwa-programu strong { font-weight: 700; }

/* telefon i wąskie okno: wizytówka jako pas nad formularzem, bez dużego hasła */
@media (max-width: 860px) {
  body.strona-wejscia { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .wizytowka { min-height: 230px; padding: 28px 24px 22px; }
  .wizytowka .logo { width: 150px; }
  .wizytowka .haslo { font-size: 27px; }
  .wizytowka .podpis, .wizytowka .prawa-autorskie, .kwadrat.k3, .kwadrat.k4, .kwadrat.k6, .kwadrat.k7,
  .kwadrat.k8 { display: none; }     /* zostają kwadraty u góry – reszta wchodziłaby na hasło */
  .panel-wejscia { justify-content: flex-start; padding: 32px 20px; }
}

/* „ogranicz ruch” w systemie: jedno zdjęcie, kwadraty stoją */
@media (prefers-reduced-motion: reduce) {
  .wizytowka .zdjecia span, .kwadrat { animation: none; }
  .wizytowka .zdjecia .z1 { opacity: 1; }
}