/* Kuck redesign — rodzina AUTH: strona /login (cztery widoki: logowanie, rejestracja, odzyskiwanie hasła, logowanie przez link) i strona statusów /newsletter.
   Port redesign/mockup/css/auth.css (codemod prefix.mjs: klasy kr-, tokeny --kr-*) dopasowany do szablonów Jinja: widoki to sekcje rdzenia Frappe (for-*), widoczny jest widok
   z is-current (nie atrybut hidden: skrypt rdzenia pokazuje i ukrywa sekcje przez jQuery .toggle(), a .kr-page [hidden] ma !important), wskaźnik wysyłania rysuje ::after
   (bundle nadpisuje textContent przycisków, więc przycisk nie może mieć dzieci), komunikat to stałe regiony live zasilane z elementu-rury rdzenia/bundla.
   Ładuje się po kr-tokens/base/components/shell.css i po starym kuck_shop.bundle.css: selektory elementów, na które działają też reguły starego CSS
   (body[data-path="login"] .for-*, .btn-login, .btn-login-option, Bootstrap .btn-primary), mają o jedną klasę więcej (.kr-page .kr-auth …), żeby wygrywały bez !important.
   Tylko tokeny, ostre krawędzie, ruch: translate/scale/opacity (bez `transition: all`). Stany początkowe elementów ruchu tylko w prefers-reduced-motion: no-preference. */

/* Native wrapper reset only for the app-owned login form. */
body:has(#page-login [data-kr-auth]),
body[data-path="login"] #page-login:has([data-kr-auth]) {
	background-color: var(--kr-paper);
}

#page-login:has([data-kr-auth]) > .page-content-wrapper {
	padding-top: 0;
}

#page-login:has([data-kr-auth]) > .page-content-wrapper > main.container {
	max-width: none;
	padding-inline: 0;
}

.kr-auth {
	/* nagłówek jest przyklejony i nie zajmuje miejsca, więc górny odstęp daje main.kr-header-offset */
	padding-bottom: var(--kr-s9);
}

/* ---------- scena: linia nad nią, duch typograficzny za nią ---------- */

.kr-auth__stage {
	position: relative;
	isolation: isolate;
	min-height: clamp(540px, 76svh, 780px);
	padding-block: var(--kr-s7) var(--kr-s8);
}

.kr-auth__stage::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--kr-line-strong);
	transform-origin: left;
}

/* duch typograficzny jako treść generowana (czysto dekoracyjny: poza drzewem dostępności i poza testem kontrastu) */
.kr-auth__stage::after {
	content: attr(data-ghost);
	/* alternatywa pusta: tekst ducha nie trafia do czytników ekranu (przeglądarki bez tej składni czytają go jak zwykłą treść generowaną) */
	content: attr(data-ghost) / "";
	position: absolute;
	z-index: -1;
	left: -0.03em;
	bottom: var(--kr-s5);
	font-size: clamp(7rem, 17vw, 17rem);
	font-weight: 200;
	letter-spacing: -0.05em;
	line-height: 0.8;
	color: rgb(17 17 17 / 4.5%);
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

@media (max-width: 991px) {
	.kr-auth__stage::after {
		display: none;
	}
}

/* ---------- widok: tytuł | formularz ---------- */

/* widok = sekcja rdzenia (for-*) z wrapperem .login-content; widoczny tylko bieżący. Stary CSS (body[data-path="login"] .for-*) zawęża sekcję do 28 rem z paddingiem: tu wraca do pełnej szerokości */
.kr-page .kr-auth .kr-auth-view {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* !important, bo skrypt rdzenia (jQuery .toggle()) ustawia sekcjom inline display; źródłem prawdy jest is-current (kr-auth.js zdejmuje też inline display) */
.kr-page .kr-auth .kr-auth-view.is-current {
	display: block;
}

.kr-page .kr-auth .kr-auth-view:not(.is-current) {
	display: none !important;
}

.kr-page .kr-auth .kr-auth-view__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s6);
	align-content: start;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

@media (min-width: 992px) {
	.kr-page .kr-auth .kr-auth-view__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--kr-s8);
		align-items: start;
	}
}

.kr-auth-view__title {
	max-width: 11em;
	font-size: clamp(2.25rem, 4.6vw, 4.25rem);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.04;
	text-wrap: balance;
}

