/* 
 * Ashu Digital Zone Theme Styles
 * Custom animations, glassmorphism, glowing accents, and timeline connectors.
 */

:root {
  --primary: #2563EB;
  --secondary: #0EA5E9;
  --accent: #22C55E;
  --bg-dark: #0F172A;
  --text-light: #F8FAFC;
}

/* Custom Smooth Scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

/* Glassmorphism utility styled as Bento Grid card */
.glass-panel {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem; /* rounded-3xl standard */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.glass-panel-hover:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 12px 40px -10px rgba(37, 99, 235, 0.3);
  transform: translateY(-4px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Neon Glow effects */
.glow-primary {
  box-shadow: 0 0 25px -5px rgba(37, 99, 235, 0.2);
}

.glow-accent {
  box-shadow: 0 0 25px -5px rgba(34, 197, 94, 0.2);
}

.text-gradient {
  background: linear-gradient(135deg, #ffffff 30%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-brand {
  background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-accent {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animated Grid Background */
.grid-bg-overlay {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
}

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

.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Glow Pulse Animation */
@keyframes glowPulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.15);
  }
}

.animate-glow-1 {
  animation: glowPulse 8s ease-in-out infinite;
}

.animate-glow-2 {
  animation: glowPulse 10s ease-in-out infinite 2s;
}

.animate-glow-3 {
  animation: glowPulse 12s ease-in-out infinite 4s;
}

/* Intersection Reveal Transitions */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger item delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Timeline connector glowing path */
.timeline-track-glow {
  background: linear-gradient(to bottom, #2563eb, #0ea5e9, #22c55e, #10b981);
}

/* Slider transition styling */
.slider-container {
  overflow: hidden;
  position: relative;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.slider-slide {
  flex-shrink: 0;
  width: 100%;
  padding: 0 8px;
}

@media (min-width: 768px) {
  .slider-slide {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .slider-slide {
    width: 33.333333%;
  }
}

/* Hide navigation map markers for clean canvas visual */
iframe[src*="maps"] {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}