@tomako/tools-runtime 0.1.0

package/src/features/tools/tarot-reading/tarot-reading.container.tsx

@@ -0,0 +1,412 @@
+import {
+    ArrowRight,
+    CopyCheck,
+} from "lucide-react";
+import { TomatoLogo } from "@tomako/public-chrome";
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+import type { CSSProperties } from "react";
+import { siteConfig } from "../../../host/server";
+import { isZhRouteLocale } from "../../../i18n/locale-fallback";
+import type { AppLocale } from "../../../i18n/locale";
+import { buildAppHomeUrl } from "../../../lib/app-origin";
+import { localizedPath } from "../../../lib/routing/locale-paths";
+import { serializeJsonLd } from "../../../lib/seo-meta";
+import { resolveToolLocaleCopy } from "../../../lib/tools/resolve-tool-locale-copy";
+import { TarotReadingWidget } from "./widget";
+import { ToolCta } from "../shared/tool-cta";
+import {
+  ToolCardGrid,
+  ToolDividedFaqList,
+} from "../shared/tool-content-sections";
+import type { ToolPageProps } from "../types";
+
+type TextCard = { title: string; body: string };
+type FaqItem = { question: string; answer: string };
+
+type CosmicStarTone = "white" | "gold" | "blue";
+
+type CosmicStar = {
+  id: string;
+  left: number;
+  top: number;
+  size: number;
+  opacity: number;
+  delay: number;
+  duration: number;
+  driftX: number;
+  driftY: number;
+  tone: CosmicStarTone;
+};
+
+type StarMap = {
+  id: string;
+  shadows: string;
+};
+
+function seededUnit(index: number, seed: number, salt: number) {
+  const value = Math.sin(index * 12.9898 + seed * 78.233 + salt * 37.719) * 43758.5453;
+  return value - Math.floor(value);
+}
+
+function makeCosmicStars({
+  count,
+  seed,
+  minSize,
+  maxSize,
+  minOpacity,
+  maxOpacity,
+  clusterBias,
+  drift,
+  minDuration,
+  durationRange,
+}: {
+  count: number;
+  seed: number;
+  minSize: number;
+  maxSize: number;
+  minOpacity: number;
+  maxOpacity: number;
+  clusterBias: number;
+  drift: number;
+  minDuration: number;
+  durationRange: number;
+}): CosmicStar[] {
+  return Array.from({ length: count }, (_, index) => {
+    const clustered = seededUnit(index, seed, 9) < clusterBias;
+    const angle = (seededUnit(index, seed, 1) * 360 * Math.PI) / 180;
+    const radius = 8 + Math.pow(seededUnit(index, seed, 2), 0.74) * 62;
+    const bandLeft = -8 + seededUnit(index, seed, 3) * 116;
+    const bandTop = 76 - bandLeft * 0.42 + (seededUnit(index, seed, 4) - 0.5) * 28;
+    const left = clustered
+      ? 50 + Math.cos(angle) * radius * 1.1 + Math.sin(index * 0.74 + seed) * 3.8
+      : index % 5 === 0
+        ? bandLeft
+        : -6 + seededUnit(index, seed, 5) * 112;
+    const top = clustered
+      ? 50 + Math.sin(angle) * radius * 0.68 + Math.cos(index * 0.61 + seed) * 3.2
+      : index % 5 === 0
+        ? bandTop
+        : -6 + seededUnit(index, seed, 6) * 112;
+    const sizeNoise = seededUnit(index, seed, 7);
+    const toneNoise = seededUnit(index, seed, 8);
+
+    return {
+      id: `${seed}-${index}`,
+      left,
+      top,
+      size: minSize + Math.pow(sizeNoise, 2.1) * (maxSize - minSize),
+      opacity: minOpacity + seededUnit(index, seed, 10) * (maxOpacity - minOpacity),
+      delay: -(seededUnit(index, seed, 12) * 12),
+      duration: minDuration + seededUnit(index, seed, 13) * durationRange,
+      driftX: (seededUnit(index, seed, 14) - 0.5) * drift,
+      driftY: (seededUnit(index, seed, 15) - 0.5) * drift,
+      tone: toneNoise > 0.78 ? "blue" : toneNoise > 0.52 ? "gold" : "white",
+    };
+  });
+}
+
+function starColor(tone: CosmicStarTone, opacity: number) {
+  if (tone === "gold") return `rgba(232,202,117,${opacity.toFixed(3)})`;
+  if (tone === "blue") return `rgba(200,235,255,${opacity.toFixed(3)})`;
+  return `rgba(246,244,236,${opacity.toFixed(3)})`;
+}
+
+function makeStarMap({
+  count,
+  seed,
+  minSize,
+  maxSize,
+  minOpacity,
+  maxOpacity,
+}: {
+  count: number;
+  seed: number;
+  minSize: number;
+  maxSize: number;
+  minOpacity: number;
+  maxOpacity: number;
+}): StarMap {
+  const shadows = Array.from({ length: count }, (_, index) => {
+    const x = -6 + seededUnit(index, seed, 31) * 112;
+    const y = -6 + seededUnit(index, seed, 32) * 112;
+    const size = minSize + Math.pow(seededUnit(index, seed, 33), 2.2) * (maxSize - minSize);
+    const opacity = minOpacity + seededUnit(index, seed, 34) * (maxOpacity - minOpacity);
+    const toneNoise = seededUnit(index, seed, 35);
+    const tone: CosmicStarTone = toneNoise > 0.82 ? "blue" : toneNoise > 0.56 ? "gold" : "white";
+
+    return `${x.toFixed(2)}vw ${y.toFixed(2)}vh 0 ${size.toFixed(2)}px ${starColor(tone, opacity)}`;
+  }).join(", ");
+
+  return { id: `star-map-${seed}`, shadows };
+}
+
+const farStarMap = makeStarMap({
+  count: 170,
+  seed: 2,
+  minSize: 0.15,
+  maxSize: 0.85,
+  minOpacity: 0.12,
+  maxOpacity: 0.42,
+});
+const dustStarMap = makeStarMap({
+  count: 80,
+  seed: 6,
+  minSize: 0.45,
+  maxSize: 1.5,
+  minOpacity: 0.2,
+  maxOpacity: 0.56,
+});
+const floatingStars = makeCosmicStars({
+  count: 48,
+  seed: 11,
+  minSize: 3.2,
+  maxSize: 16,
+  minOpacity: 0.34,
+  maxOpacity: 0.78,
+  clusterBias: 0.62,
+  drift: 20,
+  minDuration: 9,
+  durationRange: 12,
+});
+
+function TarotAtmosphere() {
+  const renderFloatingStars = (stars: readonly CosmicStar[]) => (
+    <div className="tarot-floating-stars absolute inset-[-8%]">
+      {stars.map((star) => (
+        <span
+          key={star.id}
+          className={`tarot-floating-star tarot-floating-star-${star.tone} absolute rounded-full`}
+          style={
+            {
+              left: `${star.left}%`,
+              top: `${star.top}%`,
+              width: star.size,
+              height: star.size,
+              "--tarot-star-opacity": star.opacity,
+              "--tarot-star-delay": `${star.delay}s`,
+              "--tarot-star-duration": `${star.duration}s`,
+              "--tarot-star-drift-x": `${star.driftX}px`,
+              "--tarot-star-drift-y": `${star.driftY}px`,
+              "--tarot-star-drift-x-late": `${star.driftX * -0.32}px`,
+              "--tarot-star-drift-y-late": `${star.driftY * 0.38}px`,
+            } as CSSProperties
+          }
+        />
+      ))}
+    </div>
+  );
+
+  return (
+    <div aria-hidden className="tarot-atmosphere pointer-events-none absolute inset-0 overflow-hidden">
+      <div className="tarot-cosmic-base absolute inset-0" />
+      <div className="tarot-cosmic-depth absolute inset-0" />
+      <div className="tarot-nebula-cloud tarot-nebula-cloud-a absolute" />
+      <div className="tarot-nebula-cloud tarot-nebula-cloud-b absolute" />
+      <div className="tarot-nebula-cloud tarot-nebula-cloud-c absolute" />
+      <div className="tarot-light-bloom tarot-light-bloom-core absolute" />
+      <div className="tarot-light-bloom tarot-light-bloom-rim absolute" />
+      <span
+        className="tarot-star-map tarot-star-map-far absolute left-0 top-0 size-px rounded-full"
+        style={{ boxShadow: farStarMap.shadows }}
+      />
+      <span
+        className="tarot-star-map tarot-star-map-dust absolute left-0 top-0 size-px rounded-full"
+        style={{ boxShadow: dustStarMap.shadows }}
+      />
+      {renderFloatingStars(floatingStars)}
+      <div className="tarot-cosmic-vignette absolute inset-0" />
+    </div>
+  );
+}
+
+function HeroChrome({ locale }: { locale: AppLocale }) {
+  const isZh = isZhRouteLocale(locale);
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-40 text-[#E8E1D2]">
+      <div className="absolute left-5 top-5 flex items-center gap-3 md:left-8 md:top-8">
+        <TomatoLogo
+          href={buildAppHomeUrl(locale)}
+          label="Tomako"
+          target="_blank"
+          rel="noopener noreferrer"
+          showUnionMark
+          inverted
+          className="pointer-events-auto flex items-center gap-3"
+        />
+      </div>
+
+      <p className="absolute bottom-6 left-1/2 hidden -translate-x-1/2 text-[11px] tracking-[0.08em] text-[#AFA797]/70 lg:block">
+        © 2026 Tomako Tarot · {isZh ? "隐私政策  |  服务条款" : "Privacy  |  Terms"}
+      </p>
+    </div>
+  );
+}
+
+function SectionHeader({
+  eyebrow,
+  heading,
+  intro,
+}: {
+  eyebrow: string;
+  heading: string;
+  intro?: string;
+}) {
+  return (
+    <div className="max-w-3xl">
+      <p className="text-xs font-semibold uppercase tracking-[0.1em] text-[#A3472F]">
+        {eyebrow}
+      </p>
+      <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#1C1715] md:text-4xl">
+        {heading}
+      </h2>
+      {intro ? <p className="mt-4 text-base leading-7 text-[#62564D]">{intro}</p> : null}
+    </div>
+  );
+}
+
+function TimelineRows({ items }: { items: readonly TextCard[] }) {
+  return (
+    <div className="grid gap-3">
+      {items.map((item, index) => (
+        <article
+          key={item.title}
+          className="grid gap-4 rounded-[1rem] border border-[#E1D3B8] bg-white p-5 shadow-[0_12px_30px_rgba(42,28,16,0.05)] sm:grid-cols-[auto_1fr] sm:items-start"
+        >
+          <span className="flex size-9 items-center justify-center rounded-full bg-[#1D6B75] text-sm font-semibold text-white">
+            {index + 1}
+          </span>
+          <div>
+            <h3 className="text-base font-semibold text-[#1C1715]">{item.title}</h3>
+            <p className="mt-2 text-sm leading-6 text-[#62564D]">{item.body}</p>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+export async function TarotReadingContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.tarotReading.guide");
+  const copy = resolveToolLocaleCopy(spec, locale);
+  const valueItems = t.raw("valueItems") as readonly TextCard[];
+  const flowItems = t.raw("flowItems") as readonly TextCard[];
+  const marketingItems = t.raw("marketingItems") as readonly TextCard[];
+  const boundaryItems = t.raw("boundaryItems") as readonly TextCard[];
+  const faqItems = t.raw("faqItems") as readonly FaqItem[];
+  const toolUrl = new URL(localizedPath(locale, `tools/${spec.slug}`), siteConfig.url).href;
+  const toolJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    name: copy.title,
+    description: copy.description,
+    url: toolUrl,
+    applicationCategory: "LifestyleApplication",
+    operatingSystem: "Web",
+    inLanguage: locale,
+    isAccessibleForFree: true,
+  };
+
+  return (
+    <main className="min-h-screen bg-[#F7F6F2] text-[#111111]">
+      {/* eslint-disable-next-line @next/next/no-css-tags -- keep tarot-only styles off every /tools/[slug] page. */}
+      <link rel="stylesheet" href="/tools/tarot-reading.css" />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(toolJsonLd) }}
+      />
+      <section className="relative min-h-svh overflow-hidden bg-black text-[#F7F0DE]">
+        <TarotAtmosphere />
+        <HeroChrome locale={locale} />
+        <div className="tarot-stage-shell relative z-10 mx-auto flex min-h-svh w-full max-w-6xl flex-col items-center justify-center px-5 pb-28 pt-24 sm:px-8 md:pb-32 md:pt-28">
+          <div className="tarot-hero-intro mb-7 flex w-full max-w-2xl flex-col items-center text-center">
+            <div className="flex w-full items-center gap-5 text-[11px] font-semibold uppercase tracking-[0.28em] text-[#C4BCAE]/78">
+              <span className="h-px flex-1 bg-[#E8E1D2]/18" />
+              <span className="shrink-0">{t("heroDeck")}</span>
+              <span className="h-px flex-1 bg-[#E8E1D2]/18" />
+            </div>
+            <div className="mt-6 flex items-center gap-4 text-[11px] font-semibold uppercase tracking-[0.26em] text-[#C4BCAE]/75">
+              <span className="size-2 rounded-full bg-[#7FA26A] shadow-[0_0_16px_rgba(127,162,106,0.75)]" />
+              <span>{t("heroReady")}</span>
+            </div>
+          </div>
+          <h1 className="tarot-hero-intro max-w-4xl text-center text-3xl font-normal leading-tight tracking-[0.02em] text-[#D9D2C7] sm:text-4xl md:text-5xl">
+            {t("heroTitle")}
+          </h1>
+          <div className="tarot-widget-wrap mt-10 w-full">
+            <TarotReadingWidget />
+          </div>
+        </div>
+      </section>
+
+      <div className="mx-auto flex max-w-screen-2xl flex-col gap-16 px-5 py-16 sm:px-8 md:gap-20 md:py-24">
+        <section className="border-t border-[#E1D3B8] py-12 md:py-16">
+          <SectionHeader
+            eyebrow={t("valueEyebrow")}
+            heading={t("valueTitle")}
+            intro={t("valueIntro")}
+          />
+          <div className="mt-8">
+            <ToolCardGrid items={valueItems} columns="three" />
+          </div>
+        </section>
+
+        <section className="grid gap-8 border-t border-[#E1D3B8] py-12 md:grid-cols-[0.92fr_1.08fr] md:items-start md:py-16">
+          <div>
+            <SectionHeader
+              eyebrow={t("flowEyebrow")}
+              heading={t("flowTitle")}
+              intro={t("flowIntro")}
+            />
+            <div className="mt-6 flex items-center gap-3 text-sm font-semibold text-[#A3472F]">
+              <CopyCheck aria-hidden className="size-4" />
+              <span>{t("flowHint")}</span>
+            </div>
+          </div>
+          <TimelineRows items={flowItems} />
+        </section>
+
+        <section className="border-t border-[#E1D3B8] py-12 md:py-16">
+          <div className="mb-8 flex flex-col justify-between gap-4 md:flex-row md:items-end">
+            <SectionHeader
+              eyebrow={t("marketingEyebrow")}
+              heading={t("marketingTitle")}
+              intro={t("marketingIntro")}
+            />
+            <ArrowRight aria-hidden className="hidden size-8 text-[#1D6B75] md:block" />
+          </div>
+          <ToolCardGrid items={marketingItems} columns="three" />
+        </section>
+
+        <section className="grid gap-8 border-t border-[#E1D3B8] py-12 md:grid-cols-[1fr_0.92fr] md:items-start md:py-16">
+          <div>
+            <SectionHeader
+              eyebrow={t("faqEyebrow")}
+              heading={t("faqTitle")}
+              intro={t("faqIntro")}
+            />
+            <div className="mt-7">
+              <ToolDividedFaqList items={faqItems} />
+            </div>
+          </div>
+          <div>
+            <SectionHeader
+              eyebrow={t("boundaryEyebrow")}
+              heading={t("boundaryTitle")}
+              intro={t("boundaryIntro")}
+            />
+            <div className="mt-7">
+              <TimelineRows items={boundaryItems} />
+            </div>
+          </div>
+        </section>
+
+        <ToolCta
+          hint={t("ctaHint")}
+          primary={{ href: "/tools/social-profile-kit", label: t("ctaPrimary") }}
+          secondary={{ href: "/tools/product-name-generator", label: t("ctaSecondary") }}
+        />
+      </div>
+    </main>
+  );
+}

package/src/features/tools/tarot-reading/tarot-reading.spec.ts

@@ -0,0 +1,15 @@
+import type { ToolSpec } from "../types";
+
+export const tarotReadingSpec: ToolSpec = {
+  slug: "tarot-reading",
+  toolType: "generator",
+  riskLevel: "low",
+  seo: {
+    "publishedAt": "2026-07-03",
+    "updatedAt": "2026-07-10",
+    "readingTime": "5 min",
+    "featured": false,
+    "ogImage": "/brand/tomako-tarot-card-back.webp"
+  },
+  widget: {"id":"tarot-reading","mode":"custom"},
+};

package/src/features/tools/tarot-reading/widget/cards.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useTranslations } from "../../../../i18n/client";
+import type { AppLocale } from "../../../../i18n/locale";
+import {
+    getTarotPositionLabel,
+    type TarotReading,
+} from "../../../../lib/tools/tarot-reading";
+import { cn } from "@tomako/ui/cn";
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+import { tarotCardBackSrc } from "./constants";
+
+export function CardBack({
+  className,
+  priority = false,
+}: {
+  className?: string;
+  priority?: boolean;
+}) {
+  return (
+    <div
+      data-priority={priority ? "true" : undefined}
+      className={cn(
+        "pointer-events-none relative h-full w-full overflow-hidden rounded-[0.95rem] border border-[#E2C984]/55 bg-[#F8F1E0] shadow-[0_14px_34px_rgba(0,0,0,0.34)]",
+        className,
+      )}
+    >
+      <span
+        aria-hidden
+        className="absolute inset-0 bg-cover bg-center"
+        style={{ backgroundImage: `url(${tarotCardBackSrc})` }}
+      />
+      <span className="absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_rgba(87,62,22,0.18),inset_0_0_26px_rgba(255,255,255,0.2)]" />
+      <span className="absolute inset-0 rounded-[inherit] bg-[linear-gradient(120deg,rgba(255,255,255,0.2),transparent_38%,rgba(172,130,52,0.1)_74%,transparent)]" />
+    </div>
+  );
+}
+
+export function CardFace({
+  card,
+  priority = false,
+  className,
+}: {
+  card: TarotReading["cards"][number];
+  priority?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none relative h-full w-full overflow-hidden rounded-[0.6rem] border border-[#F3E4B5]/28 bg-[#0A0A0A] shadow-[0_22px_60px_rgba(0,0,0,0.48)]",
+        className,
+      )}
+    >
+      <Image
+        src={card.imageSrc}
+        alt={card.name}
+        fill
+        priority={priority}
+        sizes="(max-width: 768px) 160px, 260px"
+        className={cn(
+          "object-cover",
+          card.orientation === "reversed" ? "rotate-180" : "",
+        )}
+      />
+      <span
+        aria-hidden
+        className="absolute inset-0 rounded-[inherit] bg-[linear-gradient(180deg,rgba(0,0,0,0.18),transparent_22%,transparent_72%,rgba(0,0,0,0.18))]"
+      />
+      <span
+        aria-hidden
+        className="absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.08),inset_0_0_24px_rgba(0,0,0,0.28)]"
+      />
+    </div>
+  );
+}
+
+export function SelectedCardFigure({
+  card,
+  locale,
+  compact = false,
+  priority = false,
+  faceUp = true,
+  resultScale = false,
+}: {
+  card: TarotReading["cards"][number];
+  locale: AppLocale;
+  compact?: boolean;
+  priority?: boolean;
+  faceUp?: boolean;
+  resultScale?: boolean;
+}) {
+  const t = useTranslations("toolsPages.tarotReading.widget");
+
+  return (
+    <motion.article
+      className={cn(
+        "relative flex flex-col items-center text-center text-[#F8F1E0]",
+        compact ? "gap-1.5" : "gap-3",
+      )}
+      initial={{ opacity: 0, y: 22, scale: 0.92 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ duration: 0.68, ease: [0.2, 0.8, 0.2, 1] }}
+    >
+      <div
+        className={cn(
+          "relative [perspective:1200px]",
+          compact
+            ? resultScale
+              ? "h-[clamp(184px,18vh,220px)] w-[clamp(110px,10.8vh,132px)]"
+              : "h-[188px] w-[112px] md:h-[220px] md:w-[132px]"
+            : "h-[286px] w-[174px] md:h-[360px] md:w-[216px]",
+        )}
+      >
+        <motion.div
+          className="relative h-full w-full [transform-style:preserve-3d]"
+          initial={false}
+          animate={{ rotateY: faceUp ? 180 : 0 }}
+          transition={{ duration: 0.72, ease: [0.2, 0.78, 0.18, 1] }}
+        >
+          <div className="absolute inset-0 [backface-visibility:hidden]">
+            <CardBack priority={priority} />
+          </div>
+          <div className="absolute inset-0 [backface-visibility:hidden] [transform:rotateY(180deg)]">
+            <CardFace card={card} priority={priority} />
+            <div className="pointer-events-none absolute inset-x-0 top-4 px-2 text-center [text-shadow:0_2px_5px_rgba(0,0,0,0.9)]">
+              <h3 className={cn("font-semibold leading-tight", compact ? "text-lg" : "text-xl md:text-2xl")}>
+                {card.name}
+              </h3>
+              <p className={cn("mt-1 font-semibold", compact ? "text-sm" : "text-base")}>
+                {t(`orientation.${card.orientation}`)}
+              </p>
+            </div>
+            <p className={cn(
+              "pointer-events-none absolute inset-x-0 bottom-4 text-center font-semibold [text-shadow:0_2px_5px_rgba(0,0,0,0.92)]",
+              compact ? "text-lg" : "text-xl md:text-2xl",
+            )}>
+              {getTarotPositionLabel(locale, card.position)}
+            </p>
+          </div>
+        </motion.div>
+      </div>
+      {!compact ? (
+        <div className="max-w-[190px] rounded-[0.35rem] border border-[#F3F1EA]/35 bg-black/38 px-3 py-1 text-[10px] leading-4 text-[#D7D0C2] shadow-[0_0_18px_rgba(255,255,255,0.08)]">
+          {card.keywords.slice(0, 3).join("、")}
+        </div>
+      ) : null}
+    </motion.article>
+  );
+}

