/* ==========================================================================
   VSP Cyber & Futuristic Effects Suite
   Separated from index.html for clean modular architecture
   ========================================================================== */

/* 1. Neon Cyber Scroll Progress Bar */
#cyber-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #00d679, #7df9ff, #00d679);
  background-size: 200% 100%;
  animation: cyberGradientMove 4s linear infinite;
  z-index: 10001;
  box-shadow: 0 0 10px #00d679, 0 0 20px rgba(125, 249, 255, 0.7);
  pointer-events: none;
  transition: width 0.08s ease-out;
}

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

/* 2. Ambient Cursor Aura Follower */
#ambient-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  margin-top: -240px;
  margin-left: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 214, 121, 0.12) 0%, rgba(125, 249, 255, 0.05) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate3d(-1000px, -1000px, 0);
  transition: opacity 0.5s ease;
  will-change: transform;
  opacity: 0;
}

body:hover #ambient-cursor-glow {
  opacity: 1;
}

/* 3. Cyber Scramble Text Glitch Effect */
.row-features {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.cyber-scramble {
  cursor: pointer;
  display: inline-block;
  transition: text-shadow 0.25s ease, color 0.25s ease;
}

.cyber-scramble:hover {
  text-shadow: 0 0 14px rgba(0, 214, 121, 0.85), 0 0 30px rgba(125, 249, 255, 0.6);
}

/* 5. 3D Perspective Card Tilt & Specular Dynamic Border Glow */
.w3l-services-block-3 .feature-grid {
  perspective: 1200px;
}

.w3l-services-block-3 .feature-body {
  position: relative;
  background-color: #0d1117;
  border: 1px solid #1e2633;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease, border-color 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.w3l-services-block-3 .feature-body::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    260px circle at var(--glow-x, -200px) var(--glow-y, -200px),
    rgba(0, 214, 121, 0.7),
    rgba(125, 249, 255, 0.35) 40%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.w3l-services-block-3 .feature-body:hover::before {
  opacity: 1;
}

.w3l-services-block-3 .feature-body:hover,
.w3l-services-block-3 .service1:hover,
.w3l-services-block-3 .service2:hover,
.w3l-services-block-3 .service3:hover,
.w3l-services-block-3 .service4:hover,
.w3l-services-block-3 .service5:hover,
.w3l-services-block-3 .service6:hover {
  background-image: none !important;
  background-color: #0d1117 !important;
  box-shadow: 0 18px 40px -10px rgba(0, 214, 121, 0.22), 0 0 25px -5px rgba(125, 249, 255, 0.18);
  border-color: rgba(0, 214, 121, 0.4);
}

/* 6. High-Tech Holographic Photo Wrapper with HUD Corner Brackets */
.vsp-photo-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 14px;
  padding: 8px;
  background: rgba(13, 17, 23, 0.7);
  border: 1px solid #1e2633;
  box-shadow: 0 0 25px rgba(0, 214, 121, 0.12);
  transition: all 0.35s ease;
}

.vsp-photo-wrapper:hover {
  border-color: rgba(0, 214, 121, 0.6);
  box-shadow: 0 0 40px rgba(0, 214, 121, 0.3), 0 0 20px rgba(125, 249, 255, 0.25);
  transform: translateY(-3px);
}

.vsp-photo-wrapper img {
  border-radius: 10px;
  display: block;
}

.vsp-hud-bracket {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #00d679;
  border-style: solid;
  pointer-events: none;
  transition: all 0.3s ease;
}

.vsp-hud-bracket.tl { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.vsp-hud-bracket.tr { top: -2px; right: -2px; border-width: 2px 2px 0 0; }
.vsp-hud-bracket.bl { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; }
.vsp-hud-bracket.br { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

.vsp-photo-wrapper:hover .vsp-hud-bracket {
  border-color: #7df9ff;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 8px #7df9ff;
}

/* 7. Enhanced Timeline Hologram Accents */
.w3l-content-photo-5 .content-left ul {
  list-style: none !important;
  padding-left: 0 !important;
}

.w3l-content-photo-5 .content-left ul li {
  position: relative;
  list-style: none !important;
  padding-left: 20px;
  transition: transform 0.2s ease;
}

.w3l-content-photo-5 .content-left ul li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #00d679;
  font-size: 1.1em;
  transition: transform 0.2s ease, color 0.2s ease;
}

.w3l-content-photo-5 .content-left ul li:hover::before {
  color: #7df9ff;
  transform: translateX(3px);
}

.w3l-content-photo-5 .content-left ul li:hover {
  transform: translateX(4px);
}

/* 8. Gallery Cosmic Vortex & Retro-Futuristic Horizon Grid */
#gallery-vsp {
  position: relative;
  overflow: hidden;
  background-color: #030407 !important;
}

#gallery-vsp .gallery-7_sur {
  background: transparent !important;
  position: relative;
  z-index: 2;
}

.gallery-cyber-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

#gallery-fx-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.gallery-horizon-stage {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  perspective: 320px;
  perspective-origin: 50% 10%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 25%, transparent 95%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 25%, transparent 95%);
}

.gallery-horizon-grid {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 200%;
  transform: rotateX(72deg);
  background-image:
    linear-gradient(to right, rgba(0, 214, 121, 0.22) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(125, 249, 255, 0.22) 1.5px, transparent 1.5px);
  background-size: 60px 60px;
  animation: galleryGridMove 7s linear infinite;
}

@keyframes galleryGridMove {
  0% { transform: rotateX(72deg) translateY(0); }
  100% { transform: rotateX(72deg) translateY(60px); }
}

.gallery-horizon-glow {
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 214, 121, 0.25) 0%, rgba(125, 249, 255, 0.12) 40%, transparent 75%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
}

/* Gallery Photo Frame Enhancements */
#gallery-vsp .galleryContainer {
  background: rgba(13, 17, 23, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #1e2633;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 214, 121, 0.08);
  transition: all 0.35s ease;
}

#gallery-vsp .galleryContainer:hover {
  border-color: rgba(0, 214, 121, 0.45);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 214, 121, 0.16);
}

#gallery-vsp .galleryImage {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

#gallery-vsp .thumbnails label img {
  border-radius: 6px;
  border: 1px solid #1e2633;
  transition: all 0.25s ease;
}

#gallery-vsp .thumbnails label:hover img {
  border-color: #7df9ff;
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(125, 249, 255, 0.4);
}

#gallery-vsp .row.mt-4 img {
  border-radius: 10px;
  border: 1px solid #1e2633;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

#gallery-vsp .row.mt-4 img:hover {
  border-color: #00d679;
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0, 214, 121, 0.25), 0 0 20px rgba(125, 249, 255, 0.2);
}