Update static/style.css

static/style.css

@@ -22,6 +22,11 @@ body{
               linear-gradient(180deg, var(--bg1), var(--bg2));
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
   overflow-x:hidden;
+  animation: fadeInBody 1s ease;
+}
+@keyframes fadeInBody {
+  from { opacity:0; }
+  to { opacity:1; }
 }
 
 /* Background layers */
@@ -31,6 +36,11 @@ body{
     radial-gradient(1000px 600px at 20% -10%, rgba(155,140,255,.25),transparent 60%),
     radial-gradient(900px 500px at 110% 120%, rgba(106,227,255,.18),transparent 60%);
   filter: blur(30px);
+  animation: pulseGlow 8s ease-in-out infinite alternate;
+}
+@keyframes pulseGlow {
+  from { opacity:.6; }
+  to { opacity:1; }
 }
 
 .stars, .shooting-stars{
@@ -92,14 +102,24 @@ body{
 
 /* Layout */
 .container{ width:min(1100px, 92%); margin: 0 auto; position:relative; z-index:2;}
-header{ padding: 60px 0 20px;}
-.logo{ font-size: clamp(28px, 6vw, 56px); font-weight:900; letter-spacing:.6px;}
+header{ padding: 60px 0 20px; animation: slideDown 1s ease;}
+@keyframes slideDown {
+  from { opacity:0; transform: translateY(-30px);}
+  to { opacity:1; transform: translateY(0);}
+}
+.logo{ font-size: clamp(28px, 6vw, 56px); font-weight:900; letter-spacing:.6px; }
 .logo span{
   background: linear-gradient(90deg, var(--accent), var(--accent2));
   -webkit-background-clip:text; background-clip:text; color:transparent;
   text-shadow: 0 0 28px rgba(106,227,255,.35);
+  animation: glowText 3s ease-in-out infinite alternate;
 }
-.subtitle{ color:var(--muted); margin-top:10px; max-width: 780px; line-height:1.5 }
+@keyframes glowText {
+  from { text-shadow: 0 0 10px rgba(106,227,255,.25);}
+  to { text-shadow: 0 0 26px rgba(155,140,255,.65);}
+}
+.subtitle{ color:var(--muted); margin-top:10px; max-width: 780px; line-height:1.5; animation: fadeIn 1.4s ease;}
+@keyframes fadeIn { from {opacity:0} to {opacity:1} }
 
 .card{
   background: var(--glass);
@@ -109,7 +129,7 @@ header{ padding: 60px 0 20px;}
   backdrop-filter: blur(10px);
   box-shadow: 0 15px 60px rgba(0,0,0,.35);
   transform: translateY(6px);
-  animation: card-in .6s ease forwards;
+  animation: card-in .8s ease forwards;
 }
 @keyframes card-in{ to{ transform: translateY(0)} }
 
@@ -119,7 +139,13 @@ header{ padding: 60px 0 20px;}
   border-radius:12px; background:linear-gradient(135deg, var(--accent2), var(--accent));
   box-shadow: 0 8px 26px rgba(155,140,255,.35);
   font-weight:800;
+  animation: rotateIcon 5s linear infinite;
+}
+@keyframes rotateIcon {
+  0% { transform: rotate(0);}
+  100% { transform: rotate(360deg);}
 }
+
 .grid{ display:grid; grid-template-columns: 1fr auto; gap:12px; margin-top:16px;}
 .form-group{ display:flex; flex-direction:column; gap:8px}
 .form-group.col-span{ grid-column: 1 / -1}
@@ -135,7 +161,10 @@ input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(106,227,255
   padding: 12px 16px; border-radius:14px; color:#0b1020; font-weight:800;
   background:linear-gradient(135deg, var(--accent), var(--accent2));
   box-shadow: 0 10px 30px rgba(106,227,255,.35);
+  transition: transform .25s ease, box-shadow .25s ease;
 }
+.btn:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 15px 40px rgba(106,227,255,.45);}
+.btn:active{ transform: scale(.96);}
 .btn .btn-glow{
   position:absolute; inset:-80% -40%; background: radial-gradient(circle, rgba(255,255,255,.6), transparent 60%);
   transform: translateX(-60%); animation: sweep 2.2s ease-in-out infinite;
@@ -143,7 +172,7 @@ input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(106,227,255
 }
 @keyframes sweep{ 50%{ transform: translateX(60%)} }
 
-.status{ display:flex; gap:12px; align-items:center; margin-top:14px}
+.status{ display:flex; gap:12px; align-items:center; margin-top:14px; animation: fadeIn .6s ease;}
 .hidden{ display:none}
 .spinner{
   width:20px; height:20px; border:2.5px solid rgba(255,255,255,.2); border-top-color:white; border-radius:50%;
@@ -155,46 +184,59 @@ input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(106,227,255
 }
 @keyframes dots{ 0%{content:"."} 33%{content:".."} 66%{content:"..."} }
 
-.meta{ margin-top:14px; display:grid; grid-template-columns: repeat(3,1fr); gap:10px}
-.meta-item{ background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:12px}
+.meta{ margin-top:14px; display:grid; grid-template-columns: repeat(3,1fr); gap:10px; animation: fadeIn .8s ease;}
+.meta-item{ background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:12px; transition: transform .3s ease;}
+.meta-item:hover{ transform: scale(1.05);}
 .meta-label{ color:var(--muted); font-size:12px}
 .meta-value{ margin-top:4px; display:flex; gap:8px; flex-wrap:wrap}
 
 .chip{
   display:inline-flex; align-items:center; gap:6px;
   border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px; letter-spacing:.2px;
-  background: rgba(255,255,255,.07); border:1px solid var(--border)
+  background: rgba(255,255,255,.07); border:1px solid var(--border);
+  animation: fadeIn .8s ease;
 }
 .chip-gemini{ color:#00E5FF; border-color: rgba(0,229,255,.4)}
 .chip-fallback{ color:#ff9ff3; border-color: rgba(255,159,243,.4)}
 
-.charts{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px}
-.chart-card{ background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:10px}
+.charts{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px; animation: fadeIn 1s ease;}
+.chart-card{ background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:10px; transition: transform .3s ease;}
+.chart-card:hover{ transform: translateY(-4px) scale(1.01);}
 .chart-card h3{ margin:6px 6px 8px; font-size:14px; color:var(--muted)}
 
-.table-card{ margin-top:14px; background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; overflow:hidden}
+.table-card{ margin-top:14px; background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; overflow:hidden; animation: fadeIn 1.2s ease;}
 .table-head{
   display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border)
 }
-.table{ max-height: 360px; overflow:auto }
+.table{ max-height: 360px; overflow:auto; animation: fadeIn .8s ease;}
 .row{
   display:grid; grid-template-columns: 1fr 110px 90px; gap:10px; padding:10px 12px;
   border-bottom:1px dashed rgba(255,255,255,.08);
   transition: background .2s ease, transform .12s ease;
+  animation: fadeInRow .6s ease;
+}
+@keyframes fadeInRow {
+  from { opacity:0; transform: translateY(8px);}
+  to { opacity:1; transform: translateY(0);}
 }
 .row:hover{ background: rgba(255,255,255,.03); transform: translateX(2px)}
 .cell{ font-size:14px; color:var(--text)}
 .badge{ padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px}
-.badge.pos{ background: rgba(46,204,113,.15); color: var(--pos); border:1px solid rgba(46,204,113,.35)}
-.badge.neg{ background: rgba(255,92,122,.12); color: var(--neg); border:1px solid rgba(255,92,122,.35)}
-.badge.neu{ background: rgba(255,209,102,.12); color: var(--neu); border:1px solid rgba(255,209,102,.35)}
+.badge.pos{ background: rgba(46,204,113,.15); color: var(--pos); border:1px solid rgba(46,204,113,.35); animation: pulseBadge 2s infinite;}
+.badge.neg{ background: rgba(255,92,122,.12); color: var(--neg); border:1px solid rgba(255,92,122,.35); animation: pulseBadge 2s infinite;}
+.badge.neu{ background: rgba(255,209,102,.12); color: var(--neu); border:1px solid rgba(255,209,102,.35); animation: pulseBadge 2s infinite;}
+@keyframes pulseBadge {
+  0%,100% { transform: scale(1); opacity:1;}
+  50% { transform: scale(1.08); opacity:.85;}
+}
 
-.footer{ text-align:center; padding:26px 12px 60px; color:var(--muted)}
+.footer{ text-align:center; padding:26px 12px 60px; color:var(--muted); animation: fadeIn 2s ease;}
 .signature{ letter-spacing:.4px}
 .kavya{
   background: linear-gradient(90deg, #fff, var(--accent), var(--accent2));
   -webkit-background-clip:text; background-clip:text; color:transparent;
   text-shadow: 0 0 24px rgba(155,140,255,.45);
+  animation: glowText 4s ease-in-out infinite alternate;
 }
 .heart{ filter: drop-shadow(0 0 10px rgba(255,150,200,.6)) }
 
@@ -204,6 +246,3 @@ input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(106,227,255
   .charts{ grid-template-columns: 1fr}
   .row{ grid-template-columns: 1fr 90px 80px}
 }
-
-/* subtle pop on hover */
-.btn:hover{ transform: translateY(-1px); }