/* ========================================
   MetaVoz Design System
   Premium UI Foundation
   ======================================== */

/* === CSS Custom Properties === */
:root {
  /* Colors */
  --color-bg-primary: #020617;
  --color-bg-secondary: #030712;
  --color-indigo: #6366f1;
  --color-indigo-light: #818cf8;
  --color-cyan: #22d3ee;
  --color-purple: #c084fc;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-bg-strong: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 20px;

  /* Shadows */
  --shadow-glow-indigo: 0 0 40px rgba(99, 102, 241, 0.4);
  --shadow-glow-cyan: 0 0 40px rgba(34, 211, 238, 0.3);
  --shadow-glow-white: 0 0 30px rgba(255, 255, 255, 0.15);

  /* Transitions */
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Scrollbar Styles === */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.1);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* === Utility Classes === */
.rounded-inherit {
  border-radius: inherit;
}

.text-balance {
  text-wrap: balance;
}

/* === Glassmorphism Effects === */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.glass-card:hover::before {
  opacity: 1;
}

/* === Glow Effects === */
.glow-indigo {
  box-shadow: var(--shadow-glow-indigo);
}

.glow-cyan {
  box-shadow: var(--shadow-glow-cyan);
}

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

@keyframes glowPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }

  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.6), 0 0 60px rgba(34, 211, 238, 0.2);
  }
}

/* === Button Effects === */
.btn-glow {
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.btn-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, var(--color-indigo), var(--color-cyan), var(--color-purple), var(--color-indigo));
  background-size: 300% 100%;
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
  animation: gradientShift 3s linear infinite;
}

.btn-glow:hover::before {
  opacity: 1;
}

.btn-glow:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
}

.btn-glow:active {
  transform: translateY(0) scale(0.98);
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 300% 50%;
  }
}

/* === Shimmer Effect === */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

/* === Hero Animations === */
@keyframes fadeInSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-1rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-in.fade-in.slide-in-from-left-4 {
  animation: fadeInSlideLeft 1s ease both;
}

.hero-panel {
  width: clamp(220px, 70vw, 300px);
}

@media (min-width: 640px) {
  .hero-panel {
    width: clamp(280px, 55vw, 380px);
  }
}

@media (min-width: 768px) {
  .hero-panel {
    width: clamp(300px, 45vw, 420px);
  }
}

@media (min-width: 1280px) {
  .hero-panel {
    width: clamp(360px, 28vw, 480px);
  }
}

.hero-node {
  width: var(--hero-node, clamp(46px, 8vw, 68px));
  height: var(--hero-node, clamp(46px, 8vw, 68px));
  animation: heroFloat 6s ease-in-out infinite;
  transition: var(--transition-bounce);
}

.hero-node:nth-child(2n) {
  animation-delay: 1.2s;
}

.hero-node:nth-child(3n) {
  animation-delay: 2.1s;
}

.hero-node:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
  z-index: 50;
}

.hero-avatar {
  box-shadow: 0 0 30px rgba(15, 23, 42, 0.9);
}

.hero-channel {
  width: var(--hero-channel, 28px);
  height: var(--hero-channel, 28px);
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.35);
  transition: var(--transition-smooth);
}

.hero-node:hover .hero-channel {
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.7);
  transform: scale(1.1);
}

.hero-icon {
  width: var(--hero-icon, 14px);
  height: var(--hero-icon, 14px);
}

@keyframes heroFloat {

  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-6px);
  }
}

/* === Scroll Reveal Animations === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for card groups */
.stagger-1 {
  transition-delay: 0.1s;
}

.stagger-2 {
  transition-delay: 0.2s;
}

.stagger-3 {
  transition-delay: 0.3s;
}

.stagger-4 {
  transition-delay: 0.4s;
}

.stagger-5 {
  transition-delay: 0.5s;
}

.stagger-6 {
  transition-delay: 0.6s;
}

.stagger-7 {
  transition-delay: 0.7s;
}

.stagger-8 {
  transition-delay: 0.8s;
}

/* === Pricing Card 3D Effects === */
.pricing-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: var(--transition-smooth);
}

.pricing-card-inner {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.pricing-card:hover .pricing-card-inner {
  transform: rotateX(var(--rotateX, 0deg)) rotateY(var(--rotateY, 0deg));
}

.pricing-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99, 102, 241, 0.15) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: inherit;
}

