feat: Enhance animation transitions and Reveal component effects, and refine iframe loader overlay positioning and BrowserChrome styles.

app/case-studies/klz-cables/page.tsx

@@ -40,7 +40,7 @@ const Marker: React.FC<{ children: React.ReactNode; delay?: number }> = ({
                 initial={{ scaleX: 0, opacity: 0 }}
                 whileInView={{ scaleX: 1, opacity: 1 }}
                 viewport={{ once: true }}
-                transition={{ duration: 0.8, delay: delay + 0.3, ease: [0.16, 1, 0.3, 1] }}
+                transition={{ duration: 1.2, delay: delay + 0.1, ease: [0.23, 1, 0.32, 1] }}
                 className="absolute inset-0 z-[-1] -skew-x-6 rotate-[-1deg] translate-y-1 transform-gpu bg-[rgba(255,235,59,0.95)] origin-left"
                 aria-hidden="true"
             />
@@ -86,7 +86,7 @@ export default function KLZCablesCaseStudy() {
                         </Reveal>
 
                         <div className="space-y-12">
-                            <Reveal delay={0.1} direction="up" scale={0.95} blur>
+                            <Reveal delay={0.1} direction="up" scale={0.98} blur>
                                 <H1 className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900">
                                     KLZ Cables<br />
                                     <span className="text-slate-100">Case Study.</span>
@@ -106,7 +106,7 @@ export default function KLZCablesCaseStudy() {
                             </Reveal>
                         </div>
 
-                        <Reveal delay={0.4} direction="up" scale={0.9} blur>
+                        <Reveal delay={0.4} direction="up" scale={0.98} blur>
                             <div className="flex flex-wrap gap-12 md:gap-24 pt-12 border-t border-slate-100">
                                 <div className="space-y-2">
                                     <Label className="text-slate-400">Data Integrity</Label>
@@ -156,7 +156,7 @@ export default function KLZCablesCaseStudy() {
                         </Reveal>
                     </div>
                     <div className="md:col-span-5 relative">
-                        <Reveal delay={0.3} direction="right" scale={0.95} blur>
+                        <Reveal delay={0.3} direction="right" scale={0.98} blur>
                             <motion.div
                                 whileHover={{ y: -5, scale: 1.01 }}
                                 transition={{ type: "spring", stiffness: 200, damping: 25 }}
@@ -203,7 +203,7 @@ export default function KLZCablesCaseStudy() {
                             </div>
                         </div>
                     </Reveal>
-                    <Reveal delay={0.2} width="100%" direction="up" scale={1.05} blur>
+                    <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
                         <motion.div
                             whileHover={{ scale: 1.01 }}
                             transition={{ type: "spring", stiffness: 200, damping: 20 }}
@@ -244,7 +244,7 @@ export default function KLZCablesCaseStudy() {
                         </Reveal>
                     </div>
 
-                    <Reveal delay={0.2} width="100%" direction="up" scale={0.95} blur>
+                    <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
                         <motion.div
                             whileHover={{ scale: 1.01 }}
                             transition={{ type: "spring", stiffness: 200, damping: 20 }}
@@ -283,7 +283,7 @@ export default function KLZCablesCaseStudy() {
                     </div>
 
                     <div className="lg:col-span-8 relative group">
-                        <Reveal width="100%" direction="left" scale={0.95} blur>
+                        <Reveal width="100%" direction="left" scale={0.98} blur>
                             <motion.div
                                 whileHover={{ scale: 1.01 }}
                                 transition={{ type: "spring", stiffness: 200, damping: 20 }}
@@ -336,7 +336,7 @@ export default function KLZCablesCaseStudy() {
                         </LeadText>
                     </Reveal>
 
-                    <Reveal delay={0.2} width="100%" direction="up" scale={0.9} blur>
+                    <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
                         <div className="relative group w-full text-left">
                             <div className="relative block w-full overflow-visible">
                                 <IframeSection

src/components/IframeSection.tsx

@@ -31,7 +31,7 @@ interface IframeSectionProps {
 const BrowserChrome: React.FC<{ url: string; minimal?: boolean }> = ({ url, minimal }) => {
     if (minimal) return null;
     return (
-        <div className="h-14 bg-white/70 backdrop-blur-2xl border-b border-slate-200/40 flex items-center px-6 gap-8 z-30 flex-shrink-0 relative">
+        <div className="h-14 bg-white/90 backdrop-blur-2xl border-b border-slate-200/40 flex items-center px-6 gap-8 z-[100] flex-shrink-0 relative">
             {/* Status Indicators (Traffic Lights) */}
             <div className="flex gap-1.5 opacity-40">
                 <div className="w-1.5 h-1.5 rounded-full bg-slate-900" />
@@ -190,11 +190,7 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
     return (
         <div
             className={cn("w-full group relative", !minimal && "space-y-6", className)}
-            style={{
-                opacity: 0,
-                animation: `fadeIn 0.8s ease-out ${delay}s forwards`,
-                ...className?.includes('h-full') ? { height: '100%' } : {}
-            }}
+            style={className?.includes('h-full') ? { height: '100%' } : {}}
         >
             <canvas ref={canvasRef} className="hidden" aria-hidden="true" />
 
@@ -209,7 +205,7 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
             <div
                 ref={containerRef}
                 className={cn(
-                    "w-full relative transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] flex flex-col",
+                    "w-full relative transition-[transform,shadow,scale] duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] flex flex-col z-10",
                     minimal ? "bg-transparent" : "bg-slate-50",
                     !minimal && "rounded-[2.5rem] border border-slate-200/50 shadow-[0_80px_160px_-40px_rgba(0,0,0,0.18),0_0_1px_rgba(0,0,0,0.1)]",
                     perspective && "hover:scale-[1.03] hover:-translate-y-3",
@@ -235,21 +231,20 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
                     </div>
                 )}
 
-                {/* Loader Overlay */}
-                {isLoading && (
-                    <div className="absolute inset-0 flex items-center justify-center bg-white/60 backdrop-blur-xl z-50 transition-opacity duration-700">
-                        <div className="flex flex-col items-center gap-4">
-                            <div className="w-12 h-12 border-[3px] border-slate-100 border-t-slate-900 rounded-full animate-spin" />
-                            <MonoLabel className="text-[10px] text-slate-400 animate-pulse uppercase tracking-[0.2em]">Establishing Connection</MonoLabel>
-                        </div>
-                    </div>
-                )}
-
                 {/* Browser Frame */}
                 {browserFrame && <BrowserChrome url="varnish-cache://secure.klz-cables.com" minimal={minimal} />}
 
                 {/* Scaled Viewport Container */}
                 <div className="flex-1 relative overflow-hidden bg-slate-50/50">
+                    {/* Loader Overlay - Now scoped to viewport */}
+                    {isLoading && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-white/60 backdrop-blur-xl z-50 transition-opacity duration-700">
+                            <div className="flex flex-col items-center gap-4">
+                                <div className="w-12 h-12 border-[3px] border-slate-100 border-t-slate-900 rounded-full animate-spin" />
+                                <MonoLabel className="text-[10px] text-slate-400 animate-pulse uppercase tracking-[0.2em]">Establishing Connection</MonoLabel>
+                            </div>
+                        </div>
+                    )}
                     <div
                         className={cn(
                             "transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] origin-top-left absolute left-0 right-0",
@@ -339,12 +334,6 @@ export const IframeSection: React.FC<IframeSectionProps> = ({
                 {!allowScroll && <div className="absolute inset-x-0 bottom-0 top-14 pointer-events-auto cursor-default z-20" />}
             </div>
 
-            <style jsx global>{`
-                @keyframes fadeIn {
-                    from { opacity: 0; transform: translateY(20px); }
-                    to { opacity: 1; transform: translateY(0); }
-                }
-            `}</style>
         </div>
     );
 };

src/components/Reveal.tsx

@@ -34,10 +34,10 @@ export const Reveal: React.FC<RevealProps> = ({
 
   const getDirectionOffset = () => {
     switch (direction) {
-      case 'up': return { y: 15 };
-      case 'down': return { y: -15 };
-      case 'left': return { x: 15 };
-      case 'right': return { x: -15 };
+      case 'up': return { y: 20 };
+      case 'down': return { y: -20 };
+      case 'left': return { x: 20 };
+      case 'right': return { x: -20 };
       default: return {};
     }
   };
@@ -46,32 +46,43 @@ export const Reveal: React.FC<RevealProps> = ({
     hidden: {
       opacity: 0,
       ...getDirectionOffset(),
-      scale: scale !== 1 ? scale : 1,
-      filter: blur ? "blur(8px)" : "blur(0px)"
+      scale: scale !== 1 ? scale : 0.99,
+      rotateX: direction === 'up' ? 2 : direction === 'down' ? -2 : 0,
+      rotateY: direction === 'left' ? -2 : direction === 'right' ? 2 : 0,
     },
     visible: {
       opacity: 1,
       y: 0,
       x: 0,
       scale: 1,
-      filter: "blur(0px)"
+      rotateX: 0,
+      rotateY: 0,
     },
   };
 
   return (
-    <div ref={ref} style={{ position: "relative", width }} className={className}>
+    <div
+      ref={ref}
+      style={{
+        position: "relative",
+        width,
+        perspective: "1000px"
+      }}
+      className={className}
+    >
       <motion.div
         variants={variants}
         initial="hidden"
         animate={mainControls}
+        style={{ transformStyle: "preserve-3d" }}
         transition={{
-          duration: 1.2,
+          duration: 0.8,
           delay: delay,
           type: "spring",
-          stiffness: 40,
-          damping: 20,
+          stiffness: 70,
+          damping: 24,
           mass: 1,
-          opacity: { duration: 1, ease: [0.22, 1, 0.36, 1] }
+          opacity: { duration: 0.5, ease: [0.16, 1, 0.3, 1] }
         }}
       >
         {children}