From a205199bf7cdcebc9d5aec9ccc660df67470063e Mon Sep 17 00:00:00 2001
From: Dushyantcoder07 <dushyantsisodiya18@gmail.com>
Date: Wed, 20 May 2026 08:31:21 +0530
Subject: [PATCH] Entry-animation

---
 static/style.css     | 130 +++++++++++++++++++++++++++++++++++++++++++
 templates/index.html |   3 +
 2 files changed, 133 insertions(+)

diff --git a/static/style.css b/static/style.css
index 0883029..839758a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -73,6 +73,8 @@
 
   /* Transition */
   --t: 0.2s ease;
+  --entry-duration: 700ms;
+  --entry-delay-step: 110ms;
 }
 
 /* ---- Reset ------------------------------------------------- */
@@ -128,6 +130,134 @@ ul, ol { list-style: none; }
   line-height: 1.75;
 }
 
+/* ---- Entry Animation ------------------------------------- */
+@keyframes entryFadeUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 18px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes entrySoftFade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+html[data-entry-anim="true"] .navbar {
+  opacity: 0;
+  animation: entrySoftFade 420ms ease forwards;
+}
+
+html[data-entry-anim="true"] .hero-copy > *,
+html[data-entry-anim="true"] .hero-visual > *,
+html[data-entry-anim="true"] .stats-grid > *,
+html[data-entry-anim="true"] .skill-strip-inner,
+html[data-entry-anim="true"] .how-section .section-eyebrow,
+html[data-entry-anim="true"] .how-section .section-title,
+html[data-entry-anim="true"] .how-section .section-sub,
+html[data-entry-anim="true"] .how-section .step-card,
+html[data-entry-anim="true"] .features-section .section-eyebrow,
+html[data-entry-anim="true"] .features-section .section-title,
+html[data-entry-anim="true"] .features-section .section-sub,
+html[data-entry-anim="true"] .features-grid > *,
+html[data-entry-anim="true"] .form-section .section-eyebrow,
+html[data-entry-anim="true"] .form-section .section-title,
+html[data-entry-anim="true"] .form-section .section-sub,
+html[data-entry-anim="true"] .form-card-outer {
+  opacity: 0;
+  transform: translate3d(0, 18px, 0);
+  animation: entryFadeUp var(--entry-duration) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+  will-change: transform, opacity;
+}
+
+html[data-entry-anim="true"] .hero-copy > *:nth-child(1) { animation-delay: 90ms; }
+html[data-entry-anim="true"] .hero-copy > *:nth-child(2) { animation-delay: calc(90ms + var(--entry-delay-step)); }
+html[data-entry-anim="true"] .hero-copy > *:nth-child(3) { animation-delay: calc(90ms + (var(--entry-delay-step) * 2)); }
+html[data-entry-anim="true"] .hero-copy > *:nth-child(4) { animation-delay: calc(90ms + (var(--entry-delay-step) * 3)); }
+
+html[data-entry-anim="true"] .hero-visual > *:nth-child(1) { animation-delay: 160ms; }
+html[data-entry-anim="true"] .hero-visual > *:nth-child(2) { animation-delay: 260ms; }
+html[data-entry-anim="true"] .hero-visual > *:nth-child(3) { animation-delay: 360ms; }
+
+html[data-entry-anim="true"] .stats-grid > *:nth-child(1) { animation-delay: 80ms; }
+html[data-entry-anim="true"] .stats-grid > *:nth-child(2) { animation-delay: 170ms; }
+html[data-entry-anim="true"] .stats-grid > *:nth-child(3) { animation-delay: 260ms; }
+
+html[data-entry-anim="true"] .how-section .section-eyebrow,
+html[data-entry-anim="true"] .features-section .section-eyebrow,
+html[data-entry-anim="true"] .form-section .section-eyebrow {
+  animation-delay: 40ms;
+}
+
+html[data-entry-anim="true"] .how-section .section-title,
+html[data-entry-anim="true"] .features-section .section-title,
+html[data-entry-anim="true"] .form-section .section-title {
+  animation-delay: 120ms;
+}
+
+html[data-entry-anim="true"] .how-section .section-sub,
+html[data-entry-anim="true"] .features-section .section-sub,
+html[data-entry-anim="true"] .form-section .section-sub {
+  animation-delay: 200ms;
+}
+
+html[data-entry-anim="true"] .how-section .step-card:nth-child(1) { animation-delay: 120ms; }
+html[data-entry-anim="true"] .how-section .step-card:nth-child(3) { animation-delay: 210ms; }
+html[data-entry-anim="true"] .how-section .step-card:nth-child(5) { animation-delay: 300ms; }
+
+html[data-entry-anim="true"] .features-grid > *:nth-child(1) { animation-delay: 140ms; }
+html[data-entry-anim="true"] .features-grid > *:nth-child(2) { animation-delay: 230ms; }
+html[data-entry-anim="true"] .features-grid > *:nth-child(3) { animation-delay: 320ms; }
+
+html[data-entry-anim="true"] .form-card-outer { animation-delay: 120ms; }
+
+html[data-entry-anim="true"] .form-card form > .form-group,
+html[data-entry-anim="true"] .form-card form > .skill-chips-row,
+html[data-entry-anim="true"] .form-card form > .form-row,
+html[data-entry-anim="true"] .form-card form > .btn-submit {
+  opacity: 0;
+  transform: translate3d(0, 14px, 0);
+  animation: entryFadeUp 600ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+  will-change: transform, opacity;
+}
+
+html[data-entry-anim="true"] .form-card form > .form-group:nth-child(1) { animation-delay: 180ms; }
+html[data-entry-anim="true"] .form-card form > .skill-chips-row { animation-delay: 250ms; }
+html[data-entry-anim="true"] .form-card form > .form-row { animation-delay: 320ms; }
+html[data-entry-anim="true"] .form-card form > .btn-submit { animation-delay: 390ms; }
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-entry-anim="true"] .navbar,
+  html[data-entry-anim="true"] .hero-copy > *,
+  html[data-entry-anim="true"] .hero-visual > *,
+  html[data-entry-anim="true"] .stats-grid > *,
+  html[data-entry-anim="true"] .skill-strip-inner,
+  html[data-entry-anim="true"] .how-section .section-eyebrow,
+  html[data-entry-anim="true"] .how-section .section-title,
+  html[data-entry-anim="true"] .how-section .section-sub,
+  html[data-entry-anim="true"] .how-section .step-card,
+  html[data-entry-anim="true"] .features-section .section-eyebrow,
+  html[data-entry-anim="true"] .features-section .section-title,
+  html[data-entry-anim="true"] .features-section .section-sub,
+  html[data-entry-anim="true"] .features-grid > *,
+  html[data-entry-anim="true"] .form-section .section-eyebrow,
+  html[data-entry-anim="true"] .form-section .section-title,
+  html[data-entry-anim="true"] .form-section .section-sub,
+  html[data-entry-anim="true"] .form-card-outer,
+  html[data-entry-anim="true"] .form-card form > .form-group,
+  html[data-entry-anim="true"] .form-card form > .skill-chips-row,
+  html[data-entry-anim="true"] .form-card form > .form-row,
+  html[data-entry-anim="true"] .form-card form > .btn-submit {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+
 /* ---- Badges ------------------------------------------------ */
 .badge-group {
   display: flex;
diff --git a/templates/index.html b/templates/index.html
index 983c97c..d2163d8 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,6 +7,9 @@
   <meta name="description"
     content="DevPath recommends real coding projects based on your skills, level, and interests — with full roadmaps and starter code." />
   <title>DevPath — Find Projects Based On Your Skills</title>
+  <script>
+    document.documentElement.setAttribute("data-entry-anim", "true");
+  </script>
   <link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
   <link rel="stylesheet" href="/static/style.css" />
   <link