/* =========================================================
   Stock Management System – Login (3D, fully responsive)
   Works on phones, tablets, laptops, desktops and 4K.
   ========================================================= */
:root {
	--navy-900: #0E2C63;
	--navy-700: #16448F;
	--blue-500: #2468E6;
	--blue-400: #3B82F6;
	--ink: #0F1E3D;
	--muted: #5C6B86;
	--line: #D9E2F1;
	--field: #F4F7FC;
	--page: #EEF3FB;
	--danger: #C0262D;
	--font: "Plus Jakarta Sans", "Segoe UI", Tahoma, sans-serif;
	/* fluid sizes – scale smoothly with the screen */
	--card-pad-x: clamp(22px, 3.4vw, 60px);
	--card-pad-y: clamp(28px, 4.2vh, 50px);
	--field-h: clamp(50px, 5.6vh, 62px);
	--gap: clamp(16px, 2.3vh, 26px);
	--fs-body: clamp(15px, .95vw, 17px);
}

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

html {
	-webkit-text-size-adjust: 100%;
}

html, body {
	margin: 0;
	min-height: 100%;
}

body {
	font-family: var(--font);
	font-size: var(--fs-body);
	color: var(--ink);
	background: radial-gradient(900px 600px at 85% 110%, #DCE7F8 0%, transparent 60%), radial-gradient(700px 500px at 100% 0%, #F7FAFF 0%, transparent 60%), var(--page);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.page {
	display: grid;
	grid-template-columns: 52% 48%;
	min-height: 100vh;
	min-height: 100dvh;
}

/* =========================================================
   LEFT – brand panel (desktop)
   ========================================================= */
.brand-wrap {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
}

.brand,
.brand-edge {
	position: absolute;
	inset: 0;
	clip-path: url(#brandClip);
}

.brand-edge {
	right: -34px;
	background: linear-gradient(180deg, #2F8FE0 0%, #3FB6D8 45%, #3CC6B0 75%, #5DD39E 100%);
}

.brand {
	display: flex;
	flex-direction: column;
	padding: clamp(40px, 10vh, 120px) 12% 0 8.5%;
	color: #fff;
	background: radial-gradient(600px 400px at 10% 0%, rgba(255,255,255,.08), transparent 70%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 45%, #3A78D0 100%);
	overflow: hidden;
}

.brand-head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 26px);
}

.brand-name {
	display: flex;
	flex-direction: column;
	line-height: 1.12;
}

	.brand-name strong {
		font-size: clamp(24px, 2.5vw, 44px);
		font-weight: 700;
		letter-spacing: -.01em;
	}

	.brand-name span {
		font-size: clamp(22px, 2.3vw, 40px);
		font-weight: 400;
		opacity: .92;
	}

.brand-tag {
	position: relative;
	z-index: 1;
	margin: clamp(18px, 4vh, 44px) 0 clamp(18px, 3.6vh, 40px);
	font-size: clamp(16px, 1.55vw, 26px);
	line-height: 1.5;
	color: #E6EEFB;
}

.features {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3.6vw, 70px);
	margin: 0;
	padding: 0;
	list-style: none;
}

	.features li {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		font-size: clamp(13px, 1vw, 17px);
		line-height: 1.4;
		text-align: center;
		color: #F1F5FD;
	}

.ficon {
	width: clamp(48px, 4vw, 70px);
	height: clamp(48px, 4vw, 70px);
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.55);
	background: rgba(255,255,255,.06);
}

	.ficon svg {
		width: 48%;
		height: 48%;
		fill: none;
		stroke: #fff;
		stroke-width: 1.6;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

/* illustration scales with BOTH width and height, so it never covers the text */
.warehouse {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 86%;
	max-width: 900px;
	aspect-ratio: 640 / 554;
	max-height: min(52vh, 100vh - 380px);
	max-height: min(52dvh, 100dvh - 380px);
	object-fit: cover;
	object-position: left 70%;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%), linear-gradient(90deg, #000 88%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(180deg, transparent 0%, #000 16%), linear-gradient(90deg, #000 88%, transparent 100%);
	mask-composite: intersect;
	pointer-events: none;
}

/* =========================================================
   RIGHT – 3D stage
   ========================================================= */
.stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(70px, 9vh, 100px) 6% clamp(30px, 5vh, 60px) 4%;
}

