Sync: implement scroll-reveal animations for cards with responsive visibility adjustments

theme/assets/css/main.css

@@ -97,6 +97,17 @@ img, video { max-width: 100%; display: block; }
 a { color: inherit; text-decoration: none; transition: color var(--transition); }
 a:hover { color: var(--color-primary); }
 
+/* ── Scroll-reveal animation classes ───────────────────────── */
+.scroll-hidden {
+  opacity: 0;
+  transform: translateY(24px);
+}
+.scroll-visible {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity .5s ease, transform .5s ease;
+}
+
 /* Smooth theme transition */
 body,
 .site-header,
@@ -4128,6 +4139,14 @@ p:last-child { margin-bottom: 0; }
   50%      { transform: translateY(-50%) scale(1.08); }
 }
 
+/* ── Responsive scale-down ── */
+@media (max-width: 900px) {
+  .cam-stage { transform: scale(0.85); transform-origin: center center; }
+}
+@media (max-width: 640px) {
+  .cam-stage { transform: scale(0.72); transform-origin: center center; }
+}
+
 /* ── Reduced-motion ── */
 @media (prefers-reduced-motion: reduce) {
   .cam-subject--2, .cam-subject--3,