@magmonium/one 0.0.4 → 0.0.7

package/sass/_reset.sass

@@ -0,0 +1,35 @@
+// Document defaults only. Component chrome → styleUrls. Portal hosts → overlay-hosts.
+@use 'index' as m
+@use 'overlay-hosts'
+@use 'mixins/button' as button
+
+*,
+*::before,
+*::after
+  box-sizing: border-box
+  margin: 0
+  padding: 0
+
+  &:focus
+    outline: none
+
+html
+  @media (max-width: 768px)
+    font-size: 14px
+
+body
+  overflow: hidden
+  overflow-y: auto
+  font-size: m.$font-size-base
+  font-family: m.$font-family-base
+  background-color: m.$background-color
+  color: m.$text
+  -webkit-text-size-adjust: 100%
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+  // Root fallback container: cols with no m-section ancestor still resolve
+  // grid breakpoints against the viewport width (ADR 0001)
+  container-type: inline-size
+  container-name: mag-grid
+
+button
+  +button.button-reset

package/sass/animations/_index.sass

@@ -0,0 +1,13 @@
+// @magmonium/sass - Animation System
+// Main entry point for all animations
+
+// Background animations
+@forward 'background'
+
+// Export animation mixins with namespace
+@forward 'background/gradient' as gradient-*
+@forward 'background/particle' as particle-*
+@forward 'background/tech' as tech-*
+@forward 'background/nature' as nature-*
+@forward 'background/energy' as energy-*
+@forward 'background/new-effects' as effects-*

package/sass/animations/_registry.sass

@@ -0,0 +1,51 @@
+// Animation Registry System
+@use 'sass:map'
+// Maps animation names to their respective files for selective loading
+
+// Animation Categories Map
+$animation-categories: (
+  // Gradient-based animations
+  'gradient': 'gradient',
+  'mesh': 'gradient', 
+  'plasma': 'gradient',
+  
+  // Particle/object animations
+  'particles': 'particle',
+  'geometric': 'particle',
+  'crystal': 'particle',
+  
+  // Tech-themed animations
+  'matrix': 'tech',
+  'cyber': 'tech',
+  'hologram': 'tech',
+  
+  // Nature-inspired animations
+  'waves': 'nature',
+  'aurora': 'nature',
+  'nebula': 'nature',
+  
+  // Energy/light animations
+  'pulse': 'energy',
+  'neon': 'energy',
+  'spiral': 'energy',
+  
+  // New effect animations
+  'fire': 'new-effects',
+  'electric': 'new-effects',
+  'galaxy': 'new-effects',
+  'liquid': 'new-effects',
+  'glitch': 'new-effects',
+  'prism': 'new-effects'
+)
+
+// Function to get animation category
+@function get-animation-category($animation-name)
+  @return map.get($animation-categories, $animation-name)
+
+// Mixin for selective animation loading
+@mixin load-animation($animation-name)
+  $category: get-animation-category($animation-name)
+  @if $category
+    @use 'background/#{$category}'
+  @else
+    @warn 'Unknown animation: #{$animation-name}'

package/sass/animations/background/_energy.sass

