/**
 * Matrix Effects CSS
 * Green (#00ff41) to purple/pink gradient color scheme
 */

/* ===== CSS Variables ===== */
:root {
	--matrix-green: #00ff41;
	--matrix-green-dark: #008f11;
	--matrix-green-glow: rgba(0, 255, 65, 0.5);
	--matrix-purple: #a855f7;
	--matrix-purple-glow: rgba(168, 85, 247, 0.5);
	--matrix-indigo: #6366f1;
	--matrix-pink: #f472b6;
	--matrix-red: #ef4444;
	--matrix-red-glow: rgba(239, 68, 68, 0.5);
	--matrix-bg: rgba(15, 10, 30, 0.98);
}

/* ===== BALANCE GLITCH EFFECT ===== */

/* Base glitch class */
.matrix-glitch {
	position: relative;
}

/* Green glow for balance increase (increased 3x) */
.matrix-glitch-green {
	color: var(--matrix-green) !important;
	text-shadow:
		0 0 5px var(--matrix-green),
		0 0 10px var(--matrix-green),
		0 0 20px var(--matrix-green-glow);
	animation: matrixGlitchGreen 0.9s ease-out;
}

/* Red glow for balance decrease (increased 3x) */
.matrix-glitch-red {
	color: var(--matrix-red) !important;
	text-shadow:
		0 0 5px var(--matrix-red),
		0 0 10px var(--matrix-red),
		0 0 20px var(--matrix-red-glow);
	animation: matrixGlitchRed 0.9s ease-out;
}

/* Shake animation for decrease (increased 2.5x) */
.matrix-shake {
	animation: matrixShake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes matrixGlitchGreen {
	0%, 100% {
		filter: none;
	}
	10%, 30%, 50%, 70%, 90% {
		filter: hue-rotate(0deg) saturate(2);
	}
	20%, 40%, 60%, 80% {
		filter: hue-rotate(10deg) saturate(1.5);
		transform: translateX(2px);
	}
}

@keyframes matrixGlitchRed {
	0%, 100% {
		filter: none;
	}
	10%, 30%, 50%, 70%, 90% {
		filter: hue-rotate(0deg) saturate(2);
	}
	20%, 40%, 60%, 80% {
		filter: hue-rotate(-10deg) saturate(1.5);
		transform: translateX(-2px);
	}
}

@keyframes matrixShake {
	0%, 100% {
		transform: translateX(0);
	}
	10% {
		transform: translateX(-6px) rotate(-1deg);
	}
	20% {
		transform: translateX(5px) rotate(1deg);
	}
	30% {
		transform: translateX(-4px) rotate(-0.5deg);
	}
	40% {
		transform: translateX(4px) rotate(0.5deg);
	}
	50% {
		transform: translateX(-3px);
	}
	60% {
		transform: translateX(3px);
	}
	70% {
		transform: translateX(-2px);
	}
	80% {
		transform: translateX(2px);
	}
	90% {
		transform: translateX(-1px);
	}
}

/* Matrix particles (increased 3x) */
.matrix-particle {
	position: fixed;
	font-family: monospace;
	font-size: 12px;
	pointer-events: none;
	z-index: 10001;
	animation: matrixParticleFade 1.5s ease-out forwards;
}

@keyframes matrixParticleFade {
	0% {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.5);
	}
}

/* ===== WELCOME MATRIX EFFECT ===== */

.matrix-welcome-active {
	/* НЕ переопределяем position - это ломает fixed позиционирование overlay */
	overflow: hidden;
}

/* Matrix rain background */
.matrix-rain-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	opacity: 0.4;
	transition: opacity 0.5s ease;
}

.matrix-rain-bg.fade-out {
	opacity: 0;
}

.matrix-rain-column {
	position: absolute;
	top: -100%;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: monospace;
	font-size: 14px;
	color: var(--matrix-green);
	text-shadow: 0 0 10px var(--matrix-green);
	animation: matrixRainFall 9s linear infinite; /* increased 3x */
}

.matrix-rain-column span {
	opacity: 0;
	animation: matrixCharFade 1.5s ease-out forwards; /* increased 3x */
}

@keyframes matrixRainFall {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(400%);
	}
}

@keyframes matrixCharFade {
	0% {
		opacity: 0;
		color: var(--matrix-green);
	}
	50% {
		opacity: 1;
		color: white;
	}
	100% {
		opacity: 0.6;
		color: var(--matrix-green);
	}
}

/* Materialization effect (increased 3x) */
.matrix-materializing {
	color: var(--matrix-green) !important;
	text-shadow: 0 0 15px var(--matrix-green);
	animation: matrixMaterialize 1.2s ease-out;
}