package/src/features/tools/tarot-reading/widget/constants.ts

@@ -0,0 +1,69 @@
+export const weakQuestionPattern = /^(test|testing|demo|123|111|abc|测试|随便|占卜)$/i;
+export const maxQuestionLength = 200;
+export const tarotCardBackSrc = "/brand/tomako-tarot-card-back.webp";
+
+export const ritualRays = Array.from({ length: 48 }, (_, index) => {
+  const angle = (index * 137.508 + (index % 9) * 7) % 360;
+  const length = 240 + (index % 7) * 46 + (index % 13 === 0 ? 240 : 0);
+  const start = 460 + (index % 9) * 48;
+
+  return {
+    id: `ray-${index}`,
+    angle,
+    length,
+    start,
+    mid: 66 + (index % 6) * 14,
+    width: index % 11 === 0 ? 1.35 : index % 4 === 0 ? 0.95 : 0.66,
+    opacity: index % 10 === 0 ? 0.62 : 0.36 + (index % 5) * 0.048,
+    delay: 0,
+  };
+});
+export const ritualStars = Array.from({ length: 26 }, (_, index) => {
+  const angle = ((index * 91.7 + 19) % 360) * (Math.PI / 180);
+  const ring = index % 5;
+  const radiusX = [15, 25, 36, 48, 60][ring];
+  const radiusY = [12, 22, 31, 42, 52][ring];
+
+  return {
+    id: `ritual-star-${index}`,
+    left: 50 + Math.cos(angle) * radiusX + Math.sin(index * 0.72) * 4,
+    top: 50 + Math.sin(angle) * radiusY + Math.cos(index * 0.61) * 3,
+    size: index % 19 === 0 ? 13 : index % 7 === 0 ? 6 : 2 + (index % 3),
+    opacity: index % 19 === 0 ? 0.7 : index % 7 === 0 ? 0.48 : 0.34,
+    delay: -((index * 0.23) % 3),
+  };
+});
+export const ritualSphereCards = Array.from({ length: 24 }, (_, index) => {
+  const ring = index % 5;
+  const yaw = (index * 47 + ring * 19 + Math.floor(index / 5) * 11) % 360;
+  const pitchBase = [-50, -26, -4, 22, 44][ring];
+  const radiusBase = [286, 336, 390, 328, 282][ring];
+
+  return {
+    id: `sphere-card-${index}`,
+    yaw,
+    pitch: pitchBase + Math.sin(index * 1.17) * 7,
+    radius: radiusBase + (index % 4) * 14,
+    tilt: -18 + (index % 9) * 4.5,
+    scale: 0.6 + (index % 8) * 0.043 + (ring === 2 ? 0.13 : 0),
+    opacity: ring === 2 ? 0.82 : 0.46 + (index % 5) * 0.06,
+    delay: (index % 14) * 0.026,
+  };
+});
+export const ritualStackCards = Array.from({ length: 24 }, (_, index) => {
+  const stack = index % 3;
+  const depth = Math.floor(index / 3);
+  const underlayOffset = 25 - depth;
+  const stackX = [-310, 0, 310][stack];
+
+  return {
+    id: `stack-card-${index}`,
+    stack,
+    depth,
+    x: stackX + underlayOffset * 0.62,
+    y: Math.sin(depth * 0.9) * 0.9 + underlayOffset * 0.14,
+    rotate: [-1.8, 0.5, 1.8][stack] + Math.sin(depth * 0.66) * 0.55,
+    delay: stack * 0.08 + depth * 0.01,
+    opacity: 0.42 + Math.min(depth, 16) * 0.018,
+  };
+});