.tagline {
	position: absolute;
	top: clamp(20px, 4vh, 40px);
	right: 6%;
	margin: 0;
	font-size: 14px;
	color: #4A5D82;
}

	.tagline span {
		margin: 0 10px;
		color: #9AA8C2;
	}

.scene {
	width: 100%;
	max-width: clamp(440px, 34vw, 640px);
	perspective: 1500px;
	perspective-origin: 50% 40%;
}

.card {
	--rx: 4deg;
	--ry: -9deg;
	position: relative;
	padding: var(--card-pad-y) var(--card-pad-x) calc(var(--card-pad-y) + 4px);
	background: linear-gradient(160deg, #FFFFFF 0%, #FAFCFF 60%, #F2F6FD 100%);
	border-radius: clamp(20px, 1.8vw, 28px);
	transform-style: preserve-3d;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .25s ease-out;
	box-shadow: inset 0 1px 0 #FFFFFF, -1px 1px 0 #E3EAF6, -2px 2px 0 #DDE5F3, -3px 3px 0 #D7E0F0, -4px 4px 0 #D1DBEE, -5px 5px 0 #CBD6EB, -6px 6px 0 #C5D1E8, -7px 7px 0 #BFCCE5, -8px 8px 0 #B9C7E2, -30px 40px 60px rgba(22,68,143,.18), -60px 80px 120px rgba(22,68,143,.14);
	will-change: transform;
}

	.card::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		background: linear-gradient(115deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 35%);
		pointer-events: none;
	}

	.card > * {
		position: relative;
		z-index: 1;
	}

.layer-1 {
	transform: translateZ(14px);
}

.layer-2 {
	transform: translateZ(26px);
}

.layer-3 {
	transform: translateZ(38px);
}

.layer-4 {
	transform: translateZ(52px);
}

/* ---------- card header ---------- */
.card-head {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.4vw, 22px);
	margin-bottom: clamp(18px, 3.2vh, 32px);
}

.card-brand {
	font-size: clamp(18px, 1.5vw, 25px);
	color: var(--ink);
}

	.card-brand strong {
		font-weight: 700;
	}

.welcome {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 8px;
	font-size: clamp(27px, 2.6vw, 44px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
	text-shadow: 0 1px 0 #fff, 0 6px 14px rgba(15,30,61,.12);
}

.wave {
	display: inline-block;
	transform-origin: 70% 70%;
	animation: wave 2.6s ease-in-out 1s 2;
}

@keyframes wave {
	0%, 60%, 100% {
		transform: rotate(0);
	}

	10%, 30% {
		transform: rotate(16deg);
	}

	20%, 40% {
		transform: rotate(-8deg);
	}
}

.sub {
	margin: 0 0 clamp(20px, 3.4vh, 36px);
	font-size: clamp(15px, 1.15vw, 19px);
	color: var(--muted);
}

.error {
	display: block;
	margin: -8px 0 18px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--danger);
	background: #FDEDEE;
	border: 1px solid #F6C9CC;
	border-radius: 12px;
}

/* ---------- fields ---------- */
.field {
	margin-bottom: var(--gap);
}

	.field label {
		display: block;
		margin-bottom: 8px;
		font-weight: 600;
	}

