From cfb216f73ec3741eb772188fcefed1090d722459 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Sat, 21 Feb 2026 18:00:51 -0500
Subject: [PATCH] Sync: update camera animation subjects to include shoe, food,
 and laptop

---
 theme/assets/css/main.css | 92 +++++++++++++++++++++++++++++----------
 theme/blocks/index.php    |  6 +--
 2 files changed, 73 insertions(+), 25 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 10743b7..048acd0 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -3853,7 +3853,7 @@ p:last-child { margin-bottom: 0; }
   background-size: 18px 18px;
 }
 
-/* ── Shared subject shapes ── */
+/* ── Rotating product items: shoe, food, laptop ── */
 .cam-subject {
   position: absolute;
   inset: 0;
@@ -3862,29 +3862,77 @@ p:last-child { margin-bottom: 0; }
   justify-content: center;
   opacity: 0;
 }
-.cam-subject::before {
+.cam-subject::before,
+.cam-subject::after {
   content: '';
-  display: block;
-  border-radius: 8px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 }
-.cam-subject--1 { animation: cam-subject-1 var(--cam-cycle) ease-in-out infinite; }
-.cam-subject--1::before {
-  width: 40px; height: 58px;
-  background: linear-gradient(135deg, #064e3b 0%, #4ade80 100%);
-  box-shadow: 0 0 18px rgba(74,222,128,.4);
+
+.cam-subject--shoe { animation: cam-subject-1 var(--cam-cycle) ease-in-out infinite; }
+.cam-subject--shoe::before {
+  width: 76px;
+  height: 28px;
+  border-radius: 16px 20px 10px 14px;
+  background: linear-gradient(145deg, #312e81 0%, #4f46e5 45%, #818cf8 100%);
+  box-shadow:
+    0 0 14px rgba(129,140,248,.25),
+    inset 0 -2px 0 rgba(0,0,0,.22),
+    inset 0 2px 0 rgba(255,255,255,.18);
 }
-.cam-subject--2 { animation: cam-subject-2 var(--cam-cycle) ease-in-out infinite; }
-.cam-subject--2::before {
-  width: 32px; height: 68px;
-  background: linear-gradient(160deg, #78350f 0%, #fbbf24 100%);
-  border-radius: 6px 6px 12px 12px;
-  box-shadow: 0 0 18px rgba(251,191,36,.35);
+.cam-subject--shoe::after {
+  width: 80px;
+  height: 8px;
+  border-radius: 999px;
+  background: #e5e7eb;
+  transform: translate(-50%, calc(-50% + 13px));
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
 }
-.cam-subject--3 { animation: cam-subject-3 var(--cam-cycle) ease-in-out infinite; }
-.cam-subject--3::before {
-  width: 74px; height: 50px;
-  background: linear-gradient(135deg, #1e1b4b 0%, #818cf8 100%);
-  box-shadow: 0 0 18px rgba(129,140,248,.35);
+
+.cam-subject--food { animation: cam-subject-2 var(--cam-cycle) ease-in-out infinite; }
+.cam-subject--food::before {
+  width: 68px;
+  height: 46px;
+  border-radius: 22px 22px 14px 14px;
+  background:
+    linear-gradient(to bottom,
+      #fbbf24 0 34%,
+      #65a30d 34% 43%,
+      #7c2d12 43% 60%,
+      #f59e0b 60% 100%);
+  box-shadow:
+    0 0 14px rgba(251,191,36,.28),
+    inset 0 1px 0 rgba(255,255,255,.35);
+}
+.cam-subject--food::after {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgba(255,255,255,.26);
+  transform: translate(calc(-50% - 14px), calc(-50% - 10px));
+}
+
+.cam-subject--laptop { animation: cam-subject-3 var(--cam-cycle) ease-in-out infinite; }
+.cam-subject--laptop::before {
+  width: 74px;
+  height: 44px;
+  border-radius: 6px;
+  background:
+    linear-gradient(165deg, #0f172a 0%, #1e293b 100%);
+  border: 2px solid #94a3b8;
+  box-shadow:
+    0 0 16px rgba(148,163,184,.25),
+    inset 0 0 0 2px rgba(15,23,42,.7);
+}
+.cam-subject--laptop::after {
+  width: 90px;
+  height: 10px;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #d1d5db, #9ca3af);
+  transform: translate(-50%, calc(-50% + 28px));
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
 }
 
 /* Flash overlay */
@@ -4331,10 +4379,10 @@ p:last-child { margin-bottom: 0; }
 
 /* ── Reduced-motion ── */
 @media (prefers-reduced-motion: reduce) {
-  .cam-subject--2, .cam-subject--3,
+  .cam-subject--food, .cam-subject--laptop,
   .cam-flash-overlay,
   .pc-print--2, .pc-print--3 { animation: none !important; opacity: 0 !important; }
-  .cam-subject--1 { animation: none !important; opacity: 1 !important; }
+  .cam-subject--shoe { animation: none !important; opacity: 1 !important; }
   .pc-shutter-btn, .pc-flash-unit::after,
   .vc-lens-barrel, .vc-rec-light { animation: none !important; }
   .pc-print--1 {
diff --git a/theme/blocks/index.php b/theme/blocks/index.php
index 975f179..bfcdca8 100644
--- a/theme/blocks/index.php
+++ b/theme/blocks/index.php
@@ -1376,9 +1376,9 @@ function oribi_render_camera_animation() {
     </div>
 
     <div class="cam-scene">
-        <div class="cam-subject cam-subject--1"></div>
-        <div class="cam-subject cam-subject--2"></div>
-        <div class="cam-subject cam-subject--3"></div>
+        <div class="cam-subject cam-subject--shoe"></div>
+        <div class="cam-subject cam-subject--food"></div>
+        <div class="cam-subject cam-subject--laptop"></div>
         <div class="cam-flash-overlay"></div>
         <div class="cam-vid-overlay"></div>
     </div>