/**
 * AnimeHub CSS Animations
 *
 * Polished animations and transitions
 *
 * @package AnimeHub
 */

/* ============================================
   CSS Variables for Animations
   ============================================ */
:root {
	--animehub-transition-fast: 0.15s;
	--animehub-transition-normal: 0.25s;
	--animehub-transition-slow: 0.4s;
	--animehub-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--animehub-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
	--animehub-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   Keyframe Animations
   ============================================ */

/* Fade In */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Fade In Up */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Fade In Down */
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Fade In Left */
@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Fade In Right */
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Scale In */
@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Scale In Bounce */
@keyframes scaleInBounce {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.95);
	}
	100% {
		transform: scale(1);
	}
}

/* Slide In Up */
@keyframes slideInUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

/* Slide Out Down */
@keyframes slideOutDown {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}

/* Pulse */
@keyframes pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.05);
	}
}

/* Shimmer (loading skeleton) */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* Spin */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Bounce */
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10px);
	}
	60% {
		transform: translateY(-5px);
	}
}

/* Shake */
@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-5px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(5px);
	}
}

/* Float */
@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

/* Glow */
@keyframes glow {
	0%, 100% {
		box-shadow: 0 0 5px var(--animehub-primary);
	}
	50% {
		box-shadow: 0 0 20px var(--animehub-primary), 0 0 30px var(--animehub-primary);
	}
}

/* Progress Bar */
@keyframes progressBar {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

/* ============================================
   Utility Classes
   ============================================ */

.animate-fadeIn {
	animation: fadeIn var(--animehub-transition-normal) var(--animehub-ease-out) forwards;
}

.animate-fadeInUp {
	animation: fadeInUp var(--animehub-transition-normal) var(--animehub-ease-out) forwards;
}

.animate-fadeInDown {
	animation: fadeInDown var(--animehub-transition-normal) var(--animehub-ease-out) forwards;
}

.animate-fadeInLeft {
	animation: fadeInLeft var(--animehub-transition-normal) var(--animehub-ease-out) forwards;
}

.animate-fadeInRight {
	animation: fadeInRight var(--animehub-transition-normal) var(--animehub-ease-out) forwards;
}

.animate-scaleIn {
	animation: scaleIn var(--animehub-transition-normal) var(--animehub-ease-out) forwards;
}

.animate-scaleInBounce {
	animation: scaleInBounce 0.5s var(--animehub-ease-out) forwards;
}

.animate-pulse {
	animation: pulse 2s infinite;
}

.animate-spin {
	animation: spin 1s linear infinite;
}

.animate-bounce {
	animation: bounce 1s infinite;
}

.animate-shake {
	animation: shake 0.5s;
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

.animate-glow {
	animation: glow 2s ease-in-out infinite;
}

/* Staggered animations with delays */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* ============================================
   Component Animations
   ============================================ */

/* Skeleton Loading */
.skeleton {
	background: linear-gradient(
		90deg,
		var(--animehub-bg-secondary) 25%,
		var(--animehub-bg) 50%,
		var(--animehub-bg-secondary) 75%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite linear;
	border-radius: 4px;
}

.skeleton-text {
	height: 1em;
	margin-bottom: 0.5em;
}

.skeleton-title {
	height: 1.5em;
	width: 60%;
	margin-bottom: 0.5em;
}

.skeleton-image {
	aspect-ratio: 5/7;
	width: 100%;
}

/* Loading Spinner */
.spinner-ring {
	width: 40px;
	height: 40px;
	border: 3px solid var(--animehub-bg-secondary);
	border-top-color: var(--animehub-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.spinner-ring--small {
	width: 20px;
	height: 20px;
	border-width: 2px;
}

.spinner-ring--large {
	width: 60px;
	height: 60px;
	border-width: 4px;
}

/* Card Hover Effects */
.anime-card,
.video-card {
	transition: transform var(--animehub-transition-normal) var(--animehub-ease-out),
	            box-shadow var(--animehub-transition-normal) var(--animehub-ease-out);
}

.anime-card:hover,
.video-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Card poster zoom */
.anime-card .card-poster img,
.video-card .card-poster img {
	transition: transform 0.5s var(--animehub-ease-out);
}

.anime-card:hover .card-poster img,
.video-card:hover .card-poster img {
	transform: scale(1.1);
}

/* Card overlay reveal */
.anime-card .card-overlay,
.video-card .card-overlay {
	opacity: 0;
	transition: opacity var(--animehub-transition-normal) var(--animehub-ease-out);
}

.anime-card:hover .card-overlay,
.video-card:hover .card-overlay {
	opacity: 1;
}

/* Button Hover Effects */
.btn,
button,
.button {
	transition: background-color var(--animehub-transition-fast),
	            transform var(--animehub-transition-fast),
	            box-shadow var(--animehub-transition-fast);
}

.btn:hover:not(:disabled),
button:hover:not(:disabled),
.button:hover:not(:disabled) {
	transform: translateY(-2px);
}

.btn:active:not(:disabled),
button:active:not(:disabled),
.button:active:not(:disabled) {
	transform: translateY(0);
}

.btn-primary:hover:not(:disabled) {
	box-shadow: 0 4px 12px rgba(var(--animehub-primary-rgb), 0.4);
}

/* Link Underline Animation */
.link-animated {
	position: relative;
}

.link-animated::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--animehub-primary);
	transition: width var(--animehub-transition-normal) var(--animehub-ease-out);
}

.link-animated:hover::after {
	width: 100%;
}

/* Badge Pulse */
.badge-new,
.badge-live {
	position: relative;
}

.badge-new::before,
.badge-live::before {
	content: '';
	position: absolute;
	inset: -2px;
	background: inherit;
	border-radius: inherit;
	animation: pulse 2s infinite;
	z-index: -1;
}

/* Search Overlay */
.search-overlay {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--animehub-transition-normal) var(--animehub-ease-out),
	            visibility var(--animehub-transition-normal);
}

.search-overlay.active {
	opacity: 1;
	visibility: visible;
}

.search-overlay .search-content {
	transform: translateY(-20px);
	transition: transform var(--animehub-transition-normal) var(--animehub-ease-out);
}

.search-overlay.active .search-content {
	transform: translateY(0);
}

/* Mobile Menu */
.mobile-menu {
	transform: translateX(100%);
	transition: transform var(--animehub-transition-slow) var(--animehub-ease-out);
}

.mobile-menu.active {
	transform: translateX(0);
}

/* Dropdown Menus */
.dropdown-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--animehub-transition-fast),
	            visibility var(--animehub-transition-fast),
	            transform var(--animehub-transition-fast) var(--animehub-ease-out);
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Modal */
.modal-overlay {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--animehub-transition-normal),
	            visibility var(--animehub-transition-normal);
}