.pricing-card:hover .pricing-spotlight {
  opacity: 1;
}

/* === Gradient Border Animation === */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-indigo), var(--color-cyan), var(--color-purple), transparent);
  background-size: 200% 100%;
  animation: borderGradient 4s linear infinite;
}

@keyframes borderGradient {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

/* === Particle System === */
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--color-indigo-light);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: particleFloat var(--duration, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }

  10% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
    transform: translateY(-20vh) scale(1);
  }
}

/* === Energy Pulse for Lines === */
.energy-line {
  stroke-dasharray: 5 10;
  animation: energyFlow 2s linear infinite;
}

@keyframes energyFlow {
  to {
    stroke-dashoffset: -30;
  }
}

/* === Footer Enhancements === */
.footer-glow {
  text-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
  animation: footerPulse 3s ease-in-out infinite;
}

@keyframes footerPulse {

  0%,
  100% {
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }

  50% {
    text-shadow: 0 0 40px rgba(99, 102, 241, 0.6), 0 0 60px rgba(34, 211, 238, 0.3);
  }
}

.social-icon {
  transition: var(--transition-bounce);
}

.social-icon:hover {
  transform: translateY(-3px) scale(1.1);
  color: var(--color-indigo-light);
}

/* === Responsive Adjustments === */
@media (max-width: 640px) {
  .hero-node {
    width: clamp(40px, 14vw, 58px);
    height: clamp(40px, 14vw, 58px);
  }

  .hero-channel {
    width: 24px;
    height: 24px;
  }

  .reveal {
    transform: translateY(20px);
  }
}

/* === Performance Optimization === */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   SVG RESPONSIVENESS - Mobile First
   ======================================== */

/* === Metatron Diagram Mobile === */
@media (max-width: 639px) {

  /* Hide SVG connection lines on mobile */
  #metatron-svg {
    display: none !important;
  }

  /* Convert tech nodes to grid layout */
  #tech-nodes {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1rem;
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto;
  }

  #tech-nodes>div {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  #tech-nodes>div>div {
    padding: 0.75rem !important;
  }

  #tech-nodes>div>span {
    font-size: 6px !important;
    letter-spacing: 0.1em !important;
  }

  /* Adjust forge section container */
  #forge .aspect-square {
    aspect-ratio: auto !important;
    min-height: 380px;
  }

  /* Central MetaVoz logo - smaller on mobile */
  #forge .w-\[26\%\],
  #forge .w-\[22\%\] {
    width: 80px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;
  }
}

/* === Metatron Diagram Tablet === */
@media (min-width: 640px) and (max-width: 1023px) {
  #tech-nodes>div {
    width: clamp(50px, 9%, 90px) !important;
  }

  #tech-nodes>div>span {
    font-size: 7px !important;
  }
}

/* === Hero Network Mobile === */
@media (max-width: 639px) {

  /* Smaller hero panel */
  .hero-panel {
    width: clamp(240px, 85vw, 320px) !important;
    padding: 1rem !important;
  }

  /* Hide alternate nodes on mobile (show 5 instead of 10) */
  .hero-node:nth-child(2),
  .hero-node:nth-child(4),
  .hero-node:nth-child(6),
  .hero-node:nth-child(8),
  .hero-node:nth-child(10) {
    display: none !important;
  }

  .hero-node {
    width: 44px !important;
    height: 44px !important;
  }

  .hero-channel {
    width: 20px !important;
    height: 20px !important;
  }

  .hero-icon {
    width: 10px !important;
    height: 10px !important;
  }

  /* Smaller central logo */
  #hero-logo {
    width: 28% !important;
  }
}

/* === Hero Network Tablet === */
@media (min-width: 640px) and (max-width: 767px) {
  .hero-panel {
    width: clamp(300px, 70vw, 400px) !important;
  }

  .hero-node {
    width: 52px !important;
    height: 52px !important;
  }
}

/* === Forge Section Container Fix === */
#forge>div>div:last-child {
  overflow: visible;
}

@media (max-width: 1023px) {
  #forge>div>div:last-child {
    max-width: 100%;
    margin: 0 auto;
  }
}