Update app.py

app.py

@@ -14,7 +14,7 @@ st.set_page_config(
 st.markdown("""
 <style>
 body {
-    background-image: url('https://images.unsplash.com/photo-1581092160613-7f07e5d14c86?auto=format&fit=crop&w=1920&q=80');
+    background-image: url('https://images.unsplash.com/photo-1581091012184-7d0dca5a5d1e?auto=format&fit=crop&w=1920&q=80');
     background-size: cover;
     background-attachment: fixed;
     background-position: center;
@@ -36,16 +36,19 @@ body {
     color: white;
     margin-bottom: 3rem;
     box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    animation: fade-in 2s ease-out;
 }
 .hero h1 {
     font-size: 3.75em;
     font-weight: 700;
     margin-bottom: 0.3em;
+    animation: slide-in-top 1s ease-out;
 }
 .hero p {
     font-size: 1.3em;
     font-weight: 300;
     margin-top: 0.5em;
+    animation: slide-in-bottom 1.2s ease-out;
 }
 .section {
     background: rgba(255, 255, 255, 0.85);
@@ -54,6 +57,7 @@ body {
     margin-bottom: 2.5rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
     backdrop-filter: blur(4px);
+    animation: fade-in-up 1s ease-out;
 }
 h3 {
     font-size: 1.8rem;
@@ -72,11 +76,28 @@ ul, ol {
     color: white;
     margin-top: 3rem;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    animation: fade-in 2s ease-out;
 }
 .contact-block a {
     color: #fff;
     text-decoration: underline;
 }
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(30px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes slide-in-top {
+  0% { transform: translateY(-100px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+@keyframes slide-in-bottom {
+  0% { transform: translateY(100px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
 </style>
 """, unsafe_allow_html=True)
 
@@ -121,3 +142,4 @@ st.markdown("""
     <p>Email: <a href="mailto:your@email.com">your@email.com</a></p>
 </div>
 """, unsafe_allow_html=True)
+