2.0 site

style.css

@@ -0,0 +1,66 @@
+/* Custom Blurs & Glass */
+.glass { 
+    background: rgba(255, 255, 255, 0.7); 
+    backdrop-filter: blur(15px); 
+    -webkit-backdrop-filter: blur(15px);
+}
+
+.dark .glass { 
+    background: rgba(18, 18, 18, 0.7); 
+}
+
+/* Bento Card Physics */
+.bento-card { 
+    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); 
+}
+
+.bento-card:hover { 
+    transform: translateY(-10px) scale(1.01); 
+}
+
+/* Hero Zoom Keyframe */
+@keyframes heroZoom {
+    0% { transform: scale(1.05); }
+    100% { transform: scale(1.15); }
+}
+
+.hero-zoom {
+    animation: heroZoom 20s infinite alternate ease-in-out;
+}
+
+/* Hidden elements for reveal observer */
+.reveal-init {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
+}
+
+.reveal-active {
+    opacity: 1 !important;
+    transform: translateY(0) !important;
+}
+
+/* Glassmorphism Header */
+.glass { 
+    background: rgba(255, 255, 255, 0.75); 
+    backdrop-filter: blur(16px); 
+    -webkit-backdrop-filter: blur(16px);
+}
+.dark .glass { background: rgba(18, 18, 18, 0.75); }
+
+/* Animation: Subtle Zoom for Hero */
+@keyframes heroZoom {
+    0% { transform: scale(1); }
+    100% { transform: scale(1.1); }
+}
+.hero-zoom { animation: heroZoom 20s infinite alternate ease-in-out; }
+
+/* Bento Interaction */
+.bento-card { transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); }
+.bento-card:hover { transform: translateY(-8px); }
+
+/* Custom Scroll Progress Bar */
+#scroll-progress { 
+    transform-origin: 0%; 
+    transition: transform 0.1s linear;
+}