@morphika/andami 0.5.1 → 0.5.2

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; }
+}