@media (scripting: none) {
	[data-kr-auth] [data-kr-auth-form] {
		display: none;
	}

	.kr-page [data-kr-auth] .kr-auth-view__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	[data-kr-auth] .kr-auth__noscript {
		max-width: 60ch;
		margin-top: var(--kr-s5);
	}
}

.kr-auth-view__title:focus-visible {
	outline-offset: 6px;
}

/* maska słów tytułu: słowa są w HTML (serwer), indeks słowa liczy CSS po pozycji; ruch tylko w prefers-reduced-motion: no-preference */
.kr-auth-wm {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.kr-auth-wm__w {
	display: inline-block;
}

.kr-auth-wm:nth-child(1) { --kr-w: 0; }
.kr-auth-wm:nth-child(2) { --kr-w: 1; }
.kr-auth-wm:nth-child(3) { --kr-w: 2; }
.kr-auth-wm:nth-child(4) { --kr-w: 3; }
.kr-auth-wm:nth-child(5) { --kr-w: 4; }
.kr-auth-wm:nth-child(6) { --kr-w: 5; }
.kr-auth-wm:nth-child(7) { --kr-w: 6; }
.kr-auth-wm:nth-child(n + 8) { --kr-w: 7; }

/* ---------- formularz ---------- */

.kr-auth-form {
	display: grid;
	gap: var(--kr-s5);
	width: 100%;
	max-width: 30rem;
	min-width: 0;
}

.kr-auth-form__fields,
.kr-auth-form__actions {
	display: grid;
	gap: var(--kr-s4);
	min-width: 0;
}

.kr-auth-form__actions {
	gap: var(--kr-s3);
}

/* indeks animacji (stagger): pola 0…n, potem akcje; liczba pól w widoku z modyfikatora kr-auth-form--fN (CSP: bez style="") */
.kr-auth-form--f1 { --kr-fc: 1; }
.kr-auth-form--f2 { --kr-fc: 2; }
.kr-auth-form--f3 { --kr-fc: 3; }

.kr-auth-form__fields > :nth-child(1) { --kr-i: 0; }
.kr-auth-form__fields > :nth-child(2) { --kr-i: 1; }
.kr-auth-form__fields > :nth-child(3) { --kr-i: 2; }
.kr-auth-form__fields > :nth-child(n + 4) { --kr-i: 3; }
.kr-auth-form__actions > :nth-child(1) { --kr-i: var(--kr-fc, 0); }
.kr-auth-form__actions > :nth-child(2) { --kr-i: calc(var(--kr-fc, 0) + 1); }
.kr-auth-form__actions > :nth-child(3) { --kr-i: calc(var(--kr-fc, 0) + 2); }
.kr-auth-form__actions > :nth-child(4) { --kr-i: calc(var(--kr-fc, 0) + 3); }
.kr-auth-form__actions > :nth-child(5) { --kr-i: calc(var(--kr-fc, 0) + 4); }
.kr-auth-form__actions > :nth-child(n + 6) { --kr-i: calc(var(--kr-fc, 0) + 5); }

.kr-auth .kr-field {
	min-width: 0;
}

/* tarcza przed Bootstrapem 4 (website.bundle.css): label { margin-bottom: .5rem } powiększałby pola (audyt-shell W1) */
.kr-page .kr-auth .kr-field > label {
	margin-bottom: 0;
}

/* wygląd pól (także hasła) dostarcza .kr-field w kr-components.css; tu tylko to, co dotyczy strony logowania */
.kr-auth .kr-field input {
	width: 100%;
	min-width: 0;
}

.kr-auth .kr-field input::placeholder {
	color: #6d7176;
	opacity: 1;
}

.kr-auth .kr-field input:focus {
	border-color: var(--kr-ink);
}

/* błąd po regule fokusu (ta sama specyficzność), żeby pole z błędem zostało czerwone także w fokusie */
.kr-auth .kr-field input[aria-invalid="true"] {
	border-color: var(--kr-danger);
}

.kr-auth .kr-field input:read-only {
	background: var(--kr-stone);
}

/* autouzupełnianie przeglądarki nie maluje pól na żółto/niebiesko: tło zostaje białe, tekst czarny */
.kr-auth .kr-field input:-webkit-autofill {
	-webkit-text-fill-color: var(--kr-ink);
	box-shadow: 0 0 0 1000px var(--kr-paper) inset;
}

.kr-auth-form .kr-field__error {
	line-height: 1.4;
}

/* ---------- hasło: pole z przełącznikiem „Pokaż hasło / Ukryj hasło” ---------- */

.kr-auth-pass {
	position: relative;
	display: grid;
}

.kr-auth-pass input {
	padding-right: 56px;
}

.kr-auth-pass__toggle {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--kr-ink);
	transition: background-color var(--kr-t-hover) ease, scale var(--kr-t-press) var(--kr-ease-out);
}

