/* Global Hover Animations - Based on Calendar Style */
/* This file provides consistent hover animations across the entire website */

/* Base transition for all interactive elements */
.btn,
.card,
.stat,
.modal-box,
.dropdown,
.input,
.textarea,
.select,
.file-input,
.table,
.tab,
.alert,
.badge,
.progress,
.rating,
.toggle,
.checkbox,
.radio,
.swap,
.drawer,
.menu,
.navbar,
.footer,
.hero,
.artboard,
.mockup,
.phone,
.browser,
.code,
.kbd,
.tooltip,
.popover,
.collapse,
.join,
.stack,
.divider,
.spacer,
.loading,
.skeleton,
.mask,
.avatar,
.chat,
.chat-bubble,
.timeline,
.steps,
.breadcrumbs,
.link,
.link-hover,
.focus,
.active,
.disabled,
.glass,
.no-animation {
	transition: all 0.3s cubic-bezier(0.21, 0.68, 0.09, 0.27);
}

/* Card Hover Animations */
.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Button Hover Animations */
.btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
	transform: translateY(-2px);
}

.btn-secondary:hover {
	box-shadow: 0 6px 20px rgba(107, 114, 128, 0.4);
	transform: translateY(-2px);
}

.btn-accent:hover {
	box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
	transform: translateY(-2px);
}

.btn-success:hover {
	box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
	transform: translateY(-2px);
}

.btn-warning:hover {
	box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
	transform: translateY(-2px);
}

.btn-error:hover {
	box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
	transform: translateY(-2px);
}

.btn-info:hover {
	box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
	transform: translateY(-2px);
}

