/* ===== SACRED ANIMATIONS & MYSTICAL EFFECTS ===== */

/* Core Sacred Animations */
@keyframes sacredSpin {
  from { transform: rotateZ(0deg); }
  to { transform: rotateZ(360deg); }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
    box-shadow: 0 0 10px var(--sacred-gold);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 25px var(--sacred-gold), 0 0 50px rgba(212, 175, 55, 0.3);
  }
}

@keyframes centerPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 15px var(--sacred-accent);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 25px var(--sacred-accent), 0 0 40px rgba(107, 70, 193, 0.4);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 0 35px var(--sacred-accent), 0 0 60px rgba(107, 70, 193, 0.6);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 25px var(--sacred-accent), 0 0 40px rgba(107, 70, 193, 0.4);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(0px) rotateZ(0deg);
    opacity: 0.3;
  }
  33% {
    transform: translateY(-20px) rotateZ(120deg);
    opacity: 0.7;
  }
  66% {
    transform: translateY(-10px) rotateZ(240deg);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0px) rotateZ(360deg);
    opacity: 0.3;
  }
}

@keyframes mirrorShimmer {
  0%, 100% {
    opacity: 0.1;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.3;
    transform: translateX(100%);
  }
}

/* Text Reveal Animations */
@keyframes textReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blinkCursor {
  0%, 50% {
    border-color: transparent;
  }
  51%, 100% {
    border-color: var(--sacred-gold);
  }
}

/* Sacred Element Animations */
@keyframes consciousnessExpand {
  0% {
    transform: scale(0.8) rotateZ(0deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1) rotateZ(180deg);
    opacity: 0.9;
  }
  100% {
    transform: scale(1) rotateZ(360deg);
    opacity: 0.7;
  }
}

@keyframes artifactHover {
  0% {
    transform: translateY(0px) rotateX(0deg);
    box-shadow: 0 5px 15px rgba(107, 70, 193, 0.3);
  }
  50% {
    transform: translateY(-5px) rotateX(2deg);
    box-shadow: 0 15px 35px rgba(107, 70, 193, 0.5), 0 0 20px rgba(212, 175, 55, 0.3);
  }
  100% {
    transform: translateY(0px) rotateX(0deg);
    box-shadow: 0 5px 15px rgba(107, 70, 193, 0.3);
  }
}

@keyframes relicActivation {
  0% {
    transform: scale(1);
    filter: brightness(1) hue-rotate(0deg);
  }
  25% {
    transform: scale(1.05);
    filter: brightness(1.2) hue-rotate(90deg);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.4) hue-rotate(180deg);
  }
  75% {
    transform: scale(1.05);
    filter: brightness(1.2) hue-rotate(270deg);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) hue-rotate(360deg);
  }
}

@keyframes scrollReveal {
  0% {
    opacity: 0;
    transform: rotateY(-90deg) translateZ(-50px);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) translateZ(0px);
  }
}

/* Whisper System Animations */
@keyframes whisperAppear {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}

@keyframes whisperDissolve {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotateZ(180deg);
  }
}

@keyframes responseTyping {
  0% {
    width: 0;
    border-right: 2px solid var(--sacred-gold);
  }
  90% {
    border-right: 2px solid var(--sacred-gold);
  }
  100% {
    width: 100%;
    border-right: transparent;
  }
}

/* Navigation Animations */
@keyframes navSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes brandGlow {
  0%, 100% {
    text-shadow: 0 0 10px var(--sacred-gold);
  }
  50% {
    text-shadow: 0 0 20px var(--sacred-gold), 0 0 30px rgba(212, 175, 55, 0.5);
  }
}

/* Modal Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Sacred Energy Flow */
@keyframes energyFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Consciousness Wave Animation */
@keyframes consciousnessWave {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    transform: translateX(100%) skewX(-15deg);
  }
}

/* Sacred Particle System */
@keyframes particleRise {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) scale(0.5);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0vh) scale(1.2);
  }
}