.matrix-materialized {
	animation: matrixMaterialized 0.9s ease-out;
}

@keyframes matrixMaterialize {
	0%, 100% {
		filter: blur(0);
	}
	25% {
		filter: blur(2px);
		transform: scale(1.1);
	}
	50% {
		filter: blur(1px);
		transform: scale(0.95);
	}
	75% {
		filter: blur(0.5px);
		transform: scale(1.02);
	}
}

@keyframes matrixMaterialized {
	0% {
		transform: scale(1.2);
		filter: brightness(2) drop-shadow(0 0 20px var(--matrix-green));
	}
	100% {
		transform: scale(1);
		filter: brightness(1) drop-shadow(0 0 0 transparent);
	}
}

/* Typewriter effect (increased 3x) */
.matrix-typewriter {
	border-right: 2px solid var(--matrix-green);
	animation: matrixCursor 2.1s step-end infinite;
}

.matrix-typed {
	border-right: none;
}

@keyframes matrixCursor {
	0%, 100% {
		border-color: var(--matrix-green);
	}
	50% {
		border-color: transparent;
	}
}

/* Number decoding */
.matrix-decoding {
	color: var(--matrix-green) !important;
	font-family: monospace;
	text-shadow: 0 0 10px var(--matrix-green);
}

.matrix-decoded {
	animation: matrixDecoded 0.9s ease-out;
}

@keyframes matrixDecoded {
	0% {
		text-shadow: 0 0 30px var(--matrix-green);
		transform: scale(1.2);
	}
	100% {
		text-shadow: none;
		transform: scale(1);
	}
}

/* ===== TAB TRANSITION EFFECT ===== */

.matrix-tab-wave {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 9998;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	overflow: hidden;
}

.matrix-wave-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: center;
	animation: matrixWaveColumn 0.75s ease-out forwards; /* increased 3x */
}

.matrix-wave-char {
	font-family: monospace;
	font-size: 16px;
	color: var(--matrix-green);
	text-shadow: 0 0 8px var(--matrix-green);
	opacity: 0;
	animation: matrixWaveChar 0.6s ease-out forwards; /* increased 3x */
}

/* Left to right wave */
.matrix-tab-wave-right .matrix-wave-column {
	transform-origin: left center;
}

/* Right to left wave */
.matrix-tab-wave-left .matrix-wave-column {
	transform-origin: right center;
}

.matrix-tab-wave.fade-out {
	animation: matrixWaveFadeOut 0.3s ease-out forwards; /* increased 3x */
}

@keyframes matrixWaveColumn {
	0% {
		opacity: 0;
		transform: scaleY(0);
	}
	50% {
		opacity: 1;
		transform: scaleY(1.2);
	}
	100% {
		opacity: 0.8;
		transform: scaleY(1);
	}
}

@keyframes matrixWaveChar {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes matrixWaveFadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* Swipe effect (lighter alternative) */
.matrix-swipe {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg,
		transparent 0%,
		var(--matrix-green) 20%,
		var(--matrix-purple) 50%,
		var(--matrix-green) 80%,
		transparent 100%
	);
	box-shadow:
		0 0 20px var(--matrix-green),
		0 0 40px var(--matrix-purple);
	z-index: 9998;
	pointer-events: none;
}

.matrix-swipe-right {
	left: 0;
	animation: matrixSwipeRight 0.9s ease-out forwards; /* increased 3x */
}

.matrix-swipe-left {
	right: 0;
	animation: matrixSwipeLeft 0.9s ease-out forwards; /* increased 3x */
}

@keyframes matrixSwipeRight {
	0% {
		left: 0;
		opacity: 1;
	}
	100% {
		left: 100%;
		opacity: 0;
	}
}

@keyframes matrixSwipeLeft {
	0% {
		right: 0;
		opacity: 1;
	}
	100% {
		right: 100%;
		opacity: 0;
	}
}

/* ===== TOAST DECODE EFFECT ===== */

.matrix-toast {
	font-family: monospace;
	position: relative;
	overflow: hidden;
}

.matrix-toast::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg,
		transparent,
		rgba(0, 255, 65, 0.2),
		transparent
	);
	animation: matrixToastScan 3s ease-out; /* increased 3x */
}

.matrix-glow-green {
	border-left: 3px solid var(--matrix-green) !important;
	box-shadow: 0 0 15px var(--matrix-green-glow) !important;
}

.matrix-glow-red {
	border-left: 3px solid var(--matrix-red) !important;
	box-shadow: 0 0 15px var(--matrix-red-glow) !important;
}