.modal-overlay.active {
	opacity: 1;
	visibility: visible;
}

.modal-content {
	transform: scale(0.95) translateY(20px);
	transition: transform var(--animehub-transition-normal) var(--animehub-ease-out);
}

.modal-overlay.active .modal-content {
	transform: scale(1) translateY(0);
}

/* Lightbox */
.lightbox-overlay {
	opacity: 0;
	transition: opacity var(--animehub-transition-normal);
}

.lightbox-overlay.active {
	opacity: 1;
}

.lightbox-overlay .lightbox-content img {
	transform: scale(0.9);
	transition: transform var(--animehub-transition-normal) var(--animehub-ease-out);
}

.lightbox-overlay.active .lightbox-content img {
	transform: scale(1);
}

/* Back to Top Button */
.back-to-top {
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity var(--animehub-transition-normal),
	            visibility var(--animehub-transition-normal),
	            transform var(--animehub-transition-normal) var(--animehub-ease-out);
}

.back-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	transform: translateY(-5px);
}

/* Header Scroll */
.site-header {
	transition: transform var(--animehub-transition-normal) var(--animehub-ease-out),
	            background-color var(--animehub-transition-normal),
	            box-shadow var(--animehub-transition-normal);
}

.site-header.scrolled {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.site-header.header-hidden {
	transform: translateY(-100%);
}

/* Accordion */
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--animehub-transition-slow) var(--animehub-ease-out);
}

.accordion-item.open .accordion-content {
	max-height: 500px;
}

.accordion-header .icon {
	transition: transform var(--animehub-transition-normal);
}

.accordion-item.open .accordion-header .icon {
	transform: rotate(180deg);
}

/* Tabs */
.tab-content {
	animation: fadeIn var(--animehub-transition-normal) var(--animehub-ease-out);
}

/* Tooltip */
.animehub-tooltip {
	opacity: 0;
	transform: translateY(5px);
	transition: opacity var(--animehub-transition-fast),
	            transform var(--animehub-transition-fast) var(--animehub-ease-out);
}

.animehub-tooltip.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Progress Bar */
.progress-fill {
	transition: width 0.5s var(--animehub-ease-out);
}

/* Image lazy load */
img.lazy-loaded {
	animation: fadeIn var(--animehub-transition-normal) var(--animehub-ease-out);
}

/* Read More */
.readmore-content {
	overflow: hidden;
	transition: max-height 0.5s var(--animehub-ease-out);
}

.readmore-toggle {
	transition: color var(--animehub-transition-fast);
}

/* Rating Stars */
.rating-stars .star {
	transition: transform var(--animehub-transition-fast),
	            color var(--animehub-transition-fast);
}

.rating-stars .star:hover {
	transform: scale(1.2);
}

/* Countdown */
.countdown-unit {
	animation: pulse 1s ease-in-out infinite;
}

.countdown-unit:nth-child(2) { animation-delay: 0.1s; }
.countdown-unit:nth-child(3) { animation-delay: 0.2s; }
.countdown-unit:nth-child(4) { animation-delay: 0.3s; }

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