mycsslab/src/utilities/scientific-physics-css.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * MyCSSLab Scientific CSS (Physics-Based)
 * CSS based on real physics principles and scientific laws
 * Version: 3.0.2
 */

/* ========================================
   PHYSICS CORE VARIABLES
   ======================================== */

:root {
  /* Physics constants */
  --physics-gravity: 9.81; /* m/s² */
  --physics-light-speed: 299792458; /* m/s */
  --physics-planck: 6.626e-34; /* J⋅s */
  --physics-boltzmann: 1.381e-23; /* J/K */
  
  /* Physics simulation variables */
  --physics-mass: 1; /* kg */
  --physics-velocity: 0; /* m/s */
  --physics-acceleration: 0; /* m/s² */
  --physics-force: 0; /* N */
  --physics-energy: 0; /* J */
  --physics-momentum: 0; /* kg⋅m/s */
  
  /* Physics visual variables */
  --physics-scale: 1;
  --physics-time: 1;
  --physics-space: 1;
  --physics-matter: 1;
  
  /* Physics animation variables */
  --physics-duration: 1s;
  --physics-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --physics-iteration: infinite;
}

/* ========================================
   GRAVITY PHYSICS
   ======================================== */

.my-physics-gravity {
  transform: translateY(0);
  transition: transform calc(var(--physics-duration) * 0.6) var(--physics-easing);
}

.my-physics-gravity:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.my-physics-gravity-strong {
  --physics-gravity: 19.62;
  transition: transform calc(var(--physics-duration) * 0.3) var(--physics-easing);
}

.my-physics-gravity-strong:hover {
  transform: translateY(-20px);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
}

.my-physics-gravity-weak {
  --physics-gravity: 4.905;
  transition: transform calc(var(--physics-duration) * 1.2) var(--physics-easing);
}

.my-physics-gravity-weak:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* ========================================
   MOMENTUM PHYSICS
   ======================================== */

.my-physics-momentum {
  transition: all var(--physics-duration) var(--physics-easing);
}

.my-physics-momentum:hover {
  transform: scale(1.05) rotate(2deg);
  --physics-momentum: calc(var(--physics-momentum) + 1);
}

.my-physics-momentum-conservation {
  animation: physics-momentum-conservation 2s ease-in-out infinite;
}

@keyframes physics-momentum-conservation {
  0%, 100% { 
    transform: translateX(0) scale(1);
    --physics-momentum: 0;
  }
  50% { 
    transform: translateX(20px) scale(1.1);
    --physics-momentum: 1;
  }
}

/* ========================================
   ELASTICITY PHYSICS
   ======================================== */