@@ -0,0 +1,91 @@
+// Energy/Light Background Animations
+// Contains: pulse, neon, spiral
+
+// Animation: Pulse Effect
+@mixin pulse-animation()
+  .m-jumbotron__background
+    background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%)
+    animation: pulseBackground 4s ease-in-out infinite alternate
+
+// Animation: Neon Glow
+@mixin neon-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #0a1a0a 100%)
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50%
+      filter: blur(20px)
+      animation: neonPulse 4s ease-in-out infinite alternate
+
+    &::before
+      width: 150px
+      height: 150px
+      top: 20%
+      left: 20%
+      background: radial-gradient(circle, rgba(255, 0, 255, 0.8) 0%, transparent 70%)
+      box-shadow: 0 0 50px rgba(255, 0, 255, 0.5)
+
+    &::after
+      width: 120px
+      height: 120px
+      bottom: 30%
+      right: 30%
+      background: radial-gradient(circle, rgba(0, 255, 0, 0.8) 0%, transparent 70%)
+      box-shadow: 0 0 50px rgba(0, 255, 0, 0.5)
+      animation-delay: -2s
+
+// Animation: Spiral Galaxy
+@mixin spiral-animation()
+  .m-jumbotron__background
+    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 30%, #0f0f23 70%, #000 100%)
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50%
+      border: 2px solid rgba(255, 255, 255, 0.1)
+      animation: spiralRotate 20s linear infinite
+
+    &::before
+      width: 300px
+      height: 300px
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      border-style: dashed
+
+    &::after
+      width: 150px
+      height: 150px
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      animation-direction: reverse
+      animation-duration: 15s
+
+// Keyframe animations for energy effects
+@keyframes pulseBackground
+  0%
+    transform: scale(1)
+    opacity: 0.8
+  100%
+    transform: scale(1.02)
+    opacity: 1
+
+@keyframes neonPulse
+  0%
+    transform: scale(1)
+    opacity: 0.6
+  100%
+    transform: scale(1.2)
+    opacity: 1
+
+@keyframes spiralRotate
+  0%
+    transform: translate(-50%, -50%) rotate(0deg) scale(1)
+  100%
+    transform: translate(-50%, -50%) rotate(360deg) scale(1.1)

package/sass/animations/background/_gradient.sass

