/* Web Animations Lesson – Aggregated Styles for Examples & Exercises */

/* ====== Tokens ====== */
:root {
	--duration-instant: 100ms;
	--duration-fast: 200ms;
	--duration-normal: 300ms;
	--duration-slow: 500ms;
	--duration-slower: 800ms;

	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--ease-elastic: cubic-bezier(0.68, -0.35, 0.265, 1.35);

	--color-primary: #3b82f6;
	--color-gray-100: #f3f4f6;
	--color-gray-700: #374151;
	--color-gray-900: #111827;
}

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

/* ====== Exercise 1: Button Micro-Interactions ====== */
.btn {
	position: relative;
	overflow: hidden;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.btn-primary {
	background-color: var(--color-primary);
	color: white;
}
.btn-secondary {
	background-color: var(--color-gray-100);
	color: var(--color-gray-900);
}

/* Hover lift */
.btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Active press */
.btn:active:not(:disabled) {
	transform: translateY(0);
	transition-duration: var(--duration-instant);
}

/* Focus ring animation */
.btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	animation: pulseRing 0.6s ease-out;
}
@keyframes pulseRing {
	0% {
		outline-offset: 2px;
	}
	100% {
		outline-offset: 6px;
		outline-color: transparent;
	}
}

/* Ripple (optional) */
.btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: inherit;
	transform: scale(0);
	opacity: 0;
}
.btn:active:not(:disabled)::after {
	animation: ripple 0.6s ease-out;
}
@keyframes ripple {
	0% {
		transform: scale(0);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

/* Disabled */
.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Reduced motion adjustments */
@media (prefers-reduced-motion: reduce) {
	.btn {
		transition-duration: 0.01ms !important;
	}
	.btn::after,
	.btn:focus-visible {
		animation: none !important;
	}
}

/* ====== Exercise 2: Page Load Staggered Fade-In ====== */
.content-section {
	animation: fadeInUp var(--duration-slow) var(--ease-out) backwards;
}
.content-section:nth-child(1) {
	animation-delay: 0.1s;
}
.content-section:nth-child(2) {
	animation-delay: 0.2s;
}
.content-section:nth-child(3) {
	animation-delay: 0.3s;
}
.content-section:nth-child(4) {
	animation-delay: 0.4s;
}
.content-section:nth-child(5) {
	animation-delay: 0.5s;
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Optional JS enhancement CSS */
[data-animate] {
	opacity: 0;
	transform: translateY(30px);
}
[data-animate].animate-in {
	animation: fadeInUp 0.6s ease-out forwards;
}

/* ====== Transform Example: Card Lift ====== */
.card {
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.card:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ====== Exercise 3: Skeleton & Spinner ====== */
/* Skeleton */
.skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
	border-radius: 4px;
}
@keyframes shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}
.skeleton-image {
	width: 100%;
	height: 200px;
}
.skeleton-title {
	width: 70%;
	height: 24px;
	margin: 1rem 0 0.5rem;
}
.skeleton-text {
	width: 100%;
	height: 14px;
	margin-bottom: 0.5rem;
}
.skeleton-card {
	padding: 1rem;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
	.skeleton {
		animation: pulse 1.5s ease-in-out infinite;
	}
	@keyframes pulse {
		0%,
		100% {
			opacity: 1;
		}
		50% {
			opacity: 0.6;
		}
	}
}

/* Spinner */
.spinner {
	width: 40px;
	height: 40px;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-left-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
@media (prefers-reduced-motion: reduce) {
	.spinner {
		animation: pulse 1.5s ease-in-out infinite;
	}
}

/* ====== Exercise 4: SVG Animations ====== */
/* Path drawing */
.logo-path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: draw 2s ease-out forwards;
}
@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.logo-path {
		animation: none;
		stroke-dashoffset: 0;
	}
}

/* Icon morphing (demo) */
.circle-to-square {
	animation: morph-shape 3s ease-in-out infinite;
	transform-origin: center;
}
@keyframes morph-shape {
	0%,
	100% {
		d: path('M12,4 a8,8 0 1,0 0,16 a8,8 0 1,0 0,-16');
	}
	50% {
		d: path('M4,4 h16 v16 h-16 z');
	}
}

/* Animated SVG background pattern */
.bg-pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	animation: pattern-slide 20s linear infinite;
}
@keyframes pattern-slide {
	to {
		transform: translate(40px, 40px);
	}
}
.hero-section {
	position: relative;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ====== Advanced: clip-path morph ====== */
.morph-button {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	transition: clip-path 0.5s var(--ease-in-out);
}
.morph-button:hover {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
.shape {
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	clip-path: circle(50%);
	transition: clip-path 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.shape:hover {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ====== Advanced: Text Animations ====== */
/* Typewriter */
.typewriter {
	font-family: monospace;
	overflow: hidden;
	border-right: 2px solid;
	white-space: nowrap;
	animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}
@keyframes blink-caret {
	from,
	to {
		border-color: transparent;
	}
	50% {
		border-color: currentColor;
	}
}

/* Glitch */
.glitch {
	position: relative;
	animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch::before,
.glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
}
.glitch::before {
	left: 2px;
	text-shadow: -2px 0 #ff00de;
	clip: rect(24px, 550px, 90px, 0);
	animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch::after {
	left: -2px;
	text-shadow: -2px 0 #00fff9, 2px 2px #ff00de;
	animation: glitch-anim 2s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
	0% {
		clip: rect(13px, 9999px, 94px, 0);
	}
	5% {
		clip: rect(92px, 9999px, 61px, 0);
	}
	10% {
		clip: rect(69px, 9999px, 40px, 0);
	}
	100% {
		clip: rect(76px, 9999px, 19px, 0);
	}
}

/* Gradient text */
.gradient-text {
	background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59, #12c2e9);
	background-size: 300% 300%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* ====== Advanced: Scroll-Driven Animations (CSS) ====== */
.hero {
	animation: parallax linear;
	animation-timeline: scroll();
}
@keyframes parallax {
	to {
		transform: translateY(50vh);
	}
}
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(to right, #667eea, #764ba2);
	transform-origin: left;
	animation: progressBar linear;
	animation-timeline: scroll();
}
@keyframes progressBar {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}