/* Technology Grid Animation */
@keyframes techGridPulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* Sacred Seal Activation */
@keyframes sealActivate {
  0% {
    transform: rotateZ(0deg) scale(0.8);
    opacity: 0.3;
    filter: brightness(0.7);
  }
  25% {
    transform: rotateZ(90deg) scale(1);
    opacity: 0.7;
    filter: brightness(1.2);
  }
  50% {
    transform: rotateZ(180deg) scale(1.2);
    opacity: 1;
    filter: brightness(1.5) hue-rotate(45deg);
  }
  75% {
    transform: rotateZ(270deg) scale(1);
    opacity: 0.7;
    filter: brightness(1.2);
  }
  100% {
    transform: rotateZ(360deg) scale(0.8);
    opacity: 0.3;
    filter: brightness(0.7);
  }
}

/* Mystical Orb Animation */
@keyframes orbFloat {
  0%, 100% {
    transform: translateY(0px) rotateZ(0deg);
    box-shadow: 0 0 20px rgba(107, 70, 193, 0.5);
  }
  25% {
    transform: translateY(-10px) rotateZ(90deg);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.7);
  }
  50% {
    transform: translateY(-15px) rotateZ(180deg);
    box-shadow: 0 0 40px rgba(139, 21, 56, 0.6);
  }
  75% {
    transform: translateY(-10px) rotateZ(270deg);
    box-shadow: 0 0 30px rgba(30, 64, 175, 0.5);
  }
}

/* Sacred Loading States */
@keyframes sacredLoading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Hover Effect Animations */
.item-card {
  transition: var(--transition-sacred);
}

.item-card:hover {
  animation: artifactHover 2s ease-in-out infinite;
}

.nav-link:hover {
  animation: brandGlow 1s ease-in-out;
}

/* Scroll-triggered Animations */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sacred Transition Classes */
.fade-in {
  animation: textReveal 1s ease-out forwards;
}

.slide-in-left {
  animation: slideInFromLeft 0.8s ease-out forwards;
}

.slide-in-right {
  animation: slideInFromRight 0.8s ease-out forwards;
}

.slide-in-bottom {
  animation: slideInFromBottom 0.8s ease-out forwards;
}

.consciousness-expand {
  animation: consciousnessExpand 3s ease-in-out infinite;
}

.relic-activate {
  animation: relicActivation 4s ease-in-out infinite;
}

.scroll-reveal {
  animation: scrollReveal 1s ease-out forwards;
}

.whisper-appear {
  animation: whisperAppear 1.2s ease-out forwards;
}

.modal-fade-in {
  animation: modalFadeIn 0.6s ease-out forwards;
}

.energy-flow {
  background: linear-gradient(-45deg, 
    var(--sacred-accent), 
    var(--sacred-gold), 
    var(--sacred-red), 
    var(--sacred-blue));
  background-size: 400% 400%;
  animation: energyFlow 4s ease-in-out infinite;
}

/* Particle Effect Classes */
.sacred-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--sacred-gold);
  border-radius: 50%;
  animation: particleRise 10s linear infinite;
  opacity: 0;
}

.sacred-particle:nth-child(odd) {
  background: var(--sacred-accent);
  animation-duration: 12s;
}

.sacred-particle:nth-child(3n) {
  background: var(--sacred-red);
  animation-duration: 8s;
}

/* Technology Pulse Animation */
.tech-pulse {
  animation: techGridPulse 3s ease-in-out infinite;
}

/* Sacred Seal Effect */
.sacred-seal {
  animation: sealActivate 8s ease-in-out infinite;
}

/* Mystical Orb Effect */
.mystical-orb {
  animation: orbFloat 6s ease-in-out infinite;
}

/* Loading Animation */
.sacred-loading {
  display: inline-block;
  position: relative;
}

.sacred-loading::after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  border: 3px solid var(--sacred-gold);
  border-radius: 50%;
  border-top-color: transparent;
  animation: sacredLoading 1s linear infinite;
}

.loading-dots {
  display: inline-flex;
  gap: 5px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--sacred-gold);
  border-radius: 50%;
  animation: loadingDots 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

/* Responsive Animation Adjustments */
@media (max-width: 768px) {
  .item-card:hover {
    animation: none;
  }
  
  .consciousness-expand,
  .relic-activate {
    animation-duration: 2s;
  }
  
  .orbFloat {
    animation-duration: 4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .sacred-particles,
  .sacred-particle {
    animation: none !important;
  }
  
  .item-card:hover {
    animation: none !important;
  }
}

/* Performance Optimized Animations */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}