luckiest-co 1.0.19 → 1.0.21

package/skills/luckiest-video-studio-cards/packs/01-paper-collage/tokens.css

@@ -0,0 +1,81 @@
+/* ============================================================================
+   PAPER COLLAGE - style tokens
+   Single source of palette / type / motion / texture for every card in this
+   style. Cards reference these vars and never hardcode colors, fonts, easings,
+   or textures. Tweak here, all cards update.
+   See DESIGN.md for the why. Inspiration: Collage-style animated explainer.
+   ============================================================================ */
+
+/* Type. No remote font import: apply-brand.mjs writes @font-face rules for local files
+   in composition/assets/fonts/, and the HyperFrames compiler embeds supported fonts by name. */
+
+:root {
+  /* --- palette (mirror style.json + DESIGN.md). 5 symbolic colors. --------- */
+  --paper:        #efe9dc;   /* warm newsprint background */
+  --paper-2:      #e6dcc4;   /* kraft / aged paper variant */
+  --ink:          #17130e;   /* warm near-black print ink (text + engravings) */
+  --yellow:       #4F8CFF;   /* the accent highlight (circles, marker boxes). Token name kept as --yellow. */
+  --red:          #e23b2e;   /* editorial red - circles, scribbles, alarm */
+  --orange:       #f26a1b;   /* cutout outline / secondary accent */
+
+  /* semantic aliases the blueprint contract expects */
+  --bg:     var(--paper);
+  --fg:     var(--ink);
+  --accent: var(--yellow);
+  --muted:  rgba(23, 19, 14, 0.55);
+
+  /* --- typography ---------------------------------------------------------- */
+  /* Fraunces = the expressive voice (statements). Archivo = metadata, recedes.
+     Caveat = handwritten margin notes only. Weight contrast is EXTREME. */
+  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
+  --font-label:   "Archivo", "Helvetica Neue", Arial, sans-serif;
+  --font-hand:    "Caveat", "Bradley Hand", cursive;
+  /* contract aliases */
+  --font-body:    var(--font-label);
+  --font-mono:    var(--font-label);
+
+  --wt-thin:  300;
+  --wt-reg:   400;
+  --wt-bold:  700;
+  --wt-black: 900;
+
+  /* video sizes for 1920x1080 (big - readable in 2s) */
+  --size-mega:     320px;   /* hero stat number */
+  --size-display:  150px;   /* takeover headline */
+  --size-title:    92px;    /* section title */
+  --size-headline: 56px;    /* card headline */
+  --size-body:     32px;    /* supporting copy */
+  --size-label:    24px;    /* kicker / metadata */
+  --size-tiny:     18px;    /* credits, fine print */
+
+  --track-tight: -0.03em;   /* display tracking, tighter than web */
+  --track-wide:  0.16em;    /* uppercase label tracking */
+
+  /* --- motion - the choppy, low-shutter collage signature ---------------------- */
+  /* Snap in hard, settle with a tiny overshoot. Stepped eases give the
+     stop-motion / low-shutter feel. GSAP string eases live in the cards. */
+  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
+  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
+  --gsap-pop:   back.out(2.2);     /* paper-cut elements popping in */
+  --gsap-step:  steps(6);          /* choppy / shutter motion */
+  --dur-in:  0.42s;
+  --dur-out: 0.3s;
+
+  /* --- shape --------------------------------------------------------------- */
+  --radius: 2px;            /* paper cuts are nearly square, barely rounded */
+  --pad: 56px;
+  --marker-skew: -1.4deg;   /* highlight boxes sit slightly off-level */
+
+  /* --- textures (deterministic SVG data-URIs + gradients) ------------------ */
+  /* Paper fiber grain - fractalNoise, fixed seed (deterministic render). */
+  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+
+  /* Halftone dots - for filling cutout placeholders / shadows the collage way. */
+  --tex-halftone: radial-gradient(circle at center, var(--ink) 1.1px, transparent 1.6px);
+  --tex-halftone-size: 7px 7px;
+
+  /* Faint construction grid (blueprint guides). */
+  --grid-line: rgba(23, 19, 14, 0.07);
+  --grid-size: 64px;
+}

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/DESIGN.md

