perf(sections): gate heavy effects to desktop viewport

Skip clover parallax (company-intro) and conic-gradient border animation
(oma-section) on mobile/tablet where they don't materially help and add
GPU cost. Falls back to a static conic gradient on oma section.

Author: 5oran9

components/site/company-intro.tsx

@@ -4,6 +4,7 @@ import { useRef } from "react";
 import Image from "next/image";
 import { motion, useReducedMotion, useScroll, useTransform } from "motion/react";
 import { SectionHeadingUnderline } from "@/components/site/section-heading-underline";
+import { useMediaQuery } from "@/lib/use-media-query";
 
 const PARAGRAPHS = [
   {
@@ -26,12 +27,14 @@ const PARAGRAPHS = [
 
 export function CompanyIntro() {
   const reduceMotion = useReducedMotion();
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
   const sectionRef = useRef<HTMLElement>(null);
   const { scrollYProgress } = useScroll({
     target: sectionRef,
     offset: ["start end", "end start"],
   });
   const cloverY = useTransform(scrollYProgress, [0, 1], [40, -80]);
+  const heavyEffects = isDesktop && !reduceMotion;
 
   const container = {
     hidden: {},
@@ -60,15 +63,15 @@ export function CompanyIntro() {
       <motion.div
         aria-hidden
         className="pointer-events-none absolute -right-20 -bottom-24 select-none md:-right-24 md:-bottom-32"
-        style={reduceMotion ? undefined : { y: cloverY }}
+        style={heavyEffects ? { y: cloverY } : undefined}
       >
         <Image
           src="/logo.png"
           alt=""
           width={720}
           height={720}
           unoptimized
-          className="h-[360px] w-[360px] opacity-[0.09] motion-safe:animate-[spin_120s_linear_infinite] md:h-[640px] md:w-[640px]"
+          className="h-[360px] w-[360px] opacity-[0.09] lg:motion-safe:animate-[spin_120s_linear_infinite] md:h-[640px] md:w-[640px]"
         />
       </motion.div>
       <div className="relative mx-auto w-full max-w-6xl px-6 md:px-12">

components/site/oma-section.tsx

@@ -13,6 +13,7 @@ import { LinkButton } from "@/components/ui/button";
 import { SectionHeadingUnderline } from "@/components/site/section-heading-underline";
 import { TypewriterText } from "@/components/site/typewriter-text";
 import { OMA_DOCS_URL, OMA_REPO_URL } from "@/lib/oma-content";
+import { useMediaQuery } from "@/lib/use-media-query";
 
 const AGENTS = [
   { tag: "기획자", desc: "어떤 화면이 필요한지 정리" },
@@ -30,21 +31,26 @@ const HIGHLIGHTS = [
 
 const easeOutExpo = [0.22, 1, 0.36, 1] as const;
 
+const STATIC_BORDER_BG =
+  "conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(122,185,76,0.55) 80deg, transparent 160deg, transparent 240deg, rgba(15,84,64,0.35) 320deg, transparent 360deg)";
+
 export function OmaSection() {
   const reduceMotion = useReducedMotion();
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const animateBorder = isDesktop && !reduceMotion;
   const angle = useMotionValue(0);
 
   useEffect(() => {
-    if (reduceMotion) return;
+    if (!animateBorder) return;
     const ctrl = animate(angle, 360, {
       duration: 7,
       repeat: Infinity,
       ease: "linear",
     });
     return () => ctrl.stop();
-  }, [angle, reduceMotion]);
+  }, [angle, animateBorder]);
 
-  const borderBackground = useMotionTemplate`conic-gradient(from ${angle}deg at 50% 50%, transparent 0deg, rgba(122,185,76,0.55) 80deg, transparent 160deg, transparent 240deg, rgba(15,84,64,0.35) 320deg, transparent 360deg)`;
+  const animatedBorderBackground = useMotionTemplate`conic-gradient(from ${angle}deg at 50% 50%, transparent 0deg, rgba(122,185,76,0.55) 80deg, transparent 160deg, transparent 240deg, rgba(15,84,64,0.35) 320deg, transparent 360deg)`;
 
   const fadeUpInitial = reduceMotion ? { opacity: 0 } : { opacity: 0, y: 20 };
   const fadeUpAnimate = reduceMotion
@@ -154,11 +160,11 @@ export function OmaSection() {
             viewport={{ once: true, amount: 0.25 }}
             className="relative"
           >
-            {/* Animated conic gradient border */}
+            {/* Animated conic gradient border (desktop) / static fallback (mobile) */}
             <motion.div
               aria-hidden
               className="pointer-events-none absolute -inset-[1.5px] rounded-2xl opacity-90 blur-[0.5px]"
-              style={{ background: borderBackground }}
+              style={{ background: animateBorder ? animatedBorderBackground : STATIC_BORDER_BG }}
             />
             {/* Soft outer glow */}
             <div