.kr-auth-pass__toggle:active {
	scale: 0.96;
}

.kr-auth-pass__toggle .kr-ms {
	font-size: 22px;
}

/* przekreślenie oka, gdy hasło jest widoczne: linia rysuje się od lewej (glifu „visibility_off” nie ma w podzbiorze ikon) */
.kr-auth-pass__toggle::after {
	content: "";
	position: absolute;
	left: calc(50% - 10px);
	top: calc(50% - 10px);
	width: 28px;
	height: 2px;
	background: currentColor;
	rotate: 45deg;
	scale: 0 1;
	transform-origin: 0 50%;
	transition: scale 180ms var(--kr-ease-out);
}

.kr-auth-pass__toggle[aria-pressed="true"]::after {
	scale: 1 1;
}

@media (hover: hover) and (pointer: fine) {
	.kr-auth-pass__toggle:hover {
		background: rgb(127 127 127 / 16%);
	}
}

/* ---------- odsyłacze ---------- */

.kr-auth-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--kr-ink);
	font-size: 0.875rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: #868a8e;
	text-underline-offset: 0.22em;
	transition: text-decoration-color var(--kr-t-hover) ease;
}

.kr-auth-link--btn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.875rem;
	text-align: left;
}

/* kolor po najechaniu podany wprost: Bootstrap (a:hover { color: #0056b3 }) ma wyższą specyficzność niż .kr-auth-link */
@media (hover: hover) and (pointer: fine) {
	.kr-auth .kr-auth-link:hover {
		color: var(--kr-ink);
		text-decoration-color: var(--kr-ink);
	}
}

.kr-auth-aside {
	display: flex;
	justify-content: flex-end;
	margin-top: calc(-1 * var(--kr-s2));
}

.kr-auth-switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 var(--kr-s2);
	margin-top: var(--kr-s3);
	color: var(--kr-muted);
	font-size: 0.875rem;
	text-align: center;
}

.kr-auth-switch .kr-auth-link {
	color: var(--kr-ink);
}

.kr-auth-after {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--kr-s3);
	font-size: 0.875rem;
}

/* ---------- przyciski: etykieta się nie zmienia, wskaźnik pojawia się obok (komunikat osobno pod przyciskiem) ----------
   Elementy mają klasy starego CSS (btn-login, btn-primary, btn-login-option: hooki rdzenia i bundla), a stary CSS i Bootstrap stylują je po tych klasach.
   Reguły poniżej mają trzy klasy w selektorze i ustawiają wszystko, co tamte zmieniają (min-height, ramka, tło, krój, wielkie litery, podkreślenie, cienie, stany). */

.kr-page .kr-auth .kr-auth-submit,
.kr-page .kr-auth .kr-auth-alt {
	position: relative;
	min-height: 58px;
	margin-top: 0;
	padding: var(--kr-s2) var(--kr-s6);
	border: 1px solid var(--kr-ink);
	border-radius: 0;
	box-shadow: none;
	background: var(--kr-ink);
	color: var(--kr-paper);
	font-size: 0.78125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
	overflow-wrap: normal;
}

/* drugi przycisk (Logowanie przez link, Wróć do logowania) ma klasę rdzenia btn-login-option, którą stary CSS (body[data-path="login"] .btn-login-option) robi blokowym linkiem bez ramki:
   display i wyrównanie podajemy wprost, reszta (ramka, tło, kolor, margines, wysokość) jest w regule wyżej */
.kr-page .kr-auth .kr-auth-alt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: transparent;
	color: var(--kr-ink);
}