.input {
	display: flex;
	align-items: center;
	height: var(--field-h);
	padding: 0 8px 0 16px;
	background: var(--field);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: inset 0 3px 6px rgba(22,68,143,.08), inset 0 -1px 0 #fff, 0 1px 0 #fff;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}

	.input > svg {
		flex: none;
		width: 22px;
		height: 22px;
		fill: none;
		stroke: #4A5D82;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.input input {
		flex: 1;
		min-width: 0;
		height: 100%;
		padding: 0 12px;
		font: inherit;
		font-size: 16px; /* 16px+ stops iPhone auto-zoom */
		color: var(--ink);
		background: transparent;
		border: 0;
		outline: none;
	}

		.input input::placeholder {
			color: #7A889F;
		}

	.input:focus-within {
		background: #fff;
		border-color: var(--blue-400);
		box-shadow: inset 0 2px 4px rgba(22,68,143,.06), 0 0 0 4px rgba(59,130,246,.18), 0 8px 18px rgba(36,104,230,.12);
	}

.eye {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
}

	.eye svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: #4A5D82;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.eye .eye-on {
		display: none;
	}

	.eye.is-shown .eye-on {
		display: block;
	}

	.eye.is-shown .eye-off {
		display: none;
	}

	.eye:hover {
		background: #E8EEF9;
	}

	.eye:focus-visible {
		outline: 2px solid var(--blue-400);
	}

/* ---------- remember / forgot ---------- */
.row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 2px 0 clamp(20px, 3.4vh, 34px);
}

.check {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 500;
	cursor: pointer;
}

	.check input {
		position: absolute;
		opacity: 0;
		width: 22px;
		height: 22px;
		margin: 0;
		cursor: pointer;
	}

	.check .box {
		width: 22px;
		height: 22px;
		flex: none;
		border-radius: 6px;
		border: 1.5px solid #B7C4DB;
		background: #fff;
		box-shadow: 0 2px 0 #D5DEEE;
	}

	.check input:checked + .box {
		border-color: var(--blue-500);
		background: var(--blue-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 15px no-repeat;
		box-shadow: 0 2px 0 #1848A8;
	}

	.check input:focus-visible + .box {
		outline: 2px solid var(--blue-400);
		outline-offset: 2px;
	}

.link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 500;
	color: var(--blue-500);
	text-decoration: none;
}

	.link:hover {
		text-decoration: underline;
	}

/* ---------- 3D button ---------- */
.btn-3d {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: calc(var(--field-h) + 2px);
	font: inherit;
	font-size: clamp(17px, 1.3vw, 20px);
	font-weight: 600;
	color: #fff;
	background: linear-gradient(180deg, #3B82F6 0%, #2468E6 55%, #1F5FD6 100%);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 0 #1848A8, 0 14px 24px rgba(36,104,230,.35);
	transition: transform .1s ease, box-shadow .1s ease, filter .15s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

	.btn-3d svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: #fff;
		stroke-width: 1.9;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.btn-3d:hover {
		filter: brightness(1.06);
	}

	.btn-3d:active {
		transform: translateZ(52px) translateY(5px);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 #1848A8, 0 5px 10px rgba(36,104,230,.3);
	}

	.btn-3d:focus-visible {
		outline: 3px solid #93C5FD;
		outline-offset: 4px;
	}

/* ---------- divider + roles ---------- */
.divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: clamp(24px, 4vh, 38px) 0 clamp(16px, 2.6vh, 26px);
	font-size: 15px;
	color: var(--muted);
}

	.divider::before, .divider::after {
		content: "";
		flex: 1;
		height: 1px;
		background: var(--line);
	}

.roles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(10px, 1.2vw, 18px);
}