@@ -0,0 +1,51 @@
+# Aurora Glass - Design Spec
+
+> Source of truth: this file and tokens.css. The palette is the pack default until brand.json replaces it (blue is the hero glow). Internally this look is "aurora glass": dark canvas + aurora bloom + glassmorphism.
+
+## Style Prompt
+
+Premium dark motion-graphics in the modern creator-explainer house style. The frame is a deep, cool near-black canvas (`#0A0E14`) with a single **aurora bloom** of blue light rising from the bottom-center - the signature ambience, like a sunrise of brand color behind everything. A faint dot-grid and fine film grain keep the dark alive and un-banded. Onto this we float **glassmorphism** surfaces: frosted, backdrop-blurred cards and pills with a hairline top-highlight and a soft outer shadow, as if panes of lit glass hovering in 3D space. Key objects are **edge-lit** - neon-rimmed phone frames, glowing outlined icons in rounded white/glass tiles, dashed connector lines that draw between nodes.
+
+Type carries the message and it **glows**: headlines lift off the canvas with a soft white-and-blue halo, big numbers and gradient words are the eye-magnets. The camera lives in a shallow, cinematic **focus-stack** - background layers sit blurred and bloomed while the subject snaps sharp, and elements drift, scale, and parallax with long, smooth After-Effects easing. Nothing snaps or stutters (that is paper collage); here everything **glides and breathes**. The relationship to the speaker: tier-1 cards are full-screen takeovers (we are inside the idea); tier-2 cards float a glass card or edge-lit element beside the speaker without covering their face.
+
+## Colors
+
+- Canvas: `#0A0E14` - near-black cool. Deep well / vignette: `#07121C` navy.
+- Text: `#F0EEE9` primary on dark; dim `rgba(240,238,233,.62)`; faint `rgba(240,238,233,.34)`. Pure `#FFFFFF` for max-emphasis glow text.
+- **Accent (accent blue): `#4F8CFF`** - the hero. The aurora bloom, edge-lights, glow halos, the one word that pops. This *replaces* the references' purple.
+- Secondary: `#F5D82A` yellow - highlight numerals, the rare second pop.
+- Alert: `#FF3B30` red - alarm, negative delta, "the lie." Warm: `#FF8A5C` orange.
+- Light surface: `#F0EEE9` / `#FFFFFF` for white glass tiles and chips (with `#2A251F` ink text on them).
+
+The blue is sacred - one dominant glow per beat, never two saturated colors fighting. These match `tokens.css` exactly.
+
+## Typography
+
+- Display / headline / big numbers: **Plus Jakarta Sans** - `600`–`800`. Geometric and premium; its roundness matches the glass radii. This is the glow voice. Gradient fills (white→accent) for hero words.
+- Body / labels / captions: **Inter** - `400`–`600`. The clean, neutral, Apple-adjacent workhorse. Recedes under the headline.
+- Data / interface: **Space Mono** - timestamps ("1m ago"), percentages, ticker values, chip labels. The "this is a real interface" voice. Used sparingly.
+
+Pairing logic: Plus Jakarta (warm geometric statement) + Inter (neutral body) + Space Mono (data). No serif anywhere - serif is the paper-collage voice, not ours.
+
+## Motion
+
+- Entrance feel: **glide + bloom**. Elements fade up with a long `power4.out`/`expo.out`, often with a `filter: blur()` that resolves to sharp (focus pull). Glass cards spring in with a gentle `back.out(1.4)` and a parallax y-drift.
+- Glow: text and edge-lights **pulse** softly (finite `repeat`, `yoyo`) - a slow breathing halo, never a strobe. The aurora bloom drifts/scales subtly under the content.
+- Exit feel: a smooth scale-down + blur-out or a soft whip - never a hard cut, never a stepped slide.
+- Ambient: persistent faint grain + dot-grid; a slow camera push/parallax on tier-1; background layers blurred so the subject reads (focus-stack).
+- Timing: tier-1 ≈ 6–8s with a breathing hold; tier-2 ≈ 5–10s. Stagger sub-elements 0.10–0.18s (slower than paper collage). Sequence is hierarchy - the first thing in is the most important. Average beat is slower and calmer than paper collage.
+
+## Card kinds in this style
+
+- **tier1 takeovers:** `section` (glowing chapter/title takeover, often over a rising orb), `stat` (one big glowing number / gradient figure), `overview` (glass-tile decks, numbered lists, phase stacks, timelines that build in).
+- **tier2 cards:** `lower-third` (glass name/role card or edge-lit element beside the speaker), `label` (floating glass callout / annotation tied to the subject with a dashed connector).
+- **innovations:** the **glass surface system** (frosted card with hairline highlight + outer shadow + optional neon rim) and the **aurora bloom** background - both are tokenized so any card reads as "Aurora Glass" instantly. Edge-lit phone/portrait frames for showcasing the speaker or a clip.
+
+## What NOT to do
+
+- No paper, no warm newsprint, no ink, no serif - that is paper collage. This style is digital, dark, lit.
+- No choppy / stepped / stutter motion. If it snaps on twos, it's wrong. Everything glides, blooms, breathes.
+- No two saturated glow colors fighting in one frame. One blue eye-magnet per beat; yellow/red/orange are rare punctuation.
+- No hard pure-flat fills where a glass or glow would carry the premium feel - but don't over-glow either; glow is for focal elements, not every box.
+- No strobing/looping-forever glow (`repeat: -1`) - flicker/pulse is finite (`repeat: N, yoyo: true`) for deterministic render.
+- No hand-drawn arrows, scribbles, marker circles (paper-collage motifs). Connectors here are clean dashed/solid lines that animate-draw, and dots/nodes that glow on.

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-overview-agenda.html