.kr-page .kr-auth .kr-auth-submit {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* tarcza przed starym CSS i Bootstrapem (audyt-shell K2): zaokrąglenie 5 px z !important na button i a[class*="btn"], pierścień fokusu po kliknięciu myszą */
.kr-page .kr-auth :is(button, a[class*="btn"]) {
	border-radius: 0 !important;
}

.kr-page .kr-auth :is(button, a):focus:not(:focus-visible) {
	outline: 0;
}

@media (max-width: 420px) {
	.kr-page .kr-auth .kr-auth-submit,
	.kr-page .kr-auth .kr-auth-alt {
		padding-inline: var(--kr-s4);
	}
}

.kr-page .kr-auth .kr-auth-submit:focus,
.kr-page .kr-auth .kr-auth-alt:focus {
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.kr-page .kr-auth .kr-auth-submit:not([disabled]):not([aria-disabled="true"]):hover {
		background: var(--kr-ink-soft);
		border-color: var(--kr-ink-soft);
		color: var(--kr-paper);
	}

	.kr-page .kr-auth .kr-auth-alt:hover {
		background: var(--kr-ink);
		border-color: var(--kr-ink);
		color: var(--kr-paper);
		text-decoration: none;
	}
}

/* wskaźnik wysyłania: glif postępu w ::after (przycisk nie ma dzieci); scale .25 -> 1 + blur 4 px -> 0, obrót niesie informację.
   Stan z formularza (aria-busy ustawia kr-auth.js na /login, bundle na /newsletter), nie z przycisku. */
.kr-auth-submit::after {
	content: "progress_activity";
	/* alternatywa pusta: nazwa glifu nie trafia do czytników ekranu (przeglądarki bez tej składni czytają ją jak zwykłą treść generowaną) */
	content: "progress_activity" / "";
	position: absolute;
	top: 50%;
	right: var(--kr-s4);
	translate: 0 -50%;
	font-family: "Material Symbols Sharp";
	font-size: 20px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	font-feature-settings: "liga";
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
	-webkit-font-smoothing: antialiased;
	opacity: 0;
	scale: 0.25;
	filter: blur(4px);
	transition: opacity 200ms var(--kr-ease-icon), scale 200ms var(--kr-ease-icon), filter 200ms var(--kr-ease-icon);
}

/* obrót (kr-spin z kr-components.css) gra tylko w trakcie wysyłania i niesie informację także przy ograniczonym ruchu */
.kr-auth-form[aria-busy="true"] .kr-auth-submit::after,
.kr-auth-result__form[aria-busy="true"] .kr-auth-submit::after {
	opacity: 1;
	scale: 1;
	filter: blur(0);
	animation: kr-spin 900ms linear infinite;
}

/* w trakcie wysyłania przycisk zostaje ciemny (disabled i aria-disabled robią z niego szary „nieaktywny”); fokus nie przepada */
.kr-page .kr-auth .kr-auth-form[aria-busy="true"] .kr-auth-submit,
.kr-page .kr-auth .kr-auth-result__form[aria-busy="true"] .kr-auth-submit {
	background: var(--kr-ink);
	border-color: var(--kr-ink);
	color: var(--kr-paper);
	cursor: progress;
}

/* ---------- komunikat pod przyciskiem (role=status i role=alert stoją stale w DOM, treść wstawia kr-auth.js z elementu-rury) ---------- */

.kr-auth-feedback__status:not(:empty),
.kr-auth-feedback__alert:not(:empty) {
	margin-top: var(--kr-s1);
}

/* rura: element, który zapisują rdzeń i bundle (p.ks-login-feedback, [data-kuck-newsletter-action-status]); pokazują go stałe regiony powyżej.
   !important, bo stary CSS (body[data-path="login"] .ks-login-feedback) i atrybut hidden ustawiane przez bundle nie mogą go odkryć */
.kr-page .kr-auth .kr-auth-feedback__pipe,
.kr-page .kr-auth .kr-auth-feedback__pipe:not([hidden]) {
	display: none !important;
}

.kr-auth-feedback__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kr-s3);
	padding: var(--kr-s4);
	border: 1px solid var(--kr-line);
	border-left: 4px solid var(--kr-muted);
	background: var(--kr-paper);
	font-size: 0.9375rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.kr-auth-feedback__box:has(> .kr-ms) {
	grid-template-columns: auto minmax(0, 1fr);
}

.kr-auth-feedback__box[data-tone="error"] {
	border-color: var(--kr-danger);
}

.kr-auth-feedback__box[data-tone="error"] > .kr-ms {
	color: var(--kr-danger);
}

