/* ============================================
   CREATIVE PROFESSIONAL ENHANCEMENTS
   Advanced animations and creative touches
   ============================================ */

/* Smooth Reveal Animations */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-fade-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

.reveal-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-slide-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-slide-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Magnetic Button Effect */
.magnetic-button {
  position: relative;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.magnetic-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.magnetic-button:hover::before {
  width: 300px;
  height: 300px;
}

/* Ripple Effect on Click */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}

.ripple-effect:active::after {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: 0s;
}

/* Parallax Scroll Effect */
.parallax-slow {
  transform: translateZ(0);
  will-change: transform;
}

/* Text Gradient Animation */
.text-gradient-animated {
  background: linear-gradient(
    90deg,
    #6366F1 0%,
    #14B8A6 25%,
    #3B82F6 50%,
    #8B5CF6 75%,
    #6366F1 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShine 3s linear infinite;
}

@keyframes textShine {
  to {
    background-position: 200% center;
  }
}

/* Neon Glow Text */
.neon-text {
  color: #fff;
  text-shadow:
    0 0 5px rgba(99, 102, 241, 0.8),
    0 0 10px rgba(99, 102, 241, 0.6),
    0 0 20px rgba(99, 102, 241, 0.4),
    0 0 40px rgba(99, 102, 241, 0.2);
  animation: neonFlicker 3s ease-in-out infinite;
}

@keyframes neonFlicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  75% {
    opacity: 1;
  }
  80% {
    opacity: 0.95;
  }
}

/* Holographic Effect */
.holographic {
  position: relative;
  background: linear-gradient(
    45deg,
    #6366F1,
    #14B8A6,
    #3B82F6,
    #8B5CF6,
    #EC4899
  );
  background-size: 400% 400%;
  animation: holographicShift 5s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes holographicShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* 3D Card Tilt Effect */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-3d:hover {
  transform: perspective(1000px) rotateY(10deg) rotateX(5deg) scale(1.02);
}

.card-3d-content {
  transform: translateZ(50px);
}

/* Floating Animation */
.float-animation {
  animation: floatUpDown 4s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Pulse Glow Animation */
.pulse-glow {
  animation: pulseGlowEffect 2s ease-in-out infinite;
}

@keyframes pulseGlowEffect {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.8),
                0 0 60px rgba(20, 184, 166, 0.6);
  }
}

/* Typing Animation */
.typing-effect {
  overflow: hidden;
  border-right: 2px solid #6366F1;
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink 0.75s step-end infinite;
}

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

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Morphing Background */
.morphing-bg {
  background: linear-gradient(
    -45deg,
    #6366F1,
    #14B8A6,
    #3B82F6,
    #8B5CF6
  );
  background-size: 400% 400%;
  animation: morphingGradient 15s ease infinite;
}

@keyframes morphingGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Glitch Effect */
.glitch {
  position: relative;
  color: #fff;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #6366F1;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitchAnim 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #14B8A6;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitchAnim 2s infinite linear alternate-reverse;
}

@keyframes glitchAnim {
  0% {
    clip: rect(92px, 9999px, 49px, 0);
  }
  25% {
    clip: rect(14px, 9999px, 32px, 0);
  }
  50% {
    clip: rect(75px, 9999px, 8px, 0);
  }
  75% {
    clip: rect(41px, 9999px, 99px, 0);
  }
  100% {
    clip: rect(63px, 9999px, 21px, 0);
  }
}

/* Liquid Button */
.liquid-button {
  position: relative;
  overflow: hidden;
}

.liquid-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 102, 241, 0.6),
    transparent
  );
  transition: left 0.5s ease;
}

.liquid-button:hover::before {
  left: 100%;
}

/* Perspective Card Grid */
.perspective-grid {
  perspective: 1000px;
  display: grid;
  gap: 30px;
}

.perspective-card {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.perspective-card:hover {
  transform: translateZ(30px);
}

/* Animated Border */
.animated-border {
  position: relative;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.animated-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    90deg,
    #6366F1,
    #14B8A6,
    #3B82F6,
    #8B5CF6
  );
  border-radius: inherit;
  z-index: -1;
  animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Stagger Fade In */
.stagger-item {
  opacity: 0;
  transform: translateY(30px);
  animation: staggerFadeIn 0.6s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes staggerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spotlight Follow Cursor */
.spotlight-container {
  position: relative;
  overflow: hidden;
}

.spotlight-container::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.3) 0%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.spotlight-container:hover::before {
  opacity: 1;
}

/* Gradient Text Shadow */
.gradient-shadow-text {
  color: #fff;
  text-shadow:
    0 2px 10px rgba(99, 102, 241, 0.5),
    0 4px 20px rgba(20, 184, 166, 0.4),
    0 8px 30px rgba(59, 130, 246, 0.3);
}

/* Smooth Color Transition */
.smooth-color-transition {
  transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

/* Bounce In */
.bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Rotate In */
.rotate-in {
  animation: rotateIn 0.8s ease;
}

@keyframes rotateIn {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

/* Slide In From Bottom */
.slide-in-bottom {
  animation: slideInBottom 0.8s ease;
}

@keyframes slideInBottom {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .glass-container,
  .glass-container-dark {
    border-width: 2px;
    border-color: currentColor;
  }
}