reveals

app/[locale]/blog/page.tsx

@@ -51,6 +51,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
   return (
     <div className="bg-neutral-light min-h-screen">
       {/* Hero Section - Immersive Magazine Feel */}
+      <Reveal>
         <section className="relative h-[50vh] md:h-[70vh] min-h-[400px] md:min-h-[600px] flex items-center overflow-hidden bg-primary-dark">
           {featuredPost && featuredPost.frontmatter.featuredImage && (
             <>
@@ -83,6 +84,7 @@ export default async function BlogIndex({ params: { locale } }: BlogIndexProps)
             </div>
           </Container>
         </section>
+      </Reveal>
 
       <Section className="bg-neutral-light py-12 md:py-28">
         <Container>

app/[locale]/contact/page.tsx

@@ -1,5 +1,6 @@
 import ContactForm from '@/components/ContactForm';
 import JsonLd from '@/components/JsonLd';
+import Reveal from '@/components/Reveal';
 import { Container, Heading, Section } from '@/components/ui';
 import { Metadata } from 'next';
 import { getTranslations } from 'next-intl/server';
@@ -127,12 +128,13 @@ export default async function ContactPage({ params }: ContactPageProps) {
         }}
       />
       {/* Hero Section */}
+      <Reveal>
         <section className="bg-primary-dark text-white py-20 md:py-32 relative overflow-hidden">
           <div className="absolute inset-0 opacity-20">
             <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-accent via-transparent to-transparent" />
           </div>
           <Container className="relative z-10">
-          <div className="max-w-4xl animate-slide-up">
+            <div className="max-w-4xl">
               <Heading level={1} subtitle={t('heroSubtitle')} className="text-white mb-4 md:mb-6">
                 <span className="text-white">{t('title')}</span>
               </Heading>
@@ -142,6 +144,7 @@ export default async function ContactPage({ params }: ContactPageProps) {
             </div>
           </Container>
         </section>
+      </Reveal>
 
       <Section className="bg-neutral-light -mt-8 md:-mt-20 relative z-20 py-12 md:py-28">
         <Container>

app/[locale]/products/page.tsx

@@ -166,6 +166,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
       </Section>
       
       {/* Technical Support CTA */}
+      <Reveal>
         <Section className="bg-white py-12 md:py-28">
           <Container>
             <div className="bg-primary-dark rounded-[32px] md:rounded-[64px] p-6 md:p-20 lg:p-24 relative overflow-hidden">
@@ -185,6 +186,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
             </div>
           </Container>
         </Section>
+      </Reveal>
     </div>
   );
 }

app/[locale]/team/page.tsx

@@ -85,6 +85,7 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
         }}
       />
       {/* Hero Section */}
+      <Reveal>
         <section className="relative flex items-center justify-center overflow-hidden bg-primary-dark pt-32 pb-24 md:pt-[14%] md:pb-[12%]">
           <div className="absolute inset-0 z-0">
             <Image
@@ -97,7 +98,7 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
             <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
           </div>
           
-        <Container className="relative z-10 text-center text-white max-w-5xl animate-slide-up">
+          <Container className="relative z-10 text-center text-white max-w-5xl">
             <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">{t('hero.badge')}</Badge>
             <h1 className="text-3xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1] mb-4 md:mb-8">
               {t('hero.subtitle')}
@@ -107,6 +108,7 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
             </p>
           </Container>
         </section>
+      </Reveal>
 
       {/* Michael Bodemer Section - Sticky Narrative Split Layout */}
       <section className="relative bg-white overflow-hidden">
@@ -138,7 +140,7 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
               </Button>
             </div>
           </Reveal>
-          <div className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1 lg:order-2">
+          <Reveal className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1 lg:order-2">
             <Image
               src="/uploads/2024/12/DSC07768-Large.webp"
               alt={t('michael.name')}
@@ -147,11 +149,12 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
               sizes="(max-width: 1024px) 100vw, 50vw"
             />
             <div className="absolute inset-0 bg-gradient-to-t from-primary-dark/60 lg:bg-gradient-to-r lg:from-primary-dark/20 to-transparent" />
-          </div>
+          </Reveal>
         </div>
       </section>
 
       {/* Legacy Section - Immersive Background */}
+      <Reveal>
         <section className="relative py-16 md:py-48 bg-primary-dark text-white overflow-hidden">
           <div className="absolute inset-0 z-0">
             <Image
@@ -191,11 +194,12 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
             </div>
           </Container>
         </section>
+      </Reveal>
 
       {/* Klaus Mintel Section - Reversed Split Layout */}
       <section className="relative bg-white overflow-hidden">
         <div className="flex flex-col lg:flex-row">
-          <div className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1">
+          <Reveal className="w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden order-1">
             <Image
               src="/uploads/2024/12/DSC07963-Large.webp"
               alt={t('klaus.name')}
@@ -204,7 +208,7 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
               sizes="(max-width: 1024px) 100vw, 50vw"
             />
             <div className="absolute inset-0 bg-gradient-to-t from-white/60 lg:bg-gradient-to-l lg:from-primary-dark/20 to-transparent" />
-          </div>
+          </Reveal>
           <Reveal className="w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center bg-neutral-light text-saturated relative order-2">
             <div className="absolute top-0 left-0 w-32 h-full bg-saturated/5 skew-x-12 -translate-x-1/2" />
             <div className="relative z-10">
@@ -273,7 +277,9 @@ export default async function TeamPage({ params: { locale } }: TeamPageProps) {
         </Container>
       </Section>
 
+      <Reveal>
         <Gallery />
+      </Reveal>
     </div>
   );
 }

styles/globals.css

@@ -166,17 +166,24 @@
 
 @utility reveal-on-scroll {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(40px) scale(0.95) rotate(-2deg);
-  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  filter: blur(12px);
+  transition:
+    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    filter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   
   &.is-visible {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1) rotate(0deg);
+    filter: blur(0);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    transition: opacity 0.5s ease-out;
+    opacity: 1;
     transform: none !important;
+    filter: none !important;
+    transition: opacity 0.3s ease-out;
   }
 }