.matrix-decoded {
	animation: matrixToastDecoded 0.6s ease-out; /* increased 3x */
}

.matrix-dissolving {
	animation: matrixToastDissolve 0.6s ease-out forwards; /* increased 3x */
}

@keyframes matrixToastScan {
	0% {
		left: -50%;
	}
	100% {
		left: 150%;
	}
}

@keyframes matrixToastDecoded {
	0% {
		filter: brightness(1.5);
	}
	100% {
		filter: brightness(1);
	}
}

@keyframes matrixToastDissolve {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-10px) scale(0.95);
	}
}

/* ===== HISTORY HOVER EFFECT ===== */

.matrix-hover-card {
	position: relative;
	overflow: hidden;
}

/* Scanline effect */
.matrix-scanline {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent,
		var(--matrix-green),
		var(--matrix-purple),
		var(--matrix-green),
		transparent
	);
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none;
	z-index: 10;
}

.matrix-scanning .matrix-scanline {
	opacity: 1;
	animation: matrixScanline 4.5s ease-in-out infinite; /* increased 3x */
}

@keyframes matrixScanline {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(calc(100vh / 4));
		opacity: 0;
	}
}

/* Border symbols */
.matrix-border-symbols {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	transition: opacity 0.6s ease; /* increased 3x */
}

.matrix-border-symbols.active {
	opacity: 1;
}

.matrix-border-side {
	position: absolute;
	display: flex;
	font-family: monospace;
	font-size: 10px;
	color: var(--matrix-green);
	text-shadow: 0 0 5px var(--matrix-green);
}

.matrix-border-top {
	top: 2px;
	left: 0;
	right: 0;
	justify-content: space-around;
}

.matrix-border-bottom {
	bottom: 2px;
	left: 0;
	right: 0;
	justify-content: space-around;
}

.matrix-border-left {
	top: 0;
	bottom: 0;
	left: 2px;
	flex-direction: column;
	justify-content: space-around;
}

.matrix-border-right {
	top: 0;
	bottom: 0;
	right: 2px;
	flex-direction: column;
	justify-content: space-around;
}

.matrix-border-char {
	opacity: 0;
	animation: matrixBorderCharAppear 0.9s ease-out forwards; /* increased 3x */
}

@keyframes matrixBorderCharAppear {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
		color: white;
	}
	100% {
		opacity: 0.8;
		transform: scale(1);
		color: var(--matrix-green);
	}
}

/* Hover glow effect on card */
.matrix-hover-card:hover {
	box-shadow: 0 0 20px var(--matrix-green-glow),
				inset 0 0 30px rgba(0, 255, 65, 0.05);
}

/* ===== PROGRESS BAR MATRIX EFFECT ===== */

.matrix-progress-bar {
	position: relative;
	overflow: hidden;
}

.matrix-progress-rain {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
}

.matrix-progress-column {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	font-family: monospace;
	font-size: 8px;
	color: var(--matrix-green);
	text-shadow: 0 0 5px var(--matrix-green);
	line-height: 1;
}

.matrix-progress-column span {
	opacity: 0.7;
}

.matrix-progress-column span:first-child {
	opacity: 1;
	color: white;
}

/* Complete state */
.matrix-progress-rain.matrix-complete {
	display: flex;
	align-items: center;
	justify-content: center;
}

.matrix-assemble-char {
	font-family: monospace;
	font-size: 10px;
	color: var(--matrix-green);
	text-shadow: 0 0 8px var(--matrix-green);
}

.matrix-checkmark {
	font-family: monospace;
	font-size: 12px;
	font-weight: bold;
	color: var(--matrix-green);
	text-shadow: 0 0 10px var(--matrix-green);
}

/* ===== GRADIENT TEXT EFFECT ===== */

.matrix-gradient-text {
	background: linear-gradient(135deg,
		var(--matrix-green) 0%,
		var(--matrix-purple) 50%,
		var(--matrix-pink) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
	.matrix-glitch,
	.matrix-glitch-green,
	.matrix-glitch-red,
	.matrix-shake,
	.matrix-particle,
	.matrix-rain-column,
	.matrix-materializing,
	.matrix-materialized,
	.matrix-typewriter,
	.matrix-decoding,
	.matrix-decoded,
	.matrix-wave-column,
	.matrix-wave-char,
	.matrix-swipe,
	.matrix-toast::before,
	.matrix-scanline,
	.matrix-border-char {
		animation: none !important;
		transition: none !important;
	}

	.matrix-rain-bg,
	.matrix-tab-wave,
	.matrix-border-symbols {
		display: none !important;
	}
}