.my-physics-elastic {
  transition: all var(--physics-duration) cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.my-physics-elastic:hover {
  transform: scale(1.1);
}

.my-physics-elastic-strong {
  transition: all var(--physics-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.my-physics-elastic-strong:hover {
  transform: scale(1.2);
}

.my-physics-elastic-weak {
  transition: all var(--physics-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.my-physics-elastic-weak:hover {
  transform: scale(1.05);
}

/* ========================================
   FRICTION PHYSICS
   ======================================== */

.my-physics-friction {
  transition: all calc(var(--physics-duration) * 1.5) cubic-bezier(0.4, 0, 0.2, 1);
}

.my-physics-friction:hover {
  transform: translateX(10px);
}

.my-physics-friction-high {
  transition: all calc(var(--physics-duration) * 2) cubic-bezier(0.4, 0, 0.2, 1);
}

.my-physics-friction-high:hover {
  transform: translateX(5px);
}

.my-physics-friction-low {
  transition: all calc(var(--physics-duration) * 0.5) cubic-bezier(0.4, 0, 0.2, 1);
}

.my-physics-friction-low:hover {
  transform: translateX(20px);
}

/* ========================================
   CENTRIPETAL FORCE PHYSICS
   ======================================== */

.my-physics-centripetal {
  animation: physics-centripetal 3s linear infinite;
  transform-origin: center;
}

@keyframes physics-centripetal {
  0% { 
    transform: rotate(0deg) translateX(50px) rotate(0deg);
  }
  100% { 
    transform: rotate(360deg) translateX(50px) rotate(-360deg);
  }
}

.my-physics-centripetal-fast {
  animation-duration: 1s;
}

.my-physics-centripetal-slow {
  animation-duration: 6s;
}

/* ========================================
   WAVE PHYSICS
   ======================================== */

.my-physics-wave {
  animation: physics-wave 2s ease-in-out infinite;
}

@keyframes physics-wave {
  0%, 100% { 
    transform: translateY(0) scale(1);
  }
  50% { 
    transform: translateY(-10px) scale(1.05);
  }
}

.my-physics-wave-long {
  animation-duration: 4s;
}

.my-physics-wave-short {
  animation-duration: 1s;
}

.my-physics-wave-interference {
  animation: physics-wave-interference 3s ease-in-out infinite;
}

@keyframes physics-wave-interference {
  0%, 100% { 
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  25% { 
    transform: translateY(-5px) scale(1.02);
    opacity: 0.8;
  }
  50% { 
    transform: translateY(-10px) scale(1.05);
    opacity: 0.6;
  }
  75% { 
    transform: translateY(-5px) scale(1.02);
    opacity: 0.8;
  }
}

/* ========================================
   THERMODYNAMICS PHYSICS
   ======================================== */

.my-physics-thermodynamics {
  transition: all var(--physics-duration) var(--physics-easing);
}

.my-physics-thermodynamics:hover {
  filter: brightness(1.2) saturate(1.3);
  transform: scale(1.02);
}

.my-physics-thermodynamics-heat {
  animation: physics-thermodynamics-heat 2s ease-in-out infinite;
}

@keyframes physics-thermodynamics-heat {
  0%, 100% { 
    filter: brightness(1) saturate(1);
    transform: scale(1);
  }
  50% { 
    filter: brightness(1.3) saturate(1.5);
    transform: scale(1.05);
  }
}

.my-physics-thermodynamics-cold {
  animation: physics-thermodynamics-cold 2s ease-in-out infinite;
}

@keyframes physics-thermodynamics-cold {
  0%, 100% { 
    filter: brightness(0.8) saturate(0.7);
    transform: scale(1);
  }
  50% { 
    filter: brightness(0.6) saturate(0.5);
    transform: scale(0.95);
  }
}

/* ========================================
   ELECTROMAGNETISM PHYSICS
   ======================================== */

.my-physics-electromagnetic {
  animation: physics-electromagnetic 2s ease-in-out infinite;
}

@keyframes physics-electromagnetic {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  50% { 
    transform: scale(1.1) rotate(180deg);
    filter: hue-rotate(180deg);
  }
}

.my-physics-electromagnetic-field {
  position: relative;
  overflow: hidden;
}

.my-physics-electromagnetic-field::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--physics-duration) var(--physics-easing);
  z-index: -1;
  animation: physics-electromagnetic-field 3s ease-in-out infinite;
}

@keyframes physics-electromagnetic-field {
  0%, 100% { 
    opacity: 0;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

/* ========================================
   QUANTUM PHYSICS
   ======================================== */

.my-physics-quantum {
  animation: physics-quantum 1s ease-in-out infinite;
}

@keyframes physics-quantum {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.7;
  }
}

.my-physics-quantum-superposition {
  animation: physics-quantum-superposition 2s ease-in-out infinite;
}

@keyframes physics-quantum-superposition {
  0%, 100% { 
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  25% { 
    transform: translateX(-10px) scale(1.05);
    opacity: 0.8;
  }
  50% { 
    transform: translateX(0) scale(1.1);
    opacity: 0.6;
  }
  75% { 
    transform: translateX(10px) scale(1.05);
    opacity: 0.8;
  }
}

.my-physics-quantum-entanglement {
  position: relative;
}

.my-physics-quantum-entanglement::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: physics-quantum-entanglement 2s ease-in-out infinite;
  z-index: -1;
}

@keyframes physics-quantum-entanglement {
  0%, 100% { 
    width: 0;
    height: 0;
    opacity: 0;
  }
  50% { 
    width: 200px;
    height: 200px;
    opacity: 1;
  }
}

/* ========================================
   RELATIVITY PHYSICS
   ======================================== */

.my-physics-relativity {
  transition: all var(--physics-duration) var(--physics-easing);
}

.my-physics-relativity:hover {
  transform: scale(0.95);
  filter: brightness(0.8);
}

.my-physics-relativity-time-dilation {
  animation: physics-relativity-time-dilation 3s ease-in-out infinite;
}

@keyframes physics-relativity-time-dilation {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(0.9);
    filter: brightness(0.7);
  }
}

.my-physics-relativity-length-contraction {
  animation: physics-relativity-length-contraction 2s ease-in-out infinite;
}

@keyframes physics-relativity-length-contraction {
  0%, 100% { 
    transform: scaleX(1);
  }
  50% { 
    transform: scaleX(0.8);
  }
}

/* ========================================
   FLUID DYNAMICS PHYSICS
   ======================================== */

.my-physics-fluid {
  animation: physics-fluid 3s ease-in-out infinite;
}

@keyframes physics-fluid {
  0%, 100% { 
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
  50% { 
    transform: translateY(-5px) scale(1.02);
    filter: blur(1px);
  }
}

.my-physics-fluid-turbulent {
  animation: physics-fluid-turbulent 2s ease-in-out infinite;
}

@keyframes physics-fluid-turbulent {
  0%, 100% { 
    transform: translateX(0) translateY(0) rotate(0deg);
    filter: blur(0px);
  }
  25% { 
    transform: translateX(5px) translateY(-3px) rotate(2deg);
    filter: blur(1px);
  }
  50% { 
    transform: translateX(0) translateY(-5px) rotate(0deg);
    filter: blur(2px);
  }
  75% { 
    transform: translateX(-5px) translateY(-3px) rotate(-2deg);
    filter: blur(1px);
  }
}

/* ========================================
   OPTICS PHYSICS
   ======================================== */

.my-physics-optics {
  animation: physics-optics 2s ease-in-out infinite;
}

@keyframes physics-optics {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1) contrast(1);
  }
  50% { 
    transform: scale(1.05);
    filter: brightness(1.2) contrast(1.3);
  }
}

.my-physics-optics-refraction {
  animation: physics-optics-refraction 3s ease-in-out infinite;
}

@keyframes physics-optics-refraction {
  0%, 100% { 
    transform: skewX(0deg) scale(1);
    filter: hue-rotate(0deg);
  }
  50% { 
    transform: skewX(5deg) scale(1.02);
    filter: hue-rotate(30deg);
  }
}

.my-physics-optics-diffraction {
  animation: physics-optics-diffraction 2s ease-in-out infinite;
}

@keyframes physics-optics-diffraction {
  0%, 100% { 
    transform: scale(1);
    filter: blur(0px) brightness(1);
  }
  50% { 
    transform: scale(1.1);
    filter: blur(2px) brightness(1.3);
  }
}

/* ========================================
   RESPONSIVE PHYSICS
   ======================================== */

@media (max-width: 768px) {
  .my-physics-responsive {
    --physics-duration: 0.5s;
    --physics-scale: 0.8;
  }
}

@media (min-width: 1024px) {
  .my-physics-responsive {
    --physics-duration: 1.5s;
    --physics-scale: 1.2;
  }
}

/* ========================================
   PHYSICS ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .my-physics-gravity,
  .my-physics-momentum,
  .my-physics-elastic,
  .my-physics-friction,
  .my-physics-centripetal,
  .my-physics-wave,
  .my-physics-thermodynamics,
  .my-physics-electromagnetic,
  .my-physics-quantum,
  .my-physics-relativity,
  .my-physics-fluid,
  .my-physics-optics {
    animation: none;
  }
  
  .my-physics-gravity:hover,
  .my-physics-momentum:hover,
  .my-physics-elastic:hover,
  .my-physics-friction:hover {
    transform: none;
  }
}

/* ========================================
   PHYSICS UTILITY CLASSES
   ======================================== */

.my-physics-auto {
  transition: all var(--physics-duration) var(--physics-easing);
}

.my-physics-auto:hover {
  transform: scale(var(--physics-scale));
}

.my-physics-realistic {
  --physics-duration: 0.6s;
  --physics-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

.my-physics-exaggerated {
  --physics-duration: 1.5s;
  --physics-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}