feat(04-02): enhanced CSS animations + responsive layout

- Replace letter-float with leaf-fall sinusoidal sway animation
- Add stardust particles on falling-letter--dissolve via pseudo-elements
- Add companion-float animation on companion-area__avatar
- Add prefers-reduced-motion media query to disable animations
- Add responsive styles at max-width 700px (smaller keys, scaled fonts, adjusted grids)

src/styles/main.css

@@ -324,16 +324,30 @@ h3 {
 	font-size: 5rem;
 	font-weight: 700;
 	color: var(--accent-green);
-	animation: letter-float 2s ease-in-out infinite;
+	position: relative;
+	animation: leaf-fall 2.5s ease-in-out infinite;
 }
 
-@keyframes letter-float {
-	0%,
-	100% {
-		transform: translateY(0);
+@keyframes leaf-fall {
+	0% {
+		transform: translateY(-20px) translateX(0) rotate(0deg);
+		opacity: 0;
+	}
+	10% {
+		opacity: 1;
+	}
+	25% {
+		transform: translateY(25%) translateX(15px) rotate(5deg);
 	}
 	50% {
-		transform: translateY(-10px);
+		transform: translateY(50%) translateX(-10px) rotate(-3deg);
+	}
+	75% {
+		transform: translateY(75%) translateX(12px) rotate(4deg);
+	}
+	100% {
+		transform: translateY(100%) translateX(-5px) rotate(-2deg);
+		opacity: 0.8;
 	}
 }
 
@@ -341,6 +355,47 @@ h3 {
 	animation: letter-dissolve 0.3s ease-out forwards;
 }
 
+.falling-letter--dissolve::before,
+.falling-letter--dissolve::after {
+	content: '';
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--accent-gold);
+	animation: stardust 0.6s ease-out forwards;
+}
+
+.falling-letter--dissolve::before {
+	top: 30%;
+	left: 20%;
+	animation-delay: 0s;
+	box-shadow:
+		12px -18px 0 var(--accent-gold),
+		-8px -24px 0 var(--accent-pink);
+}
+
+.falling-letter--dissolve::after {
+	top: 40%;
+	right: 20%;
+	background: var(--accent-pink);
+	animation-delay: 0.1s;
+	box-shadow:
+		-14px -20px 0 var(--accent-pink),
+		10px -16px 0 var(--accent-gold);
+}
+
+@keyframes stardust {
+	0% {
+		transform: scale(1) translate(0, 0);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(0) translate(var(--dx, 20px), var(--dy, -30px));
+		opacity: 0;
+	}
+}
+
 @keyframes letter-dissolve {
 	0% {
 		transform: scale(1);
@@ -369,6 +424,16 @@ h3 {
 	border-radius: 50%;
 	object-fit: cover;
 	flex-shrink: 0;
+	animation: companion-float 3s ease-in-out infinite;
+}
+
+@keyframes companion-float {
+	0%, 100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-8px);
+	}
 }
 
 .companion-area__text {
@@ -860,3 +925,48 @@ h3 {
 		box-shadow: 0 0 12px 4px var(--accent-gold);
 	}
 }
+
+/* Accessibility: respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+	.falling-letter,
+	.companion-area__avatar,
+	.forest__element-img {
+		animation: none !important;
+	}
+	.falling-letter--dissolve::before,
+	.falling-letter--dissolve::after {
+		animation: none !important;
+	}
+}
+
+/* Responsive: small screens down to 700px */
+@media (max-width: 700px) {
+	.keyboard__key {
+		min-width: 32px;
+		height: 32px;
+		font-size: clamp(10px, 2.5vw, 14px);
+	}
+	.keyboard__key--space {
+		min-width: 120px;
+	}
+	h1 {
+		font-size: clamp(20px, 5vw, 32px);
+	}
+	h2 {
+		font-size: clamp(18px, 4vw, 24px);
+	}
+	body {
+		font-size: clamp(14px, 3.5vw, 16px);
+	}
+	.welcome__companions {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.forest__grid {
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: repeat(4, 1fr);
+	}
+	.lesson__keyboard {
+		transform: scale(0.85);
+		transform-origin: top center;
+	}
+}