@tribe-nest/forge 3.17.0 → 3.20.0

package/src/ui/headless/course/useCourseClassroom.ts

@@ -0,0 +1,242 @@
+import { useMemo, useRef, useState } from "react";
+import type { CourseAccessData, CourseLesson } from "../../../types/models";
+import {
+  courseAccessDenial,
+  isLegacyCourseAccess,
+  useCourseAccess,
+  useUpdateCourseProgress,
+  type CourseAccessDenial,
+} from "../../../data/queries/useCourseAccess";
+import { usePublicAuth } from "../../../contexts/PublicAuthContext";
+import { safeRedirectPath } from "../../../utils/safeRedirect";
+
+/**
+ * What the classroom should draw INSTEAD of the player.
+ *
+ * `sign_in_required` and `wrong_account` are the two halves of account-bound
+ * course access, and they must never be merged: one caller needs a way IN, the
+ * other needs a way OUT of the session they are already in. `not_found` keeps
+ * the pre-existing behaviour for a revoked or unknown grant.
+ */
+export type CourseAccessGateKind = "sign_in_required" | "wrong_account" | "not_found";
+
+export interface CourseAccessGate {
+  kind: CourseAccessGateKind;
+  title: string;
+  /** The API's sentence when it sent one, else a local fallback. */
+  body: string;
+  /** Primary CTA label. */
+  actionLabel: string | null;
+  /**
+   * Where the primary CTA goes. `null` on `wrong_account`, whose action is
+   * signing OUT — a state change, not a navigation, so the caller runs
+   * `signOutAndRetry` instead.
+   */
+  actionHref: string | null;
+}
+
+// Not re-exported from the headless barrel — `COURSE_SIGNUP_PATH` is already
+// taken there by the posts upsell, and these are only defaults for the options.
+export const COURSE_LOGIN_PATH = "/login";
+export const COURSE_SIGNUP_PATH = "/signup";
+
+/** `loginPath?redirect=<here>` — a sign-in that lands back on the course, never on a generic home. */
+export const courseSignInHref = (loginPath: string, currentPath: string): string => {
+  const target = safeRedirectPath(currentPath, "");
+  return target ? `${loginPath}?redirect=${encodeURIComponent(target)}` : loginPath;
+};
+
+/**
+ * The gate for a failed access read, or `null` when there is nothing to gate.
+ *
+ * Pure and total so the two 4xx branches can be exercised without a DOM, a
+ * client or a session — this mapping is the whole feature, and getting the
+ * 401/403 arms backwards produces a page that is technically correct and
+ * practically a dead end.
+ */
+export function buildCourseAccessGate(input: {
+  denial: CourseAccessDenial | null;
+  /** The query failed for some OTHER reason (404, 500, offline). */
+  isError: boolean;
+  loginPath?: string;
+  /** Path (+ search) to return to after signing in. */
+  currentPath?: string;
+}): CourseAccessGate | null {
+  const { denial, isError } = input;
+  const loginPath = input.loginPath ?? COURSE_LOGIN_PATH;
+
+  if (denial?.reason === "account_required") {
+    return {
+      kind: "sign_in_required",
+      title: "Sign in to open this course",
+      // Said plainly because the person reading it is almost always the buyer,
+      // arriving from an email they were sent months ago.
+      body:
+        denial.message ??
+        "This enrolment is tied to an account. Sign in and you'll come straight back to your course.",
+      actionLabel: "Sign in",
+      actionHref: courseSignInHref(loginPath, input.currentPath ?? ""),
+    };
+  }
+
+  if (denial?.reason === "wrong_account") {
+    return {
+      kind: "wrong_account",
+      title: "This enrolment belongs to a different account",
+      // NOT "sign in" — they already are. The only useful move is leaving the
+      // session they are in.
+      body:
+        denial.message ??
+        "You're signed in with a different account. Sign out and sign back in with the account that bought this course.",
+      actionLabel: "Sign out and switch account",
+      actionHref: null,
+    };
+  }
+
+  if (isError) {
+    return {
+      kind: "not_found",
+      title: "Course access not found",
+      body: "This link may have expired or the enrolment may have been revoked.",
+      actionLabel: null,
+      actionHref: null,
+    };
+  }
+
+  return null;
+}
+
+/**
+ * The nudge shown ON TOP of a course that opened fine, when the grant is still
+ * legacy (`account_id` NULL) — i.e. the link alone is the credential.
+ *
+ * Only offered to a signed-OUT reader. There is no bind-my-grant endpoint, so
+ * the honest thing to offer is an account on the grant's own email; telling a
+ * reader who is already signed in to "secure" something we cannot bind for them
+ * would be noise on every page view.
+ */
+export interface CourseAccessSecurePrompt {
+  /** The email the grant was issued to — shown so the reader knows which one to use. */
+  email: string;
+  href: string;
+}
+
+export function buildCourseAccessSecurePrompt(input: {
+  data?: CourseAccessData | null;
+  isAuthenticated: boolean;
+  signupPath?: string;
+  currentPath?: string;
+}): CourseAccessSecurePrompt | null {
+  if (!input.data || input.isAuthenticated) return null;
+  if (!isLegacyCourseAccess(input.data)) return null;
+  const email = input.data.access.email;
+  if (!email) return null;
+  return {
+    email,
+    href: courseSignInHref(input.signupPath ?? COURSE_SIGNUP_PATH, input.currentPath ?? ""),
+  };
+}
+
+const currentPath = (): string =>
+  typeof window === "undefined" ? "" : `${window.location.pathname}${window.location.search}`;
+
+export interface UseCourseClassroomOptions {
+  /** Sign-in path (default `/login`; site-starter uses `/i/login`). */
+  loginPath?: string;
+  /** Signup path for the secure-your-access nudge (default `/signup`). */
+  signupPath?: string;
+  /** Suppress the legacy-grant nudge entirely. */
+  showSecurePrompt?: boolean;
+}
+
+/**
+ * Headless enrolled-course player: the account-binding gate, lesson selection
+ * and throttled video-progress reporting over `useCourseAccess` +
+ * `useUpdateCourseProgress`. Bring your own UI.
+ */
+export function useCourseClassroom(accessId?: string, opts: UseCourseClassroomOptions = {}) {
+  const { isAuthenticated, isInitialized, user, logout } = usePublicAuth();
+  /**
+   * Held until the session is restored. `PublicAuthProvider` reads the stored
+   * token in an effect, so a query fired on the first render goes out with no
+   * Authorization header — and a BOUND grant would answer 401 to the very person
+   * it belongs to, showing "sign in" to someone already signed in. Costs one
+   * `/public/accounts/me` round trip that the page makes anyway.
+   */
+  const { data, isLoading, isError, error, refetch } = useCourseAccess(isInitialized ? accessId : undefined);
+  const updateProgress = useUpdateCourseProgress(accessId);
+  const lastSent = useRef(0);
+
+  const [selectedLessonId, setSelectedLessonId] = useState<string | null>(null);
+  const [securePromptDismissed, setSecurePromptDismissed] = useState(false);
+
+  const denial = useMemo(() => (isError ? courseAccessDenial(error) : null), [isError, error]);
+
+  const gate = useMemo(
+    () => buildCourseAccessGate({ denial, isError, loginPath: opts.loginPath, currentPath: currentPath() }),
+    [denial, isError, opts.loginPath],
+  );
+
+  const modules = data?.course.modules ?? [];
+  const lessons: CourseLesson[] = modules.flatMap((m) => m.lessons ?? []);
+
+  // The server's resume point wins until the reader picks a lesson; deriving it
+  // rather than seeding state means it is not frozen at whatever the very first
+  // (undefined) render saw.
+  const selected =
+    lessons.find((l) => l.id === selectedLessonId) ??
+    lessons.find((l) => l.id === data?.access.currentLessonId) ??
+    lessons[0];
+
+  const securePrompt = useMemo(() => {
+    if (opts.showSecurePrompt === false || securePromptDismissed) return null;
+    return buildCourseAccessSecurePrompt({
+      data,
+      isAuthenticated,
+      signupPath: opts.signupPath,
+      currentPath: currentPath(),
+    });
+  }, [data, isAuthenticated, opts.showSecurePrompt, opts.signupPath, securePromptDismissed]);
+
+  /** Throttled to ~1/s — `timeupdate` fires several times a second. */
+  const reportProgress = (videoProgress: number, duration?: number) => {
+    if (!selected || !duration) return;
+    const now = Date.now();
+    if (now - lastSent.current < 1000) return;
+    lastSent.current = now;
+    const percent = (videoProgress / duration) * 100;
+    updateProgress.mutate({ lessonId: selected.id, videoProgress: percent, isCompleted: percent >= 95 });
+  };
+
+  /**
+   * The `wrong_account` exit. Clears the session and re-asks: a LEGACY grant
+   * opens immediately once anonymous, and a bound one falls through to the
+   * sign-in gate — either way the reader moves forward instead of in a circle.
+   */
+  const signOutAndRetry = async () => {
+    await logout();
+    await refetch();
+  };
+
+  return {
+    data,
+    // A disabled query is not "loading" to react-query, so the pre-session
+    // window has to be folded in by hand or the page flashes its error state.
+    isLoading: isLoading || !isInitialized,
+    /** Non-null when the player must not be drawn. */
+    gate,
+    denial,
+    securePrompt,
+    dismissSecurePrompt: () => setSecurePromptDismissed(true),
+    signOutAndRetry,
+    /** The email of the account currently signed in — names it in the wrong-account copy. */
+    signedInEmail: user?.email ?? null,
+    isAuthenticated,
+    modules,
+    lessons,
+    selected,
+    selectLesson: setSelectedLessonId,
+    completedCount: lessons.filter((l) => l.progress?.isCompleted).length,
+    reportProgress,
+  };
+}

