iryx-ui 0.18.4 → 0.19.0

package/dist/theme/pricing-card.d.ts

@@ -0,0 +1,62 @@
+export declare const pricingCardTheme: import("tailwind-variants").TVReturnType<{
+    featured: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    name: string;
+    price: string;
+    amount: string;
+    period: string;
+    description: string;
+    features: string;
+    feature: string;
+    featureIcon: string;
+}, undefined, {
+    featured: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    name: string;
+    price: string;
+    amount: string;
+    period: string;
+    description: string;
+    features: string;
+    feature: string;
+    featureIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    featured: {
+        true: {
+            root: string;
+        };
+        false: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    header: string;
+    name: string;
+    price: string;
+    amount: string;
+    period: string;
+    description: string;
+    features: string;
+    feature: string;
+    featureIcon: string;
+}>>;
+export type PricingCardSlots = keyof ReturnType<typeof pricingCardTheme>;

package/dist/theme/pricing-card.js

@@ -0,0 +1,23 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/pricing-card.ts
+var t = e({
+	slots: {
+		root: "",
+		header: "flex items-center justify-between gap-2",
+		name: "font-medium",
+		price: "flex items-baseline gap-1.5",
+		amount: "text-4xl font-semibold tracking-tight tabular-nums",
+		period: "text-sm text-muted-foreground",
+		description: "mt-2 text-sm text-pretty text-muted-foreground",
+		features: "mt-6 flex flex-col gap-2.5",
+		feature: "flex items-start gap-2 text-sm",
+		featureIcon: "mt-0.5 size-4 shrink-0 text-primary"
+	},
+	variants: { featured: {
+		true: { root: "border-primary shadow-md ring-1 ring-primary/20" },
+		false: { root: "shadow-xs" }
+	} },
+	defaultVariants: { featured: !1 }
+});
+//#endregion
+export { t as pricingCardTheme };

package/dist/theme/radio-group.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		root: "",
 		wrapper: "flex items-start gap-2.5",
-		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
+		item: "aspect-square shrink-0 cursor-pointer rounded-full border border-border bg-background transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
 		indicator: "flex size-full items-center justify-center after:block after:rounded-full after:bg-primary",
 		content: "grid gap-1",
 		label: "text-sm leading-5 text-foreground select-none",

package/dist/theme/section.d.ts

@@ -0,0 +1,140 @@
+export declare const sectionTheme: import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: {};
+        muted: {
+            root: string;
+        };
+    };
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {
+            header: string;
+        };
+        center: {
+            header: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            body: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    eyebrow: string;
+    heading: string;
+    description: string;
+    body: string;
+}, undefined, {
+    tone: {
+        default: {};
+        muted: {
+            root: string;
+        };
+    };
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {
+            header: string;
+        };
+        center: {
+            header: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            body: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    eyebrow: string;
+    heading: string;
+    description: string;
+    body: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        default: {};
+        muted: {
+            root: string;
+        };
+    };
+    bordered: {
+        true: {
+            root: string;
+        };
+        false: {};
+    };
+    align: {
+        start: {
+            header: string;
+        };
+        center: {
+            header: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+    hasHeader: {
+        true: {
+            body: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    eyebrow: string;
+    heading: string;
+    description: string;
+    body: string;
+}>>;
+export type SectionSlots = keyof ReturnType<typeof sectionTheme>;

package/dist/theme/section.js

@@ -0,0 +1,48 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/section.ts
+var t = e({
+	slots: {
+		root: "w-full",
+		header: "flex flex-col gap-4",
+		eyebrow: "text-xs font-medium tracking-wide text-muted-foreground uppercase",
+		heading: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl",
+		description: "text-pretty text-muted-foreground",
+		body: ""
+	},
+	variants: {
+		tone: {
+			default: {},
+			muted: { root: "bg-muted/20" }
+		},
+		bordered: {
+			true: { root: "border-t border-border" },
+			false: {}
+		},
+		align: {
+			start: { header: "items-start text-left" },
+			center: { header: "mx-auto max-w-2xl items-center text-center" }
+		},
+		padding: {
+			none: {},
+			sm: { root: "py-12 sm:py-16" },
+			md: { root: "py-20 sm:py-24" },
+			lg: { root: "py-24 sm:py-32" }
+		},
+		hasHeader: {
+			true: { body: "mt-12" },
+			false: {}
+		}
+	},
+	compoundVariants: [{
+		align: "start",
+		class: { description: "max-w-2xl" }
+	}],
+	defaultVariants: {
+		tone: "default",
+		bordered: !1,
+		align: "center",
+		padding: "md"
+	}
+});
+//#endregion
+export { t as sectionTheme };

package/dist/theme/sidebar.js

@@ -8,7 +8,7 @@ var t = e({
 		footer: "flex shrink-0 items-center gap-2 border-t border-border px-3 py-3",
 		section: "flex flex-col gap-1",
 		sectionLabel: "px-2 pt-1 pb-0.5 text-xs font-medium tracking-wide text-muted-foreground uppercase",
-		link: "group/link relative flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-sm font-medium text-muted-foreground no-underline transition-colors outline-none select-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[active]:bg-accent data-[active]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		link: "group/link relative flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-sm font-medium text-muted-foreground no-underline transition-[color,background-color,border-color,box-shadow] outline-none select-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 data-[active]:bg-accent data-[active]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
 		linkLabel: "flex-1 truncate text-left",
 		linkBadge: "ml-auto shrink-0",
 		groupIcon: "ml-auto size-4 shrink-0 transition-[rotate] duration-200 ease-out group-data-[state=open]/link:rotate-90",

package/dist/theme/signature-pad.js

@@ -6,7 +6,7 @@ var n = t({
 		root: `relative flex flex-col ${e} h-auto overflow-hidden p-0 focus-within:ring-2 focus-within:ring-primary/50`,
 		canvas: "block w-full touch-none",
 		actions: "absolute top-2 right-2 flex items-center gap-1",
-		action: "inline-flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-3.5"
+		action: "inline-flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-40 [&_svg]:size-3.5"
 	},
 	variants: {
 		invalid: { true: { root: "border-red-500 focus-within:ring-red-500/40" } },

package/dist/theme/stepper.js

@@ -4,7 +4,7 @@ var t = e({
 	slots: {
 		root: "flex w-full",
 		item: "group relative flex flex-1 items-center gap-3 last:flex-none",
-		trigger: "flex items-center gap-3 rounded-xl text-left outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
+		trigger: "flex items-center gap-3 rounded-xl text-left transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50",
 		indicator: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-linear-to-b text-sm font-medium transition-[color,border-color] group-data-[state=active]:border-primary group-data-[state=active]:from-primary-from group-data-[state=active]:to-primary-to group-data-[state=active]:text-primary-foreground group-data-[state=completed]:border-primary group-data-[state=completed]:from-primary-from group-data-[state=completed]:to-primary-to group-data-[state=completed]:text-primary-foreground [&_svg]:size-4",
 		content: "flex flex-col gap-0.5",
 		title: "text-sm font-medium text-foreground",

package/dist/theme/switch.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		wrapper: "flex items-start gap-2.5",
-		root: "inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
+		root: "inline-flex shrink-0 cursor-pointer items-center rounded-full transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
 		thumb: "pointer-events-none block rounded-full bg-background shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5",
 		content: "grid gap-1",
 		label: "text-sm leading-5 font-medium text-foreground select-none",

package/dist/theme/table.js

@@ -8,14 +8,14 @@ var t = e({
 		tbody: "",
 		tr: "border-b border-border transition-colors last:border-b-0",
 		th: "border-b border-border px-3 py-3 text-start align-middle text-xs font-semibold tracking-wide text-muted-foreground uppercase",
-		sortButton: "inline-flex cursor-pointer items-center gap-1.5 rounded-md tracking-wide uppercase outline-none focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5 [&_svg]:shrink-0",
+		sortButton: "inline-flex cursor-pointer items-center gap-1.5 rounded-md tracking-wide uppercase transition-shadow outline-none focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-3.5 [&_svg]:shrink-0",
 		sortIcon: "text-muted-foreground/70 transition-colors",
 		td: "px-3 py-3 align-middle text-foreground",
 		gutter: "w-px px-3 py-3 align-middle",
 		headGutter: "w-px border-b border-border px-3 py-3 align-middle",
 		actions: "w-px px-3 py-3 text-end align-middle whitespace-nowrap",
 		headActions: "w-px border-b border-border px-3 py-3 align-middle",
-		expandButton: "inline-flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-[transform,color,background-color] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
+		expandButton: "inline-flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-[transform,color,background-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4",
 		expandedRow: "bg-muted/30",
 		expandedCell: "p-0",
 		empty: "px-3 py-10 text-center text-sm text-muted-foreground",

package/dist/theme/tabs.js

@@ -5,7 +5,7 @@ var t = e({
 		root: "flex flex-col gap-4",
 		list: "relative flex shrink-0 items-center gap-1",
 		indicator: "absolute left-0 transition-[translate,width,height] duration-200 ease-out",
-		trigger: "relative z-10 inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+		trigger: "relative z-10 inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
 		content: "outline-none"
 	},
 	variants: {

package/dist/theme/tags-input.js

@@ -6,9 +6,9 @@ var n = t({
 		root: `flex flex-wrap items-center ${e} h-auto cursor-text focus-within:ring-2 focus-within:ring-primary/50`,
 		tag: "inline-flex shrink-0 items-center rounded-md border border-border bg-background font-medium whitespace-nowrap text-foreground data-[state=active]:border-primary data-[state=active]:bg-accent",
 		tagText: "truncate",
-		tagDelete: "flex shrink-0 items-center rounded-sm text-muted-foreground transition-colors outline-none hover:text-danger focus-visible:ring-2 focus-visible:ring-primary/50",
+		tagDelete: "flex shrink-0 items-center rounded-sm text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-danger focus-visible:ring-2 focus-visible:ring-primary/50",
 		input: "min-w-24 flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
-		clear: "flex shrink-0 items-center rounded-md text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50"
+		clear: "flex shrink-0 items-center rounded-md text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50"
 	},
 	variants: {
 		size: {

package/dist/theme/testimonial-card.d.ts

@@ -0,0 +1,53 @@
+export declare const testimonialCardTheme: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            quote: string;
+        };
+        md: {};
+        lg: {
+            quote: string;
+        };
+    };
+}, {
+    root: string;
+    quote: string;
+    author: string;
+    identity: string;
+    name: string;
+    role: string;
+}, undefined, {
+    size: {
+        sm: {
+            quote: string;
+        };
+        md: {};
+        lg: {
+            quote: string;
+        };
+    };
+}, {
+    root: string;
+    quote: string;
+    author: string;
+    identity: string;
+    name: string;
+    role: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            quote: string;
+        };
+        md: {};
+        lg: {
+            quote: string;
+        };
+    };
+}, {
+    root: string;
+    quote: string;
+    author: string;
+    identity: string;
+    name: string;
+    role: string;
+}>>;
+export type TestimonialCardSlots = keyof ReturnType<typeof testimonialCardTheme>;

package/dist/theme/testimonial-card.js

@@ -0,0 +1,20 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/testimonial-card.ts
+var t = e({
+	slots: {
+		root: "shadow-xs",
+		quote: "text-pretty",
+		author: "flex items-center gap-3",
+		identity: "min-w-0",
+		name: "truncate text-sm font-medium",
+		role: "truncate text-xs text-muted-foreground"
+	},
+	variants: { size: {
+		sm: { quote: "text-sm" },
+		md: {},
+		lg: { quote: "text-lg" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as testimonialCardTheme };

package/dist/theme/toast.js

@@ -8,8 +8,8 @@ var t = e({
 		content: "min-w-0 flex-1",
 		title: "text-sm font-medium text-foreground",
 		description: "text-sm text-muted-foreground",
-		action: "shrink-0 self-center rounded-lg border border-border px-2.5 py-1 text-xs font-medium transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50",
-		close: "-m-1 shrink-0 self-start rounded-lg p-1 text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
+		action: "shrink-0 self-center rounded-lg border border-border px-2.5 py-1 text-xs font-medium transition-[color,background-color,border-color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-primary/50",
+		close: "-m-1 shrink-0 self-start rounded-lg p-1 text-muted-foreground transition-[color,background-color,border-color,box-shadow] outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/50 [&_svg]:size-4"
 	},
 	variants: {
 		variant: {

package/dist/theme/tree.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "flex w-full list-none flex-col gap-0.5 outline-none select-none",
-		item: "flex cursor-pointer items-center gap-1.5 rounded-lg py-1.5 pr-2 text-sm text-foreground outline-none hover:bg-accent/60 focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-accent data-[selected]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+		item: "flex cursor-pointer items-center gap-1.5 rounded-lg py-1.5 pr-2 text-sm text-foreground transition-shadow outline-none hover:bg-accent/60 focus-visible:ring-2 focus-visible:ring-primary/50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-accent data-[selected]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
 		expander: "shrink-0 text-muted-foreground transition-transform duration-200 data-[expanded]:rotate-90",
 		spacer: "shrink-0",
 		icon: "shrink-0 text-muted-foreground",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.18.4",
+  "version": "0.19.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",
@@ -30,6 +30,10 @@
       "types": "./dist/nuxt.d.ts",
       "default": "./dist/nuxt.js"
     },
+    "./marketing": {
+      "types": "./dist/marketing.d.ts",
+      "default": "./dist/marketing.js"
+    },
     "./theme.css": "./theme.css"
   },
   "module": "./dist/index.js",

package/theme.css

@@ -621,3 +621,175 @@
     transform: translate3d(calc(var(--reka-toast-swipe-end-x, 0) + 100%), var(--reka-toast-swipe-end-y, 0), 0);
   }
 }
+
+/*
+ * IHero's ground. Two layers that compose: a ruled grid for structure, and a
+ * moving wash of the brand hue behind it. Both sit inside the hero and scroll
+ * away with it, so neither is a page background.
+ *
+ * These are plain classes rather than utilities because the effect is built
+ * from pseudo-elements, masks and keyframes — none of which a class list on an
+ * element can express.
+ */
+.iryx-hero {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+/*
+ * `--iryx-border` is the token component borders already use, so the ruling
+ * follows light and dark without a second rule.
+ */
+.iryx-hero-grid {
+  position: absolute;
+  inset: -4rem 0 -3rem;
+  z-index: -10;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, var(--iryx-border) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--iryx-border) 1px, transparent 1px);
+  background-size: 72px 72px;
+  opacity: 0.5;
+  /* Fades in every direction from the middle, so it ends rather than stops. */
+  mask-image: radial-gradient(80% 90% at 50% 25%, black 0%, black 30%, transparent 76%);
+}
+
+/*
+ * The `aurora` backdrop: two counter-rotating conic sweeps, blurred.
+ *
+ * Conic rather than radial because a radial glow has no direction — it sits
+ * there. A sweep turns, so the colour arrives and leaves, which is what makes
+ * it read as motion at a speed nobody has to watch.
+ */
+.iryx-hero-aurora {
+  position: absolute;
+  inset: -18rem 0 auto;
+  height: 52rem;
+  z-index: -20;
+  pointer-events: none;
+  /* Elliptical fade, so the light has no edge of its own anywhere. */
+  mask-image: radial-gradient(60% 55% at 50% 45%, black 0%, black 35%, transparent 78%);
+}
+
+/*
+ * Blur plus opacity, never a `filter` on something masked: `filter` applies
+ * before `mask`, so a blurred masked shape comes back with a hard edge.
+ */
+.iryx-hero-aurora::before,
+.iryx-hero-aurora::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  border-radius: 9999px;
+  filter: blur(70px);
+  will-change: transform;
+}
+
+.iryx-hero-aurora::before {
+  width: 62rem;
+  height: 62rem;
+  opacity: 0.3;
+  background: conic-gradient(
+    from 90deg,
+    var(--iryx-primary) 0deg,
+    transparent 70deg,
+    var(--iryx-primary-to) 160deg,
+    transparent 250deg,
+    var(--iryx-primary) 360deg
+  );
+  animation: iryx-hero-sweep 44s linear infinite;
+}
+
+.iryx-hero-aurora::after {
+  width: 42rem;
+  height: 42rem;
+  opacity: 0.22;
+  background: conic-gradient(
+    from 210deg,
+    transparent 0deg,
+    var(--iryx-primary-to) 120deg,
+    transparent 220deg,
+    var(--iryx-primary) 330deg,
+    transparent 360deg
+  );
+  animation: iryx-hero-sweep 63s linear infinite reverse;
+}
+
+@keyframes iryx-hero-sweep {
+  to { transform: rotate(1turn); }
+}
+
+/*
+ * The wash is barely there in light. It reads as light in a room, and a room
+ * that is already white has nothing left to light — at the dark appearance's
+ * strength the same gradient is a stain on the paper rather than a glow.
+ */
+:root:not(.dark) .iryx-hero-aurora::before {
+  opacity: 0.1;
+}
+
+:root:not(.dark) .iryx-hero-aurora::after {
+  opacity: 0.07;
+}
+
+/* The `bloom` backdrop: the same hue held still, as two drifting blobs. */
+.iryx-hero-bloom {
+  position: absolute;
+  inset: -8rem 0 auto;
+  height: 40rem;
+  z-index: -20;
+  pointer-events: none;
+  /* Faded out at the foot, or the hero's own clip cuts the glow off flat. */
+  mask-image: linear-gradient(to bottom, black 45%, transparent 92%);
+}
+
+.iryx-hero-bloom::before,
+.iryx-hero-bloom::after {
+  content: "";
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(90px);
+  will-change: transform;
+}
+
+.iryx-hero-bloom::before {
+  left: 8%;
+  top: -6rem;
+  width: 34rem;
+  height: 34rem;
+  background: var(--iryx-primary);
+  opacity: 0.22;
+  animation: iryx-hero-drift-a 24s ease-in-out infinite alternate;
+}
+
+.iryx-hero-bloom::after {
+  right: 6%;
+  top: 2rem;
+  width: 26rem;
+  height: 26rem;
+  background: var(--iryx-primary-to);
+  opacity: 0.18;
+  animation: iryx-hero-drift-b 19s ease-in-out infinite alternate;
+}
+
+/* Transform only — a blur this size repainted per frame would cost real time. */
+@keyframes iryx-hero-drift-a {
+  from { transform: translate3d(0, 0, 0) scale(1); }
+  to { transform: translate3d(6rem, 2rem, 0) scale(1.15); }
+}
+
+@keyframes iryx-hero-drift-b {
+  from { transform: translate3d(0, 0, 0) scale(1.1); }
+  to { transform: translate3d(-5rem, 3rem, 0) scale(0.95); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .iryx-hero-aurora::before,
+  .iryx-hero-aurora::after,
+  .iryx-hero-bloom::before,
+  .iryx-hero-bloom::after {
+    animation: none;
+  }
+}