/* ═══════════════════════════════════════════════════════════════
   MOTION.CSS — looping video clips sprinkled across the site.
   Clips live in assets/video/ (WebM + MP4 + poster, muted, looping);
   assets/js/motion.js plays them only while on screen and never for
   reduced-motion users, who see the poster frame.

   One clip per page, each used once, placed where its shape and colour fit:
     stripes (mag, 16:9)  · liquid (teal, 16:9) · streaks (red, 9:16)

   .color-panel--motion  clip fills a colour panel; type goes cream
   ═══════════════════════════════════════════════════════════════ */

.r-motion { pointer-events: none; }
.panel-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* Panel colour behind the clip while it loads, matched to each clip. */
.color-panel--motion { background: #0e0b0c !important; }
.color-panel--motion[data-clip="stripes"] { background: #311019 !important; }
.color-panel--motion[data-clip="liquid"]  { background: #0b0f11 !important; }
.color-panel--motion[data-clip="streaks"] { background: #161012 !important; }
.color-panel--motion .grain, .color-panel--motion .bg-bleed, .color-panel--motion::after { display: none; }
.color-panel--motion > .wrap { position: relative; z-index: 2; }
.color-panel--motion h2, .color-panel--motion h2 span,
.color-panel--motion p:not(.review-quote) { color: var(--cream) !important; opacity: 1 !important; }
.color-panel--motion .frame-mark { color: var(--cream); }
.color-panel--motion .eyebrow-num em, .color-panel--motion .eyebrow-num span { color: var(--cream) !important; opacity: .8 !important; }
.color-panel--motion .btn-primary { background: var(--cream) !important; color: var(--ink) !important; border-color: var(--cream) !important; }
.color-panel--motion .btn-primary:hover { background: transparent !important; color: var(--cream) !important; }
.color-panel--motion .btn-secondary, .color-panel--motion .text-link { color: var(--cream) !important; border-color: rgba(243,236,223,.5) !important; }
.color-panel--motion[data-clip="smoke"] { background: #2a0714 !important; }