/**
 * Niki Core
 * Modern Design System - Frontend
 *
 * Lightweight structural CSS for Design System rendering.
 * Brand / Skin styling stays outside this file.
 */

/* Designed elements */
.niki-has-custom-design {
	position: relative;
}

/* Keep normal content above background layers. */
.niki-has-custom-design > .niki-container,
.niki-has-custom-design > :not(.niki-design-overlay):not(.niki-design-background-video):not(.niki-design-background-animation) {
	position: relative;
	z-index: 2;
}

/* Overlay */
.niki-design-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
}

/* Video background */
.niki-design-background-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
}

/* Animation / Shortcode background */
.niki-design-background-animation {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
}

/* Motion base */
[class*="niki-motion-"] {
	animation-duration: 600ms;
	animation-fill-mode: both;
	animation-timing-function: ease;
}

.niki-motion-fade-in {
	animation-name: nikiFadeIn;
}

.niki-motion-fade-up {
	animation-name: nikiFadeUp;
}

.niki-motion-fade-down {
	animation-name: nikiFadeDown;
}

.niki-motion-fade-left {
	animation-name: nikiFadeLeft;
}

.niki-motion-fade-right {
	animation-name: nikiFadeRight;
}

.niki-motion-zoom-in {
	animation-name: nikiZoomIn;
}

@keyframes nikiFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes nikiFadeUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes nikiFadeDown {
	from {
		opacity: 0;
		transform: translateY(-24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes nikiFadeLeft {
	from {
		opacity: 0;
		transform: translateX(24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes nikiFadeRight {
	from {
		opacity: 0;
		transform: translateX(-24px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes nikiZoomIn {
	from {
		opacity: 0;
		transform: scale(.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Responsive visibility - same Design System breakpoints as responsive.php */
@media (min-width: 1025px) {
	.niki-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.niki-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.niki-hide-mobile {
		display: none !important;
	}
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	[class*="niki-motion-"] {
		animation: none !important;
		transform: none !important;
	}
}