.kr-auth-feedback__box[data-tone="ok"] {
	border-color: var(--kr-ok);
}

.kr-auth-feedback__box[data-tone="ok"] > .kr-ms {
	color: var(--kr-ok);
}

.kr-auth-feedback__txt {
	display: grid;
	gap: var(--kr-s1);
}

/* =====================================================================
   /newsletter: strona statusów (idle, potwierdzenie, wypisanie, nieprawidłowy link, wynik)
   ===================================================================== */

.kr-auth__stage--result {
	min-height: clamp(460px, 64svh, 660px);
}

.kr-auth__stage--result::after {
	left: auto;
	right: 0;
	font-size: clamp(5rem, 11vw, 12rem);
}

.kr-auth-result {
	display: grid;
	gap: var(--kr-s6);
	justify-items: start;
	max-width: 44rem;
}

.kr-auth-result__body {
	display: grid;
	gap: var(--kr-s4);
	justify-items: start;
	width: 100%;
}

.kr-auth-result__icon {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border: 1px solid var(--kr-line-strong);
}

.kr-auth-result__msg {
	max-width: 36em;
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.5;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.kr-auth-result__form {
	display: grid;
	gap: var(--kr-s3);
	justify-items: start;
	width: 100%;
	max-width: 30rem;
}

.kr-auth-result__form .kr-auth-feedback {
	width: 100%;
}

.kr-page .kr-auth .kr-auth-result__form .kr-auth-submit {
	width: 100%;
}

.kr-auth-result__home {
	margin-top: var(--kr-s2);
}

/* z aktywnym formularzem „Wróć do strony głównej” jest działaniem pobocznym */
.kr-auth-result[data-has-form="on"] .kr-auth-result__home {
	background: transparent;
	border-color: var(--kr-ink);
	color: var(--kr-ink);
}

/* kolor i podkreślenie po najechaniu podane wprost: Bootstrap (a:hover { color: #0056b3; text-decoration: underline }) ma wyższą specyficzność niż .kr-btn */
.kr-page .kr-auth .kr-auth-result[data-has-form="off"] .kr-auth-result__home:hover {
	color: var(--kr-paper);
	text-decoration: none;
}

.kr-page .kr-auth .kr-auth-result[data-has-form="on"] .kr-auth-result__home:hover {
	color: var(--kr-ink);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	.kr-page .kr-auth .kr-auth-result[data-has-form="on"] .kr-auth-result__home:hover {
		background: var(--kr-ink);
		border-color: var(--kr-ink);
		color: var(--kr-paper);
	}
}

@media (max-width: 575px) {
	.kr-auth-result__form,
	.kr-auth-result__home {
		width: 100%;
	}

	.kr-auth-result__home {
		justify-self: stretch;
	}
}

/* indeksy animacji strony statusów: ikona, komunikat, formularz, a „Wróć…” zawsze jako czwarty element */
.kr-auth-result__body > :nth-child(1) { --kr-i: 0; }
.kr-auth-result__body > :nth-child(2) { --kr-i: 1; }
.kr-auth-result__body > :nth-child(3) { --kr-i: 2; }
.kr-auth-result__home { --kr-i: 3; }

/* =====================================================================
   WARSTWA RUCHU
   Ten sam język co home, katalog, produkt, marka i kontakt: maska słów tytułu, duch typograficzny wsuwa się z boku, rysowana linia, unoszenie tekstu ze staggerem 55 ms.
   Pierwsze wejście strony gra z samego CSS (klasa is-intro jest w HTML, skrypt zdejmuje ją po 2,2 s: zdjęcie nie powtarza ruchu, bo wtedy nic już nie animuje elementów).
   Przełączenie widoku (zdarza się rzadko, ale to akcja interfejsu): kr-auth.js dodaje na ok. 0,9 s is-entering do nowego widoku, ruch krótszy (380 ms tytuł, 280 ms pola, stagger 35–40 ms).
   Wysoka częstość (wpisywanie, fokus, przełącznik hasła) bez ruchu poza kolorem ramki i rysowaną kreską. Komunikaty: błąd pola 200 ms, komunikat pod przyciskiem 240 ms.
   ===================================================================== */

@keyframes kr-au-word {
	from {
		translate: 0 112%;
	}
}

@keyframes kr-au-ghost {
	from {
		opacity: 0;
		translate: 5vw 0;
	}
}

@keyframes kr-au-line {
	from {
		scale: 0 1;
	}
}

@keyframes kr-au-rise {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

@keyframes kr-au-rise-s {
	from {
		opacity: 0;
		translate: 0 8px;
	}
}

@keyframes kr-au-err {
	from {
		opacity: 0;
		translate: 0 -4px;
	}
}

@keyframes kr-au-fade {
	from {
		opacity: 0;
	}
}

@keyframes kr-au-icon {
	from {
		opacity: 0;
		scale: 0.25;
		filter: blur(4px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* przełączenie widoku: tytuł z maski, pola unoszą się po kolei */
	.kr-auth-view.is-entering .kr-auth-wm__w {
		animation: kr-au-word 380ms var(--kr-ease-out) both;
		animation-delay: calc(20ms + var(--kr-w, 0) * 40ms);
	}

	.kr-auth-view.is-entering .kr-auth-form__fields > *,
	.kr-auth-view.is-entering .kr-auth-form__actions > * {
		animation: kr-au-rise-s 280ms var(--kr-ease-out) both;
		animation-delay: calc(60ms + var(--kr-i, 0) * 35ms);
	}

	/* pierwsze wejście strony: dłuższe, ze wszystkimi elementami */
	.kr-auth.is-intro .kr-auth__stage::before {
		animation: kr-au-line 1000ms var(--kr-ease-io) 200ms both;
	}

	.kr-auth.is-intro .kr-auth__stage::after {
		animation: kr-au-ghost 1400ms var(--kr-ease-out) 200ms both;
	}

	[data-kr-auth].is-intro .kr-auth__stage::after {
		animation: none;
	}

	.kr-auth.is-intro .kr-auth-view.is-current .kr-auth-wm__w {
		animation: kr-au-word 900ms var(--kr-ease-out) both;
		animation-delay: calc(80ms + var(--kr-w, 0) * 70ms);
	}

	.kr-auth.is-intro .kr-auth-view.is-current .kr-auth-form__fields > *,
	.kr-auth.is-intro .kr-auth-view.is-current .kr-auth-form__actions > * {
		animation: kr-au-rise 560ms var(--kr-ease-out) both;
		animation-delay: calc(260ms + var(--kr-i, 0) * 55ms);
	}

	.kr-auth-form .kr-field__error:not([hidden]) {
		animation: kr-au-err 200ms var(--kr-ease-out) both;
	}

	.kr-auth-feedback__box {
		animation: kr-au-rise-s 240ms var(--kr-ease-out) both;
	}

	/* strona statusów newslettera: klasa is-swap jest w HTML (pierwsze wejście) i jest dodawana przez kr-auth.js przy każdej zmianie stanu (restartuje ruch) */
	.kr-auth-result.is-swap .kr-auth-wm__w {
		animation: kr-au-word 700ms var(--kr-ease-out) both;
		animation-delay: calc(40ms + var(--kr-w, 0) * 60ms);
	}

	.kr-auth-result.is-swap .kr-auth-result__body > *,
	.kr-auth-result.is-swap .kr-auth-result__home {
		animation: kr-au-rise 420ms var(--kr-ease-out) both;
		animation-delay: calc(160ms + var(--kr-i, 0) * 55ms);
	}

	.kr-auth-result.is-swap .kr-auth-result__glyph {
		animation: kr-au-icon 320ms var(--kr-ease-icon) 160ms both;
	}

	.kr-auth.is-intro .kr-auth-result.is-swap .kr-auth-wm__w {
		animation-duration: 900ms;
	}

	.kr-auth.is-intro .kr-auth-result.is-swap .kr-auth-result__body > *,
	.kr-auth.is-intro .kr-auth-result.is-swap .kr-auth-result__home {
		animation-delay: calc(380ms + var(--kr-i, 0) * 55ms);
	}
}

@media (prefers-reduced-motion: reduce) {
	/* komunikaty pokazują się łagodnie, bez przesunięcia; kreska przełącznika pojawia się bez rysowania */
	.kr-auth-form .kr-field__error:not([hidden]),
	.kr-auth-feedback__box {
		animation: kr-au-fade 160ms linear both;
	}

	.kr-auth-pass__toggle::after,
	.kr-auth-submit::after {
		transition: none;
	}

	.kr-auth-submit::after {
		scale: 1;
		filter: none;
	}
}