/* Import Inter font for Mattock */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* Mattock layout uses Inter font family */
.mattock-layout {
	font-family: 'Inter', 'Noto Sans JP', sans-serif;
	--primary: #1e3a8a;
	--primary-dark: #1e293b;
	--primary-light: #3b82f6;
	--secondary: #10b981;
	--secondary-dark: #059669;
	--secondary-light: #34d399;
	--accent: #f59e0b;
	--accent-light: #fbbf24;
	
	/* Exact same gradient styles as demo */
	.gradient-text {
		background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.gradient-bg-primary {
		background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
	}
	
	.gradient-bg-primary-dark {
		background: linear-gradient(135deg, #1e293b 0%, #1e3a8a 100%);
	}
	
	.gradient-bg-secondary {
		background: linear-gradient(135deg, #059669 0%, #34d399 100%);
	}
	
	.gradient-bg-gold {
		background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #fde68a 100%);
	}
	
	/* Grid background */
	.grid-bg::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
		background-size: 40px 40px;
		opacity: 1;
	}
	
	/* Scroll animations */
	.animate-on-scroll {
		opacity: 0;
		transform: translateY(30px);
		transition: all 0.8s ease-out;
	}
	
	.animate-on-scroll.visible {
		opacity: 1;
		transform: translateY(0);
	}
	
	/* Custom shadows */
	.shadow-glow {
		box-shadow: 0 0 40px rgba(59, 130, 246, 0.5);
	}
	
	/* Hide scrollbar for mobile menu */
	.scrollbar-hide {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	
	.scrollbar-hide::-webkit-scrollbar {
		display: none;
	}
	
	/* Enhanced drop shadow for better text visibility */
	.drop-shadow-md {
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	}
	
	.drop-shadow-lg {
		text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
	}
	
	/* Floating animation */
	@keyframes float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-10px); }
	}
	
	.float-animation {
		animation: float 3s ease-in-out infinite;
	}
	
	/* Bounce slow animation */
	@keyframes bounce-slow {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-10px); }
	}
	
	.animate-bounce-slow {
		animation: bounce-slow 2s infinite;
	}
	
	/* Custom animations - exact same as demo */
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	
	@keyframes fadeInUp {
		0% {
			opacity: 0;
			transform: translateY(30px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes fadeInDown {
		0% {
			opacity: 0;
			transform: translateY(-30px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes float {
		0%, 100% {
			transform: translate(0, 0) scale(1);
		}
		50% {
			transform: translate(-20px, -30px) scale(1.1);
		}
	}
	
	/* Animation classes */
	.animate-fade-in {
		animation: fadeIn 0.8s ease-out;
	}
	
	.animate-fade-in-up {
		animation: fadeInUp 0.8s ease-out;
	}
	
	.animate-fade-in-down {
		animation: fadeInDown 0.8s ease-out;
	}
	
	.animate-float {
		animation: float 20s infinite ease-in-out;
	}
	
	.animate-pulse-slow {
		animation: pulse 2s infinite;
	}
	
	/* Color utilities matching demo */
	.text-primary {
		color: var(--primary);
	}
	
	.text-secondary {
		color: var(--secondary);
	}
	
	.bg-primary {
		background-color: var(--primary);
	}
	
	.bg-secondary {
		background-color: var(--secondary);
	}
	
	.border-primary {
		border-color: var(--primary);
	}
	
	/*Custom top page*/
	.logo-block {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		gap: 10px;
	}
	
	.logo-block .logo-symbol {
		display: inline-block;
		transform: rotate(45deg);
		height: 16px;
		width: 16px;
		margin-right: 0;
	}
	
	.gradient-bt-text {
		background: linear-gradient(135deg, #059669 0%, #34d399 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.text-accent-light {
		--tw-text-opacity: 1;
		color: rgb(251 191 36 / 1);
	}
	
	/* Forum-specific colors */
	.bg-forum-bg {
		background-color: #f8fafc;
	}
	
	.bg-forum-card {
		background-color: #ffffff;
	}
	
	.bg-forum-border {
		border-color: #e2e8f0;
	}
	
	.bg-forum-tag {
		background-color: #dbeafe;
	}
	
	.bg-forum-expert {
		background-color: #fef3c7;
	}
	
	.bg-forum-beginner {
		background-color: #dcfce7;
	}
	
	.bg-forum-popular {
		background-color: #fce7f3;
	}
	
	/* Additional forum animations */
	@keyframes slideIn {
		from {
			transform: translateX(100px);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}
	
	.animate-slide-in {
		animation: slideIn 0.5s ease-out;
	}
	
	@keyframes highlight {
		0% { background-color: #fbbf24; }
		100% { background-color: #f8fafc; }
	}
	
	.animate-highlight {
		animation: highlight 2s ease-in-out;
	}
	
	@keyframes rotate {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	@keyframes rotate-reverse {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(-360deg); }
	}
	
	.animate-rotate {
		animation: rotate 30s linear infinite;
	}
	
	.animate-rotate-reverse {
		animation: rotate-reverse 40s linear infinite;
	}
	
	@keyframes gentleFloat {
		0%, 100% { transform: translate(0, 0) scale(1); }
		50% { transform: translate(-20px, -30px) scale(1.1); }
	}
	
	.animate-gentle-float {
		animation: gentleFloat 20s infinite ease-in-out;
	}
	
	.bg-forum-expert {
		-webkit-background-clip: initial;
		background-clip: initial;
		-webkit-text-fill-color: initial;
		color: #000;
		right: -100px;
		top: 4px;
	}
	
	.phone-icon {
		filter: brightness(1000%);
	}
	
	// Chat widget
	@keyframes chatPulse {
		0%, 100% {
			box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
			transform: scale(1);
		}
		50% {
			box-shadow: 0 0 0 20px rgba(59, 130, 246, 0);
			transform: scale(1.05);
		}
	}
	
	.chat-pulse {
		animation: chatPulse 2s infinite;
	}
	
	.floating-action button	{
		cursor: pointer;
	}
}