@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--accent-color-rgb: 15, 23, 42;
}

body {
	opacity: 0;
	transition: opacity 0.3s ease;
}

body.loaded {
	opacity: 1;
}

@media (max-width: 768px) {
	.sidebar-open aside {
		transform: translateX(0);
	}

	.sidebar-open .sidebar-overlay {
		opacity: 1;
		pointer-events: auto;
	}
}

.bg-accent {
	background-color: rgb(var(--accent-color-rgb)) !important;
}

.text-accent {
	color: rgb(var(--accent-color-rgb)) !important;
}

.border-accent {
	border-color: rgb(var(--accent-color-rgb)) !important;
}

.ring-accent {
	--tw-ring-color: rgba(var(--accent-color-rgb), 0.5) !important;
}

.shadow-accent {
	--tw-shadow-color: rgba(var(--accent-color-rgb), 0.25) !important;
	box-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
}

.accent-input {
	accent-color: rgb(var(--accent-color-rgb)) !important;
}

.bg-accent-light {
	background-color: rgba(var(--accent-color-rgb), 0.1) !important;
}

.bg-accent-soft {
	background-color: rgba(var(--accent-color-rgb), 0.4) !important;
}

@layer base {
	body {
		@apply bg-slate-50 text-slate-900 antialiased;
		font-feature-settings: "cv02", "cv03", "cv04", "cv11";
	}
}

@layer components {
	.glass-card {
		@apply bg-white/70 backdrop-blur-md border border-white/20 shadow-xl;
	}

	.sidebar-link {
		@apply flex items-center space-x-3 px-4 py-2.5 rounded-xl transition-all duration-200 text-slate-600;
	}

	.sidebar-link:hover {
		@apply bg-accent-light text-accent;
	}

	.input-field {
		@apply w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 transition-all;
	}

	.input-field:focus {
		@apply ring-accent ring-opacity-20 border-accent;
	}

	.label-sm {
		@apply text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1.5 block px-1;
	}

	.toggle-pill {
		@apply w-10 h-5 bg-slate-200 rounded-full transition-all duration-300 relative cursor-pointer ring-4 ring-transparent;
	}

	.toggle-pill::after {
		content: '';
		@apply absolute top-1 left-1 w-3 h-3 bg-white rounded-full transition-all duration-300 shadow-sm;
	}

	input:checked+.toggle-pill {
		@apply bg-accent;
	}

	input:checked+.toggle-pill::after {
		@apply translate-x-5;
	}

	input[type="range"]::-webkit-slider-thumb {
		@apply appearance-none w-4 h-4 rounded-full bg-accent cursor-pointer border-2 border-white shadow-sm transition-transform active:scale-110;
	}

	input[type="range"]::-moz-range-thumb {
		@apply w-4 h-4 rounded-full bg-accent cursor-pointer border-2 border-white shadow-sm transition-transform active:scale-110;
	}

	::-webkit-scrollbar {
		width: 5px;
	}

	::-webkit-scrollbar-track {
		@apply bg-transparent;
	}

	::-webkit-scrollbar-thumb {
		@apply bg-slate-200 rounded-full hover:bg-slate-300;
	}

	.custom-marker {
		@apply flex items-center justify-center;
	}

	.marker-pin {
		@apply w-10 h-10 text-accent filter drop-shadow-lg;
	}
}

.leaflet-container {
	background: transparent !important;
}

#poster-container {
	transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
}

#presets-modal.show,
#credits-modal.show,
#artistic-modal.show {
	@apply opacity-100 pointer-events-auto;
}

#presets-modal.show>div:last-child,
#credits-modal.show>div:last-child,
#artistic-modal.show>div:last-child {
	@apply scale-100;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

#mode-tile.active,
#mode-artistic.active {
	@apply bg-accent text-white shadow-sm;
}

@keyframes pulse-ring {
	0% {
		transform: scale(.33);
	}

	80%,
	100% {
		opacity: 0;
	}
}

.search-pulse {
	position: absolute;
	width: 20px;
	height: 20px;
	@apply bg-accent rounded-full;
}

.search-pulse::before {
	content: '';
	position: absolute;
	width: 300%;
	height: 300%;
	left: -100%;
	top: -100%;
	@apply rounded-full bg-accent opacity-50;
	animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.logo-pulse {
	transform-origin: center;
	will-change: transform;
	animation: logoTilt 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.group:hover .logo-pulse,
.logo-pulse:hover {
	animation-play-state: paused;
}

@keyframes logoTilt {

	0%,
	5% {
		transform: rotate(0deg) translateX(0);
	}

	6% {
		transform: rotate(-9deg) translateX(-3px);
	}

	7.5% {
		transform: rotate(9deg) translateX(3px);
	}

	9% {
		transform: rotate(-5deg) translateX(-1.5px);
	}

	10% {
		transform: rotate(0deg) translateX(0);
	}

	100% {
		transform: rotate(0deg) translateX(0);
	}
}