@@ -0,0 +1,104 @@
+// Gradient-based Background Animations
+// Contains: gradient, mesh, plasma
+
+// Animation: Gradient Wave
+@mixin gradient-animation()
+  .m-jumbotron__background
+    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%)
+    animation: gradientWave 8s ease-in-out infinite
+
+// Animation: Mesh Gradient
+@mixin mesh-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%)
+    background-size: 300% 300%
+    animation: meshFlow 16s ease-in-out infinite
+
+    &::before
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%)
+      animation: meshOverlay 10s ease-in-out infinite
+
+// Animation: Plasma Energy
+@mixin plasma-animation()
+  .m-jumbotron__background
+    background: radial-gradient(ellipse at top, #ff006e 0%, #8338ec 50%, #3a86ff 100%)
+    animation: plasmaEnergy 8s ease-in-out infinite alternate
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50%
+      filter: blur(30px)
+      animation: plasmaOrbs 10s ease-in-out infinite
+
+    &::before
+      width: 200px
+      height: 200px
+      top: 20%
+      left: 20%
+      background: radial-gradient(circle, rgba(255, 0, 110, 0.6) 0%, transparent 70%)
+      animation-delay: 0s
+
+    &::after
+      width: 150px
+      height: 150px
+      bottom: 25%
+      right: 25%
+      background: radial-gradient(circle, rgba(131, 56, 236, 0.6) 0%, transparent 70%)
+      animation-delay: -5s
+
+// Keyframe animations for gradient effects
+@keyframes gradientWave
+  0%, 100%
+    background-position: 0% 50%
+    transform: scale(1)
+  50%
+    background-position: 100% 50%
+    transform: scale(1.05)
+
+@keyframes meshFlow
+  0%, 100%
+    background-position: 0% 50%
+  25%
+    background-position: 100% 0%
+  50%
+    background-position: 100% 100%
+  75%
+    background-position: 0% 100%
+
+@keyframes meshOverlay
+  0%, 100%
+    opacity: 0.1
+    transform: scale(1)
+  50%
+    opacity: 0.3
+    transform: scale(1.05)
+
+@keyframes plasmaEnergy
+  0%
+    transform: scale(1) rotate(0deg)
+    filter: hue-rotate(0deg)
+  100%
+    transform: scale(1.1) rotate(5deg)
+    filter: hue-rotate(90deg)
+
+@keyframes plasmaOrbs
+  0%, 100%
+    transform: translate(0, 0) scale(1)
+    opacity: 0.6
+  25%
+    transform: translate(30px, -20px) scale(1.2)
+    opacity: 0.8
+  50%
+    transform: translate(-20px, 30px) scale(0.8)
+    opacity: 0.4
+  75%
+    transform: translate(20px, 20px) scale(1.1)
+    opacity: 0.7

package/sass/animations/background/_index.sass

@@ -0,0 +1,9 @@
+// Background Animations Module
+// Entry point for all background animation categories
+
+@forward 'gradient'
+@forward 'particle'
+@forward 'tech'
+@forward 'nature' 
+@forward 'energy'
+@forward 'new-effects'

package/sass/animations/background/_nature.sass

@@ -0,0 +1,110 @@
+// Nature-inspired Background Animations
+// Contains: waves, aurora, nebula
+
+// Animation: Ocean Waves
+@mixin waves-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #667db6 0%, #0082c8 25%, #0082c8 50%, #667db6 100%)
+    background-size: 400% 400%
+    animation: waveMotion 10s ease-in-out infinite
+
+    &::before
+      content: ''
+      position: absolute
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%)
+      animation: waveRipple 8s ease-in-out infinite
+
+// Animation: Aurora Borealis
+@mixin aurora-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%)
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50%
+      filter: blur(40px)
+      animation: auroraFlow 12s ease-in-out infinite
+
+    &::before
+      width: 300px
+      height: 100px
+      top: 20%
+      left: 10%
+      background: linear-gradient(90deg, rgba(0, 255, 150, 0.3), rgba(0, 150, 255, 0.3))
+      animation-delay: 0s
+
+    &::after
+      width: 250px
+      height: 80px
+      bottom: 30%
+      right: 15%
+      background: linear-gradient(90deg, rgba(255, 0, 150, 0.3), rgba(150, 0, 255, 0.3))
+      animation-delay: -6s
+
+// Animation: Cosmic Nebula
+@mixin nebula-animation()
+  .m-jumbotron__background
+    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f0f23 100%)
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50%
+      filter: blur(60px)
+      animation: nebulaGlow 14s ease-in-out infinite alternate
+
+    &::before
+      width: 400px
+      height: 200px
+      top: 10%
+      left: 5%
+      background: radial-gradient(ellipse, rgba(138, 43, 226, 0.4) 0%, rgba(75, 0, 130, 0.2) 50%, transparent 100%)
+
+    &::after
+      width: 350px
+      height: 180px
+      bottom: 15%
+      right: 10%
+      background: radial-gradient(ellipse, rgba(255, 20, 147, 0.4) 0%, rgba(199, 21, 133, 0.2) 50%, transparent 100%)
+      animation-delay: -7s
+
+// Keyframe animations for nature effects
+@keyframes waveMotion
+  0%, 100%
+    background-position: 0% 50%
+  50%
+    background-position: 100% 50%
+
+@keyframes waveRipple
+  0%, 100%
+    transform: scale(1) rotate(0deg)
+    opacity: 0.3
+  50%
+    transform: scale(1.1) rotate(5deg)
+    opacity: 0.6
+
+@keyframes auroraFlow
+  0%, 100%
+    transform: translateX(0) scale(1)
+    opacity: 0.3
+  33%
+    transform: translateX(50px) scale(1.2)
+    opacity: 0.6
+  66%
+    transform: translateX(-30px) scale(0.9)
+    opacity: 0.4
+
+@keyframes nebulaGlow
+  0%
+    transform: scale(1) rotate(0deg)
+    opacity: 0.4
+  100%
+    transform: scale(1.3) rotate(10deg)
+    opacity: 0.7

package/sass/animations/background/_new-effects.sass