package/src/ui/headless/index.ts

@@ -31,11 +31,22 @@ export {
   type CouponQuoteFn,
 } from "./coupon/useCouponField";
 export { useCourseCheckout, type UseCourseCheckoutOptions, type CourseCheckoutStep } from "./course/useCourseCheckout";
+export {
+  useCourseClassroom,
+  buildCourseAccessGate,
+  buildCourseAccessSecurePrompt,
+  courseSignInHref,
+  type UseCourseClassroomOptions,
+  type CourseAccessGate,
+  type CourseAccessGateKind,
+  type CourseAccessSecurePrompt,
+} from "./course/useCourseClassroom";
 export {
   useCoachingBooking,
   type UseCoachingBookingOptions,
   type CoachingBookingStep,
 } from "./coaching/useCoachingBooking";
+export { useBookingSecret, type BookingSecretLookup } from "./booking/useBookingSecret";
 export {
   useMembershipCheckout,
   type UseMembershipCheckoutOptions,

package/src/ui/index.ts

@@ -116,6 +116,7 @@ export {
   CheckSeal,
   WarnSeal,
   Perforation,
+  ConfirmationLostCheckout,
   alpha,
 } from "./styled/Confirmation";
 export { PlayButton, type PlayButtonProps } from "./styled/PlayButton";

package/src/ui/shell/TribeNestApp.tsx

@@ -5,11 +5,12 @@ import { ForgeAnalytics } from "../analytics/ForgeAnalytics";
 import { PwaRegistration } from "../styled/PwaRegistration";
 import { InstallBanner } from "../styled/InstallBanner";
 import { CookieConsent } from "../styled/CookieConsent";
+import { AiAgentWidget } from "../styled/AiAgentWidget";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useInitialSiteConfig } from "../../provider/SiteConfigProvider";
 import { PoweredBy } from "./PoweredBy";
 import { PreviewDiagnostics } from "./PreviewDiagnostics";
