fix: remove inline opacity: 0 from HeroSection and use animation-fill-mode both to prevent invisible text

components/blocks/HeroSection.tsx

@@ -60,26 +60,26 @@ export const HeroSection: React.FC<HeroSectionProps> = (props) => {
           className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}
         >
           {badge && (
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: '0.1s', opacity: 0, animationFillMode: 'forwards' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: '0.1s', animationFillMode: 'both' }}>
               <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                 {badge}
               </Badge>
             </div>
           )}
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.25s' : '0.1s', opacity: 0, animationFillMode: 'forwards' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.25s' : '0.1s', animationFillMode: 'both' }}>
               <Heading level={1} size="section" variant="white" align={alignment || 'left'} className="mb-4 md:mb-8">
                 {title}
               </Heading>
             </div>
           {subtitle && (
-            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.4s' : '0.25s', opacity: 0, animationFillMode: 'forwards' }}>
+            <div className="animate-hero-fade-in-up" style={{ animationDelay: badge ? '0.4s' : '0.25s', animationFillMode: 'both' }}>
               <p className={`text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
                 {subtitle}
               </p>
             </div>
           )}
           {ctaLabel && ctaHref && (
-            <div className={`mt-8 animate-hero-fade-in-up ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`} style={{ animationDelay: badge ? '0.55s' : '0.4s', opacity: 0, animationFillMode: 'forwards' }}>
+            <div className={`mt-8 animate-hero-fade-in-up ${alignment === 'center' ? 'flex flex-wrap justify-center gap-4' : 'flex flex-wrap gap-4'}`} style={{ animationDelay: badge ? '0.55s' : '0.4s', animationFillMode: 'both' }}>
               <Button
                 href={ctaHref}
                 variant="accent"

package.json

@@ -139,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.4.23",
+  "version": "2.4.24",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",