animations.css

/* 
 * Quantum Animation Styles
 * Provides visual effects for the quantum transitions and particle animations
 */

/* Particle Canvas */
.particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.particle-canvas.active {
  opacity: 1;
}

/* Quantum Overlay */
#quantum-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 16, 0.92);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  overflow: hidden;
}

#quantum-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/static/images/quantum-bg.svg');
  background-size: cover;
  opacity: 0.2;
  z-index: -1;
  filter: blur(2px);
  animation: quantum-bg-pulse 8s infinite alternate;
}

#quantum-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(218, 75, 134, 0.15),
    rgba(10, 10, 16, 0.2) 60%
  );
  z-index: -1;
  animation: quantum-pulse 4s infinite alternate;
}

#quantum-overlay.active {
  opacity: 1;
}

@keyframes quantum-bg-pulse {
  0% {
    opacity: 0.1;
    transform: scale(1);
  }
  100% {
    opacity: 0.3;
    transform: scale(1.05);
  }
}

/* Quantum Loader */
.quantum-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1000px;
}

.quantum-spinner {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: quantum-spin 8s linear infinite;
}

.quantum-message {
  margin-top: 20px;
  color: white;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 2px;
  animation: quantum-pulse 2s infinite;
}

/* Quantum Orbits */
.q-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid transparent;
}

.q-orbit-1 {
  border-top-color: #da4b86;
  border-bottom-color: #da4b86;
  animation: orbit-spin-1 3s linear infinite;
  box-shadow: 0 0 10px rgba(218, 75, 134, 0.5);
}

.q-orbit-2 {
  width: 120px;
  height: 120px;
  margin: 15px;
  border-left-color: #6f42c1;
  border-right-color: #6f42c1;
  animation: orbit-spin-2 4s linear infinite;
  box-shadow: 0 0 10px rgba(111, 66, 193, 0.5);
}

.q-orbit-3 {
  width: 80px;
  height: 80px;
  margin: 35px;
  border-top-color: #0dcaf0;
  border-right-color: #0dcaf0;
  animation: orbit-spin-3 2s linear infinite;
  box-shadow: 0 0 10px rgba(13, 202, 240, 0.5);
}

.q-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  background: radial-gradient(circle, #da4b86, #6f42c1);
  border-radius: 50%;
  box-shadow: 0 0 20px #da4b86, 0 0 40px #6f42c1;
  animation: pulse 2s ease-in-out infinite alternate;
}

/* Animation for result cards */
.card {
  transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.quantum-reveal {
  animation: quantum-reveal 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

/* Special effects for quantum visualization */
.quantum-visualized {
  position: relative;
  overflow: hidden;
}

.quantum-visualized::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 50%, rgba(66, 133, 244, 0.1) 100%);
  pointer-events: none;
  animation: quantum-pulse 8s infinite alternate;
}

/* Define animations */
@keyframes quantum-spin {
  0% {
    transform: rotateY(0) rotateX(0);
  }
  25% {
    transform: rotateY(90deg) rotateX(45deg);
  }
  50% {
    transform: rotateY(180deg) rotateX(0);
  }
  75% {
    transform: rotateY(270deg) rotateX(-45deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(0);
  }
}

@keyframes orbit-spin-1 {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

@keyframes orbit-spin-2 {
  from { transform: rotateY(0deg) rotateX(60deg); }
  to { transform: rotateY(360deg) rotateX(60deg); }
}

@keyframes orbit-spin-3 {
  from { transform: rotateY(60deg) rotateX(0deg); }
  to { transform: rotateY(60deg) rotateX(360deg); }
}

@keyframes pulse {
  from { 
    transform: scale(0.8);
    box-shadow: 0 0 20px #da4b86, 0 0 40px #6f42c1;
  }
  to { 
    transform: scale(1.1);
    box-shadow: 0 0 30px #da4b86, 0 0 60px #0dcaf0;
  }
}

@keyframes quantum-pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes quantum-reveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Smoke dispersion effect */
.smoke-particle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  filter: blur(10px);
  pointer-events: none;
}

/* Tumbleweed whirlwind effect */
.tumbleweed {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 120, 120, 0.8), rgba(80, 80, 80, 0.5));
  filter: blur(5px);
  transition: transform 0.5s, opacity 0.5s;
  pointer-events: none;
}

/* Dynamic transition effect */
.transition-fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.transition-fade.show {
  opacity: 1;
}

/* Text to vision transition */
.text-to-vision {
  position: relative;
  overflow: hidden;
}

.text-to-vision::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(66, 133, 244, 0.2), transparent);
  transform: translateX(-100%);
  animation: text-scan 2s linear infinite;
}

/* Text-to-vision transition with smoke effect */
.text-to-vision-active {
  animation: smoke-disperse 1.5s ease-out forwards;
}

/* Smoke transition effect */
@keyframes smoke-disperse {
  0% {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
  }
  50% {
    filter: blur(5px);
    opacity: 0.7;
    transform: scale(1.02) translateY(5px);
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes text-scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Quantum pulse animation for visualized elements */
.quantum-visualized {
  --quantum-pulse-intensity: 0.5;
}

.quantum-visualized::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(66, 133, 244, calc(0.1 * var(--quantum-pulse-intensity))),
    transparent 70%
  );
  opacity: 0.7;
  z-index: -1;
  animation: quantum-pulse calc(8s / var(--quantum-pulse-intensity)) infinite alternate;
}

/* Special effect for quantum score badge */
.quantum-score {
  position: relative;
  transition: all 0.3s ease;
  animation: score-pulse 3s infinite alternate;
  border-radius: 8px;
  overflow: hidden;
}

.quantum-score::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(218, 75, 134, 0.3),
    rgba(111, 66, 193, 0.3),
    rgba(13, 202, 240, 0.3)
  );
  opacity: 0.3;
  z-index: -1;
}

.quantum-score:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(218, 75, 134, 0.5);
}

@keyframes score-pulse {
  0% {
    box-shadow: 0 0 5px rgba(218, 75, 134, 0.4);
    text-shadow: 0 0 3px rgba(218, 75, 134, 0.4);
  }
  50% {
    box-shadow: 0 0 8px rgba(111, 66, 193, 0.5);
    text-shadow: 0 0 5px rgba(111, 66, 193, 0.5);
  }
  100% {
    box-shadow: 0 0 12px rgba(13, 202, 240, 0.6);
    text-shadow: 0 0 8px rgba(13, 202, 240, 0.6);
  }
}

/* Tumbleweed/whirlwind effect with smoke-like appearance */
.tumbleweed {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.3),
    rgba(218, 75, 134, 0.15) 20%,
    rgba(111, 66, 193, 0.1) 40%,
    rgba(13, 202, 240, 0.05) 60%,
    transparent 80%
  );
  box-shadow: 0 0 12px rgba(218, 75, 134, 0.2);
  opacity: 0.7;
  pointer-events: none;
  filter: blur(3px);
  transform-origin: center center;
  animation: tumbleweed-rotate 10s linear infinite;
}

@keyframes tumbleweed-rotate {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.2); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Quantum particle effect */
.quantum-particle {
  position: fixed;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.7;
  box-shadow: 0 0 4px currentColor;
  animation: particle-fade 1s ease-out forwards;
}

@keyframes particle-fade {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

/* Quantum reveal animation for cards */
.quantum-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.quantum-card.quantum-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Quantum pulse animation for the background */
@keyframes quantum-pulse {
  0% {
    opacity: 0.3;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.95);
  }
}

/* Atom spin animation for the icon */
.quantum-spin {
  display: inline-block;
  animation: atom-spin 10s linear infinite;
}

@keyframes atom-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}