astralkit 0.3.0 → 0.3.2

package/primitives/effects.css

@@ -1,388 +1,388 @@
-
-
-/* Effects primitives — mesh gradients, noise, glow, glass, borders */
-
-
-/* ══════════════════════════════════════════════
-   Mesh Gradient Backgrounds
-   Usage: <section class="ak-mesh-dark">
-   Override colors via --ak-mesh-color-* vars.
-   ══════════════════════════════════════════════ */
-
-.ak-mesh-dark {
-  --ak-mesh-color-1: hsla(265, 90%, 55%, 0.55);
-  --ak-mesh-color-2: hsla(220, 85%, 60%, 0.40);
-  --ak-mesh-color-3: hsla(185, 80%, 50%, 0.30);
-  --ak-mesh-color-4: hsla(300, 70%, 55%, 0.25);
-  --ak-mesh-base: #0a0a0f;
-
-  background-color: var(--ak-mesh-base);
-  background-image:
-    radial-gradient(ellipse 80% 60% at 20% 10%,  var(--ak-mesh-color-1) 0%, transparent 70%),
-    radial-gradient(ellipse 60% 50% at 80% 20%,  var(--ak-mesh-color-2) 0%, transparent 65%),
-    radial-gradient(ellipse 70% 60% at 50% 80%,  var(--ak-mesh-color-3) 0%, transparent 65%),
-    radial-gradient(ellipse 50% 40% at 90% 70%,  var(--ak-mesh-color-4) 0%, transparent 60%);
-}
-
-.ak-mesh-light {
-  --ak-mesh-color-1: hsla(265, 80%, 70%, 0.18);
-  --ak-mesh-color-2: hsla(210, 90%, 65%, 0.15);
-  --ak-mesh-color-3: hsla(320, 70%, 75%, 0.12);
-  --ak-mesh-color-4: hsla(175, 70%, 60%, 0.10);
-  --ak-mesh-base: #fafafa;
-
-  background-color: var(--ak-mesh-base);
-  background-image:
-    radial-gradient(ellipse 70% 50% at 20% 15%,  var(--ak-mesh-color-1) 0%, transparent 65%),
-    radial-gradient(ellipse 60% 45% at 80% 10%,  var(--ak-mesh-color-2) 0%, transparent 60%),
-    radial-gradient(ellipse 80% 50% at 50% 90%,  var(--ak-mesh-color-3) 0%, transparent 65%),
-    radial-gradient(ellipse 55% 40% at 85% 75%,  var(--ak-mesh-color-4) 0%, transparent 55%);
-}
-
-/* AstralKit branded mesh (violet/blue/teal on deep purple) */
-.ak-mesh-astral {
-  --ak-mesh-base: #0D0622;
-  background-color: var(--ak-mesh-base);
-  background-image:
-    radial-gradient(ellipse 80% 55% at 15% 15%,  hsla(258, 100%, 60%, 0.60) 0%, transparent 70%),
-    radial-gradient(ellipse 65% 50% at 82% 18%,  hsla(220, 90%, 58%, 0.40) 0%, transparent 65%),
-    radial-gradient(ellipse 70% 55% at 50% 85%,  hsla(195, 85%, 50%, 0.32) 0%, transparent 65%),
-    radial-gradient(ellipse 55% 40% at 90% 72%,  hsla(280, 75%, 55%, 0.28) 0%, transparent 60%);
-}
-
-
-/* ══════════════════════════════════════════════
-   Noise / Grain Overlay
-   Usage: <section class="ak-mesh-dark ak-noise">
-   Adds film grain via ::before pseudo-element.
-   ══════════════════════════════════════════════ */
-
-.ak-noise {
-  position: relative;
-}
-.ak-noise::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 200px 200px;
-  opacity: 0.05;
-  mix-blend-mode: overlay;
-  pointer-events: none;
-  z-index: 1;
-}
-
-/* Light mode: stronger noise, multiply blend */
-.ak-noise-light {
-  position: relative;
-}
-.ak-noise-light::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-  background-repeat: repeat;
-  background-size: 200px 200px;
-  opacity: 0.10;
-  mix-blend-mode: multiply;
-  pointer-events: none;
-  z-index: 1;
-}
-
-
-/* ══════════════════════════════════════════════
-   Card Glow on Hover
-   Usage: <div class="ak-card-shell ak-card-glow">
-   ══════════════════════════════════════════════ */
-
-.ak-card-glow {
-  transition: box-shadow var(--duration-ak-base, 150ms) var(--ease-ak-default, ease);
-}
-.ak-card-glow:hover {
-  box-shadow:
-    0 0 0 1px hsla(265, 90%, 60%, 0.20),
-    0 8px 32px -4px hsla(265, 90%, 60%, 0.25),
-    0 0 48px -8px hsla(265, 90%, 60%, 0.15);
-}
-
-/* Neutral glow (no accent color) — works on any theme */
-.ak-card-glow-neutral {
-  transition: box-shadow var(--duration-ak-base, 150ms) var(--ease-ak-default, ease);
-}
-.ak-card-glow-neutral:hover {
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.12),
-    0 8px 32px -4px rgba(0, 0, 0, 0.4),
-    0 0 60px -12px rgba(255, 255, 255, 0.06);
-}
-
-
-/* ══════════════════════════════════════════════
-   Text Glow (dark backgrounds only)
-   Usage: <h1 class="ak-text-glow">
-   ══════════════════════════════════════════════ */
-
-.ak-text-glow {
-  text-shadow:
-    0 0 20px rgba(129, 140, 248, 0.6),
-    0 0 60px rgba(129, 140, 248, 0.25);
-}
-
-/* Intense neon — use on single accent words, not full paragraphs */
-.ak-text-glow-intense {
-  color: #a5b4fc;
-  text-shadow:
-    0 0  4px rgba(165, 180, 252, 0.9),
-    0 0 16px rgba(165, 180, 252, 0.6),
-    0 0 40px rgba(129, 140, 248, 0.4),
-    0 0 80px rgba(99, 102, 241, 0.2);
-}
-
-
-/* ══════════════════════════════════════════════
-   Section Spotlight
-   Radial glow behind section content.
-   Usage: <section class="ak-spotlight-section">
-   ══════════════════════════════════════════════ */
-
-.ak-spotlight-section {
-  position: relative;
-  isolation: isolate;
-}
-.ak-spotlight-section::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(
-    ellipse 60% 50% at 50% 0%,
-    hsla(258, 80%, 70%, 0.15) 0%,
-    transparent 70%
-  );
-  pointer-events: none;
-  z-index: -1;
-}
-
-
-/* ══════════════════════════════════════════════
-   Section Fade Divider
-   Gradient transition between sections.
-   Usage: <div class="ak-section-fade">
-   ══════════════════════════════════════════════ */
-
-.ak-section-fade {
-  background: linear-gradient(
-    to bottom,
-    var(--color-ak-bg) 0%,
-    var(--color-ak-surface-2) 100%
-  );
-}
-
-.ak-section-fade-reverse {
-  background: linear-gradient(
-    to bottom,
-    var(--color-ak-surface-2) 0%,
-    var(--color-ak-bg) 100%
-  );
-}
-
-
-/* ══════════════════════════════════════════════
-   Gradient Border (Static)
-   Conic-gradient border on cards.
-   Usage: <div class="ak-gradient-border">
-   ══════════════════════════════════════════════ */
-
-.ak-gradient-border {
-  --ak-gb-width: 1px;
-  --ak-gb-radius: var(--radius-ak-lg, 0.75rem);
-  --ak-gb-bg: var(--color-ak-surface, #ffffff);
-
-  position: relative;
-  border-radius: var(--ak-gb-radius);
-  background: var(--ak-gb-bg);
-  background-clip: padding-box;
-  border: var(--ak-gb-width) solid transparent;
-}
-.ak-gradient-border::before {
-  content: "";
-  position: absolute;
-  inset: calc(var(--ak-gb-width) * -1);
-  border-radius: inherit;
-  z-index: -1;
-  background: conic-gradient(
-    from 180deg at 50% 50%,
-    hsla(265, 80%, 65%, 0.8),
-    hsla(220, 90%, 60%, 0.6),
-    hsla(195, 85%, 55%, 0.5),
-    hsla(265, 80%, 65%, 0.8)
-  );
-}
-
-.dark .ak-gradient-border {
-  --ak-gb-bg: var(--color-ak-surface, #18191b);
-}
-
-
-/* ══════════════════════════════════════════════
-   Animated Gradient Border (Rotating)
-   Requires @property — Chrome/Edge, Safari 16.4+, Firefox 128+.
-   Usage: <div class="ak-animated-border">
-   ══════════════════════════════════════════════ */
-
-@property --ak-border-angle {
-  syntax: "<angle>";
-  inherits: false;
-  initial-value: 0deg;
-}
-
-.ak-animated-border {
-  --ak-ab-width: 1px;
-  --ak-ab-radius: var(--radius-ak-lg, 0.75rem);
-  --ak-ab-bg: var(--color-ak-surface, #18191b);
-
-  position: relative;
-  border-radius: var(--ak-ab-radius);
-  background: var(--ak-ab-bg);
-  background-clip: padding-box;
-  border: var(--ak-ab-width) solid transparent;
-  animation: ak-border-spin 4s linear infinite;
-}
-
-/* Glow layer (blurred behind) */
-.ak-animated-border::before {
-  content: "";
-  position: absolute;
-  inset: calc(var(--ak-ab-width) * -1 - 4px);
-  border-radius: calc(var(--ak-ab-radius) + 4px);
-  z-index: -2;
-  background: conic-gradient(
-    from var(--ak-border-angle),
-    transparent 20%,
-    hsla(265, 90%, 60%, 0.6) 40%,
-    hsla(220, 85%, 60%, 0.4) 55%,
-    transparent 70%
-  );
-  filter: blur(12px);
-  opacity: 0.8;
-}
-
-/* Border layer */
-.ak-animated-border::after {
-  content: "";
-  position: absolute;
-  inset: calc(var(--ak-ab-width) * -1);
-  border-radius: inherit;
-  z-index: -1;
-  background: conic-gradient(
-    from var(--ak-border-angle),
-    transparent 20%,
-    hsla(265, 90%, 65%, 1) 40%,
-    hsla(220, 85%, 65%, 0.8) 55%,
-    transparent 70%
-  );
-}
-
-@keyframes ak-border-spin {
-  to { --ak-border-angle: 360deg; }
-}
-
-
-/* ══════════════════════════════════════════════
-   Ambient Glow Behind Images
-   Usage: <div class="ak-ambient-glow"><img ...></div>
-   ══════════════════════════════════════════════ */
-
-.ak-ambient-glow {
-  position: relative;
-  display: inline-block;
-}
-.ak-ambient-glow::before {
-  content: "";
-  position: absolute;
-  inset: -20% -15%;
-  background: radial-gradient(
-    ellipse at center,
-    hsla(265, 90%, 60%, 0.35) 0%,
-    hsla(220, 80%, 55%, 0.15) 45%,
-    transparent 70%
-  );
-  filter: blur(40px);
-  z-index: -1;
-  pointer-events: none;
-}
-
-
-/* ══════════════════════════════════════════════
-   Frosted Nav Bar
-   Usage: <nav class="ak-nav-frosted">
-   ══════════════════════════════════════════════ */
-
-.ak-nav-frosted {
-  background: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(16px) saturate(140%);
-  -webkit-backdrop-filter: blur(16px) saturate(140%);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-}
-
-.dark .ak-nav-frosted {
-  background: rgba(17, 17, 19, 0.70);
-  backdrop-filter: blur(16px) saturate(160%);
-  -webkit-backdrop-filter: blur(16px) saturate(160%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-
-/* ══════════════════════════════════════════════
-   Button Neon Glow (dark backgrounds)
-   Usage: <button class="ak-btn-neon">
-   ══════════════════════════════════════════════ */
-
-.ak-btn-neon {
-  transition:
-    box-shadow var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease),
-    transform var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease);
-}
-.ak-btn-neon:hover {
-  transform: translateY(-1px);
-  box-shadow:
-    0 0 8px 2px hsla(258, 100%, 60%, 0.50),
-    0 0 24px 4px hsla(258, 100%, 60%, 0.30),
-    0 0 48px 8px hsla(258, 100%, 60%, 0.15);
-}
-.ak-btn-neon:active {
-  transform: translateY(0);
-  box-shadow: 0 0 12px 2px hsla(258, 100%, 60%, 0.40);
-}
-
-
-/* ══════════════════════════════════════════════
-   Spotlight Card (cursor-following glow)
-   Requires minimal JS to set --ak-spotlight-x/y.
-   Usage: <div class="ak-spotlight-card">
-   ══════════════════════════════════════════════ */
-
-.ak-spotlight-card {
-  position: relative;
-  overflow: hidden;
-}
-.ak-spotlight-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: radial-gradient(
-    circle 200px at var(--ak-spotlight-x, 50%) var(--ak-spotlight-y, 50%),
-    rgba(129, 140, 248, 0.12) 0%,
-    transparent 100%
-  );
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 300ms ease;
-  z-index: 1;
-}
-.ak-spotlight-card:hover::before {
-  opacity: 1;
-}
-
+
+
+/* Effects primitives — mesh gradients, noise, glow, glass, borders */
+
+
+/* ══════════════════════════════════════════════
+   Mesh Gradient Backgrounds
+   Usage: <section class="ak-mesh-dark">
+   Override colors via --ak-mesh-color-* vars.
+   ══════════════════════════════════════════════ */
+
+.ak-mesh-dark {
+  --ak-mesh-color-1: hsla(265, 90%, 55%, 0.55);
+  --ak-mesh-color-2: hsla(220, 85%, 60%, 0.40);
+  --ak-mesh-color-3: hsla(185, 80%, 50%, 0.30);
+  --ak-mesh-color-4: hsla(300, 70%, 55%, 0.25);
+  --ak-mesh-base: #0a0a0f;
+
+  background-color: var(--ak-mesh-base);
+  background-image:
+    radial-gradient(ellipse 80% 60% at 20% 10%,  var(--ak-mesh-color-1) 0%, transparent 70%),
+    radial-gradient(ellipse 60% 50% at 80% 20%,  var(--ak-mesh-color-2) 0%, transparent 65%),
+    radial-gradient(ellipse 70% 60% at 50% 80%,  var(--ak-mesh-color-3) 0%, transparent 65%),
+    radial-gradient(ellipse 50% 40% at 90% 70%,  var(--ak-mesh-color-4) 0%, transparent 60%);
+}
+
+.ak-mesh-light {
+  --ak-mesh-color-1: hsla(265, 80%, 70%, 0.18);
+  --ak-mesh-color-2: hsla(210, 90%, 65%, 0.15);
+  --ak-mesh-color-3: hsla(320, 70%, 75%, 0.12);
+  --ak-mesh-color-4: hsla(175, 70%, 60%, 0.10);
+  --ak-mesh-base: #fafafa;
+
+  background-color: var(--ak-mesh-base);
+  background-image:
+    radial-gradient(ellipse 70% 50% at 20% 15%,  var(--ak-mesh-color-1) 0%, transparent 65%),
+    radial-gradient(ellipse 60% 45% at 80% 10%,  var(--ak-mesh-color-2) 0%, transparent 60%),
+    radial-gradient(ellipse 80% 50% at 50% 90%,  var(--ak-mesh-color-3) 0%, transparent 65%),
+    radial-gradient(ellipse 55% 40% at 85% 75%,  var(--ak-mesh-color-4) 0%, transparent 55%);
+}
+
+/* AstralKit branded mesh (violet/blue/teal on deep purple) */
+.ak-mesh-astral {
+  --ak-mesh-base: #0D0622;
+  background-color: var(--ak-mesh-base);
+  background-image:
+    radial-gradient(ellipse 80% 55% at 15% 15%,  hsla(258, 100%, 60%, 0.60) 0%, transparent 70%),
+    radial-gradient(ellipse 65% 50% at 82% 18%,  hsla(220, 90%, 58%, 0.40) 0%, transparent 65%),
+    radial-gradient(ellipse 70% 55% at 50% 85%,  hsla(195, 85%, 50%, 0.32) 0%, transparent 65%),
+    radial-gradient(ellipse 55% 40% at 90% 72%,  hsla(280, 75%, 55%, 0.28) 0%, transparent 60%);
+}
+
+
+/* ══════════════════════════════════════════════
+   Noise / Grain Overlay
+   Usage: <section class="ak-mesh-dark ak-noise">
+   Adds film grain via ::before pseudo-element.
+   ══════════════════════════════════════════════ */
+
+.ak-noise {
+  position: relative;
+}
+.ak-noise::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 200px 200px;
+  opacity: 0.05;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Light mode: stronger noise, multiply blend */
+.ak-noise-light {
+  position: relative;
+}
+.ak-noise-light::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 200px 200px;
+  opacity: 0.10;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+  z-index: 1;
+}
+
+
+/* ══════════════════════════════════════════════
+   Card Glow on Hover
+   Usage: <div class="ak-card-shell ak-card-glow">
+   ══════════════════════════════════════════════ */
+
+.ak-card-glow {
+  transition: box-shadow var(--duration-ak-base, 150ms) var(--ease-ak-default, ease);
+}
+.ak-card-glow:hover {
+  box-shadow:
+    0 0 0 1px hsla(265, 90%, 60%, 0.20),
+    0 8px 32px -4px hsla(265, 90%, 60%, 0.25),
+    0 0 48px -8px hsla(265, 90%, 60%, 0.15);
+}
+
+/* Neutral glow (no accent color) — works on any theme */
+.ak-card-glow-neutral {
+  transition: box-shadow var(--duration-ak-base, 150ms) var(--ease-ak-default, ease);
+}
+.ak-card-glow-neutral:hover {
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.12),
+    0 8px 32px -4px rgba(0, 0, 0, 0.4),
+    0 0 60px -12px rgba(255, 255, 255, 0.06);
+}
+
+
+/* ══════════════════════════════════════════════
+   Text Glow (dark backgrounds only)
+   Usage: <h1 class="ak-text-glow">
+   ══════════════════════════════════════════════ */
+
+.ak-text-glow {
+  text-shadow:
+    0 0 20px rgba(129, 140, 248, 0.6),
+    0 0 60px rgba(129, 140, 248, 0.25);
+}
+
+/* Intense neon — use on single accent words, not full paragraphs */
+.ak-text-glow-intense {
+  color: #a5b4fc;
+  text-shadow:
+    0 0  4px rgba(165, 180, 252, 0.9),
+    0 0 16px rgba(165, 180, 252, 0.6),
+    0 0 40px rgba(129, 140, 248, 0.4),
+    0 0 80px rgba(99, 102, 241, 0.2);
+}
+
+
+/* ══════════════════════════════════════════════
+   Section Spotlight
+   Radial glow behind section content.
+   Usage: <section class="ak-spotlight-section">
+   ══════════════════════════════════════════════ */
+
+.ak-spotlight-section {
+  position: relative;
+  isolation: isolate;
+}
+.ak-spotlight-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    ellipse 60% 50% at 50% 0%,
+    hsla(258, 80%, 70%, 0.15) 0%,
+    transparent 70%
+  );
+  pointer-events: none;
+  z-index: -1;
+}
+
+
+/* ══════════════════════════════════════════════
+   Section Fade Divider
+   Gradient transition between sections.
+   Usage: <div class="ak-section-fade">
+   ══════════════════════════════════════════════ */
+
+.ak-section-fade {
+  background: linear-gradient(
+    to bottom,
+    var(--color-ak-bg) 0%,
+    var(--color-ak-surface-2) 100%
+  );
+}
+
+.ak-section-fade-reverse {
+  background: linear-gradient(
+    to bottom,
+    var(--color-ak-surface-2) 0%,
+    var(--color-ak-bg) 100%
+  );
+}
+
+
+/* ══════════════════════════════════════════════
+   Gradient Border (Static)
+   Conic-gradient border on cards.
+   Usage: <div class="ak-gradient-border">
+   ══════════════════════════════════════════════ */
+
+.ak-gradient-border {
+  --ak-gb-width: 1px;
+  --ak-gb-radius: var(--radius-ak-lg, 0.75rem);
+  --ak-gb-bg: var(--color-ak-surface, #ffffff);
+
+  position: relative;
+  border-radius: var(--ak-gb-radius);
+  background: var(--ak-gb-bg);
+  background-clip: padding-box;
+  border: var(--ak-gb-width) solid transparent;
+}
+.ak-gradient-border::before {
+  content: "";
+  position: absolute;
+  inset: calc(var(--ak-gb-width) * -1);
+  border-radius: inherit;
+  z-index: -1;
+  background: conic-gradient(
+    from 180deg at 50% 50%,
+    hsla(265, 80%, 65%, 0.8),
+    hsla(220, 90%, 60%, 0.6),
+    hsla(195, 85%, 55%, 0.5),
+    hsla(265, 80%, 65%, 0.8)
+  );
+}
+
+.dark .ak-gradient-border {
+  --ak-gb-bg: var(--color-ak-surface, #18191b);
+}
+
+
+/* ══════════════════════════════════════════════
+   Animated Gradient Border (Rotating)
+   Requires @property — Chrome/Edge, Safari 16.4+, Firefox 128+.
+   Usage: <div class="ak-animated-border">
+   ══════════════════════════════════════════════ */
+
+@property --ak-border-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.ak-animated-border {
+  --ak-ab-width: 1px;
+  --ak-ab-radius: var(--radius-ak-lg, 0.75rem);
+  --ak-ab-bg: var(--color-ak-surface, #18191b);
+
+  position: relative;
+  border-radius: var(--ak-ab-radius);
+  background: var(--ak-ab-bg);
+  background-clip: padding-box;
+  border: var(--ak-ab-width) solid transparent;
+  animation: ak-border-spin 4s linear infinite;
+}
+
+/* Glow layer (blurred behind) */
+.ak-animated-border::before {
+  content: "";
+  position: absolute;
+  inset: calc(var(--ak-ab-width) * -1 - 4px);
+  border-radius: calc(var(--ak-ab-radius) + 4px);
+  z-index: -2;
+  background: conic-gradient(
+    from var(--ak-border-angle),
+    transparent 20%,
+    hsla(265, 90%, 60%, 0.6) 40%,
+    hsla(220, 85%, 60%, 0.4) 55%,
+    transparent 70%
+  );
+  filter: blur(12px);
+  opacity: 0.8;
+}
+
+/* Border layer */
+.ak-animated-border::after {
+  content: "";
+  position: absolute;
+  inset: calc(var(--ak-ab-width) * -1);
+  border-radius: inherit;
+  z-index: -1;
+  background: conic-gradient(
+    from var(--ak-border-angle),
+    transparent 20%,
+    hsla(265, 90%, 65%, 1) 40%,
+    hsla(220, 85%, 65%, 0.8) 55%,
+    transparent 70%
+  );
+}
+
+@keyframes ak-border-spin {
+  to { --ak-border-angle: 360deg; }
+}
+
+
+/* ══════════════════════════════════════════════
+   Ambient Glow Behind Images
+   Usage: <div class="ak-ambient-glow"><img ...></div>
+   ══════════════════════════════════════════════ */
+
+.ak-ambient-glow {
+  position: relative;
+  display: inline-block;
+}
+.ak-ambient-glow::before {
+  content: "";
+  position: absolute;
+  inset: -20% -15%;
+  background: radial-gradient(
+    ellipse at center,
+    hsla(265, 90%, 60%, 0.35) 0%,
+    hsla(220, 80%, 55%, 0.15) 45%,
+    transparent 70%
+  );
+  filter: blur(40px);
+  z-index: -1;
+  pointer-events: none;
+}
+
+
+/* ══════════════════════════════════════════════
+   Frosted Nav Bar
+   Usage: <nav class="ak-nav-frosted">
+   ══════════════════════════════════════════════ */
+
+.ak-nav-frosted {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.dark .ak-nav-frosted {
+  background: rgba(17, 17, 19, 0.70);
+  backdrop-filter: blur(16px) saturate(160%);
+  -webkit-backdrop-filter: blur(16px) saturate(160%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+
+/* ══════════════════════════════════════════════
+   Button Neon Glow (dark backgrounds)
+   Usage: <button class="ak-btn-neon">
+   ══════════════════════════════════════════════ */
+
+.ak-btn-neon {
+  transition:
+    box-shadow var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease),
+    transform var(--duration-ak-fast, 110ms) var(--ease-ak-default, ease);
+}
+.ak-btn-neon:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 0 8px 2px hsla(258, 100%, 60%, 0.50),
+    0 0 24px 4px hsla(258, 100%, 60%, 0.30),
+    0 0 48px 8px hsla(258, 100%, 60%, 0.15);
+}
+.ak-btn-neon:active {
+  transform: translateY(0);
+  box-shadow: 0 0 12px 2px hsla(258, 100%, 60%, 0.40);
+}
+
+
+/* ══════════════════════════════════════════════
+   Spotlight Card (cursor-following glow)
+   Requires minimal JS to set --ak-spotlight-x/y.
+   Usage: <div class="ak-spotlight-card">
+   ══════════════════════════════════════════════ */
+
+.ak-spotlight-card {
+  position: relative;
+  overflow: hidden;
+}
+.ak-spotlight-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(
+    circle 200px at var(--ak-spotlight-x, 50%) var(--ak-spotlight-y, 50%),
+    rgba(129, 140, 248, 0.12) 0%,
+    transparent 100%
+  );
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 300ms ease;
+  z-index: 1;
+}
+.ak-spotlight-card:hover::before {
+  opacity: 1;
+}
+