@morphika/andami 0.5.0 → 0.5.2

package/styles/admin.css

@@ -1,85 +1,85 @@
-/* ============================================
-   Admin Panel — Clean UI Override
-   Uses Inter (sans-serif) for admin, white bg,
-   clean hierarchy. Mono reserved for public site.
-   ============================================ */
-
-/* Admin shell: override dark defaults */
-[data-admin] {
-  font-family: var(--font-sans);
-  background: #ffffff;
-  color: #1a1a1a;
-}
-
-[data-admin] * {
-  cursor: auto;
-}
-
-/* Admin typography scale */
-[data-admin] h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: #111; }
-[data-admin] h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: #222; }
-[data-admin] h3 { font-size: 0.9375rem; font-weight: 500; color: #333; }
-
-/* Admin inputs */
-[data-admin] input[type="text"],
-[data-admin] input[type="password"],
-[data-admin] input[type="email"],
-[data-admin] input[type="url"],
-[data-admin] input[type="number"],
-[data-admin] textarea,
-[data-admin] select {
-  font-family: var(--font-sans);
-  font-size: 0.8125rem;
-  border-radius: 0.5rem;
-  border: 1px solid #e5e5e5;
-  padding: 0.5rem 0.75rem;
-  transition: border-color 0.15s;
-}
-
-[data-admin] input:focus,
-[data-admin] textarea:focus,
-[data-admin] select:focus {
-  border-color: #076bff;
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(7, 107, 255, 0.08);
-}
-
-/* Admin buttons base */
-[data-admin] .btn-primary {
-  background: #076bff;
-  color: white;
-  font-weight: 500;
-  font-size: 0.8125rem;
-  padding: 0.5rem 1.25rem;
-  border-radius: 0.5rem;
-  transition: all 0.15s;
-}
-[data-admin] .btn-primary:hover { background: #0559d4; }
-[data-admin] .btn-primary:disabled { opacity: 0.4; }
-
-[data-admin] .btn-secondary {
-  background: white;
-  color: #555;
-  font-weight: 500;
-  font-size: 0.8125rem;
-  padding: 0.5rem 1.25rem;
-  border-radius: 0.5rem;
-  border: 1px solid #e5e5e5;
-  transition: all 0.15s;
-}
-[data-admin] .btn-secondary:hover { border-color: #ccc; color: #111; }
-
-/* Admin card base */
-[data-admin] .admin-card {
-  background: white;
-  border: 1px solid #f0f0f0;
-  border-radius: 0.75rem;
-  padding: 1.5rem;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-}
-
-/* Scrollbar for admin */
-[data-admin] ::-webkit-scrollbar { width: 6px; }
-[data-admin] ::-webkit-scrollbar-track { background: transparent; }
-[data-admin] ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
-[data-admin] ::-webkit-scrollbar-thumb:hover { background: #bbb; }
+/* ============================================
+   Admin Panel — Clean UI Override
+   Uses Inter (sans-serif) for admin, white bg,
+   clean hierarchy. Mono reserved for public site.
+   ============================================ */
+
+/* Admin shell: override dark defaults */
+[data-admin] {
+  font-family: var(--font-sans);
+  background: #ffffff;
+  color: #1a1a1a;
+}
+
+[data-admin] * {
+  cursor: auto;
+}
+
+/* Admin typography scale */
+[data-admin] h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: #111; }
+[data-admin] h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: #222; }
+[data-admin] h3 { font-size: 0.9375rem; font-weight: 500; color: #333; }
+
+/* Admin inputs */
+[data-admin] input[type="text"],
+[data-admin] input[type="password"],
+[data-admin] input[type="email"],
+[data-admin] input[type="url"],
+[data-admin] input[type="number"],
+[data-admin] textarea,
+[data-admin] select {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e5e5;
+  padding: 0.5rem 0.75rem;
+  transition: border-color 0.15s;
+}
+
+[data-admin] input:focus,
+[data-admin] textarea:focus,
+[data-admin] select:focus {
+  border-color: #3580f9;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(53, 128, 249, 0.08);
+}
+
+/* Admin buttons base */
+[data-admin] .btn-primary {
+  background: #3580f9;
+  color: white;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  transition: all 0.15s;
+}
+[data-admin] .btn-primary:hover { background: #2d6dd4; }
+[data-admin] .btn-primary:disabled { opacity: 0.4; }
+
+[data-admin] .btn-secondary {
+  background: white;
+  color: #555;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e5e5;
+  transition: all 0.15s;
+}
+[data-admin] .btn-secondary:hover { border-color: #ccc; color: #111; }
+
+/* Admin card base */
+[data-admin] .admin-card {
+  background: white;
+  border: 1px solid #f0f0f0;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+
+/* Scrollbar for admin */
+[data-admin] ::-webkit-scrollbar { width: 6px; }
+[data-admin] ::-webkit-scrollbar-track { background: transparent; }
+[data-admin] ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
+[data-admin] ::-webkit-scrollbar-thumb:hover { background: #bbb; }

package/styles/animations.css

@@ -1,237 +1,237 @@
-/* ============================================
-   Animations — Core keyframes and animation systems
-   Imported by globals.css (monolith) or instance CSS
-   ============================================ */
-
-@keyframes marquee {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
-}
-
-/* V2 Grid snapping guide pulse */
-@keyframes pulse {
-  0%, 100% { opacity: 0.4; }
-  50% { opacity: 1; }
-}
-
-/* ============================================
-   View Transitions — DISABLED (Session 112)
-   Removed to eliminate black flash conflicts with
-   "On Enter" element animations. Page exit animations
-   (PageExitContext) handle the transition feel instead.
-   ============================================ */
-
-/* ============================================
-   Enter Animation Keyframes (Session 120)
-   Used by EnterAnimationWrapper via inline styles.
-   animation-name, duration, delay, easing, and fill-mode
-   are set via inline styles — no CSS rules needed here.
-   ============================================ */
-
-@keyframes enter-fade {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes enter-slide-up {
-  from { opacity: 0; transform: translateY(30px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes enter-slide-down {
-  from { opacity: 0; transform: translateY(-30px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes enter-scale {
-  from { opacity: 0; transform: scale(0.85); }
-  to   { opacity: 1; transform: scale(1); }
-}
-
-@keyframes enter-reveal {
-  from { opacity: 0; clip-path: inset(0 100% 0 0); }
-  to   { opacity: 1; clip-path: inset(0 0% 0 0); }
-}
-
-@keyframes enter-blur {
-  from { opacity: 0; filter: blur(10px); }
-  to   { opacity: 1; filter: blur(0px); }
-}
-
-@keyframes enter-blur-in {
-  from { opacity: 0; filter: blur(6px); }
-  to   { opacity: 1; filter: blur(0px); }
-}
-
-/* Prefers reduced motion — neutralize ALL enter animations */
-@media (prefers-reduced-motion: reduce) {
-  [data-enter-animation] {
-    animation: none !important;
-    opacity: 1 !important;
-    transform: none !important;
-    filter: none !important;
-    clip-path: none !important;
-  }
-}
-
-/* Suppress hover transitions while enter animation is still playing.
-   Prevents visual conflict between CSS animation (enter) and CSS transition (hover). */
-[data-enter-animation]:not([data-entered]) [data-hover-effect] {
-  transition: none !important;
-  pointer-events: none;
-}
-
-/* ============================================
-   Hover Effect System (Sessions 60, 120)
-   ============================================
-   Most hover styling is applied via inline styles in HoverAnimationWrapper.
-   The :hover pseudo-class cannot be set inline, so we use data attributes. */
-
-/* Scale Up */
-[data-hover-effect="scale-up"]:hover {
-  transform: scale(1.05) !important;
-}
-
-/* Scale Down */
-[data-hover-effect="scale-down"]:hover {
-  transform: scale(0.95) !important;
-}
-
-/* Lift — uses inline custom properties for intensity-dependent values */
-[data-hover-effect="lift"] {
-  --hover-lift-y: -4px;
-  --hover-lift-shadow: 0 8px 20px rgba(0,0,0,0.15);
-}
-[data-hover-effect="lift"]:hover {
-  transform: translateY(var(--hover-lift-y)) !important;
-  box-shadow: var(--hover-lift-shadow) !important;
-}
-
-/* Tilt 3D — transform is handled by JS mousemove, but we ensure base state */
-[data-hover-effect="tilt-3d"] {
-  transform-style: preserve-3d;
-}
-
-/* Color Shift */
-[data-hover-effect="color-shift"] {
-  --hover-brightness: 1.1;
-  --hover-saturate: 1.2;
-}
-[data-hover-effect="color-shift"]:hover {
-  filter: brightness(var(--hover-brightness)) saturate(var(--hover-saturate)) !important;
-}
-
-/* Blur Reveal */
-[data-hover-effect="blur-reveal"] {
-  --hover-blur-base: 3px;
-  --hover-opacity-base: 0.85;
-}
-[data-hover-effect="blur-reveal"]:hover {
-  filter: blur(0px) !important;
-  opacity: 1 !important;
-}
-
-/* Border Glow */
-[data-hover-effect="border-glow"] {
-  --hover-glow-spread: 4px;
-  --hover-glow-color: rgba(7,107,255,0.4);
-}
-[data-hover-effect="border-glow"]:hover {
-  box-shadow: 0 0 calc(var(--hover-glow-spread) * 2) var(--hover-glow-spread) var(--hover-glow-color) !important;
-}
-
-/* Prefers reduced motion — disable hover animations */
-@media (prefers-reduced-motion: reduce) {
-  [data-hover-effect] {
-    transition: none !important;
-  }
-  [data-hover-effect]:hover {
-    transform: none !important;
-    filter: none !important;
-    box-shadow: none !important;
-    opacity: 1 !important;
-  }
-}
-
-/* ============================================
-   Text Animation Presets (Parallax Showcase)
-   CSS-only presets for title/subtitle entrance.
-   Triggered via IntersectionObserver (enter mode).
-   ============================================ */
-
-/* ============================================
-   Nav Entrance Animations
-   Applied to the entire nav or individual items
-   when stagger is enabled. Triggered on page load.
-   ============================================ */
-
-@keyframes nav-fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes nav-slide-down {
-  from { opacity: 0; transform: translateY(-100%); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes nav-blur-in {
-  from { opacity: 0; filter: blur(12px); }
-  to   { opacity: 1; filter: blur(0px); }
-}
-
-/* Nav entrance: initial hidden state */
-[data-nav-entrance] {
-  opacity: 0;
-}
-
-/* Nav entrance: play once the attribute is set */
-[data-nav-entrance="fade-in"][data-nav-entered] {
-  animation: nav-fade-in var(--nav-entrance-duration, 600ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
-}
-
-[data-nav-entrance="slide-down"][data-nav-entered] {
-  animation: nav-slide-down var(--nav-entrance-duration, 600ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
-}
-
-[data-nav-entrance="blur-in"][data-nav-entered] {
-  animation: nav-blur-in var(--nav-entrance-duration, 700ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
-}
-
-/* Staggered items: each item animates independently */
-[data-nav-item-entrance] {
-  opacity: 0;
-}
-
-[data-nav-item-entrance="fade-in"][data-nav-entered] {
-  animation: nav-fade-in var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
-}
-
-[data-nav-item-entrance="slide-down"][data-nav-entered] {
-  animation: nav-slide-down var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
-}
-
-[data-nav-item-entrance="blur-in"][data-nav-entered] {
-  animation: nav-blur-in var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
-}
-
-/* Prefers reduced motion — disable nav animations */
-@media (prefers-reduced-motion: reduce) {
-  [data-nav-entrance],
-  [data-nav-item-entrance] {
-    animation: none !important;
-    opacity: 1 !important;
-    transform: none !important;
-    filter: none !important;
-  }
-}
-
-/* Typewriter cursor blink */
-@keyframes typewriter-cursor-blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0; }
-}
+/* ============================================
+   Animations — Core keyframes and animation systems
+   Imported by globals.css (monolith) or instance CSS
+   ============================================ */
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+/* V2 Grid snapping guide pulse */
+@keyframes pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+
+/* ============================================
+   View Transitions — DISABLED (Session 112)
+   Removed to eliminate black flash conflicts with
+   "On Enter" element animations. Page exit animations
+   (PageExitContext) handle the transition feel instead.
+   ============================================ */
+
+/* ============================================
+   Enter Animation Keyframes (Session 120)
+   Used by EnterAnimationWrapper via inline styles.
+   animation-name, duration, delay, easing, and fill-mode
+   are set via inline styles — no CSS rules needed here.
+   ============================================ */
+
+@keyframes enter-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes enter-slide-up {
+  from { opacity: 0; transform: translateY(30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes enter-slide-down {
+  from { opacity: 0; transform: translateY(-30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes enter-scale {
+  from { opacity: 0; transform: scale(0.85); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes enter-reveal {
+  from { opacity: 0; clip-path: inset(0 100% 0 0); }
+  to   { opacity: 1; clip-path: inset(0 0% 0 0); }
+}
+
+@keyframes enter-blur {
+  from { opacity: 0; filter: blur(10px); }
+  to   { opacity: 1; filter: blur(0px); }
+}
+
+@keyframes enter-blur-in {
+  from { opacity: 0; filter: blur(6px); }
+  to   { opacity: 1; filter: blur(0px); }
+}
+
+/* Prefers reduced motion — neutralize ALL enter animations */
+@media (prefers-reduced-motion: reduce) {
+  [data-enter-animation] {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+    clip-path: none !important;
+  }
+}
+
+/* Suppress hover transitions while enter animation is still playing.
+   Prevents visual conflict between CSS animation (enter) and CSS transition (hover). */
+[data-enter-animation]:not([data-entered]) [data-hover-effect] {
+  transition: none !important;
+  pointer-events: none;
+}
+
+/* ============================================
+   Hover Effect System (Sessions 60, 120)
+   ============================================
+   Most hover styling is applied via inline styles in HoverAnimationWrapper.
+   The :hover pseudo-class cannot be set inline, so we use data attributes. */
+
+/* Scale Up */
+[data-hover-effect="scale-up"]:hover {
+  transform: scale(1.05) !important;
+}
+
+/* Scale Down */
+[data-hover-effect="scale-down"]:hover {
+  transform: scale(0.95) !important;
+}
+
+/* Lift — uses inline custom properties for intensity-dependent values */
+[data-hover-effect="lift"] {
+  --hover-lift-y: -4px;
+  --hover-lift-shadow: 0 8px 20px rgba(0,0,0,0.15);
+}
+[data-hover-effect="lift"]:hover {
+  transform: translateY(var(--hover-lift-y)) !important;
+  box-shadow: var(--hover-lift-shadow) !important;
+}
+
+/* Tilt 3D — transform is handled by JS mousemove, but we ensure base state */
+[data-hover-effect="tilt-3d"] {
+  transform-style: preserve-3d;
+}
+
+/* Color Shift */
+[data-hover-effect="color-shift"] {
+  --hover-brightness: 1.1;
+  --hover-saturate: 1.2;
+}
+[data-hover-effect="color-shift"]:hover {
+  filter: brightness(var(--hover-brightness)) saturate(var(--hover-saturate)) !important;
+}
+
+/* Blur Reveal */
+[data-hover-effect="blur-reveal"] {
+  --hover-blur-base: 3px;
+  --hover-opacity-base: 0.85;
+}
+[data-hover-effect="blur-reveal"]:hover {
+  filter: blur(0px) !important;
+  opacity: 1 !important;
+}
+
+/* Border Glow */
+[data-hover-effect="border-glow"] {
+  --hover-glow-spread: 4px;
+  --hover-glow-color: rgba(53, 128, 249,0.4);
+}
+[data-hover-effect="border-glow"]:hover {
+  box-shadow: 0 0 calc(var(--hover-glow-spread) * 2) var(--hover-glow-spread) var(--hover-glow-color) !important;
+}
+
+/* Prefers reduced motion — disable hover animations */
+@media (prefers-reduced-motion: reduce) {
+  [data-hover-effect] {
+    transition: none !important;
+  }
+  [data-hover-effect]:hover {
+    transform: none !important;
+    filter: none !important;
+    box-shadow: none !important;
+    opacity: 1 !important;
+  }
+}
+
+/* ============================================
+   Text Animation Presets (Parallax Showcase)
+   CSS-only presets for title/subtitle entrance.
+   Triggered via IntersectionObserver (enter mode).
+   ============================================ */
+
+/* ============================================
+   Nav Entrance Animations
+   Applied to the entire nav or individual items
+   when stagger is enabled. Triggered on page load.
+   ============================================ */
+
+@keyframes nav-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes nav-slide-down {
+  from { opacity: 0; transform: translateY(-100%); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes nav-blur-in {
+  from { opacity: 0; filter: blur(12px); }
+  to   { opacity: 1; filter: blur(0px); }
+}
+
+/* Nav entrance: initial hidden state */
+[data-nav-entrance] {
+  opacity: 0;
+}
+
+/* Nav entrance: play once the attribute is set */
+[data-nav-entrance="fade-in"][data-nav-entered] {
+  animation: nav-fade-in var(--nav-entrance-duration, 600ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
+}
+
+[data-nav-entrance="slide-down"][data-nav-entered] {
+  animation: nav-slide-down var(--nav-entrance-duration, 600ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
+}
+
+[data-nav-entrance="blur-in"][data-nav-entered] {
+  animation: nav-blur-in var(--nav-entrance-duration, 700ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
+}
+
+/* Staggered items: each item animates independently */
+[data-nav-item-entrance] {
+  opacity: 0;
+}
+
+[data-nav-item-entrance="fade-in"][data-nav-entered] {
+  animation: nav-fade-in var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
+}
+
+[data-nav-item-entrance="slide-down"][data-nav-entered] {
+  animation: nav-slide-down var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
+}
+
+[data-nav-item-entrance="blur-in"][data-nav-entered] {
+  animation: nav-blur-in var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
+}
+
+/* Prefers reduced motion — disable nav animations */
+@media (prefers-reduced-motion: reduce) {
+  [data-nav-entrance],
+  [data-nav-item-entrance] {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+  }
+}
+
+/* Typewriter cursor blink */
+@keyframes typewriter-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}