diff --git a/app/contribute/contribute-view.tsx b/app/contribute/contribute-view.tsx
index 43351be6..aac09d50 100644
--- a/app/contribute/contribute-view.tsx
+++ b/app/contribute/contribute-view.tsx
@@ -5,6 +5,7 @@ import { ContributeHero } from "@/components/contribute/contribute-hero";
 import { ContributionCard } from "@/components/contribute/contribution-card";
 import { ContributionEmptyState } from "@/components/contribute/contribution-empty-state";
 import { ContributionHint } from "@/components/contribute/contribution-hint";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -27,6 +28,8 @@ export interface ContributionCardData {
 }
 
 export default function ContributeView({ cards }: { cards: ContributionCardData[] }) {
+  const prefersReducedMotion = useReducedMotion();
+
   return (
     <div className="relative z-10 min-h-screen overflow-hidden bg-gray-50 pt-28 md:pt-32 dark:bg-[#0a0a0a]">
       {/* Background decoration */}
@@ -40,10 +43,10 @@ export default function ContributeView({ cards }: { cards: ContributionCardData[
       <div className="relative z-10 mx-auto max-w-[90rem] px-4 pb-24 sm:px-6 lg:px-8">
         {cards.length > 0 ? (
           <m.div
-            animate="visible"
+            animate={prefersReducedMotion ? undefined : "visible"}
             className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
-            initial="hidden"
-            variants={containerVariants}
+            initial={prefersReducedMotion ? false : "hidden"}
+            variants={prefersReducedMotion ? undefined : containerVariants}
           >
             {cards.map((card, index) => (
               <ContributionCard
diff --git a/app/projects/eternalcombat/page.tsx b/app/projects/eternalcombat/page.tsx
index 365a298e..4e2b81b2 100644
--- a/app/projects/eternalcombat/page.tsx
+++ b/app/projects/eternalcombat/page.tsx
@@ -263,11 +263,11 @@ export default function EternalCombatPage() {
                 {/* The "Long Screenshot" Container */}
                 <div className="relative h-[600px] w-full transform-gpu select-none overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl transition-transform duration-700 will-change-transform hover:scale-[1.02] dark:border-gray-800 dark:bg-[#0d1117]">
                   {/* Tilted Content */}
-                  <div className="absolute -top-10 -left-[15%] h-[200%] w-[150%] origin-top-left rotate-2 transform-gpu transition-all duration-700 will-change-transform hover:rotate-0 hover:scale-100">
+                  <div className="absolute -top-10 -left-[15%] h-[200%] w-[150%] origin-top-left rotate-2 transform-gpu transition-transform duration-700 will-change-transform hover:rotate-0 hover:scale-100">
                     {/* Inner blur container */}
-                    <div className="h-full pl-24 opacity-90 blur-[0.5px] filter transition-all duration-700 group-hover:opacity-100 group-hover:blur-0">
+                    <div className="h-full pl-24 opacity-90 blur-[0.5px] filter transition-[opacity,filter] duration-700 group-hover:opacity-100 group-hover:blur-0">
                       {/* Auto-scrolling animation container */}
-                      <div className="animate-scroll-y">
+                      <div className="animate-scroll-y motion-reduce:animate-none">
                         <ConfigPreview />
                         {/* Duplicate content for seamless loop */}
                         <ConfigPreview />
@@ -290,6 +290,11 @@ export default function EternalCombatPage() {
                                         .animate-scroll-y:hover {
                                             animation-play-state: paused;
                                         }
+                                        @media (prefers-reduced-motion: reduce) {
+                                            .animate-scroll-y {
+                                                animation: none;
+                                            }
+                                        }
                                     `}</style>
                 </div>
               </div>
diff --git a/app/projects/eternalcore/eternal-showcase.tsx b/app/projects/eternalcore/eternal-showcase.tsx
index ba7f57cc..2ff9fc51 100644
--- a/app/projects/eternalcore/eternal-showcase.tsx
+++ b/app/projects/eternalcore/eternal-showcase.tsx
@@ -6,6 +6,7 @@ import Image from "next/image";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { FadeIn } from "@/components/ui/motion/motion-components";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 const marqueeItems = [
   // Row 1: Essentials & Chat
@@ -124,30 +125,41 @@ const InfiniteMarquee = ({
   speed?: number;
   onItemClick: (item: (typeof marqueeItems)[0]) => void;
 }) => {
+  const prefersReducedMotion = useReducedMotion();
+  let marqueeX: "0%" | ["0%", "-50%"] | ["-50%", "0%"];
+
+  if (prefersReducedMotion) {
+    marqueeX = "0%";
+  } else if (direction === "left") {
+    marqueeX = ["0%", "-50%"];
+  } else {
+    marqueeX = ["-50%", "0%"];
+  }
+
   return (
     <div className="relative flex w-full overflow-hidden">
       <motion.div
         animate={{
-          x: direction === "left" ? ["0%", "-50%"] : ["-50%", "0%"],
+          x: marqueeX,
         }}
         className="flex gap-4 py-4"
         style={{
           width: "max-content",
         }}
         transition={{
-          duration: speed,
+          duration: prefersReducedMotion ? 0 : speed,
           ease: "linear",
-          repeat: Number.POSITIVE_INFINITY,
+          repeat: prefersReducedMotion ? 0 : Number.POSITIVE_INFINITY,
           repeatType: "loop",
         }}
       >
         {[...items, ...items].map((item, i) => (
           <motion.div
-            className="group relative aspect-video w-[400px] shrink-0 transform-gpu cursor-pointer overflow-hidden rounded-xl border border-gray-200 bg-gray-100 shadow-sm transition-all will-change-transform hover:border-[#9d6eef]/50 hover:shadow-[#9d6eef]/20 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"
+            className="group relative aspect-video w-[400px] shrink-0 transform-gpu cursor-pointer overflow-hidden rounded-xl border border-gray-200 bg-gray-100 shadow-sm transition-[border-color,box-shadow,background-color,transform] will-change-transform hover:border-[#9d6eef]/50 hover:shadow-[#9d6eef]/20 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900"
             key={`${item.id}-${i}`}
             onClick={() => onItemClick(item)}
-            whileHover={{ scale: 1.02 }}
-            whileTap={{ scale: 0.98 }}
+            whileHover={prefersReducedMotion ? undefined : { scale: 1.02 }}
+            whileTap={prefersReducedMotion ? undefined : { scale: 0.98 }}
           >
             <Image
               alt={item.id}
@@ -159,7 +171,7 @@ const InfiniteMarquee = ({
             />
 
             {/* Gradient Overlay & Content - Always visible on hover */}
-            <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/90 via-black/20 to-transparent p-6 opacity-0 transition-all duration-300 group-hover:opacity-100">
+            <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/90 via-black/20 to-transparent p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
               <div className="translate-y-4 transform-gpu transition-transform duration-300 will-change-transform group-hover:translate-y-0">
                 <div className="flex items-center justify-between">
                   <div>
diff --git a/app/projects/eternalcore/page.tsx b/app/projects/eternalcore/page.tsx
index fef6b8fd..ccc11bff 100644
--- a/app/projects/eternalcore/page.tsx
+++ b/app/projects/eternalcore/page.tsx
@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { FacadePattern } from "@/components/ui/facade-pattern";
 import { FadeIn, MotionSection, ScaleIn, SlideIn } from "@/components/ui/motion/motion-components";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 import { slideUp } from "@/lib/animations/variants";
 
 import { ConfigPreview } from "./config-preview";
@@ -15,6 +16,7 @@ import { EternalShowcase } from "./eternal-showcase";
 
 export default function EternalCorePage() {
   const targetRef = useRef(null);
+  const prefersReducedMotion = useReducedMotion();
   const { scrollYProgress } = useScroll({
     target: targetRef,
     offset: ["start start", "end start"],
@@ -160,8 +162,12 @@ export default function EternalCorePage() {
                 gradient: "from-blue-500/20 to-cyan-500/20",
               },
             ].map((feature) => (
-              <m.div className="h-full" key={feature.title} variants={slideUp}>
-                <Card className="group relative flex h-full transform-gpu flex-col p-6 transition-all will-change-transform hover:-translate-y-1 hover:bg-gray-50 hover:shadow-lg dark:hover:bg-gray-800/60">
+              <m.div
+                className="h-full"
+                key={feature.title}
+                variants={prefersReducedMotion ? undefined : slideUp}
+              >
+                <Card className="group relative flex h-full transform-gpu flex-col p-6 transition-[transform,box-shadow,background-color] will-change-transform hover:-translate-y-1 hover:bg-gray-50 hover:shadow-lg dark:hover:bg-gray-800/60">
                   <div
                     className={`absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100 ${feature.gradient} pointer-events-none`}
                   />
@@ -242,9 +248,9 @@ export default function EternalCorePage() {
                   {/* Content Container (Standard, non-tilted) */}
                   <div className="absolute inset-0 h-full w-full overflow-hidden pt-12">
                     {/* Inner blur container */}
-                    <div className="h-full opacity-90 blur-[0.5px] filter transition-all duration-700 group-hover:opacity-100 group-hover:blur-0">
+                    <div className="h-full opacity-90 blur-[0.5px] filter transition-[opacity,filter] duration-700 group-hover:opacity-100 group-hover:blur-0">
                       {/* Auto-scrolling animation container */}
-                      <div className="animate-scroll-y">
+                      <div className="animate-scroll-y motion-reduce:animate-none">
                         <ConfigPreview />
                         {/* Duplicate content for seamless loop */}
                         <ConfigPreview />
@@ -267,6 +273,11 @@ export default function EternalCorePage() {
                     .animate-scroll-y:hover {
                         animation-play-state: paused;
                     }
+                    @media (prefers-reduced-motion: reduce) {
+                        .animate-scroll-y {
+                            animation: none;
+                        }
+                    }
                   `}</style>
                 </div>
               </div>
diff --git a/components/builds/build-table.tsx b/components/builds/build-table.tsx
index 0a969e49..6b7659ff 100644
--- a/components/builds/build-table.tsx
+++ b/components/builds/build-table.tsx
@@ -26,7 +26,9 @@ export function BuildTable({
           className="flex flex-col items-center justify-center gap-4 py-32 text-gray-400"
         >
           <Loader2 className="h-8 w-8 animate-spin text-blue-500 motion-reduce:animate-none" />
-          <p className="animate-pulse font-medium text-sm">Fetching builds for {project.name}…</p>
+          <p className="animate-pulse font-medium text-sm motion-reduce:animate-none">
+            Fetching builds for {project.name}…
+          </p>
         </output>
       ) : (
         <div className="overflow-hidden rounded-xl border border-gray-200 bg-white/60 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/40">
diff --git a/components/contribute/contribution-card.tsx b/components/contribute/contribution-card.tsx
index ca1d4198..8cd26e29 100644
--- a/components/contribute/contribution-card.tsx
+++ b/components/contribute/contribution-card.tsx
@@ -4,6 +4,7 @@ import { m } from "framer-motion";
 import { LucideIcon } from "@/components/lucide-icon";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 const itemVariants = {
   hidden: { y: 20, opacity: 0 },
@@ -35,9 +36,10 @@ export function ContributionCard({
   color,
 }: ContributionCardProps) {
   const external = href.startsWith("http");
+  const prefersReducedMotion = useReducedMotion();
 
   return (
-    <m.div className="h-full" variants={itemVariants}>
+    <m.div className="h-full" variants={prefersReducedMotion ? undefined : itemVariants}>
       <Card className="group flex h-full flex-col p-6 transition-colors duration-300 hover:bg-gray-50 hover:shadow-md dark:hover:bg-gray-800/60">
         <div
           className="pointer-events-none absolute inset-0 bg-linear-to-br opacity-0 transition-opacity duration-500 group-hover:opacity-100"
diff --git a/components/contribute/contribution-hint.tsx b/components/contribute/contribution-hint.tsx
index 91553112..3a8a815d 100644
--- a/components/contribute/contribution-hint.tsx
+++ b/components/contribute/contribution-hint.tsx
@@ -3,15 +3,18 @@
 import { m } from "framer-motion";
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 export function ContributionHint() {
+  const prefersReducedMotion = useReducedMotion();
+
   return (
     <m.div
       className="mt-20 text-center"
-      initial={{ opacity: 0, y: 10 }}
-      transition={{ delay: 0.2, duration: 0.5 }}
-      viewport={{ once: true, margin: "-50px" }}
-      whileInView={{ opacity: 1, y: 0 }}
+      initial={prefersReducedMotion ? false : { opacity: 0, y: 10 }}
+      transition={prefersReducedMotion ? { duration: 0 } : { delay: 0.2, duration: 0.5 }}
+      viewport={prefersReducedMotion ? undefined : { once: true, margin: "-50px" }}
+      whileInView={prefersReducedMotion ? undefined : { opacity: 1, y: 0 }}
     >
       <div className="inline-flex items-center rounded-full border border-gray-200 bg-white px-6 py-2 shadow-xs dark:border-gray-800 dark:bg-gray-900/50">
         <HelpCircle className="mr-2 h-4 w-4 text-gray-500" />
diff --git a/components/docs/content/docs-header.tsx b/components/docs/content/docs-header.tsx
index 5d8dc661..9c90a963 100644
--- a/components/docs/content/docs-header.tsx
+++ b/components/docs/content/docs-header.tsx
@@ -33,7 +33,7 @@ export function DocsHeader({ category, title, description, icon, actions }: DocH
             transition={{ delay: prefersReducedMotion ? 0 : 0.1 }}
           >
             <span className="relative flex h-1.5 w-1.5">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75" />
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-75 motion-reduce:animate-none" />
               <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-500" />
             </span>
             {category}
diff --git a/components/docs/content/docs-navigation.tsx b/components/docs/content/docs-navigation.tsx
index ef68cabd..9ddd186b 100644
--- a/components/docs/content/docs-navigation.tsx
+++ b/components/docs/content/docs-navigation.tsx
@@ -28,7 +28,7 @@ export function DocsNavigation({ prev, next }: DocsNavigationProps) {
         <Link
           aria-label={`Previous: ${prev.title}`}
           className={cn(
-            "group relative flex h-full w-full flex-1 flex-col gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-5 transition-all hover:border-blue-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
+            "group relative flex h-full w-full flex-1 flex-col gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-5 transition-[border-color,box-shadow,background-color] hover:border-blue-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
             "sm:max-w-[50%]"
           )}
           href={prev.path}
@@ -61,7 +61,7 @@ export function DocsNavigation({ prev, next }: DocsNavigationProps) {
         <Link
           aria-label={`Next: ${next.title}`}
           className={cn(
-            "group relative flex h-full w-full flex-1 flex-col items-end gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-5 text-right transition-all hover:border-blue-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
+            "group relative flex h-full w-full flex-1 flex-col items-end gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-5 text-right transition-[border-color,box-shadow,background-color] hover:border-blue-300 hover:shadow-lg dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
             "sm:max-w-[50%]"
           )}
           href={next.path}
diff --git a/components/docs/content/loading-fallback.tsx b/components/docs/content/loading-fallback.tsx
index 18f56897..84fc0c2f 100644
--- a/components/docs/content/loading-fallback.tsx
+++ b/components/docs/content/loading-fallback.tsx
@@ -5,7 +5,7 @@ const skeletonKeys = Array.from({ length: 5 }, () => crypto.randomUUID());
 export function LoadingFallback() {
   return (
     <div
-      className="animate-pulse space-y-4"
+      className="animate-pulse space-y-4 motion-reduce:animate-none"
       style={{
         contentVisibility: "auto",
         containIntrinsicSize: "auto 500px",
diff --git a/components/docs/eternalcore/commands/commands-search-bar.tsx b/components/docs/eternalcore/commands/commands-search-bar.tsx
index 752fbd87..2b9d86aa 100644
--- a/components/docs/eternalcore/commands/commands-search-bar.tsx
+++ b/components/docs/eternalcore/commands/commands-search-bar.tsx
@@ -26,7 +26,7 @@ export function CommandsSearchBar({
         <Search className="absolute top-1/2 left-3 -translate-y-1/2 text-gray-400" size={18} />
         <input
           className={cn(
-            "w-full select-none rounded-lg border bg-white px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-all duration-200",
+            "w-full select-none rounded-lg border bg-white px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-[border-color,box-shadow] duration-200",
             isInputFocused
               ? "border-blue-500 shadow-blue-500/20 shadow-lg ring-2 ring-blue-500/50 dark:shadow-blue-500/10"
               : "border-gray-300 shadow-xs dark:border-gray-700",
diff --git a/components/docs/eternalcore/placeholder/placeholder-category-buttons.tsx b/components/docs/eternalcore/placeholder/placeholder-category-buttons.tsx
index aed6cf46..636e0cf3 100644
--- a/components/docs/eternalcore/placeholder/placeholder-category-buttons.tsx
+++ b/components/docs/eternalcore/placeholder/placeholder-category-buttons.tsx
@@ -20,7 +20,7 @@ export function PlaceholderCategoryButtons({
       {categories.map((category) => (
         <button
           className={cn(
-            "flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 font-medium text-xs transition-all",
+            "flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 font-medium text-xs transition-[background-color,box-shadow,color]",
             category === activeCategory
               ? "bg-blue-500 text-white shadow-blue-500/30 shadow-md"
               : "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
diff --git a/components/docs/eternalcore/placeholder/placeholder-search-bar.tsx b/components/docs/eternalcore/placeholder/placeholder-search-bar.tsx
index ec9653a7..6686ba0c 100644
--- a/components/docs/eternalcore/placeholder/placeholder-search-bar.tsx
+++ b/components/docs/eternalcore/placeholder/placeholder-search-bar.tsx
@@ -26,7 +26,7 @@ export function PlaceholderSearchBar({
         <Search className="absolute top-1/2 left-3 -translate-y-1/2 text-gray-400" size={18} />
         <input
           className={cn(
-            "w-full select-none rounded-lg border bg-white px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-all duration-200",
+            "w-full select-none rounded-lg border bg-white px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-[border-color,box-shadow] duration-200",
             isInputFocused
               ? "border-blue-500 shadow-blue-500/20 shadow-lg ring-2 ring-blue-500/50 dark:shadow-blue-500/10"
               : "border-gray-300 shadow-xs dark:border-gray-700",
diff --git a/components/docs/search/search-box.tsx b/components/docs/search/search-box.tsx
index 3aa23c53..83569fe7 100644
--- a/components/docs/search/search-box.tsx
+++ b/components/docs/search/search-box.tsx
@@ -141,7 +141,7 @@ const SearchBox = ({
             aria-label="Search documentation"
             autoComplete="off"
             className={cn(
-              "w-full cursor-pointer select-none rounded-lg border bg-gray-50/50 px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-all duration-200",
+              "w-full cursor-pointer select-none rounded-lg border bg-gray-50/50 px-4 py-2.5 pr-10 pl-10 text-sm outline-hidden transition-[border-color,background-color,box-shadow,color] duration-200",
               isFocused || isOpen
                 ? "border-blue-500 bg-white shadow-blue-500/10 shadow-lg ring-2 ring-blue-500/10 dark:bg-gray-800 dark:shadow-blue-500/20"
                 : "border-gray-200 shadow-xs hover:border-gray-300 hover:bg-white dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-gray-700 dark:hover:bg-gray-900",
@@ -279,7 +279,7 @@ const SearchBox = ({
                   {results.map((result, index) => (
                     <motion.button
                       className={cn(
-                        "touch-action-manipulation w-full select-none px-4 py-3 text-left transition-all",
+                        "touch-action-manipulation w-full select-none px-4 py-3 text-left transition-[background-color,transform]",
                         selectedIndex === index
                           ? "bg-blue-50 dark:bg-blue-500/10"
                           : "hover:bg-gray-50 dark:hover:bg-gray-800/50"
diff --git a/components/docs/search/search-modal.tsx b/components/docs/search/search-modal.tsx
index 47be7584..ce86a745 100644
--- a/components/docs/search/search-modal.tsx
+++ b/components/docs/search/search-modal.tsx
@@ -384,7 +384,7 @@ export function SearchModal({ isOpen, onClose, triggerRef }: SearchModalProps) {
                         {results.map((result, index) => (
                           <motion.button
                             className={cn(
-                              "group touch-action-manipulation relative w-full cursor-pointer rounded-lg px-3 py-3 text-left transition-all",
+                              "group touch-action-manipulation relative w-full cursor-pointer rounded-lg px-3 py-3 text-left transition-[background-color,box-shadow,transform]",
                               selectedIndex === index
                                 ? "bg-gradient-to-r from-blue-50 to-blue-50/50 shadow-sm dark:from-blue-500/10 dark:to-blue-500/5"
                                 : "hover:bg-gray-50 dark:hover:bg-gray-800/50"
diff --git a/components/docs/search/search-trigger.tsx b/components/docs/search/search-trigger.tsx
index f9c93a51..132303c0 100644
--- a/components/docs/search/search-trigger.tsx
+++ b/components/docs/search/search-trigger.tsx
@@ -23,7 +23,7 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps) {
     <motion.button
       aria-label="Search documentation (⌘K)"
       className={cn(
-        "group touch-action-manipulation relative flex w-full items-center gap-3 overflow-hidden rounded-lg border border-gray-200 bg-white/50 px-4 py-2.5 text-left shadow-xs backdrop-blur-sm transition-all hover:border-blue-300 hover:bg-white hover:shadow-md dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
+        "group touch-action-manipulation relative flex w-full items-center gap-3 overflow-hidden rounded-lg border border-gray-200 bg-white/50 px-4 py-2.5 text-left shadow-xs backdrop-blur-sm transition-[border-color,box-shadow,background-color,transform] hover:border-blue-300 hover:bg-white hover:shadow-md dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-700 dark:hover:bg-gray-900",
         className
       )}
       onClick={onClick}
diff --git a/components/docs/sidebar/doc-sidebar.tsx b/components/docs/sidebar/doc-sidebar.tsx
index 8bc3c609..d594a511 100644
--- a/components/docs/sidebar/doc-sidebar.tsx
+++ b/components/docs/sidebar/doc-sidebar.tsx
@@ -158,7 +158,7 @@ const DocSidebar: FC<DocSidebarProps> = ({ className = "", onItemClick, sidebarS
         <motion.button
           aria-controls="doc-sidebar"
           aria-expanded={isOpen}
-          className="group mb-4 flex w-full items-center justify-between gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 text-sm shadow-xs transition-all hover:border-blue-300 hover:shadow-md lg:hidden dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:border-blue-700"
+          className="group mb-4 flex w-full items-center justify-between gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 text-sm shadow-xs transition-[border-color,box-shadow,background-color,transform] hover:border-blue-300 hover:shadow-md lg:hidden dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:hover:border-blue-700"
           onClick={toggleSidebar}
           ref={toggleButtonRef}
           whileHover={{ scale: prefersReducedMotion ? 1 : 1.01 }}
diff --git a/components/docs/sidebar/netlify-highlight.tsx b/components/docs/sidebar/netlify-highlight.tsx
index e70fcd34..6a02af94 100644
--- a/components/docs/sidebar/netlify-highlight.tsx
+++ b/components/docs/sidebar/netlify-highlight.tsx
@@ -8,7 +8,7 @@ export function NetlifyHighlight() {
       rel="noopener noreferrer"
       target="_blank"
     >
-      <div className="relative overflow-hidden rounded-xl border border-gray-200 bg-gray-50/50 transition-all duration-300 hover:border-[#05BDBA]/40 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/20 dark:hover:border-[#32E6E2]/40">
+      <div className="relative overflow-hidden rounded-xl border border-gray-200 bg-gray-50/50 transition-[border-color,box-shadow,background-color] duration-300 hover:border-[#05BDBA]/40 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/20 dark:hover:border-[#32E6E2]/40">
         <div className="flex items-center gap-3 px-4 py-3">
           <div className="flex h-10 w-10 shrink-0 transform-gpu items-center justify-center rounded-lg bg-[#E6FFFA] text-[#05BDBA] transition-transform duration-300 will-change-transform group-hover:scale-105 dark:bg-[#1E2124] dark:text-[#32E6E2]">
             <SiNetlify className="h-5 w-5" />
diff --git a/components/docs/sidebar/sidebar-item.tsx b/components/docs/sidebar/sidebar-item.tsx
index 96e8df13..38638acc 100644
--- a/components/docs/sidebar/sidebar-item.tsx
+++ b/components/docs/sidebar/sidebar-item.tsx
@@ -80,7 +80,7 @@ const FolderItem: FC<{
     <motion.div
       aria-expanded={isExpanded}
       className={cn(
-        "group flex cursor-pointer select-none items-center gap-2 rounded-lg px-3 py-2 font-medium text-sm transition-all",
+        "group flex cursor-pointer select-none items-center gap-2 rounded-lg px-3 py-2 font-medium text-sm transition-colors",
         isActive
           ? "bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
           : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-200"
@@ -158,7 +158,7 @@ const FileItem: FC<{
   <Link href={item.path} onClick={onClick}>
     <motion.div
       className={cn(
-        "group mb-0.5 flex select-none items-center gap-2 rounded-lg px-3 py-2 text-sm transition-all",
+        "group mb-0.5 flex select-none items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors",
         isActive
           ? "bg-blue-50 font-medium text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
           : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:text-gray-200"
diff --git a/components/footer/footer.tsx b/components/footer/footer.tsx
index 0420d160..70f4842b 100644
--- a/components/footer/footer.tsx
+++ b/components/footer/footer.tsx
@@ -185,14 +185,14 @@ export default function Footer() {
             </p>
             <div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-6">
               <motion.a
-                className="group inline-flex items-center gap-2 rounded-lg border border-gray-200/80 bg-gradient-to-br from-white to-gray-50/50 px-3.5 py-1.5 font-medium text-gray-700 text-xs shadow-sm transition-all hover:border-emerald-200 hover:shadow-md dark:border-white/[0.08] dark:from-neutral-900 dark:to-neutral-900/50 dark:text-gray-300 dark:hover:border-emerald-500/30"
+                className="group inline-flex items-center gap-2 rounded-lg border border-gray-200/80 bg-gradient-to-br from-white to-gray-50/50 px-3.5 py-1.5 font-medium text-gray-700 text-xs shadow-sm transition-[border-color,box-shadow,background-color,transform] hover:border-emerald-200 hover:shadow-md dark:border-white/[0.08] dark:from-neutral-900 dark:to-neutral-900/50 dark:text-gray-300 dark:hover:border-emerald-500/30"
                 href="https://www.netlify.com/"
                 rel="noopener noreferrer"
                 target="_blank"
                 whileTap={{ scale: 0.98 }}
               >
                 <span className="relative flex h-2 w-2">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75 group-hover:opacity-100" />
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75 group-hover:opacity-100 motion-reduce:animate-none" />
                   <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]" />
                 </span>
                 <SiNetlify
diff --git a/components/hero/navbar.tsx b/components/hero/navbar.tsx
index 339fa90a..235d958a 100644
--- a/components/hero/navbar.tsx
+++ b/components/hero/navbar.tsx
@@ -208,7 +208,7 @@ export default function Navbar() {
       <motion.nav
         animate="visible"
         aria-label="Main navigation"
-        className={`fixed inset-x-0 top-0 z-50 border-transparent border-b transition-all duration-300 ${
+        className={`fixed inset-x-0 top-0 z-50 border-transparent border-b transition-[background-color,border-color,backdrop-filter] duration-300 ${
           scrolled || isMenuOpen
             ? "border-gray-200/50 bg-white/80 backdrop-blur-xl dark:border-white/5 dark:bg-[#0a0a0a]/80"
             : "bg-white/0 dark:bg-black/0"
@@ -257,7 +257,7 @@ export default function Navbar() {
               {mainNavLinks.map((link) => (
                 <li key={link.href}>
                   <Link
-                    className="flex items-center justify-center rounded-full px-4 py-2 text-gray-600 text-sm transition-all hover:bg-black/5 hover:text-black dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white"
+                    className="flex items-center justify-center rounded-full px-4 py-2 text-gray-600 text-sm transition-colors hover:bg-black/5 hover:text-black dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white"
                     href={link.href}
                     {...(link.isExternal ? { rel: "noopener noreferrer", target: "_blank" } : {})}
                   >
@@ -276,7 +276,7 @@ export default function Navbar() {
               {externalNavLinks.map((link) => (
                 <li key={link.href}>
                   <Link
-                    className="flex items-center justify-center rounded-full px-4 py-2 text-gray-600 text-sm transition-all hover:bg-black/5 hover:text-black dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white"
+                    className="flex items-center justify-center rounded-full px-4 py-2 text-gray-600 text-sm transition-colors hover:bg-black/5 hover:text-black dark:text-gray-300 dark:hover:bg-white/10 dark:hover:text-white"
                     href={link.href}
                     {...(link.isExternal ? { rel: "noopener noreferrer", target: "_blank" } : {})}
                   >
diff --git a/components/home/projects/projects-section.tsx b/components/home/projects/projects-section.tsx
index 8bd95c25..4c36f0a0 100644
--- a/components/home/projects/projects-section.tsx
+++ b/components/home/projects/projects-section.tsx
@@ -154,7 +154,7 @@ export default function Projects() {
 function ProjectCard({ project }: { project: Project }) {
   return (
     <Link
-      className="group relative block aspect-[16/9] w-[300px] shrink-0 transform-gpu overflow-hidden rounded-2xl border border-gray-200 bg-gray-100 shadow-lg transition-all duration-500 will-change-transform hover:shadow-2xl md:w-[420px] dark:border-gray-800 dark:bg-gray-900"
+      className="group relative block aspect-[16/9] w-[300px] shrink-0 transform-gpu overflow-hidden rounded-2xl border border-gray-200 bg-gray-100 shadow-lg transition-[border-color,box-shadow,background-color,transform] duration-500 will-change-transform hover:shadow-2xl md:w-[420px] dark:border-gray-800 dark:bg-gray-900"
       href={project.url}
     >
       <Image
diff --git a/components/home/sponsors/sponsors-section.tsx b/components/home/sponsors/sponsors-section.tsx
index 050eae56..a5d71f2b 100644
--- a/components/home/sponsors/sponsors-section.tsx
+++ b/components/home/sponsors/sponsors-section.tsx
@@ -50,7 +50,7 @@ function SponsorItem({ sponsor }: { sponsor: Sponsor }) {
       rel="noopener noreferrer"
       target="_blank"
     >
-      <div className="text-gray-400 opacity-70 grayscale filter transition-all duration-500 ease-out group-hover:opacity-100 group-hover:grayscale-0">
+      <div className="text-gray-400 opacity-70 grayscale filter transition-[opacity,filter] duration-500 ease-out group-hover:opacity-100 group-hover:grayscale-0">
         {sponsor.icon}
       </div>
       <span className="hidden font-bold text-gray-400 text-xl transition-colors duration-500 ease-out group-hover:text-gray-900 lg:block dark:text-gray-500 dark:group-hover:text-gray-300">
diff --git a/components/notification-generator/form/color-picker/color-picker.tsx b/components/notification-generator/form/color-picker/color-picker.tsx
index 9380f566..25b3056e 100644
--- a/components/notification-generator/form/color-picker/color-picker.tsx
+++ b/components/notification-generator/form/color-picker/color-picker.tsx
@@ -221,7 +221,7 @@ export const ColorPicker = ({ onApplyAction, onCloseAction }: ColorPickerProps)
                 <div className="grid grid-cols-5 gap-2">
                   {minecraftColors.map((mcColor) => (
                     <button
-                      className="group relative flex aspect-square transform-gpu cursor-pointer flex-col items-center justify-center rounded-md border border-gray-200 transition-all will-change-transform hover:scale-110 hover:shadow-md dark:border-gray-700"
+                      className="group relative flex aspect-square transform-gpu cursor-pointer flex-col items-center justify-center rounded-md border border-gray-200 transition-[border-color,box-shadow,transform] will-change-transform hover:scale-110 hover:shadow-md dark:border-gray-700"
                       key={mcColor.hex}
                       onClick={() => handlePresetClick(mcColor)}
                       style={{ backgroundColor: mcColor.hex }}
@@ -241,7 +241,7 @@ export const ColorPicker = ({ onApplyAction, onCloseAction }: ColorPickerProps)
                 <div className="grid grid-cols-2 gap-2">
                   {gradientPresets.map((preset) => (
                     <button
-                      className="group relative h-10 w-full transform-gpu cursor-pointer overflow-hidden rounded-md border border-gray-200 transition-all will-change-transform hover:scale-105 hover:shadow-md dark:border-gray-700"
+                      className="group relative h-10 w-full transform-gpu cursor-pointer overflow-hidden rounded-md border border-gray-200 transition-[border-color,box-shadow,transform] will-change-transform hover:scale-105 hover:shadow-md dark:border-gray-700"
                       key={preset.name}
                       onClick={() => handleGradientPresetClick(preset.colors)}
                       style={{
diff --git a/components/notification-generator/form/form-field.tsx b/components/notification-generator/form/form-field.tsx
index e0c0d312..6c64c94f 100644
--- a/components/notification-generator/form/form-field.tsx
+++ b/components/notification-generator/form/form-field.tsx
@@ -93,10 +93,10 @@ export const FormField = ({
   };
 
   const inputClasses =
-    "w-full rounded-lg border border-gray-200 bg-gray-50/50 px-4 py-2.5 text-sm transition-all focus:border-blue-500 focus:bg-white focus:outline-hidden focus:ring-4 focus:ring-blue-500/10 dark:border-white/10 dark:bg-black/20 dark:text-white dark:focus:border-blue-500 dark:focus:bg-black/40";
+    "w-full rounded-lg border border-gray-200 bg-gray-50/50 px-4 py-2.5 text-sm transition-[border-color,background-color,box-shadow] focus:border-blue-500 focus:bg-white focus:outline-hidden focus:ring-4 focus:ring-blue-500/10 dark:border-white/10 dark:bg-black/20 dark:text-white dark:focus:border-blue-500 dark:focus:bg-black/40";
 
   const textareaClasses =
-    "w-full rounded-lg border border-gray-200 bg-gray-50/50 px-4 py-2.5 text-sm transition-all focus:border-blue-500 focus:bg-white focus:outline-hidden focus:ring-4 focus:ring-blue-500/10 dark:border-white/10 dark:bg-black/20 dark:text-white dark:focus:border-blue-500 dark:focus:bg-black/40";
+    "w-full rounded-lg border border-gray-200 bg-gray-50/50 px-4 py-2.5 text-sm transition-[border-color,background-color,box-shadow] focus:border-blue-500 focus:bg-white focus:outline-hidden focus:ring-4 focus:ring-blue-500/10 dark:border-white/10 dark:bg-black/20 dark:text-white dark:focus:border-blue-500 dark:focus:bg-black/40";
 
   /* Logic for aria-describedby to avoid nested ternary */
   let ariaDescribedBy: string | undefined;
diff --git a/components/notification-generator/tabs/tab.tsx b/components/notification-generator/tabs/tab.tsx
index f65a94e2..660b7b07 100644
--- a/components/notification-generator/tabs/tab.tsx
+++ b/components/notification-generator/tabs/tab.tsx
@@ -18,7 +18,7 @@ export const Tab = ({ activeTab, tabName, label, onClick }: TabProps) => {
     <button
       aria-controls={`panel-${tabName}`}
       aria-selected={isActive}
-      className={`relative cursor-pointer rounded-lg px-4 py-2 font-medium text-sm transition-colors duration-200 focus:outline-none ${
+      className={`relative cursor-pointer rounded-lg px-4 py-2 font-medium text-sm transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
         isActive
           ? "text-gray-900 dark:text-white"
           : "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
diff --git a/components/team/team-member.tsx b/components/team/team-member.tsx
index ab9171e5..08495624 100644
--- a/components/team/team-member.tsx
+++ b/components/team/team-member.tsx
@@ -19,7 +19,7 @@ export default function TeamMember({ member, index }: TeamMemberProps) {
 
   return (
     <m.div className="h-full" variants={slideUp}>
-      <Card className="group relative flex h-full items-center gap-4 bg-white/50 p-4 ring-gray-200/60 backdrop-blur-sm transition-all duration-300 hover:bg-white hover:shadow-xl hover:ring-blue-500/30 dark:bg-gray-900/40 dark:ring-gray-800/60 dark:hover:bg-gray-900/80 dark:hover:shadow-blue-900/20 dark:hover:ring-blue-400/30">
+      <Card className="group relative flex h-full items-center gap-4 bg-white/50 p-4 ring-gray-200/60 backdrop-blur-sm transition-[background-color,box-shadow] duration-300 hover:bg-white hover:shadow-xl hover:ring-blue-500/30 dark:bg-gray-900/40 dark:ring-gray-800/60 dark:hover:bg-gray-900/80 dark:hover:shadow-blue-900/20 dark:hover:ring-blue-400/30">
         {/* Background Gradient */}
         <div className="absolute inset-0 -z-10 bg-linear-to-br from-blue-50/0 via-transparent to-purple-50/0 opacity-0 transition-opacity duration-500 group-hover:from-blue-50/50 group-hover:to-purple-50/50 group-hover:opacity-100 dark:group-hover:from-blue-900/10 dark:group-hover:to-purple-900/10" />
 
diff --git a/components/team/team-skeleton.tsx b/components/team/team-skeleton.tsx
index a8e58fc2..a675847e 100644
--- a/components/team/team-skeleton.tsx
+++ b/components/team/team-skeleton.tsx
@@ -8,16 +8,16 @@ export default function TeamSkeleton() {
       <div className="relative mx-auto max-w-7xl px-4 py-20">
         <div className="mb-16 text-center">
           {/* Title Skeleton */}
-          <div className="mx-auto mb-4 h-10 w-48 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-800/50" />
-          <div className="mx-auto h-6 w-full max-w-2xl animate-pulse rounded-lg bg-gray-200 dark:bg-gray-800/50" />
+          <div className="mx-auto mb-4 h-10 w-48 animate-pulse rounded-lg bg-gray-200 motion-reduce:animate-none dark:bg-gray-800/50" />
+          <div className="mx-auto h-6 w-full max-w-2xl animate-pulse rounded-lg bg-gray-200 motion-reduce:animate-none dark:bg-gray-800/50" />
         </div>
 
         <div className="space-y-20">
           {/* Simulated Roles Group */}
           <div>
             <div className="mb-8">
-              <div className="mb-2 h-8 w-32 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-800/50" />
-              <div className="h-5 w-full max-w-xl animate-pulse rounded-lg bg-gray-200 dark:bg-gray-800/50" />
+              <div className="mb-2 h-8 w-32 animate-pulse rounded-lg bg-gray-200 motion-reduce:animate-none dark:bg-gray-800/50" />
+              <div className="h-5 w-full max-w-xl animate-pulse rounded-lg bg-gray-200 motion-reduce:animate-none dark:bg-gray-800/50" />
             </div>
 
             <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
@@ -27,14 +27,14 @@ export default function TeamSkeleton() {
                   key={id}
                 >
                   {/* Avatar Skeleton */}
-                  <div className="h-20 w-20 shrink-0 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-800" />
+                  <div className="h-20 w-20 shrink-0 animate-pulse rounded-lg bg-gray-200 motion-reduce:animate-none dark:bg-gray-800" />
 
                   {/* Info Skeleton */}
                   <div className="flex-1 space-y-3">
-                    <div className="h-5 w-3/4 animate-pulse rounded bg-gray-200 dark:bg-gray-800" />
+                    <div className="h-5 w-3/4 animate-pulse rounded bg-gray-200 motion-reduce:animate-none dark:bg-gray-800" />
                     <div className="space-y-1.5">
-                      <div className="h-4 w-1/2 animate-pulse rounded bg-gray-200 dark:bg-gray-800/60" />
-                      <div className="h-4 w-1/3 animate-pulse rounded bg-gray-200 dark:bg-gray-800/60" />
+                      <div className="h-4 w-1/2 animate-pulse rounded bg-gray-200 motion-reduce:animate-none dark:bg-gray-800/60" />
+                      <div className="h-4 w-1/3 animate-pulse rounded bg-gray-200 motion-reduce:animate-none dark:bg-gray-800/60" />
                     </div>
                   </div>
                 </div>
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 3acbd7bc..2d0bd6db 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -8,7 +8,7 @@ const Card = ({
 }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) => (
   <div
     className={cn(
-      "relative overflow-hidden rounded-2xl bg-white text-gray-950 shadow-sm ring-1 ring-gray-200 transition-all dark:bg-gray-900/40 dark:text-gray-50 dark:ring-gray-800",
+      "relative overflow-hidden rounded-2xl bg-white text-gray-950 shadow-sm ring-1 ring-gray-200 transition-colors dark:bg-gray-900/40 dark:text-gray-50 dark:ring-gray-800",
       className
     )}
     ref={ref}
diff --git a/components/ui/copy-to-clipboard.tsx b/components/ui/copy-to-clipboard.tsx
index 2c870a53..f25de9b9 100644
--- a/components/ui/copy-to-clipboard.tsx
+++ b/components/ui/copy-to-clipboard.tsx
@@ -33,7 +33,7 @@ export function CopyToClipboard({
           <output
             aria-live="polite"
             className={cn(
-              "pointer-events-auto flex w-full max-w-sm items-center gap-3 rounded-2xl p-4 shadow-xl backdrop-blur-md transition-all duration-300",
+              "pointer-events-auto flex w-full max-w-sm items-center gap-3 rounded-2xl p-4 shadow-xl backdrop-blur-md transition-[opacity,transform] duration-300",
               "border border-white/10 bg-white/70 dark:border-gray-800 dark:bg-gray-900/90",
               "bg-gradient-to-br from-white/80 to-white/60 dark:from-gray-800/10 dark:to-gray-900/10",
               t.visible ? "translate-y-0 opacity-100" : "translate-y-3 opacity-0"
diff --git a/components/ui/dropdown.tsx b/components/ui/dropdown.tsx
index 9fa899e0..72895228 100644
--- a/components/ui/dropdown.tsx
+++ b/components/ui/dropdown.tsx
@@ -92,7 +92,7 @@ export function Dropdown({
       <button
         aria-expanded={isOpen}
         aria-haspopup="listbox"
-        className={`flex w-full cursor-pointer items-center justify-between gap-2 font-medium text-gray-700 text-sm outline-none transition-all duration-200 ${baseButtonStyles} ${buttonClassName}`}
+        className={`flex w-full cursor-pointer items-center justify-between gap-2 font-medium text-gray-700 text-sm outline-none transition-[background-color,border-color,color,box-shadow] duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${baseButtonStyles} ${buttonClassName}`}
         disabled={disabled}
         onClick={() => !disabled && setIsOpen((v) => !v)}
         type="button"
@@ -126,7 +126,7 @@ export function Dropdown({
               {options.map((option) => (
                 <div
                   aria-selected={option.value === value}
-                  className={`flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
+                  className={`flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
                     option.value === value
                       ? "bg-blue-50 font-medium text-blue-700 dark:bg-blue-500/10 dark:text-blue-400"
                       : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800/50"
diff --git a/components/ui/mdx/card.tsx b/components/ui/mdx/card.tsx
index c8169a25..be270e2b 100644
--- a/components/ui/mdx/card.tsx
+++ b/components/ui/mdx/card.tsx
@@ -22,7 +22,7 @@ export function Card({ title, description, icon, href, className }: CardProps) {
   const content = (
     <div
       className={cn(
-        "group relative overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-all duration-300 dark:border-gray-800 dark:bg-gray-900",
+        "group relative overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-[transform,box-shadow,border-color,background-color] duration-300 dark:border-gray-800 dark:bg-gray-900",
         href
           ? "transform-gpu cursor-pointer will-change-transform hover:-translate-y-1 hover:border-blue-500/50 hover:shadow-md dark:hover:border-blue-400/50"
           : "",
diff --git a/components/ui/mdx/code-block.tsx b/components/ui/mdx/code-block.tsx
index 8145f7a9..0eb0b45a 100644
--- a/components/ui/mdx/code-block.tsx
+++ b/components/ui/mdx/code-block.tsx
@@ -39,7 +39,7 @@ export const CodeBlock = memo(({ children, language: _language, className }: Cod
     <div className="group relative my-6 overflow-hidden rounded-xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50">
       <div className="absolute top-3 right-3 z-10 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
         <CopyToClipboard
-          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm transition-all hover:bg-gray-50 hover:text-gray-900 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100"
+          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-500 shadow-sm transition-[background-color,color,border-color,box-shadow] hover:bg-gray-50 hover:text-gray-900 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100"
           showIcon={false}
           text={textToCopy}
         >
diff --git a/components/ui/mdx/code-tabs.tsx b/components/ui/mdx/code-tabs.tsx
index 9625f122..fbddb590 100644
--- a/components/ui/mdx/code-tabs.tsx
+++ b/components/ui/mdx/code-tabs.tsx
@@ -163,7 +163,7 @@ export const CodeTabs = ({
             return (
               <TabsTrigger
                 className={cn(
-                  "relative cursor-pointer rounded-lg px-4 py-2 font-medium text-sm outline-none transition-all duration-200",
+                  "relative cursor-pointer rounded-lg px-4 py-2 font-medium text-sm outline-none transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
                   "disabled:cursor-not-allowed disabled:opacity-50",
                   "data-[state=active]:bg-blue-50 data-[state=active]:text-blue-600 dark:data-[state=active]:bg-blue-900/20 dark:data-[state=active]:text-blue-400",
                   "data-[state=inactive]:text-gray-600 data-[state=inactive]:hover:bg-gray-100 data-[state=inactive]:hover:text-gray-900 dark:data-[state=inactive]:text-gray-400 dark:data-[state=inactive]:hover:bg-gray-800 dark:data-[state=inactive]:hover:text-gray-200"
diff --git a/components/ui/mdx/heading.tsx b/components/ui/mdx/heading.tsx
index b9b10c15..b7a386d6 100644
--- a/components/ui/mdx/heading.tsx
+++ b/components/ui/mdx/heading.tsx
@@ -37,7 +37,7 @@ export const Heading = ({ children, id, tag, className, ...props }: HeadingProps
           text={link}
         >
           {({ copied }) => (
-            <div className="inline-flex items-center justify-center rounded-md p-1 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300">
+            <div className="inline-flex items-center justify-center rounded-md p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300">
               {copied ? (
                 <Check className="h-4 w-4 text-green-500" />
               ) : (
diff --git a/components/ui/mdx/link-preview.tsx b/components/ui/mdx/link-preview.tsx
index d47e73fe..cf16f444 100644
--- a/components/ui/mdx/link-preview.tsx
+++ b/components/ui/mdx/link-preview.tsx
@@ -19,7 +19,7 @@ export function LinkPreview({ href, title, description, icon, className }: LinkP
   const content = (
     <div
       className={cn(
-        "group relative flex cursor-pointer items-start gap-4 rounded-lg border border-gray-200 bg-white p-4 transition-all hover:border-blue-500 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-400",
+        "group relative flex cursor-pointer items-start gap-4 rounded-lg border border-gray-200 bg-white p-4 transition-[border-color,box-shadow] hover:border-blue-500 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-blue-400",
         className
       )}
     >
diff --git a/components/ui/motion/motion-components.tsx b/components/ui/motion/motion-components.tsx
index cb85c75a..3f56baf8 100644
--- a/components/ui/motion/motion-components.tsx
+++ b/components/ui/motion/motion-components.tsx
@@ -12,6 +12,7 @@ import {
   slideInRight,
   slideUp,
 } from "@/lib/animations/variants";
+import { useReducedMotion } from "@/hooks/use-reduced-motion";
 
 interface MotionProps extends HTMLMotionProps<"div"> {
   children: ReactNode;
@@ -22,17 +23,9 @@ interface MotionProps extends HTMLMotionProps<"div"> {
 /* ----------------- Primitives ----------------- */
 
 export const FadeIn = ({ children, delay = 0, className, ...props }: MotionProps) => (
-  <m.div
-    className={className}
-    custom={delay}
-    initial="hidden"
-    variants={fadeIn}
-    viewport={{ once: true, margin: "-100px" }}
-    whileInView="visible"
-    {...props}
-  >
+  <FadeInInner className={className} delay={delay} props={props}>
     {children}
-  </m.div>
+  </FadeInInner>
 );
 
 export const SlideIn = ({
@@ -42,6 +35,97 @@ export const SlideIn = ({
   className,
   ...props
 }: MotionProps & { direction?: "up" | "down" | "left" | "right" }) => {
+  return (
+    <SlideInInner className={className} delay={delay} direction={direction} props={props}>
+      {children}
+    </SlideInInner>
+  );
+};
+
+export const ScaleIn = ({ children, delay = 0, className, ...props }: MotionProps) => (
+  <ScaleInInner className={className} delay={delay} props={props}>
+    {children}
+  </ScaleInInner>
+);
+
+export const HoverScale = ({ children, className, ...props }: MotionProps) => {
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <m.div
+      className={className}
+      initial={prefersReducedMotion ? false : "initial"}
+      variants={prefersReducedMotion ? undefined : hoverScale}
+      whileHover={prefersReducedMotion ? undefined : "hover"}
+      whileTap={prefersReducedMotion ? undefined : "tap"}
+      {...props}
+    >
+      {children}
+    </m.div>
+  );
+};
+
+/* ----------------- Container ----------------- */
+
+export const MotionSection = ({ children, className, ...props }: MotionProps) => {
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <m.div
+      className={className}
+      initial={prefersReducedMotion ? false : "hidden"}
+      variants={prefersReducedMotion ? undefined : containerStagger}
+      viewport={prefersReducedMotion ? undefined : { once: true, margin: "-80px" }}
+      whileInView={prefersReducedMotion ? undefined : "visible"}
+      {...props}
+    >
+      {children}
+    </m.div>
+  );
+};
+
+const FadeInInner = ({
+  children,
+  delay,
+  className,
+  props,
+}: {
+  children: ReactNode;
+  delay: number;
+  className?: string;
+  props: Omit<MotionProps, "children" | "delay" | "className">;
+}) => {
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <m.div
+      className={className}
+      custom={delay}
+      initial={prefersReducedMotion ? false : "hidden"}
+      variants={prefersReducedMotion ? undefined : fadeIn}
+      viewport={prefersReducedMotion ? undefined : { once: true, margin: "-100px" }}
+      whileInView={prefersReducedMotion ? undefined : "visible"}
+      {...props}
+    >
+      {children}
+    </m.div>
+  );
+};
+
+const SlideInInner = ({
+  children,
+  delay,
+  direction,
+  className,
+  props,
+}: {
+  children: ReactNode;
+  delay: number;
+  direction: "up" | "down" | "left" | "right";
+  className?: string;
+  props: Omit<MotionProps, "children" | "delay" | "className">;
+}) => {
+  const prefersReducedMotion = useReducedMotion();
   const variantMap = {
     up: slideUp,
     down: slideDown,
@@ -53,10 +137,10 @@ export const SlideIn = ({
     <m.div
       className={className}
       custom={delay}
-      initial="hidden"
-      variants={variantMap[direction]}
-      viewport={{ once: true, margin: "-100px" }}
-      whileInView="visible"
+      initial={prefersReducedMotion ? false : "hidden"}
+      variants={prefersReducedMotion ? undefined : variantMap[direction]}
+      viewport={prefersReducedMotion ? undefined : { once: true, margin: "-100px" }}
+      whileInView={prefersReducedMotion ? undefined : "visible"}
       {...props}
     >
       {children}
@@ -64,44 +148,30 @@ export const SlideIn = ({
   );
 };
 
-export const ScaleIn = ({ children, delay = 0, className, ...props }: MotionProps) => (
-  <m.div
-    className={className}
-    custom={delay}
-    initial="hidden"
-    variants={scaleIn}
-    viewport={{ once: true, margin: "-100px" }}
-    whileInView="visible"
-    {...props}
-  >
-    {children}
-  </m.div>
-);
-
-export const HoverScale = ({ children, className, ...props }: MotionProps) => (
-  <m.div
-    className={className}
-    initial="initial"
-    variants={hoverScale}
-    whileHover="hover"
-    whileTap="tap"
-    {...props}
-  >
-    {children}
-  </m.div>
-);
-
-/* ----------------- Container ----------------- */
+const ScaleInInner = ({
+  children,
+  delay,
+  className,
+  props,
+}: {
+  children: ReactNode;
+  delay: number;
+  className?: string;
+  props: Omit<MotionProps, "children" | "delay" | "className">;
+}) => {
+  const prefersReducedMotion = useReducedMotion();
 
-export const MotionSection = ({ children, className, ...props }: MotionProps) => (
-  <m.div
-    className={className}
-    initial="hidden"
-    variants={containerStagger}
-    viewport={{ once: true, margin: "-80px" }}
-    whileInView="visible"
-    {...props}
-  >
-    {children}
-  </m.div>
-);
+  return (
+    <m.div
+      className={className}
+      custom={delay}
+      initial={prefersReducedMotion ? false : "hidden"}
+      variants={prefersReducedMotion ? undefined : scaleIn}
+      viewport={prefersReducedMotion ? undefined : { once: true, margin: "-100px" }}
+      whileInView={prefersReducedMotion ? undefined : "visible"}
+      {...props}
+    >
+      {children}
+    </m.div>
+  );
+};