.role {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: clamp(48px, 5.2vh, 56px);
	font: inherit;
	font-weight: 600;
	color: var(--navy-700);
	background: linear-gradient(180deg, #FFFFFF, #F5F8FE);
	border: 1px solid var(--line);
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 4px 0 #D3DCEC, 0 8px 16px rgba(22,68,143,.08);
	transition: transform .1s ease, box-shadow .1s ease, border-color .15s, color .15s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

	.role svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.role:hover {
		border-color: #A9BCE0;
	}

	.role:active {
		transform: translateY(3px);
		box-shadow: 0 1px 0 #D3DCEC, 0 3px 6px rgba(22,68,143,.08);
	}

	.role.is-active {
		color: var(--blue-500);
		border-color: var(--blue-400);
		background: linear-gradient(180deg, #F3F8FF, #E7F0FF);
		box-shadow: 0 4px 0 #9EBCF2, 0 8px 16px rgba(36,104,230,.15);
	}

	.role:focus-visible {
		outline: 2px solid var(--blue-400);
		outline-offset: 2px;
	}

/* =========================================================
   3D cube (logo + decor)
   ========================================================= */
.logo-3d {
	--s: clamp(28px, 2.4vw, 40px);
	width: calc(var(--s) * 1.55);
	height: calc(var(--s) * 1.55);
	display: grid;
	place-items: center;
	perspective: 600px;
	flex: none;
}

.logo-lg {
	--s: clamp(38px, 3.6vw, 64px);
}

.cube-3d {
	position: relative;
	width: var(--s);
	height: var(--s);
	transform-style: preserve-3d;
	transform: rotateX(-28deg) rotateY(-45deg);
}

	.cube-3d i {
		position: absolute;
		inset: 0;
		border-radius: 3px;
		backface-visibility: hidden;
	}

	.cube-3d .c-front {
		background: linear-gradient(160deg, #2E7BEA, #1B57C4);
		transform: translateZ(calc(var(--s) / 2));
	}

	.cube-3d .c-back {
		background: #1A4FAE;
		transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
	}

	.cube-3d .c-right {
		background: linear-gradient(160deg, #6FE0AE, #3DBB8C);
		transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
	}

	.cube-3d .c-left {
		background: #2A9C78;
		transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
	}

	.cube-3d .c-top {
		background: linear-gradient(135deg, #7DB3FF, #4A8FF2);
		transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
	}

	.cube-3d .c-bottom {
		background: #15428F;
		transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
	}

.logo-lg .c-front {
	background: linear-gradient(160deg, #FFFFFF, #DCE7F8);
}

.logo-lg .c-top {
	background: linear-gradient(135deg, #FFFFFF, #EAF1FC);
}

.spin {
	animation: spin 9s linear infinite;
}

@keyframes spin {
	from {
		transform: rotateX(-28deg) rotateY(-45deg);
	}

	to {
		transform: rotateX(-28deg) rotateY(315deg);
	}
}

.float-cube {
	position: absolute;
	perspective: 700px;
	pointer-events: none;
}

.fc1 {
	--s: clamp(44px, 4.4vw, 84px);
	top: 14%;
	right: 5%;
	animation: floatY 7s ease-in-out infinite;
}

.fc2 {
	--s: clamp(30px, 2.8vw, 54px);
	bottom: 9%;
	left: 5%;
	animation: floatY 6s ease-in-out -2s infinite;
}

.float-cube .cube-3d {
	animation: spin 22s linear infinite;
}

.fc2 .cube-3d {
	animation-direction: reverse;
}

.float-cube .c-front {
	background: linear-gradient(160deg, #CFE0FB, #AFC9F3);
}

.float-cube .c-right {
	background: linear-gradient(160deg, #C9F1DE, #9FE0C2);
}

.float-cube .c-top {
	background: #E3EDFD;
}

.float-cube .c-back {
	background: #B4CBF0;
}

.float-cube .c-left {
	background: #A6DDC3;
}

.float-cube .c-bottom {
	background: #9DB9E6;
}

@keyframes floatY {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-18px);
	}
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* PC: always exactly one screen tall – no scroll bar */
@media (min-width: 961px) {
	html, body {
		height: 100%;
		overflow: hidden;
	}

	.page {
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		overflow: hidden;
	}

	.brand-wrap {
		min-height: 0;
		height: 100%;
	}

	.stage {
		height: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.scene {
		transform: scale(var(--fit, 1));
		transform-origin: 50% 50%;
	}
}

/* Short laptop screens (1366×768, 1280×720 …) */
@media (min-width: 961px) and (max-height: 800px) {
	:root {
		--field-h: 48px;
		--gap: 14px;
		--card-pad-y: 26px;
	}

	.brand {
		padding-top: 36px;
	}

	.card-head {
		margin-bottom: 14px;
	}

	.sub {
		margin-bottom: 16px;
	}

	.divider {
		margin: 18px 0 12px;
	}

	.row {
		margin-bottom: 18px;
	}

	.stage {
		padding-top: 56px;
		padding-bottom: 24px;
	}

	.ficon {
		width: 46px;
		height: 46px;
	}
}

/* Small laptops / large tablets landscape */
@media (min-width: 961px) and (max-width: 1200px) {
	.page {
		grid-template-columns: 48% 52%;
	}

	.brand {
		padding-right: 14%;
	}

	.features {
		gap: 20px;
	}

		.features li {
			font-size: 13px;
		}
}

/* Big monitors / 4K */
@media (min-width: 2200px) {
	:root {
		--field-h: 70px;
		--fs-body: 19px;
	}

	.input input {
		font-size: 19px;
	}

	.tagline {
		font-size: 17px;
	}
}

/* ---------- Tablets & phones: stacked layout ---------- */
@media (max-width: 960px) {
	.page {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	/* left panel becomes a curved header banner */
	.brand-wrap {
		min-height: 0;
	}

	.brand-edge {
		display: none;
	}

	.brand {
		position: relative;
		clip-path: none;
		padding: 36px 28px 110px;
		border-radius: 0 0 48% 48% / 0 0 60px 60px;
		align-items: center;
		text-align: center;
	}

		.brand::after { /* teal accent line under the curve */
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 6px;
			background: linear-gradient(90deg, #2F8FE0, #3CC6B0, #5DD39E);
		}

	.brand-head {
		flex-direction: row;
		justify-content: center;
		text-align: left;
	}

	.brand-tag {
		margin: 14px 0 22px;
	}

		.brand-tag br {
			display: none;
		}

	.features {
		justify-content: center;
		gap: 22px 30px;
	}

	.warehouse {
		display: none;
	}

	/* card overlaps the banner */
	.stage {
		padding: 0 20px 28px;
		margin-top: -80px;
		justify-content: flex-start;
	}

	.scene {
		max-width: 560px;
		perspective: 1200px;
	}

	.card {
		--rx: 6deg;
		--ry: 0deg;
		box-shadow: inset 0 1px 0 #fff, 0 1px 0 #E3EAF6, 0 2px 0 #DDE5F3, 0 3px 0 #D7E0F0, 0 4px 0 #D1DBEE, 0 5px 0 #CBD6EB, 0 6px 0 #C5D1E8, 0 7px 0 #BFCCE5, 0 8px 0 #B9C7E2, 0 30px 50px rgba(22,68,143,.20);
	}

	.tagline {
		position: static;
		order: 2;
		margin-top: 26px;
		text-align: center;
	}

	.card-head {
		display: none;
	}
	/* logo already in banner */
	.float-cube {
		display: none;
	}
}

/* Phones */
@media (max-width: 560px) {
	:root {
		--card-pad-x: 22px;
		--card-pad-y: 28px;
		--field-h: 52px;
		--gap: 18px;
	}

	.brand {
		padding: 28px 18px 96px;
	}

	.brand-name strong {
		font-size: 22px;
	}

	.brand-name span {
		font-size: 20px;
	}

	.brand-tag {
		font-size: 15px;
		margin: 10px 0 18px;
	}

	.features {
		gap: 10px;
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 100%;
		max-width: 360px;
	}

		.features li {
			font-size: 12px;
			gap: 6px;
		}

	.ficon {
		width: 44px;
		height: 44px;
	}

	.stage {
		padding: 0 14px 24px;
		margin-top: -70px;
	}

	.card {
		--rx: 4deg;
		border-radius: 20px;
	}

	.welcome {
		font-size: 28px;
	}

	.layer-1, .layer-2, .layer-3 {
		transform: translateZ(10px);
	}

	.layer-4 {
		transform: translateZ(18px);
	}

	.btn-3d:active {
		transform: translateZ(18px) translateY(5px);
	}
}

/* Very small phones (320–360px) */
@media (max-width: 360px) {
	.features li {
		font-size: 11px;
	}

	.ficon {
		width: 40px;
		height: 40px;
	}

	.role {
		gap: 6px;
		font-size: 14px;
	}

		.role svg {
			width: 18px;
			height: 18px;
		}
}

/* Phones in landscape */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
	.brand {
		padding: 18px 24px 80px;
	}

	.brand-tag, .features {
		display: none;
	}

	.stage {
		margin-top: -60px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}