/* ============================================================ 19-cinematic-extras.css Big Bear Marketing — cinematic upgrade pass 2 — 2026-05-20 Adds: A. 3D parallax depth on hero layers (data-parallax-layer) B. Live activity feed ticker (fixed bottom-right notification chip) C. Mini animated CRM demo frame (hero visual, laptop-style) F. Confetti burst on CTA click (canvas-based, JS-injected) Hard rules: no ampersands in copy, max one em-dash per paragraph, all kinetic effects respect prefers-reduced-motion. Brand tokens: --c-cyan, --c-yellow, --c-magenta, --c-navy, --f-mono. ============================================================ */ /* ============================================================ A. 3D PARALLAX DEPTH LAYERS The JS assigns inline transform: translate3d(x, y, 0) to each layer. CSS here only handles the will-change hint (GPU promotion) and disables pointer-event interference. Layers move independently based on data-parallax-strength. ============================================================ */ /* GPU hint — promote each parallax layer to its own compositor layer. This is like telling the browser "keep this on a separate glass sheet so moving it doesn't repaint the rest of the page." */ [data-parallax-layer] { will-change: transform; } /* Reduced motion: JS skips the handler entirely, but belt-and-braces CSS guard removes the will-change hint (no need for it if nothing moves) */ @media (prefers-reduced-motion: reduce) { [data-parallax-layer] { will-change: auto; transform: none !important; } } /* ============================================================ B. LIVE ACTIVITY FEED TICKER Fixed bottom-right chip. Glass card aesthetic. JS creates the element and appends it to . z-index 8000: above content, below boot overlay (9999). ============================================================ */ .bbm-feed-chip { position: fixed; bottom: 24px; right: 24px; z-index: 8000; max-width: 320px; width: calc(100vw - 48px); /* Glass card */ background: rgba(15, 30, 54, 0.92); border: 1px solid rgba(0, 240, 255, 0.45); border-radius: 12px; padding: 14px 40px 14px 14px; /* right pad for close X */ box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.12), 0 4px 24px rgba(0, 0, 0, 0.55), 0 0 32px rgba(0, 240, 255, 0.12); /* Start off-screen below the fold, JS animates in */ transform: translateY(120%); opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; } /* Visible state — JS adds .bbm-feed-chip--visible */ .bbm-feed-chip.bbm-feed-chip--visible { transform: translateY(0); opacity: 1; pointer-events: all; } /* Exit state — JS adds .bbm-feed-chip--hiding, then removes element */ .bbm-feed-chip.bbm-feed-chip--hiding { transform: translateY(120%); opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1), opacity 0.3s ease; } /* Reduced motion: swap slide for an instant fade */ @media (prefers-reduced-motion: reduce) { .bbm-feed-chip, .bbm-feed-chip.bbm-feed-chip--visible, .bbm-feed-chip.bbm-feed-chip--hiding { transform: translateY(0); transition: opacity 0.2s ease; } .bbm-feed-chip { opacity: 0; } .bbm-feed-chip.bbm-feed-chip--visible { opacity: 1; } .bbm-feed-chip.bbm-feed-chip--hiding { opacity: 0; } } /* Header row: live dot + label */ .bbm-feed-header { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } /* Pulsing green live indicator dot */ .bbm-feed-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; /* green-500 — not a brand token, status colour only */ flex-shrink: 0; box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); animation: bbm-live-pulse 1.8s ease-in-out infinite; } @keyframes bbm-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); } } @media (prefers-reduced-motion: reduce) { .bbm-feed-dot { animation: none; } } .bbm-feed-live-label { font-family: var(--f-mono, 'JetBrains Mono', Consolas, monospace); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #22c55e; } /* Message body */ .bbm-feed-body { font-size: 0.85rem; line-height: 1.45; color: rgba(255, 255, 255, 0.9); } .bbm-feed-body strong { color: #fff; font-weight: 600; } /* Time-ago line */ .bbm-feed-time { display: block; margin-top: 5px; font-family: var(--f-mono, 'JetBrains Mono', Consolas, monospace); font-size: 0.72rem; color: rgba(0, 240, 255, 0.6); } /* Close button — top-right of card */ .bbm-feed-close { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: rgba(255, 255, 255, 0.45); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 4px; transition: color 0.15s ease, background 0.15s ease; } .bbm-feed-close:hover, .bbm-feed-close:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); outline: none; } /* Hidden entirely on very narrow mobile (<=480px) — JS also skips init */ @media (max-width: 480px) { .bbm-feed-chip { display: none !important; } } /* ============================================================ C. MINI ANIMATED CRM DEMO FRAME A small "laptop screen" div showing a mini kanban pipeline. Sits in .hero-visual, stacked below the bear badge on mobile. Responsive: 360x240 base, scales down on small screens. ============================================================ */ /* Outer laptop bezel */ .bbm-crm-demo { position: relative; width: clamp(260px, 36vw, 360px); /* Maintain 3:2 aspect ratio */ aspect-ratio: 3 / 2; background: var(--c-navy, #050b18); border: 1.5px solid rgba(0, 240, 255, 0.35); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.1), 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 240, 255, 0.07); flex-shrink: 0; font-family: var(--f-mono, 'JetBrains Mono', Consolas, monospace); } /* Tiny screen glare overlay */ .bbm-crm-demo::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.04) 0%, transparent 45% ); pointer-events: none; z-index: 10; } /* Title bar at the top of the frame */ .bbm-crm-titlebar { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: rgba(0, 240, 255, 0.06); border-bottom: 1px solid rgba(0, 240, 255, 0.15); } .bbm-crm-dot { width: 7px; height: 7px; border-radius: 50%; } .bbm-crm-dot--red { background: #ff5f57; } .bbm-crm-dot--amber { background: #ffbd2e; } .bbm-crm-dot--green { background: #28c840; } .bbm-crm-title-label { font-size: 0.6rem; color: rgba(0, 240, 255, 0.5); letter-spacing: 0.12em; text-transform: uppercase; margin-left: 6px; } /* Kanban columns row */ .bbm-crm-board { display: flex; gap: 0; height: calc(100% - 28px); /* subtract titlebar height */ padding: 8px 6px; box-sizing: border-box; position: relative; /* stacking context for the absolutely-positioned card */ } .bbm-crm-col { flex: 1; display: flex; flex-direction: column; gap: 5px; padding: 0 4px; } /* Column header */ .bbm-crm-col-head { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 4px; white-space: nowrap; } /* The lead card that animates */ .bbm-crm-card { background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.25); border-radius: 5px; padding: 5px 7px; font-size: 0.62rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); /* Normal flow — the animated card is absolutely positioned (see below) */ will-change: transform, opacity; } .bbm-crm-card strong { display: block; color: #fff; font-size: 0.65rem; } .bbm-crm-card .bbm-crm-card-suburb { color: rgba(0, 240, 255, 0.7); font-size: 0.58rem; } .bbm-crm-card .bbm-crm-card-value { color: var(--c-yellow, #FFD700); font-size: 0.62rem; font-weight: 700; } /* Win badge that fades in over the card at the end of the loop */ .bbm-crm-win-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.6); border-radius: 6px; padding: 4px 8px; font-size: 0.68rem; font-weight: 700; color: #22c55e; white-space: nowrap; opacity: 0; box-shadow: 0 0 12px rgba(34, 197, 94, 0.35); pointer-events: none; z-index: 5; } /* ---- Keyframe-driven card animation ---- */ /* 6-second loop, 4 positions across 3 columns: 0-1s: card at column 1 (Att 1) 1-2.5s: card slides right to column 2 (Booked) 2.5-4s: card slides right to column 3 (Won) 4-5s: win badge fades in + scales 5-5.5s: everything fades out 5.5-6s: resets off-left then snaps to column 1 position */ /* The animated card is absolutely positioned within .bbm-crm-board (which is position: relative). It starts in column 1 and slides across to columns 2 and 3. Column math: Board width = 100%, inner padding 4px each side. Each column is flex:1 — roughly 33.33% of board width. Card width = roughly one column wide (33.33% - gutters). translateX(100%) shifts the card by its own width = approx one column. translateX(200%) = approx two columns = column 3. This means translateX percentages are relative to the CARD's own width, which equals one column. So moving one column = translateX(100%), two = translateX(200%). Small gutter discrepancy at this scale is visually imperceptible. */ .bbm-crm-card--animated { position: absolute; top: 28px; /* below col headers */ left: 4px; /* column 1 left edge */ width: calc(33.33% - 8px); /* one column wide minus gutters */ animation: bbm-card-slide 6s cubic-bezier(0.4, 0, 0.2, 1) infinite; z-index: 3; } @keyframes bbm-card-slide { /* 0-16.67% (0-1s): sit in Att 1 with cyan glow */ 0%, 16.67% { transform: translateX(0) scale(1); opacity: 1; box-shadow: 0 0 8px rgba(0, 240, 255, 0.4); border-color: rgba(0, 240, 255, 0.55); } /* 16.67-25% (1-1.5s): slide to Booked (col 2) */ 25% { transform: translateX(100%) scale(1); opacity: 1; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); border-color: rgba(255, 215, 0, 0.5); } /* 25-41.67% (1.5-2.5s): sit in Booked */ 41.67% { transform: translateX(100%) scale(1); opacity: 1; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); border-color: rgba(255, 215, 0, 0.5); } /* 41.67-58% (2.5-3.5s): slide to Won (col 3) */ 58% { transform: translateX(200%) scale(1.03); opacity: 1; box-shadow: 0 0 20px rgba(34, 197, 94, 0.65); border-color: rgba(34, 197, 94, 0.9); } /* 58-75% (3.5-4.5s): sit in Won, green pulse */ 75% { transform: translateX(200%) scale(1); opacity: 1; box-shadow: 0 0 14px rgba(34, 197, 94, 0.5); border-color: rgba(34, 197, 94, 0.7); } /* 75-83.33% (4.5-5s): fade out */ 83.33% { transform: translateX(200%) scale(0.95); opacity: 0; } /* 83.33-95% (5-5.7s): invisible, reset to col 1 */ 95% { transform: translateX(0) scale(0.95); opacity: 0; } /* 95-100% (5.7-6s): snap visible at col 1 — seamless loop */ 100% { transform: translateX(0) scale(1); opacity: 1; box-shadow: 0 0 8px rgba(0, 240, 255, 0.4); border-color: rgba(0, 240, 255, 0.55); } } /* Win badge animation — synced to same 6s loop */ .bbm-crm-win-badge--animated { animation: bbm-win-badge 6s ease-in-out infinite; } @keyframes bbm-win-badge { /* Hidden through most of the loop */ 0%, 60% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } /* Fade + scale in when card reaches Won (after 3.6s / 60% mark) */ 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Hold */ 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Fade out with card */ 88% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } } /* Reduced motion: show final static state only — card in Won column with badge visible */ @media (prefers-reduced-motion: reduce) { .bbm-crm-card--animated { animation: none; transform: translateX(200%) scale(1); opacity: 1; box-shadow: 0 0 14px rgba(34, 197, 94, 0.5); border-color: rgba(34, 197, 94, 0.7); } .bbm-crm-win-badge--animated { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* Viewport <=600px: hide the frame entirely */ @media (max-width: 600px) { .bbm-crm-demo { display: none; } } /* Stack demo below the badge on medium screens where the hero grid is single-column */ .hero-visual { display: flex; flex-direction: column; align-items: center; gap: 20px; } /* ============================================================ F. CONFETTI BURST The canvas is JS-created and appended to . CSS just ensures it overlays everything correctly. ============================================================ */ #bbm-confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9000; width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { /* JS skips confetti entirely under reduced motion; this rule is a belt-and-braces guard */ #bbm-confetti-canvas { display: none; } }