-import { shellPoweredByEnabled, shellPwaEnabled } from "./shellGating";
+import { shellAiAgentEnabled, shellPoweredByEnabled, shellPwaEnabled } from "./shellGating";
 import { previewDiagnosticsEnabled, resolvePreviewDiagnostics } from "./diagnosticsGating";
 import type { ForgeSsrDiagnostics } from "../../types/diagnostics";
 import { captureAttributionRefFromUrl, readAttributionRef } from "../../utils/attribution";
@@ -52,6 +53,14 @@ export interface TribeNestAppProps extends Omit<ForgeProviderProps, "children">
   analytics?: boolean;
   pwa?: boolean;
   cookieConsent?: boolean;
+  /**
+   * The website AI agent bubble. Defaults to on for a fan site and off for a
+   * mini-app; set it explicitly to override either default. Renders nothing
+   * unless the creator has also enabled the agent for the profile — the widget
+   * fetches its own config and self-hides. For custom chat UI, leave this off
+   * and build on the `useAiAgent()` hook instead.
+   */
+  aiAgent?: boolean;
 }
 
 // Ensure the PWA `<link rel="manifest">` + a `theme-color` meta exist even if the
@@ -114,6 +123,7 @@ export function TribeNestApp({
   analytics = true,
   pwa = true,
   cookieConsent = true,
+  aiAgent,
   ...forgeProps
 }: TribeNestAppProps) {
   // Register the SW + offer install only on the live published site — never in
@@ -154,6 +164,11 @@ export function TribeNestApp({
       {/* Consent banner — shown on first visit, re-openable from anywhere via
           useCookieConsent().reopen(). Hidden in the editor. */}
       {cookieConsent && !editable && <CookieConsent useTribeNestPrivacy />}
+      {/* Website AI agent — floating bubble, self-hiding when the profile has no
+          agent enabled. Lives here rather than in each __root so enabling the
+          agent in admin is enough to make it appear; before this it shipped only
+          on the Craft stack and no code site ever rendered it. */}
+      {shellAiAgentEnabled({ aiAgent, editable, appId: forgeProps.appId }) && <AiAgentWidget />}
     </ForgeProvider>
   );
 }

package/src/ui/shell/shellGating.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { poweredByHref, shellPoweredByEnabled, shellPwaEnabled } from "./shellGating";
+import { poweredByHref, shellAiAgentEnabled, shellPoweredByEnabled, shellPwaEnabled } from "./shellGating";
 
 // The PWA (SW register + install prompt) must be ON only for the live published
 // site, and OFF everywhere else (editor, preview/draft), so review Workers never
@@ -47,6 +47,31 @@ describe("shellPoweredByEnabled", () => {
   });
 });
 