@@ -0,0 +1,292 @@
+// New Effect Background Animations
+// Contains: fire, electric, galaxy, liquid, glitch, prism
+
+// Animation: Fire Effect
+@mixin fire-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #ff4500 0%, #ff8c00 25%, #ffa500 50%, #ff6347 75%, #dc143c 100%)
+    background-size: 300% 300%
+    animation: fireFlicker 6s ease-in-out infinite
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%
+      filter: blur(15px)
+      animation: fireParticles 8s ease-in-out infinite
+
+    &::before
+      width: 100px
+      height: 120px
+      bottom: 10%
+      left: 20%
+      background: radial-gradient(ellipse, rgba(255, 69, 0, 0.8) 0%, rgba(255, 140, 0, 0.4) 50%, transparent 100%)
+      animation-delay: 0s
+
+    &::after
+      width: 80px
+      height: 100px
+      bottom: 15%
+      right: 25%
+      background: radial-gradient(ellipse, rgba(255, 165, 0, 0.8) 0%, rgba(255, 99, 71, 0.4) 50%, transparent 100%)
+      animation-delay: -4s
+
+// Animation: Electric Effect
+@mixin electric-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #000428 0%, #004e92 50%, #009ffd 100%)
+    animation: electricStorm 5s ease-in-out infinite
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.8) 50%, transparent 70%)
+      animation: electricBolt 3s ease-in-out infinite
+
+    &::before
+      width: 2px
+      height: 150px
+      top: 10%
+      left: 30%
+      transform: rotate(15deg)
+      animation-delay: 0s
+
+    &::after
+      width: 3px
+      height: 200px
+      top: 20%
+      right: 35%
+      transform: rotate(-20deg)
+      animation-delay: -1.5s
+
+// Animation: Galaxy Effect
+@mixin galaxy-animation()
+  .m-jumbotron__background
+    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 20%, #0f0f23 60%, #000 100%)
+    animation: galaxyRotate 30s linear infinite
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50%
+      background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%)
+      animation: starField 20s ease-in-out infinite
+
+    &::before
+      width: 400px
+      height: 400px
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      background-image: radial-gradient(2px 2px at 50px 100px, rgba(255, 255, 255, 0.8), transparent), radial-gradient(1px 1px at 150px 200px, rgba(255, 255, 255, 0.6), transparent), radial-gradient(1px 1px at 300px 50px, rgba(255, 255, 255, 0.4), transparent)
+
+    &::after
+      width: 200px
+      height: 200px
+      top: 50%
+      left: 50%
+      transform: translate(-50%, -50%)
+      background: conic-gradient(from 0deg, transparent, rgba(138, 43, 226, 0.3), transparent)
+      animation-direction: reverse
+      animation-duration: 25s
+
+// Animation: Liquid Effect
+@mixin liquid-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #667db6 0%, #0082c8 25%, #667db6 50%, #0082c8 75%, #667db6 100%)
+    background-size: 400% 400%
+    animation: liquidFlow 12s ease-in-out infinite
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      border-radius: 50%
+      filter: blur(25px)
+      animation: liquidDrops 10s ease-in-out infinite
+
+    &::before
+      width: 200px
+      height: 120px
+      top: 20%
+      left: 15%
+      background: radial-gradient(ellipse, rgba(102, 125, 182, 0.6) 0%, rgba(0, 130, 200, 0.3) 70%, transparent 100%)
+      animation-delay: 0s
+
+    &::after
+      width: 150px
+      height: 100px
+      bottom: 25%
+      right: 20%
+      background: radial-gradient(ellipse, rgba(0, 130, 200, 0.6) 0%, rgba(102, 125, 182, 0.3) 70%, transparent 100%)
+      animation-delay: -5s
+
+// Animation: Glitch Effect
+@mixin glitch-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%)
+    animation: glitchBase 8s ease-in-out infinite
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      width: 100%
+      height: 100%
+      mix-blend-mode: screen
+      animation: glitchDistortion 4s ease-in-out infinite
+
+    &::before
+      background: linear-gradient(90deg, transparent 0%, rgba(255, 0, 0, 0.1) 25%, transparent 50%, rgba(0, 255, 0, 0.1) 75%, transparent 100%)
+      animation-delay: 0s
+
+    &::after
+      background: linear-gradient(270deg, transparent 0%, rgba(0, 0, 255, 0.1) 25%, transparent 50%, rgba(255, 255, 0, 0.1) 75%, transparent 100%)
+      animation-delay: -2s
+
+// Animation: Prism Effect
+@mixin prism-animation()
+  .m-jumbotron__background
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 20%, #f093fb 40%, #f5576c 60%, #4facfe 80%, #00f2fe 100%)
+    background-size: 300% 300%
+    animation: prismShift 15s ease-in-out infinite
+
+    &::before,
+    &::after
+      content: ''
+      position: absolute
+      background: conic-gradient(from 0deg, rgba(255,0,0,0.1), rgba(255,165,0,0.1), rgba(255,255,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1), rgba(75,0,130,0.1), rgba(238,130,238,0.1))
+      filter: blur(30px)
+      animation: prismRotate 12s linear infinite
+
+    &::before
+      width: 150px
+      height: 150px
+      top: 25%
+      left: 25%
+      border-radius: 50%
+
+    &::after
+      width: 100px
+      height: 100px
+      bottom: 30%
+      right: 30%
+      border-radius: 50%
+      animation-direction: reverse
+
+// Keyframe animations for new effects
+@keyframes fireFlicker
+  0%, 100%
+    background-position: 0% 50%
+    filter: brightness(1) hue-rotate(0deg)
+  25%
+    background-position: 50% 25%
+    filter: brightness(1.2) hue-rotate(10deg)
+  50%
+    background-position: 100% 50%
+    filter: brightness(0.9) hue-rotate(-5deg)
+  75%
+    background-position: 50% 75%
+    filter: brightness(1.1) hue-rotate(5deg)
+
+@keyframes fireParticles
+  0%, 100%
+    transform: translateY(0) scale(1)
+    opacity: 0.8
+  50%
+    transform: translateY(-20px) scale(1.1)
+    opacity: 0.4
+
+@keyframes electricStorm
+  0%, 100%
+    filter: brightness(1) contrast(1)
+  25%
+    filter: brightness(1.3) contrast(1.2)
+  50%
+    filter: brightness(0.8) contrast(1.1)
+  75%
+    filter: brightness(1.2) contrast(1.3)
+
+@keyframes electricBolt
+  0%, 90%, 100%
+    opacity: 0
+    transform: scale(1)
+  5%, 85%
+    opacity: 1
+    transform: scale(1.2)
+  10%, 80%
+    opacity: 0.7
+    transform: scale(0.9)
+
+@keyframes galaxyRotate
+  0%
+    transform: rotate(0deg)
+  100%
+    transform: rotate(360deg)
+
+@keyframes starField
+  0%, 100%
+    opacity: 0.3
+    transform: translate(-50%, -50%) scale(1)
+  50%
+    opacity: 0.8
+    transform: translate(-50%, -50%) scale(1.1)
+
+@keyframes liquidFlow
+  0%, 100%
+    background-position: 0% 50%
+  33%
+    background-position: 70% 30%
+  66%
+    background-position: 30% 70%
+
+@keyframes liquidDrops
+  0%, 100%
+    transform: translateY(0) scale(1)
+    opacity: 0.6
+  50%
+    transform: translateY(-10px) scale(1.2)
+    opacity: 0.3
+
+@keyframes glitchBase
+  0%, 100%
+    filter: hue-rotate(0deg) saturate(1)
+  25%
+    filter: hue-rotate(90deg) saturate(1.2)
+  50%
+    filter: hue-rotate(180deg) saturate(0.8)
+  75%
+    filter: hue-rotate(270deg) saturate(1.1)
+
+@keyframes glitchDistortion
+  0%, 90%, 100%
+    transform: translateX(0)
+    opacity: 0.1
+  2%, 5%, 8%
+    transform: translateX(2px)
+    opacity: 0.3
+  3%, 6%
+    transform: translateX(-2px)
+    opacity: 0.2
+
+@keyframes prismShift
+  0%, 100%
+    background-position: 0% 50%
+    filter: hue-rotate(0deg)
+  33%
+    background-position: 100% 0%
+    filter: hue-rotate(120deg)
+  66%
+    background-position: 0% 100%
+    filter: hue-rotate(240deg)
+
+@keyframes prismRotate
+  0%
+    transform: rotate(0deg) scale(1)
+    opacity: 0.3
+  100%
+    transform: rotate(360deg) scale(1.1)
+    opacity: 0.6