/* Vexel — animasyonlar & premium his */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ─── Modal ─── */
.modal-root {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}
.modal-root.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
}
html.dark .modal-backdrop {
	background: rgba(0, 0, 0, 0.72);
}
.modal-root.is-open .modal-backdrop {
	opacity: 1;
	backdrop-filter: blur(12px);
}
.modal-panel {
	position: relative;
	width: 100%;
	max-width: 28rem;
	transform: scale(0.88) translateY(24px);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.35s ease;
}
.modal-root.is-open .modal-panel {
	transform: scale(1) translateY(0);
	opacity: 1;
}
.modal-panel.is-closing {
	transform: scale(0.94) translateY(12px);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.modal-icon-glow {
	animation: vx-pulse-glow 2.5s ease-in-out infinite;
}
@keyframes vx-pulse-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(21, 94, 232, 0.35); }
	50% { box-shadow: 0 0 28px 6px rgba(21, 94, 232, 0.25); }
}

/* ─── Scroll reveal ─── */
.vx-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.vx-reveal.vx-visible {
	opacity: 1;
	transform: translateY(0);
}
.vx-stagger > .vx-reveal-child {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.vx-stagger.vx-visible > .vx-reveal-child {
	opacity: 1;
	transform: translateY(0);
}
.vx-stagger > .vx-reveal-child:nth-child(1) { transition-delay: 0.05s; }
.vx-stagger > .vx-reveal-child:nth-child(2) { transition-delay: 0.1s; }
.vx-stagger > .vx-reveal-child:nth-child(3) { transition-delay: 0.15s; }
.vx-stagger > .vx-reveal-child:nth-child(4) { transition-delay: 0.2s; }
.vx-stagger > .vx-reveal-child:nth-child(5) { transition-delay: 0.25s; }
.vx-stagger > .vx-reveal-child:nth-child(6) { transition-delay: 0.3s; }
.vx-stagger > .vx-reveal-child:nth-child(7) { transition-delay: 0.35s; }
.vx-stagger > .vx-reveal-child:nth-child(8) { transition-delay: 0.4s; }

/* ─── Kartlar & hover ─── */
.vx-card-hover {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.vx-card-hover:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -12px rgba(21, 94, 232, 0.2);
}
html.dark .vx-card-hover:hover {
	box-shadow: 0 20px 40px -12px rgba(21, 94, 232, 0.35);
}

/* ─── Butonlar ─── */
.vx-btn-shine {
	position: relative;
	overflow: hidden;
}
.vx-btn-shine::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
	animation: vx-shine 3s ease-in-out infinite;
}
@keyframes vx-shine {
	0%, 100% { left: -100%; }
	50% { left: 140%; }
}

.vx-btn-lift {
	transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.vx-btn-lift:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 12px 24px -8px rgba(21, 94, 232, 0.45);
}
.vx-btn-lift:active {
	transform: translateY(0) scale(0.98);
}

/* ─── Nav & sidebar ─── */
.vx-nav-item {
	transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease;
}
.vx-nav-item:hover {
	transform: translateX(4px);
}

/* ─── Sayfa girişi (demo main) ─── */
.vx-page-enter {
	animation: vx-page-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes vx-page-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ─── Banner gradient ─── */
.vx-banner-flow {
	background-size: 200% 200%;
	animation: vx-gradient-flow 6s ease infinite;
}
@keyframes vx-gradient-flow {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* ─── Floating orbs (landing) ─── */
.vx-orb {
	animation: vx-orb-float 8s ease-in-out infinite;
}
.vx-orb-delay { animation-delay: -4s; }
@keyframes vx-orb-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(12px, -18px) scale(1.05); }
	66% { transform: translate(-8px, 10px) scale(0.95); }
}

/* ─── Hero gradient text ─── */
.vx-gradient-text {
	background-size: 200% auto;
	animation: vx-text-shimmer 4s linear infinite;
}
@keyframes vx-text-shimmer {
	to { background-position: 200% center; }
}

/* ─── Progress bar ─── */
.vx-progress-fill {
	animation: vx-progress-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	transform-origin: left;
}
@keyframes vx-progress-grow {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ─── Logo pulse ─── */
.vx-logo-pulse {
	animation: vx-logo-soft 3s ease-in-out infinite;
}
@keyframes vx-logo-soft {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}

/* ─── Input focus glow ─── */
.demo-input:focus {
	animation: vx-input-glow 0.4s ease;
}
@keyframes vx-input-glow {
	0% { box-shadow: 0 0 0 0 rgba(21, 94, 232, 0.4); }
	100% { box-shadow: 0 0 0 3px var(--demo-accent-soft); }
}