@@ -0,0 +1,277 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · overview · AGENDA
+  A timed agenda - Space Mono timestamps down the left, glass rows for each
+  item, 5 entries build in staggered. Connector timeline line draws in down
+  the left edge as each entry appears.
+  Slots: title, i1_t (time), i1_h (heading), i1_b (body),
+         i2_t, i2_h, i2_b, i3_t, i3_h, i3_b,
+         i4_t, i4_h, i4_b, i5_t, i5_h, i5_b.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-ov-agenda {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-body); overflow: hidden;
+      }
+
+      /* Aurora bloom */
+      #t1-ov-agenda .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      /* Dot grid */
+      #t1-ov-agenda .grid {
+        position: absolute; inset: 0; z-index: 1;
+        background-image: var(--dot); background-size: var(--dot-size);
+        opacity: 0.45;
+        -webkit-mask-image: radial-gradient(130% 110% at 50% 60%, #000 30%, transparent 78%);
+                mask-image: radial-gradient(130% 110% at 50% 60%, #000 30%, transparent 78%);
+      }
+
+      /* Page layout */
+      #t1-ov-agenda .layout {
+        position: absolute; inset: 0; z-index: 3;
+        display: flex; flex-direction: column;
+        padding: 80px var(--pad) 72px;
+      }
+
+      /* Title */
+      #t1-ov-agenda .card-title {
+        font-family: var(--font-display); font-weight: var(--wt-bold);
+        font-size: var(--size-headline); letter-spacing: var(--track-snug);
+        color: var(--white); text-shadow: var(--textglow);
+        margin-bottom: 52px; line-height: 1.1;
+        flex-shrink: 0;
+      }
+      #t1-ov-agenda .card-title em {
+        font-style: normal; color: var(--accent); text-shadow: var(--textglow-accent);
+      }
+
+      /* Timeline track - the whole body area */
+      #t1-ov-agenda .agenda-track {
+        flex: 1; display: flex; gap: 0; min-height: 0;
+        position: relative;
+      }
+
+      /* Left spine: a vertical line + the time markers float off it */
+      #t1-ov-agenda .spine-col {
+        width: 180px; flex-shrink: 0;
+        display: flex; flex-direction: column;
+        align-items: flex-end; position: relative;
+        padding-right: 0;
+      }
+
+      /* The vertical connector line */
+      #t1-ov-agenda .spine-line {
+        position: absolute; top: 12px; bottom: 12px;
+        right: 28px; width: 1.5px;
+        background: linear-gradient(to bottom,
+          rgba(var(--accent-rgb), 0.70) 0%,
+          rgba(var(--accent-rgb), 0.40) 70%,
+          transparent 100%);
+        box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
+        transform-origin: 50% 0%;
+      }
+
+      /* Dot node on the spine per row */
+      #t1-ov-agenda .node {
+        position: absolute; right: 21px;
+        width: 16px; height: 16px; border-radius: 50%;
+        background: var(--accent);
+        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.80), 0 0 28px rgba(var(--accent-rgb), 0.45);
+        flex-shrink: 0;
+      }
+      #t1-ov-agenda .node-1 { top: 10px; }
+      #t1-ov-agenda .node-2 { top: calc(10px + 136px * 1); }
+      #t1-ov-agenda .node-3 { top: calc(10px + 136px * 2); }
+      #t1-ov-agenda .node-4 { top: calc(10px + 136px * 3); }
+      #t1-ov-agenda .node-5 { top: calc(10px + 136px * 4); }
+
+      /* Right side: rows */
+      #t1-ov-agenda .rows-col {
+        flex: 1; min-width: 0;
+        display: flex; flex-direction: column; gap: 14px;
+        padding-left: 40px;
+      }
+
+      /* Each agenda row - glass tile + left inset timestamp block */
+      #t1-ov-agenda .row {
+        display: flex; align-items: stretch; gap: 0;
+        background: var(--glass-bg-dark);
+        border: 1.5px solid var(--glass-border);
+        border-radius: var(--radius);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
+        overflow: hidden;
+        flex: 1; min-height: 0;
+      }
+
+      /* Time marker block on left of each row */
+      #t1-ov-agenda .time-block {
+        width: 144px; flex-shrink: 0;
+        display: flex; align-items: center; justify-content: center;
+        border-right: 1.5px solid rgba(var(--accent-rgb), 0.22);
+        background: rgba(var(--accent-rgb), 0.06);
+        padding: 0 20px;
+      }
+      #t1-ov-agenda .time-label {
+        font-family: var(--font-mono); font-size: 24px; font-weight: 700;
+        color: var(--accent); text-shadow: var(--textglow-accent);
+        letter-spacing: 0.06em; text-align: center;
+        line-height: 1.2;
+      }
+
+      /* Text area */
+      #t1-ov-agenda .row-text {
+        flex: 1; min-width: 0;
+        display: flex; flex-direction: column; justify-content: center;
+        padding: 22px 44px;
+      }
+      #t1-ov-agenda .row-heading {
+        font-family: var(--font-display); font-weight: var(--wt-semi);
+        font-size: 34px; color: var(--white);
+        letter-spacing: var(--track-snug); line-height: 1.15;
+        margin-bottom: 6px;
+      }
+      #t1-ov-agenda .row-body {
+        font-family: var(--font-body); font-weight: var(--wt-reg);
+        font-size: 26px; color: var(--text-dim); line-height: 1.4;
+      }
+
+      /* Vignette + grain */
+      #t1-ov-agenda .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-ov-agenda .grain {
+        position: absolute; inset: -40px; background: var(--tex-grain);
+        background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
+        pointer-events: none; z-index: 7;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t1-ov-agenda" data-composition-id="t1-ov-agenda" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="grid"></div>
+
+      <div class="layout">
+        <div class="card-title" data-slot="title">Today's <em>Agenda</em></div>
+
+        <div class="agenda-track">
+          <!-- Spine: vertical connector line + nodes -->
+          <div class="spine-col">
+            <div class="spine-line" id="ag-spine"></div>
+            <div class="node node-1" id="ag-node-1"></div>
+            <div class="node node-2" id="ag-node-2"></div>
+            <div class="node node-3" id="ag-node-3"></div>
+            <div class="node node-4" id="ag-node-4"></div>
+            <div class="node node-5" id="ag-node-5"></div>
+          </div>
+
+          <!-- Rows -->
+          <div class="rows-col">
+            <div class="row" id="ag-row-1">
+              <div class="time-block">
+                <div class="time-label" data-slot="i1_t">0:00</div>
+              </div>
+              <div class="row-text">
+                <div class="row-heading" data-slot="i1_h">Introduction & Context</div>
+                <div class="row-body" data-slot="i1_b">Why this problem matters and what we're solving today.</div>
+              </div>
+            </div>
+            <div class="row" id="ag-row-2">
+              <div class="time-block">
+                <div class="time-label" data-slot="i2_t">3:00</div>
+              </div>
+              <div class="row-text">
+                <div class="row-heading" data-slot="i2_h">The Core Framework</div>
+                <div class="row-body" data-slot="i2_b">The three-step model that makes this repeatable at any scale.</div>
+              </div>
+            </div>
+            <div class="row" id="ag-row-3">
+              <div class="time-block">
+                <div class="time-label" data-slot="i3_t">8:00</div>
+              </div>
+              <div class="row-text">
+                <div class="row-heading" data-slot="i3_h">Live Walkthrough</div>
+                <div class="row-body" data-slot="i3_b">Step-by-step demo with a real creator account - no theory, just action.</div>
+              </div>
+            </div>
+            <div class="row" id="ag-row-4">
+              <div class="time-block">
+                <div class="time-label" data-slot="i4_t">14:00</div>
+              </div>
+              <div class="row-text">
+                <div class="row-heading" data-slot="i4_h">Common Mistakes</div>
+                <div class="row-body" data-slot="i4_b">What kills results and how to recognize the pattern early.</div>
+              </div>
+            </div>
+            <div class="row" id="ag-row-5">
+              <div class="time-block">
+                <div class="time-label" data-slot="i5_t">19:00</div>
+              </div>
+              <div class="row-text">
+                <div class="row-heading" data-slot="i5_h">Action Steps + Recap</div>
+                <div class="row-body" data-slot="i5_b">Your exact 7-day implementation plan to start getting results immediately.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="vignette"></div>
+      <div class="grain"></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      /* grain flicker - finite */
+      tl.fromTo("#t1-ov-agenda .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "100px 80px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* environment */
+      tl.from("#t1-ov-agenda .bloom", { autoAlpha: 0, scale: 0.88, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-ov-agenda .grid",  { autoAlpha: 0, duration: 1.1, ease: "power2.out" }, 0.2)
+
+        /* title glides in */
+        .from("#t1-ov-agenda .card-title", { autoAlpha: 0, y: 28, filter: "blur(12px)", duration: 0.85, ease: "power4.out" }, 0.5)
+
+        /* spine line draws down - scaleY from 0 */
+        .from("#ag-spine", { scaleY: 0, transformOrigin: "50% 0%", duration: 1.2, ease: "power3.out" }, 0.85)
+
+        /* rows build in staggered with spring */
+        .from("#ag-row-1", { autoAlpha: 0, y: 36, x: -16, filter: "blur(8px)", duration: 0.72, ease: "back.out(1.3)" }, 0.95)
+        .from("#ag-row-2", { autoAlpha: 0, y: 36, x: -16, filter: "blur(8px)", duration: 0.72, ease: "back.out(1.3)" }, 1.13)
+        .from("#ag-row-3", { autoAlpha: 0, y: 36, x: -16, filter: "blur(8px)", duration: 0.72, ease: "back.out(1.3)" }, 1.31)
+        .from("#ag-row-4", { autoAlpha: 0, y: 36, x: -16, filter: "blur(8px)", duration: 0.72, ease: "back.out(1.3)" }, 1.49)
+        .from("#ag-row-5", { autoAlpha: 0, y: 36, x: -16, filter: "blur(8px)", duration: 0.72, ease: "back.out(1.3)" }, 1.67)
+
+        /* nodes pop on as rows appear */
+        .from("#ag-node-1", { autoAlpha: 0, scale: 0, transformOrigin: "50% 50%", duration: 0.35, ease: "back.out(2)" }, 0.98)
+        .from("#ag-node-2", { autoAlpha: 0, scale: 0, transformOrigin: "50% 50%", duration: 0.35, ease: "back.out(2)" }, 1.16)
+        .from("#ag-node-3", { autoAlpha: 0, scale: 0, transformOrigin: "50% 50%", duration: 0.35, ease: "back.out(2)" }, 1.34)
+        .from("#ag-node-4", { autoAlpha: 0, scale: 0, transformOrigin: "50% 50%", duration: 0.35, ease: "back.out(2)" }, 1.52)
+        .from("#ag-node-5", { autoAlpha: 0, scale: 0, transformOrigin: "50% 50%", duration: 0.35, ease: "back.out(2)" }, 1.70)
+
+        /* breathing glow pulse on time labels - finite */
+        .to("#t1-ov-agenda .time-label",
+          { textShadow: "0 0 30px rgba(79,140,255,0.90), 0 0 80px rgba(79,140,255,0.50)", duration: 1.3, ease: "sine.inOut", repeat: 2, yoyo: true }, 2.4)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-ov-agenda"] = tl;
+    </script>
+  </body>
+</html>

package/skills/luckiest-video-studio-cards/packs/02-aurora-glass/cards/tier1/t1-overview-beforeafter.html

@@ -0,0 +1,252 @@
+<!doctype html>
+<!--
+  AURORA GLASS · tier1 · overview · BEFOREAFTER
+  Full-screen takeover. Two glass cards side by side - BEFORE (left, dimmed)
+  and AFTER (right, accent-glowing). A vertical divider with "VS" separates them.
+  The AFTER card glows accent blue and its heading is accent-colored.
+  Cards slide in from their respective sides, BEFORE slightly before AFTER.
+  Slots: title, before_h, before_b, after_h, after_b.
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="cards/aurora-glass/tokens.css" />
+    <style>
+      html, body { margin: 0; }
+
+      #t1-ov-baft {
+        position: absolute; inset: 0; width: 1920px; height: 1080px;
+        background: var(--canvas); color: var(--text);
+        font-family: var(--font-display); overflow: hidden;
+      }
+
+      #t1-ov-baft .bloom {
+        position: absolute; inset: 0; background: var(--bloom-bottom); z-index: 1;
+      }
+      /* Slightly dimmer corner bloom on BEFORE side, brighter on AFTER */
+      #t1-ov-baft .bloom-right {
+        position: absolute; inset: 0; z-index: 1;
+        background: radial-gradient(80% 80% at 82% 60%,
+          rgba(var(--accent-rgb), 0.28) 0%, transparent 60%);
+      }
+      #t1-ov-baft .grid {
+        position: absolute; inset: 0; z-index: 1;
+        background-image: var(--dot); background-size: var(--dot-size); opacity: 0.44;
+        -webkit-mask-image: radial-gradient(130% 100% at 50% 55%, #000 28%, transparent 76%);
+                mask-image: radial-gradient(130% 100% at 50% 55%, #000 28%, transparent 76%);
+      }
+
+      /* Title */
+      #t1-ov-baft .title-row {
+        position: absolute; left: 0; right: 0; top: 88px; text-align: center; z-index: 4;
+      }
+      #t1-ov-baft .title {
+        font-family: var(--font-display); font-weight: var(--wt-bold);
+        font-size: var(--size-title); letter-spacing: var(--track-snug); line-height: 1.06;
+        color: var(--white); text-shadow: var(--textglow);
+        max-width: 1400px; margin: 0 auto;
+      }
+      #t1-ov-baft .title em {
+        font-style: normal; color: var(--accent); text-shadow: var(--textglow-accent);
+      }
+
+      /* Two-card layout + divider wrapper */
+      #t1-ov-baft .layout {
+        position: absolute; left: 100px; right: 100px; top: 248px; bottom: 72px;
+        display: flex; align-items: stretch; gap: 0; z-index: 4;
+      }
+
+      /* Glass card base - shared */
+      #t1-ov-baft .card {
+        flex: 1;
+        background: var(--glass-bg-dark);
+        border: var(--stroke) solid var(--glass-border);
+        border-radius: var(--radius-lg);
+        box-shadow: var(--glass-shadow);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        padding: 72px 72px 64px;
+        display: flex; flex-direction: column; justify-content: flex-start;
+        position: relative; overflow: hidden;
+      }
+      /* Top hairline */
+      #t1-ov-baft .card::before {
+        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
+        background: linear-gradient(90deg, transparent, var(--glass-hi) 25%, var(--glass-hi) 75%, transparent);
+      }
+
+      /* BEFORE card - slightly muted */
+      #t1-ov-baft #baft-before {
+        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+        opacity: 0.82;
+      }
+      #t1-ov-baft #baft-before::after {
+        content: ""; position: absolute; left: 0; top: 40px; bottom: 40px; width: 3px;
+        border-radius: 2px;
+        background: rgba(255,255,255,0.22);
+      }
+
+      /* AFTER card - accent glow */
+      #t1-ov-baft #baft-after {
+        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+        border-color: rgba(var(--accent-rgb), 0.40);
+        box-shadow: var(--glass-shadow), 0 0 90px rgba(var(--accent-rgb), 0.24);
+      }
+      #t1-ov-baft #baft-after::after {
+        content: ""; position: absolute; left: 0; top: 40px; bottom: 40px; width: 3px;
+        border-radius: 2px;
+        background: var(--accent);
+        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.60);
+      }
+
+      /* Column label */
+      #t1-ov-baft .col-label {
+        font-family: var(--font-mono); font-size: var(--size-label); font-weight: var(--wt-bold);
+        letter-spacing: var(--track-wide); text-transform: uppercase;
+        margin-bottom: 30px;
+      }
+      #t1-ov-baft #baft-before .col-label {
+        color: var(--text-faint);
+      }
+      #t1-ov-baft #baft-after .col-label {
+        color: var(--accent); text-shadow: var(--textglow-accent);
+      }
+
+      /* Card heading */
+      #t1-ov-baft .card-heading {
+        font-family: var(--font-display); font-weight: var(--wt-black);
+        font-size: 56px; letter-spacing: var(--track-snug); line-height: 1.14;
+        margin-bottom: 32px;
+      }
+      #t1-ov-baft #baft-before .card-heading {
+        color: var(--text-dim); text-shadow: none;
+      }
+      #t1-ov-baft #baft-after .card-heading {
+        color: var(--white); text-shadow: var(--textglow);
+      }
+
+      /* Card body */
+      #t1-ov-baft .card-body {
+        font-family: var(--font-body); font-weight: var(--wt-reg);
+        font-size: var(--size-body); line-height: 1.58;
+        color: var(--text-dim);
+      }
+
+      /* Center divider strip */
+      #t1-ov-baft .divider {
+        width: 72px; flex-shrink: 0;
+        display: flex; flex-direction: column; align-items: center; justify-content: center;
+        gap: 0; z-index: 5;
+      }
+      #t1-ov-baft .divider-line {
+        width: 1.5px; flex: 1;
+        background: linear-gradient(to bottom,
+          transparent 0%, rgba(var(--accent-rgb), 0.30) 30%,
+          rgba(var(--accent-rgb), 0.30) 70%, transparent 100%);
+      }
+      #t1-ov-baft .vs-pill {
+        width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
+        border: var(--stroke) solid rgba(var(--accent-rgb), 0.48);
+        background: rgba(var(--accent-rgb), 0.07);
+        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.28);
+        display: flex; align-items: center; justify-content: center;
+        font-family: var(--font-mono); font-size: 20px; font-weight: var(--wt-bold);
+        letter-spacing: 0.06em; color: var(--accent);
+        text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
+        margin: 12px 0;
+      }
+
+      #t1-ov-baft .vignette {
+        position: absolute; inset: 0; pointer-events: none; z-index: 6;
+        background: var(--vignette);
+      }
+      #t1-ov-baft .grain {
+        position: absolute; inset: -40px; background: var(--tex-grain);
+        background-size: 200px 200px; mix-blend-mode: overlay; opacity: 0.10;
+        pointer-events: none; z-index: 7;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="t1-ov-baft" data-composition-id="t1-ov-baft" data-start="0" data-width="1920" data-height="1080">
+      <div class="bloom"></div>
+      <div class="bloom-right"></div>
+      <div class="grid"></div>
+
+      <div class="title-row">
+        <div class="title" data-slot="title">Where You Are vs. <em>Where You Could Be</em></div>
+      </div>
+
+      <div class="layout">
+        <!-- Before card -->
+        <div class="card" id="baft-before">
+          <div class="col-label">Before</div>
+          <div class="card-heading" data-slot="before_h">Guessing what to post and when</div>
+          <div class="card-body" data-slot="before_b">Hours lost each week on content that barely moves the needle - no system, no data, just hoping something lands.</div>
+        </div>
+
+        <!-- Vertical VS divider -->
+        <div class="divider">
+          <div class="divider-line"></div>
+          <div class="vs-pill">VS</div>
+          <div class="divider-line"></div>
+        </div>
+
+        <!-- After card -->
+        <div class="card" id="baft-after">
+          <div class="col-label">After</div>
+          <div class="card-heading" data-slot="after_h">A repeatable system that compounds every week</div>
+          <div class="card-body" data-slot="after_b">Clear strategy, batch production, and analytics that tell you exactly what's working - so each week gets easier.</div>
+        </div>
+      </div>
+
+      <div class="vignette"></div>
+      <div class="grain"></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      /* grain flicker - finite */
+      tl.fromTo("#t1-ov-baft .grain",
+        { backgroundPosition: "0px 0px" },
+        { backgroundPosition: "118px 90px", duration: 0.6, ease: "none", repeat: 11, yoyo: true }, 0);
+
+      /* environment */
+      tl.from("#t1-ov-baft .bloom",       { autoAlpha: 0, scale: 0.92, transformOrigin: "50% 120%", duration: 1.4, ease: "expo.out" }, 0)
+        .from("#t1-ov-baft .bloom-right", { autoAlpha: 0, duration: 1.4, ease: "power2.out" }, 0.4)
+        .from("#t1-ov-baft .grid",        { autoAlpha: 0, duration: 1.2, ease: "power2.out" }, 0.2)
+
+        /* title glides first */
+        .from("#t1-ov-baft .title", { autoAlpha: 0, y: 28, filter: "blur(14px)", duration: 1.0, ease: "power4.out" }, 0.55)
+
+        /* BEFORE slides in from the left */
+        .from("#baft-before", { autoAlpha: 0, x: -80, scale: 0.95, transformOrigin: "0% 50%",
+          filter: "blur(14px)", duration: 0.95, ease: "back.out(1.4)" }, 1.10)
+
+        /* VS divider fades in */
+        .from("#t1-ov-baft .divider", { autoAlpha: 0, scale: 0.8, duration: 0.7, ease: "power3.out" }, 1.40)
+
+        /* AFTER slides in from the right */
+        .from("#baft-after", { autoAlpha: 0, x: 80, scale: 0.95, transformOrigin: "100% 50%",
+          filter: "blur(14px)", duration: 0.95, ease: "back.out(1.4)" }, 1.28)
+
+        /* accent glow breathe on AFTER - finite */
+        .to("#baft-after", { boxShadow: "0 24px 70px rgba(0,0,0,0.50), 0 0 120px rgba(79,140,255,0.34)",
+          duration: 1.5, ease: "sine.inOut", repeat: 2, yoyo: true }, 2.5)
+
+        /* VS pill glow pulse */
+        .to("#t1-ov-baft .vs-pill", { boxShadow: "0 0 28px rgba(79,140,255,0.55), 0 0 60px rgba(79,140,255,0.28)",
+          duration: 1.3, ease: "sine.inOut", repeat: 3, yoyo: true }, 2.3)
+
+        /* slow upward drift */
+        .to("#t1-ov-baft .layout", { y: -10, duration: 5.0, ease: "sine.inOut" }, 1.8)
+
+        .set({}, {}, 7);
+
+      window.__timelines["t1-ov-baft"] = tl;
+    </script>
+  </body>
+</html>