From e0240d5e7a15e9b02a1b2fd0c9471a9bf451d872 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Fri, 17 Apr 2026 22:18:39 -0400
Subject: [PATCH] feat: Refactor stick device positioning for improved
 responsiveness and animation

---
 pages/features.php        |  8 ++++----
 theme/assets/css/main.css | 21 +++++++++++++--------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/pages/features.php b/pages/features.php
index 2e16915..0fd80b8 100644
--- a/pages/features.php
+++ b/pages/features.php
@@ -56,13 +56,13 @@ return <<<'ORIBI_SYNC_CONTENT'
 <!-- /wp:oribi/feature-section -->
 
 <!-- wp:oribi/feature-section {"heading":"Prove Every Play","lead":"Know exactly what's playing, where, and when. Export reports, automate delivery, and monitor the health of every player in your network."} -->
-<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-chart-pie","title":"Proof of Play","description":"Track every piece of content at the layout, media, and widget level. Configurable retention depth lets you store as much history as you need.","cardStyle":"bold-statement"} /-->
+<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-chart-pie","title":"Proof of Play","description":"Track every piece of content at the layout, media, and widget level. Configurable retention depth lets you store as much history as you need."} /-->
 
-<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-file-pdf","title":"Scheduled Reports","description":"Set up automated PDF reports and have them emailed to stakeholders on your schedule. Export raw data as CSV for deeper analysis.","cardStyle":"minimal-feature"} /-->
+<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-file-pdf","title":"Scheduled Reports","description":"Set up automated PDF reports and have them emailed to stakeholders on your schedule. Export raw data as CSV for deeper analysis."} /-->
 
-<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-heart-pulse","title":"Player Health","description":"Monitor connection status, storage usage, and player performance live. Get alerted the moment a player goes offline.","cardStyle":"action"} /-->
+<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-heart-pulse","title":"Player Health","description":"Monitor connection status, storage usage, and player performance live. Get alerted the moment a player goes offline."} /-->
 
-<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-box-archive","title":"Content Usage","description":"See which media is assigned to layouts and which is unused. Library usage reports by user help you manage storage and keep your library clean.","cardStyle":"prominent-stat"} /-->
+<!-- wp:oribi/feature-card {"iconType":"fontawesome","faIcon":"fas fa-box-archive","title":"Content Usage","description":"See which media is assigned to layouts and which is unused. Library usage reports by user help you manage storage and keep your library clean."} /-->
 <!-- /wp:oribi/feature-section -->
 
 <!-- wp:oribi/value-section {"variant":"alt","heading":"Live in Minutes. Secure on Every Plan.","lead":"Every plan includes 2FA, role-based access, and audit trails. Scale your team and your network without worrying about per-user fees or access limits.","columns":4} -->
diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 42770b1..eb0e515 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -3074,6 +3074,9 @@ p:last-child { margin-bottom: 0; }
   align-self: center;
 }
 .ts-stage {
+  --ts-stick-right: -96px;
+  --ts-stick-start-x: 80px;
+  --ts-stick-plug-x: 0px;
   position: relative;
   width: 100%;
   aspect-ratio: 4/3;
@@ -3451,9 +3454,9 @@ p:last-child { margin-bottom: 0; }
 /* ── Stick device ── */
 .ts-stick {
   position: absolute;
-  right: -44px;
+  right: var(--ts-stick-right);
   top: 50%;
-  transform: translateY(-50%) translateX(80px) scaleX(-1);
+  transform: translateY(-50%) translateX(var(--ts-stick-start-x)) scaleX(-1);
   display: flex;
   align-items: center;
   opacity: 0;
@@ -3522,20 +3525,22 @@ p:last-child { margin-bottom: 0; }
   animation: ts-slide-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
 }
 @keyframes ts-slide-in {
-  0%   { opacity: 0; transform: translateY(-50%) translateX(80px) scaleX(-1); }
-  20%  { opacity: 1; transform: translateY(-50%) translateX(60px) scaleX(-1); }
-  70%  { transform: translateY(-50%) translateX(8px) scaleX(-1); }
-  85%  { transform: translateY(-50%) translateX(12px) scaleX(-1); }
-  100% { opacity: 1; transform: translateY(-50%) translateX(6px) scaleX(-1); }
+  0%   { opacity: 0; transform: translateY(-50%) translateX(var(--ts-stick-start-x)) scaleX(-1); }
+  20%  { opacity: 1; transform: translateY(-50%) translateX(calc(var(--ts-stick-start-x) - 20px)) scaleX(-1); }
+  70%  { transform: translateY(-50%) translateX(calc(var(--ts-stick-plug-x) + 8px)) scaleX(-1); }
+  85%  { transform: translateY(-50%) translateX(calc(var(--ts-stick-plug-x) + 12px)) scaleX(-1); }
+  100% { opacity: 1; transform: translateY(-50%) translateX(var(--ts-stick-plug-x)) scaleX(-1); }
 }
 /* Responsive scale-down */
 @media (max-width: 900px) {
+  .ts-stage { --ts-stick-right: -84px; }
   .ts-tv__body { width: 320px; height: 188px; }
   .ts-tv__feet { width: 178px; }
   .ts-stick__body { width: 68px; height: 26px; }
   .ts-stage { padding-right: 72px; }
 }
 @media (max-width: 640px) {
+  .ts-stage { --ts-stick-right: -66px; }
   .ts-tv__body { width: 240px; height: 142px; }
   .ts-tv__feet { width: 134px; }
   .ts-stick__body { width: 52px; height: 20px; }
@@ -3547,7 +3552,7 @@ p:last-child { margin-bottom: 0; }
 @media (prefers-reduced-motion: reduce) {
   .ts-stage .ts-stick {
     opacity: 1;
-    transform: translateY(-50%) translateX(6px) scaleX(-1);
+    transform: translateY(-50%) translateX(var(--ts-stick-plug-x)) scaleX(-1);
   }
   .ts-stage.is-animating .ts-stick { animation: none; }
   .ts-stage.is-plugged .ts-tv__screen { animation: none; }