/* Input Field Hover Animations */
.input:hover,
.textarea:hover,
.select:hover,
.file-input:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.input:focus,
.textarea:focus,
.select:focus,
.file-input:focus {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Table Row Hover Animations - DISABLED */
/* Tables should not have hover animations to avoid interference with functionality */
.table tbody tr:hover {
	/* No animations for table rows */
}

/* Tab Hover Animations */
.tab:hover {
	transform: translateY(-1px);
}

.tab.tab-active {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Modal Hover Animations */
.modal-box:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Dropdown Hover Animations */
.dropdown:hover {
	transform: translateY(-1px);
}

.dropdown-content {
	transition: all 0.3s cubic-bezier(0.21, 0.68, 0.09, 0.27);
}

.dropdown:hover .dropdown-content {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Alert Hover Animations */
.alert:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Badge Hover Animations */
.badge:hover {
	transform: translateY(-1px) scale(1.05);
}

/* Progress Bar Hover Animations */
.progress:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Rating Hover Animations */
.rating input:hover + .rating-star {
	transform: scale(1.1);
}

/* Toggle Hover Animations */
.toggle:hover {
	transform: translateY(-1px);
}

/* Checkbox and Radio Hover Animations */
.checkbox:hover,
.radio:hover {
	transform: scale(1.05);
}

/* Swap Hover Animations */
.swap:hover {
	transform: translateY(-1px);
}

/* Drawer Hover Animations */
.drawer-toggle:hover {
	transform: translateY(-1px);
}

/* Menu Hover Animations */
.menu li:hover {
	transform: translateX(2px);
}

/* Navbar Hover Animations */
.navbar a:hover {
	transform: translateY(-1px);
}

/* Footer Hover Animations */
.footer a:hover {
	transform: translateY(-1px);
}

/* Hero Hover Animations */
.hero:hover {
	transform: translateY(-2px);
}

/* Artboard Hover Animations */
.artboard:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Mockup Hover Animations */
.mockup:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Phone Hover Animations */
.phone:hover {
	transform: translateY(-2px) rotate(2deg);
}

/* Browser Hover Animations */
.browser:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Code Hover Animations */
.code:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* KBD Hover Animations */
.kbd:hover {
	transform: translateY(-1px) scale(1.05);
}

/* Tooltip Hover Animations */
.tooltip:hover {
	transform: translateY(-1px);
}

/* Popover Hover Animations */
.popover:hover {
	transform: translateY(-1px);
}

/* Collapse Hover Animations */
.collapse-title:hover {
	transform: translateX(2px);
}

/* Join Hover Animations */
.join-item:hover {
	transform: translateY(-1px);
}

/* Stack Hover Animations */
.stack > *:hover {
	transform: translateY(-1px);
}

/* Divider Hover Animations */
.divider:hover {
	transform: scaleX(1.1);
}

/* Spacer Hover Animations */
.spacer:hover {
	transform: scale(1.05);
}

/* Loading Hover Animations */
.loading:hover {
	transform: scale(1.1);
}

/* Skeleton Hover Animations */
.skeleton:hover {
	transform: translateY(-1px);
}

/* Mask Hover Animations */
.mask:hover {
	transform: scale(1.02);
}

/* Avatar Hover Animations */
.avatar:hover {
	transform: translateY(-1px) scale(1.05);
}

/* Chat Hover Animations */
.chat-bubble:hover {
	transform: translateY(-1px);
}

/* Timeline Hover Animations */
.timeline li:hover {
	transform: translateX(2px);
}

/* Steps Hover Animations */
.steps .step:hover {
	transform: translateY(-1px);
}

/* Breadcrumbs Hover Animations */
.breadcrumbs li:hover {
	transform: translateY(-1px);
}

/* Link Hover Animations */
.link:hover {
	transform: translateY(-1px);
}

/* Focus Animations */
.focus:focus {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* Active Animations */
.active {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Disabled Elements - No Animation */
.disabled,
.disabled:hover,
.disabled:focus,
.disabled:active {
	transform: none !important;
	box-shadow: none !important;
	transition: none !important;
}

/* Disabled Button Styles */
.btn:disabled,
.btn.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background-color: #f3f4f6 !important;
	color: #9ca3af !important;
	border-color: #d1d5db !important;
}

.btn:disabled:hover,
.btn.disabled:hover {
	transform: none !important;
	box-shadow: none !important;
	background-color: #f3f4f6 !important;
	color: #9ca3af !important;
	border-color: #d1d5db !important;
}

/* Specific disabled button variants */
.btn-warning:disabled,
.btn-warning.disabled {
	background-color: #f3f4f6 !important;
	color: #9ca3af !important;
	border-color: #d1d5db !important;
}

.btn-success:disabled,
.btn-success.disabled {
	background-color: #f3f4f6 !important;
	color: #9ca3af !important;
	border-color: #d1d5db !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
	background-color: #f3f4f6 !important;
	color: #9ca3af !important;
	border-color: #d1d5db !important;
}

/* Glass Effect Hover Animations */
.glass:hover {
	transform: translateY(-1px);
	backdrop-filter: saturate(180%) blur(20px);
}

/* No Animation Class - Override all animations */
.no-animation,
.no-animation:hover,
.no-animation:focus,
.no-animation:active {
	transform: none !important;
	box-shadow: none !important;
	transition: none !important;
}

/* Special Calendar-style animations for specific elements */
.calendar-style-hover {
	transition: all 0.3s cubic-bezier(0.21, 0.68, 0.09, 0.27);
}

.calendar-style-hover:hover {
	box-shadow: 0 20px 30px -13px rgba(23, 82, 255, 0.45);
	transform: translateY(-3px);
}

.calendar-style-hover:active {
	box-shadow: 0 10px 10px -6px rgba(23, 82, 255, 0.45);
	transform: translateY(-1px);
}

/* Enhanced hover for primary buttons (calendar-style) */
.btn-primary.calendar-style-hover:hover {
	box-shadow: 0 20px 30px -13px rgba(23, 82, 255, 0.45);
	transform: translateY(-3px);
}

/* Enhanced hover for cards (calendar-style) */
.card.calendar-style-hover:hover {
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
	transform: translateY(-3px);
}

/* Enhanced hover for modals (calendar-style) */
.modal-box.calendar-style-hover:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
	transform: translateY(-3px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	/* Reduce animation intensity on mobile */
	.card:hover,
	.btn:hover,
	.modal-box:hover {
		transform: translateY(-1px);
	}
	
	.calendar-style-hover:hover {
		transform: translateY(-2px);
	}
}

/* High contrast mode adjustments */
.hc .card:hover,
.hc .btn:hover,
.hc .modal-box:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.hc .calendar-style-hover:hover {
	box-shadow: 0 20px 30px -13px rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
}

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