+// The agent bubble defaults ON for fan sites and OFF for mini-apps, and is
+// blocked in the editor because an answer there spends the creator's AI credits.
+// The widget itself still renders nothing when the agent is disabled for the
+// profile — this gate is about the SURFACE, not the entitlement.
+describe("shellAiAgentEnabled", () => {
+  it("is on by default for a fan site, live or preview", () => {
+    expect(shellAiAgentEnabled({ editable: false })).toBe(true);
+    expect(shellAiAgentEnabled({})).toBe(true);
+  });
+
+  it("is off by default for a mini-app", () => {
+    expect(shellAiAgentEnabled({ editable: false, appId: "app-7" })).toBe(false);
+  });
+
+  it("is off in the editor even when explicitly asked for", () => {
+    expect(shellAiAgentEnabled({ aiAgent: true, editable: true })).toBe(false);
+    expect(shellAiAgentEnabled({ editable: true })).toBe(false);
+  });
+
+  it("lets an explicit prop override the per-surface default in both directions", () => {
+    expect(shellAiAgentEnabled({ aiAgent: false, editable: false })).toBe(false); // site opts out
+    expect(shellAiAgentEnabled({ aiAgent: true, editable: false, appId: "app-7" })).toBe(true); // app opts in
+  });
+});
+
 // The badge is only worth carrying if we can tell WHICH site sent the visitor,
 // so the identifying params are the point of the link, not decoration.
 describe("poweredByHref", () => {

package/src/ui/shell/shellGating.ts

@@ -24,6 +24,22 @@ export function shellPoweredByEnabled(opts: {
   return !opts.hideBadge && !opts.editable && opts.state === "published";
 }
 
+// The website AI agent bubble. Unlike the PWA it IS wanted on preview/draft
+// deploys — that is where a creator checks the assistant before going live — so
+// the only hard block is the HMR editor, where a live answer would spend the
+// creator's AI credits every time they typed into their own site.
+//
+// The default differs by surface. A fan site gets it (the agent answers from the
+// artist's content + knowledge base, which is what a visitor is there for); a
+// mini-app does NOT, because an app is a utility and a floating "ask me about
+// the artist" bubble is noise on top of it. `appId` is baked at build time, so
+// this is decided without a runtime lookup. An explicit `aiAgent` prop wins
+// either way — that is how an app opts in, or a site opts out.
+export function shellAiAgentEnabled(opts: { aiAgent?: boolean; editable?: boolean; appId?: string }): boolean {
+  if (opts.editable) return false;
+  return opts.aiAgent ?? !opts.appId;
+}
+
 /** Marketing site the badge points at. */
 const TRIBENEST_URL = "https://tribenest.co/";
 

package/src/ui/styled/CoachingBooking.tsx

@@ -29,7 +29,15 @@ export interface CoachingBookingProps {
   formatAmount?: (amount: number) => string;
   /** Optional payment renderer — falls back to a registered <ForgePaymentProvider>. */
   renderPayment?: (props: PaymentRenderProps) => ReactNode;
-  /** Stripe return URL for a PAID booking. Default `/i/coaching/:slug/finalise`. */
+  /**
+   * Stripe return URL for a PAID booking. Default `/i/coaching/:slug/finalise`.
+   *
+   * Put ONLY the bookingId in this URL. The booking's secret is handled for you
+   * by the hook (stashed in `sessionStorage`, read back by
+   * `CoachingConfirmation`) — putting it in the URL would hand it to history,
+   * referrers and shared links, which is the exact leak it exists to close. See
+   * `utils/bookingSecret`.
+   */
   finalisePath?: (slug: string, bookingId: string) => string;
   /** Host-owned navigation on FREE completion (e.g. router navigate). */
   onComplete?: (info: { slug: string; bookingId: string }) => void;

package/src/ui/styled/CoachingConfirmation.tsx

@@ -3,8 +3,18 @@ import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
-import { ConfirmationStage, ConfirmationCard, CheckSeal, WarnSeal, Perforation, ConfirmationRow, alpha } from "./Confirmation";
+import {
+  ConfirmationStage,
+  ConfirmationCard,
+  CheckSeal,
+  WarnSeal,
+  Perforation,
+  ConfirmationRow,
+  ConfirmationLostCheckout,
+  alpha,
+} from "./Confirmation";
 import { useCoachingBookingFinalize } from "../../data/queries/useFinalize";
+import { useBookingSecret } from "../headless/booking/useBookingSecret";
 import { AddToCalendar } from "./AddToCalendar";
 
 export interface CoachingConfirmationProps {
@@ -14,6 +24,11 @@ export interface CoachingConfirmationProps {
   formatAmount?: (n: number) => string;
   /** Where the "explore more" action links. */
   explorePath?: string;
+  /**
+   * Where "start over" goes when this browser has no credential for the booking
+   * — i.e. back to the session, to book again. Defaults to `/i/coaching/:slug`.
+   */
+  restartPath?: string;
 }
 
 // e.g. "Fri, Jul 4 · 2:30 PM EDT" in the visitor's own timezone — matching how
@@ -30,15 +45,25 @@ export function CoachingConfirmation({
   orderId,
   formatAmount,
   explorePath = "/i/coaching",
+  restartPath,
 }: CoachingConfirmationProps) {
   const theme = useForgeTheme();
   const fmt = useAmountFormatter(formatAmount);
-  const { data, isLoading, error } = useCoachingBookingFinalize(slug, orderId);
+  // The credential the booking flow stashed before the payment redirect.
+  // `resolved` gates the finalise: storage can only be read on the client, so
+  // firing before then would send the call without a secret it actually has and
+  // get a 404.
+  const { secret, resolved, isMissing } = useBookingSecret(orderId);
+  const { data, isLoading, error } = useCoachingBookingFinalize(
+    slug,
+    resolved ? orderId : undefined,
+    secret ?? undefined,
+  );
 
   const primary = theme.colors.primary;
   const text = theme.colors.text;
 
-  if (isLoading) {
+  if (!resolved || isLoading) {
     return (
       <ConfirmationStage>
         <Loading label="Confirming your booking…" />
@@ -46,6 +71,22 @@ export function CoachingConfirmation({
     );
   }
 
+  // A booking with no credential in THIS browser is indistinguishable
+  // server-side from a stranger holding a leaked id, so it 404s on purpose.
+  // Explain that rather than implying the booking never existed.
+  if ((error || !data) && isMissing) {
+    return (
+      <ConfirmationStage>
+        <ConfirmationLostCheckout
+          title="We can’t confirm your booking in this browser"
+          body="Confirming a booking needs the checkout details saved in the tab you started in — and they aren’t here. That usually means the tab was closed, this link was opened on a different device or browser, or private browsing cleared them. If your payment went through you’ll still get your confirmation email, so check your inbox before booking again. Otherwise, pick a new time and start over."
+          restartPath={restartPath ?? `/i/coaching/${slug}`}
+          restartLabel="Pick a new time"
+        />
+      </ConfirmationStage>
+    );
+  }
+
   const confirmed = !error && data?.status === "confirmed";
 
   return (

package/src/ui/styled/Confirmation.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
+import { AlertTriangle, ArrowRight } from "lucide-react";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
 
 // Shared building blocks for post-purchase "ticket" confirmation pages
 // (coaching / event / course / checkout / invoice / payment-link). All colors
@@ -149,6 +151,98 @@ export function ConfirmationRow({
   );
 }
 
+/**
+ * The "this browser can't confirm that purchase" screen.
+ *
+ * A checkout is now credentialed by a per-booking secret that is issued once
+ * and kept in `sessionStorage` (see `utils/bookingSecret`). If the buyer lands
+ * on a confirmation URL WITHOUT it — the original tab was closed, the link was
+ * forwarded or reopened on another device, storage is blocked — the server has
+ * no way to tell them apart from a stranger holding a leaked id, and answers
+ * 404 by design.
+ *
+ * That is a legitimate state, not a bug, so it gets its own screen rather than
+ * a bare "not found": say plainly what happened, reassure about the money (a
+ * completed payment is still completed — the receipt email is the proof, and
+ * this page failing does not undo it), and offer the one action that actually
+ * works, which is to start again.
+ */
+export function ConfirmationLostCheckout({
+  title,
+  body,
+  restartPath,
+  restartLabel,
+}: {
+  title: string;
+  body: string;
+  restartPath: string;
+  restartLabel: string;
+}) {
+  const t = useForgeTheme();
+  const primary = t.colors.primary;
+  const text = t.colors.text;
+  return (
+    <ConfirmationCard width={460}>
+      <div style={{ padding: "40px 32px 12px", textAlign: "center" }}>
+        <WarnSeal icon={<AlertTriangle size={34} color="#f59e0b" />} />
+        <p
+          className="cf-rise"
+          style={{
+            margin: "22px 0 6px",
+            fontSize: 12,
+            fontWeight: 700,
+            letterSpacing: "0.22em",
+            textTransform: "uppercase",
+            color: "#f59e0b",
+            animationDelay: "0.15s",
+          }}
+        >
+          Can’t confirm here
+        </p>
+        <h1
+          className="cf-rise"
+          style={{ fontSize: 27, fontWeight: 800, lineHeight: 1.14, margin: "0 0 10px", animationDelay: "0.22s" }}
+        >
+          {title}
+        </h1>
+        <p
+          className="cf-rise"
+          style={{
+            fontSize: 15,
+            lineHeight: 1.55,
+            color: alpha(text, 0.7),
+            margin: "0 auto",
+            maxWidth: 360,
+            animationDelay: "0.3s",
+          }}
+        >
+          {body}
+        </p>
+      </div>
+      <div className="cf-rise" style={{ padding: "22px 32px 32px", animationDelay: "0.38s" }}>
+        <a
+          href={restartPath}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 8,
+            width: "100%",
+            padding: "13px 18px",
+            borderRadius: t.cornerRadius,
+            background: primary,
+            color: readableTextOn(primary),
+            fontWeight: 700,
+            textDecoration: "none",
+          }}
+        >
+          {restartLabel} <ArrowRight size={16} />
+        </a>
+      </div>
+    </ConfirmationCard>
+  );
+}
+
 const KEYFRAMES = `
 @keyframes cf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
 @keyframes cf-pop { 0% { transform: scale(.5); opacity: 0; } 55% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }