/* =============================================================================
   Enhanced Home Page Styles - Premium Effects
   ============================================================================= */

/* Floating Orbs Animation */
@keyframes float-orb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(30px, -40px) scale(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-20px, -80px) scale(0.9);
    opacity: 0.5;
  }
  75% {
    transform: translate(-40px, -40px) scale(1.05);
    opacity: 0.7;
  }
}

@keyframes float-orb-reverse {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.5;
  }
  33% {
    transform: translate(-40px, 30px) scale(1.2) rotate(120deg);
    opacity: 0.7;
  }
  66% {
    transform: translate(20px, 60px) scale(0.85) rotate(240deg);
    opacity: 0.6;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(221, 17, 18, 0.3),
                0 0 40px rgba(221, 17, 18, 0.2),
                0 0 60px rgba(221, 17, 18, 0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(221, 17, 18, 0.5),
                0 0 60px rgba(221, 17, 18, 0.3),
                0 0 90px rgba(221, 17, 18, 0.2);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(221, 17, 18, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(221, 17, 18, 0.6));
  }
}

/* Light Beam Animation */
@keyframes light-beam {
  0% {
    transform: translateX(-100%) rotate(45deg);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(200%) rotate(45deg);
    opacity: 0;
  }
}

/* Ripple Effect */
@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Gradient Shift Animation */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating Orbs Container */
.orbs-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.floating-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(221, 17, 18, 0.3));
  filter: blur(40px);
  animation: float-orb 15s ease-in-out infinite;
  pointer-events: none;
}

.floating-orb:nth-child(1) {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 30% 30%, rgba(0, 98, 255, 0.2), rgba(0, 98, 255, 0.05));
  animation-duration: 20s;
  animation-delay: 0s;
}

.floating-orb:nth-child(2) {
  width: 200px;
  height: 200px;
  top: 50%;
  right: 15%;
  background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.25), rgba(168, 85, 247, 0.08));
  animation: float-orb-reverse 18s ease-in-out infinite;
  animation-delay: 2s;
}

.floating-orb:nth-child(3) {
  width: 250px;
  height: 250px;
  bottom: 15%;
  left: 20%;
  background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.06));
  animation-duration: 22s;
  animation-delay: 4s;
}

.floating-orb:nth-child(4) {
  width: 180px;
  height: 180px;
  top: 30%;
  right: 30%;
  background: radial-gradient(circle at 30% 30%, rgba(221, 17, 18, 0.15), rgba(221, 17, 18, 0.04));
  animation: float-orb-reverse 16s ease-in-out infinite;
  animation-delay: 6s;
}

.floating-orb:nth-child(5) {
  width: 220px;
  height: 220px;
  bottom: 25%;
  right: 20%;
  background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.18), rgba(168, 85, 247, 0.05));
  animation-duration: 24s;
  animation-delay: 3s;
}

/* Enhanced Button Effects */
.btn-enhanced {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-enhanced::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-enhanced:hover::before {
  width: 300px;
  height: 300px;
}

.btn-enhanced::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s;
}

.btn-enhanced:hover::after {
  left: 100%;
}

/* Card Hover Effects */
.card-enhanced {
  position: relative;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-enhanced::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg,
    #DD1112,
    #0062FF,
    #A855F7,
    #22D3EE,
    #DD1112
  );
  background-size: 300% 300%;
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s;
  animation: gradient-shift 6s ease infinite;
  filter: blur(20px);
}

.card-enhanced:hover::before {
  opacity: 0.3;
}

.card-enhanced:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Glow Text Effect */
.text-glow {
  text-shadow: 0 0 20px rgba(221, 17, 18, 0.3),
               0 0 40px rgba(221, 17, 18, 0.2),
               0 0 60px rgba(221, 17, 18, 0.1);
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Parallax Sections */
.parallax-section {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* Light Trail Effect */
.light-trail {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  pointer-events: none;
  animation: light-beam 3s ease-in-out infinite;
}

/* Enhanced Service Card */
.service-card-enhanced {
  position: relative;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.service-card-enhanced::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(221, 17, 18, 0.2) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.8s, height 0.8s;
  border-radius: 50%;
}

.service-card-enhanced:hover::before {
  width: 500px;
  height: 500px;
}

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

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

/* Glow Border Effect */
.glow-border {
  position: relative;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, #DD1112, #A855F7, #0062FF, #22D3EE) border-box;
  border: 2px solid transparent;
  animation: gradient-shift 6s ease infinite;
  background-size: 300% 300%;
}

/* Enhanced Gradient Text */
.gradient-text-animated {
  background: linear-gradient(
    45deg,
    #DD1112,
    #A855F7,
    #0062FF,
    #22D3EE,
    #DD1112
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease infinite;
}

/* Floating Animation for Icons */
@keyframes float-icon {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.icon-float {
  animation: float-icon 3s ease-in-out infinite;
}

/* Stagger Animation */
.stagger-item {
  opacity: 0;
  transform: translateY(30px);
  animation: stagger-in 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes stagger-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.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; }

/* Smooth Scroll Reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

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

/* Enhanced Hover Glow */
.hover-glow {
  transition: all 0.4s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(221, 17, 18, 0.4),
              0 0 60px rgba(221, 17, 18, 0.2),
              0 10px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* Particle Effect */
@keyframes particle-float {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(221, 17, 18, 0.8), transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float 3s ease-out forwards;
}

/* Shine Effect */
@keyframes shine {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.shine-effect {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  background-size: 200% 100%;
  animation: shine 3s ease-in-out infinite;
}

/* 3D Transform Effects */
.transform-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.transform-3d:hover {
  transform: rotateY(5deg) rotateX(-5deg);
}

/* Neon Glow Effect */
.neon-glow {
  text-shadow:
    0 0 10px rgba(221, 17, 18, 0.5),
    0 0 20px rgba(221, 17, 18, 0.4),
    0 0 30px rgba(221, 17, 18, 0.3),
    0 0 40px rgba(221, 17, 18, 0.2);
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Loading State Animation */
@keyframes loading-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading-pulse {
  animation: loading-pulse 1.5s ease-in-out infinite;
}