/* Custom styles & Advanced Futuristic Animations for xgw.io */
@layer utilities {
  .bg-grid-pattern {
    background-size: 48px 48px;
    background-image: 
      linear-gradient(to right, rgba(0, 242, 254, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 242, 254, 0.05) 1px, transparent 1px);
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #03050b;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00f2fe;
  box-shadow: 0 0 10px #00f2fe;
}

/* Mask for Marquee ticker */
.mask-marquee {
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

/* 3D Tilt Card Container */
.tilt-card {
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 20px 40px -15px rgba(0, 242, 254, 0.15);
}

/* Glowing Border Beam / Shimmer Animation */
.shimmer-border {
  position: relative;
  overflow: hidden;
}
.shimmer-border::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent,
    rgba(0, 242, 254, 0.4),
    rgba(99, 102, 241, 0.6),
    rgba(168, 85, 247, 0.4),
    transparent 60%
  );
  animation: rotateBeam 6s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.shimmer-border:hover::before {
  opacity: 1;
}

.shimmer-inner {
  position: relative;
  z-index: 1;
}

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

/* Scanner Laser Line */
.scanner-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00f2fe, #a855f7, transparent);
  box-shadow: 0 0 15px #00f2fe;
  animation: scanDown 4s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes scanDown {
  0% { top: 0%; opacity: 0.2; }
  50% { opacity: 0.9; }
  100% { top: 98%; opacity: 0.2; }
}

/* Pulsing Cyber Rings in Hero */
.cyber-ring-1 {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0, 242, 254, 0.25);
  animation: spinSlow 35s linear infinite;
  pointer-events: none;
}
.cyber-ring-2 {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.2);
  animation: spinReverse 25s linear infinite;
  pointer-events: none;
}

@keyframes spinSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes spinReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

/* Light beam traveling along pipes */
.packet-bullet {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f2fe;
  box-shadow: 0 0 8px #00f2fe, 0 0 14px #00f2fe;
  animation: travelRight 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes travelRight {
  0% { left: 0%; opacity: 0; transform: scale(0.5); }
  15% { opacity: 1; transform: scale(1.2); }
  85% { opacity: 1; transform: scale(1.2); }
  100% { left: 100%; opacity: 0; transform: scale(0.5); }
}

/* Dynamic Spotlight Follow on Card hover */
.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::after {
  content: '';
  position: absolute;
  top: var(--mouse-y, -1000px);
  left: var(--mouse-x, -1000px);
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.12) 0%, rgba(99, 102, 241, 0.04) 45%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s ease;
  opacity: 0;
}
.spotlight-card:hover::after {
  opacity: 1;
}

/* Interactive Cursor Glow */
#cursor-glow {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, rgba(168, 85, 247, 0.03) 40%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: transform 0.08s linear, opacity 0.3s ease;
  will-change: left, top;
}

/* Text Shimmer Gradient Animation */
.text-shimmer {
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.9) 0%,
    #00f2fe 30%,
    #a855f7 60%,
    rgba(255, 255, 255, 0.9) 100%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shineText 5s linear infinite;
}

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

/* Scroll Reveal animation */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}