/* TongueGrounding Visual Enhancement CSS */
/* Optimized for performance with lazy loading and progressive enhancement */

/* ===== CSS Variables for Dynamic Theming ===== */
:root {
  --neural-blue: #667eea;
  --quantum-purple: #764ba2;
  --electric-cyan: #00d4ff;
  --bio-green: #48bb78;
  --plasma-pink: #ff006e;
  --liquid-gradient: linear-gradient(135deg, var(--neural-blue) 0%, var(--quantum-purple) 100%);
  --mesh-gradient: radial-gradient(at 40% 20%, hsla(251, 80%, 70%, 1) 0px, transparent 50%),
                   radial-gradient(at 80% 0%, hsla(291, 60%, 60%, 1) 0px, transparent 50%),
                   radial-gradient(at 0% 50%, hsla(251, 80%, 70%, 0.5) 0px, transparent 50%),
                   radial-gradient(at 80% 50%, hsla(340, 80%, 60%, 0.5) 0px, transparent 50%),
                   radial-gradient(at 0% 100%, hsla(251, 80%, 70%, 0.5) 0px, transparent 50%),
                   radial-gradient(at 0% 0%, hsla(291, 60%, 60%, 1) 0px, transparent 50%);
  --neural-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23667eea' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Hero Section with Parallax Background ===== */
.hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--mesh-gradient), var(--liquid-gradient);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1635070041078-e363dbe005cb?w=1920&q=80');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.3;
  filter: blur(2px);
  transform: scale(1.1);
  transition: transform 10s ease-out;
}

.hero-section:hover .hero-background {
  transform: scale(1.15);
}

/* ===== Lazy Loading Images ===== */
img[data-src] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img.loaded {
  opacity: 1;
}

/* Loading skeleton */
.image-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* ===== Technology Cards with Hover Effects ===== */
.tech-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--mesh-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.tech-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.tech-card:hover::before {
  opacity: 0.8;
}

.tech-card-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tech-card:hover .tech-card-image {
  transform: scale(1.1);
}

/* ===== Liquid Animation Overlays ===== */
.liquid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.liquid-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--electric-cyan), transparent 70%);
  filter: blur(40px);
  opacity: 0.6;
  animation: float 20s infinite ease-in-out;
}

.liquid-blob:nth-child(2) {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at 70% 70%, var(--plasma-pink), transparent 70%);
  animation-duration: 25s;
  animation-delay: -5s;
}

.liquid-blob:nth-child(3) {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle at 50% 50%, var(--quantum-purple), transparent 70%);
  animation-duration: 30s;
  animation-delay: -10s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(100px, -100px) scale(1.1); }
  50% { transform: translate(-100px, 100px) scale(0.9); }
  75% { transform: translate(50px, 50px) scale(1.05); }
}

/* ===== Neural Network Background Pattern ===== */
.neural-pattern {
  position: relative;
  background-color: #0a0e27;
  background-image: var(--neural-pattern);
}

.neural-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(0deg, transparent 24%, rgba(102, 126, 234, 0.05) 25%, rgba(102, 126, 234, 0.05) 26%, transparent 27%, transparent 74%, rgba(102, 126, 234, 0.05) 75%, rgba(102, 126, 234, 0.05) 76%, transparent 77%, transparent),
    linear-gradient(90deg, transparent 24%, rgba(102, 126, 234, 0.05) 25%, rgba(102, 126, 234, 0.05) 26%, transparent 27%, transparent 74%, rgba(102, 126, 234, 0.05) 75%, rgba(102, 126, 234, 0.05) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
}

/* ===== Feature Sections with Gradient Borders ===== */
.feature-section {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

.feature-image-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-image-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--liquid-gradient);
  border-radius: 20px;
  z-index: -1;
  animation: gradient-rotate 5s linear infinite;
}

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

/* ===== Testimonial Cards with Glassmorphism ===== */
.testimonial-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.testimonial-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  object-fit: cover;
  z-index: -1;
}

/* ===== Optimized Image Loading Strategy ===== */
.progressive-image {
  position: relative;
  overflow: hidden;
}

.progressive-image-thumbnail {
  filter: blur(20px);
  transition: opacity 0.3s ease-out;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.progressive-image-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.progressive-image.loaded .progressive-image-main {
  opacity: 1;
}

.progressive-image.loaded .progressive-image-thumbnail {
  opacity: 0;
}

/* ===== Pure CSS Gradient Alternatives ===== */
.gradient-neural {
  background: 
    radial-gradient(ellipse at top left, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(118, 75, 162, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #0a0e27 0%, #151b3d 100%);
}

.gradient-quantum {
  background:
    conic-gradient(from 180deg at 50% 50%, #667eea 0deg, #764ba2 90deg, #00d4ff 180deg, #48bb78 270deg, #667eea 360deg);
  filter: blur(40px);
  opacity: 0.3;
}

.gradient-bio {
  background:
    radial-gradient(circle at 20% 80%, #48bb78 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, #00d4ff 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, #667eea 0%, transparent 50%);
}

/* ===== Holographic Effect ===== */
.holographic {
  background: linear-gradient(45deg, 
    hsl(265deg 100% 70%) 0%,
    hsl(295deg 100% 70%) 11%,
    hsl(325deg 100% 70%) 22%,
    hsl(355deg 100% 70%) 33%,
    hsl(25deg 100% 70%) 44%,
    hsl(55deg 100% 70%) 56%,
    hsl(85deg 100% 70%) 67%,
    hsl(115deg 100% 70%) 78%,
    hsl(145deg 100% 70%) 89%,
    hsl(175deg 100% 70%) 100%
  );
  background-size: 300% 300%;
  animation: holographic-shift 8s ease infinite;
}

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

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

/* Use GPU acceleration for animations */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Responsive image containers */
.responsive-image-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.responsive-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}