/* Deferred CSS - Below-the-fold & Non-critical styles */
/* This CSS is loaded asynchronously to avoid render blocking */

@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Extended X4T Color Scheme - Non-critical */
    --x4t-surface: rgba(255,255,255,0.06);
    --x4t-border: rgba(148,163,184,0.2);
    --x4t-link: #99b1ff;
    --x4t-purple-300: #d8b4fe;
    --x4t-disabled: #3d4252;
    --x4t-grad-from: #a855f7;
    --x4t-grad-to: #3b82f6;
    --x4t-grad-from-60: #a855f799;
    --x4t-grad-to-60: #3b82f699;
    
    /* Glass Effect Variations */
    --x4t-glass-surface: rgba(255,255,255,0.06);
    --x4t-glass-surface-10: rgba(255,255,255,0.1);
    --x4t-glass-surface-20: rgba(255,255,255,0.2);
    --x4t-glass-border: rgba(148,163,184,0.2);
    --x4t-glass-border-light: rgba(148,163,184,0.1);
    --x4t-glass-border-strong: rgba(148,163,184,0.4);
    
    /* Shadow Effects - Non-critical */
    --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --shadow-outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --shadow-glass: 0 8px 32px rgba(31, 38, 135, 0.37);
    --shadow-glass-strong: 0 8px 32px rgba(31, 38, 135, 0.5);
    --shadow-glow: 0 0 20px rgba(13, 76, 255, 0.3);
    --shadow-glow-purple: 0 0 20px rgba(168, 85, 247, 0.3);
  }
  
  /* Blockchain Network Visualization - Non-critical decorative animations */
  .network-node {
    position: fixed;
    pointer-events: none;
    z-index: 2;
    border-radius: 50%;
    animation: networkPulse 8s ease-in-out infinite;
  }
  
  .network-node-primary {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, var(--tg-primary-color), var(--tg-theme-color2));
    box-shadow: 
      0 0 20px rgba(226, 117, 255, 0.4),
      0 0 40px rgba(226, 117, 255, 0.2),
      0 0 60px rgba(226, 117, 255, 0.1);
  }
  
  .network-node-secondary {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, var(--tg-theme-color2), var(--x4t-blue));
    box-shadow: 
      0 0 15px rgba(87, 41, 214, 0.3),
      0 0 30px rgba(87, 41, 214, 0.1);
  }
  
  /* All the positioning classes for network nodes - Non-critical */
  .network-node-primary:nth-child(1) { top: 15%; left: 20%; animation-delay: 0s; }
  .network-node-primary:nth-child(2) { top: 25%; right: 15%; animation-delay: 2s; }
  .network-node-primary:nth-child(3) { bottom: 30%; left: 25%; animation-delay: 4s; }
  .network-node-primary:nth-child(4) { bottom: 20%; right: 30%; animation-delay: 6s; }
  .network-node-secondary:nth-child(5) { top: 10%; left: 50%; animation-delay: 1s; }
  .network-node-secondary:nth-child(6) { top: 40%; left: 10%; animation-delay: 3s; }
  .network-node-secondary:nth-child(7) { top: 60%; right: 40%; animation-delay: 5s; }
  .network-node-secondary:nth-child(8) { bottom: 15%; left: 60%; animation-delay: 7s; }
  .network-node-secondary:nth-child(9) { top: 35%; right: 25%; animation-delay: 1.5s; }
  .network-node-secondary:nth-child(10) { bottom: 45%; left: 45%; animation-delay: 3.5s; }
  
  /* Network connections and other decorative elements */
  .network-connection {
    position: fixed;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
      90deg, 
      transparent 0%, 
      rgba(226, 117, 255, 0.3) 20%, 
      rgba(87, 41, 214, 0.5) 50%, 
      rgba(226, 117, 255, 0.3) 80%, 
      transparent 100%
    );
    animation: connectionFlow 12s linear infinite;
  }
  
  /* All connection positioning - Non-critical */
  .network-connection-1 { top: 18%; left: 22%; width: 200px; height: 2px; transform: rotate(25deg); animation-delay: 0s; }
  .network-connection-2 { top: 20%; right: 20%; width: 150px; height: 1px; transform: rotate(-45deg); animation-delay: 2s; }
  .network-connection-3 { bottom: 25%; left: 30%; width: 180px; height: 2px; transform: rotate(15deg); animation-delay: 4s; }
  .network-connection-4 { top: 35%; left: 15%; width: 120px; height: 1px; transform: rotate(65deg); animation-delay: 1s; }
  .network-connection-5 { bottom: 35%; right: 35%; width: 160px; height: 2px; transform: rotate(-30deg); animation-delay: 3s; }
  .network-connection-6 { top: 50%; left: 40%; width: 140px; height: 1px; transform: rotate(75deg); animation-delay: 5s; }
  
  /* Data packets and X4T identifiers */
  .data-packet {
    position: fixed;
    pointer-events: none;
    z-index: 3;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tg-primary-color);
    box-shadow: 0 0 10px rgba(226, 117, 255, 0.8);
    animation: packetFlow 6s linear infinite;
  }
  
  .data-packet-1 { top: 18%; left: 22%; animation-delay: 0s; }
  .data-packet-2 { bottom: 25%; left: 30%; animation-delay: 1.5s; }
  .data-packet-3 { top: 50%; left: 40%; animation-delay: 3s; }
  .data-packet-4 { bottom: 35%; right: 35%; animation-delay: 4.5s; }
  
  .x4t-identifier {
    position: fixed;
    pointer-events: none;
    z-index: 4;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, var(--x4t-blue), var(--tg-primary-color));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: identifierGlow 10s ease-in-out infinite;
    box-shadow: 
      0 0 15px rgba(6, 147, 227, 0.4),
      0 0 30px rgba(226, 117, 255, 0.2);
  }
  
  .x4t-identifier-1 { top: 30%; left: 30%; animation-delay: 0s; }
  .x4t-identifier-2 { bottom: 40%; right: 40%; animation-delay: 5s; }
}

/* All keyframes - Non-critical animations */
@keyframes networkPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}

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

@keyframes packetFlow {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes identifierGlow {
  0%,100% { filter: drop-shadow(0 0 5px rgba(226,117,255,.8)); }
  50% { filter: drop-shadow(0 0 15px rgba(226,117,255,1)); }
}

@layer components {
  /* All extended button variants - Non-critical */
  .btn-x4t-secondary {
    background: transparent;
    border: 2px solid var(--x4t-purple);
    color: var(--x4t-purple);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .btn-x4t-secondary:hover {
    background: var(--x4t-purple);
    color: var(--x4t-white);
  }
  
  /* Glass button variants - Non-critical */
  .btn-x4t-glass {
    background: var(--x4t-glass-surface);
    border: 1px solid var(--x4t-glass-border);
    backdrop-filter: blur(10px);
    color: var(--x4t-text);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
  }
  
  .btn-x4t-glass:hover {
    background: var(--x4t-glass-surface-10);
    border-color: var(--x4t-glass-border-strong);
    box-shadow: var(--shadow-glow);
  }
  
  .btn-x4t-primary-new {
    background: var(--x4t-primary);
    color: var(--x4t-text);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
  }
  
  .btn-x4t-primary-new:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
  }
  
  .btn-x4t-gradient {
    background: linear-gradient(90deg, var(--x4t-grad-from), var(--x4t-grad-to));
    color: var(--x4t-text);
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
  }
  
  .btn-x4t-gradient:hover {
    box-shadow: var(--shadow-glow-purple);
    transform: translateY(-1px);
  }
  
  /* Card variants - Non-critical */
  .card-x4t {
    background: rgba(28, 28, 46, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-natural);
  }
  
  .card-x4t-glass {
    background: var(--x4t-glass-surface);
    border: 1px solid var(--x4t-glass-border);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-glass);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
  }
  
  .card-x4t-glass:hover {
    background: var(--x4t-glass-surface-10);
    border-color: var(--x4t-glass-border-strong);
    box-shadow: var(--shadow-glass-strong);
    transform: translateY(-2px);
  }
  
  .card-x4t-surface {
    background: var(--x4t-surface);
    border: 1px solid var(--x4t-border);
    backdrop-filter: blur(16px);
    border-radius: 0.75rem;
    padding: 1.5rem;
  }
  
  /* Text gradient variants - Non-critical */
  .text-gradient-x4t {
    background: linear-gradient(90deg, var(--x4t-blue), var(--x4t-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .text-gradient-x4t-new {
    background: linear-gradient(90deg, var(--x4t-grad-from), var(--x4t-grad-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  .text-gradient-electric {
    background: linear-gradient(90deg, var(--x4t-primary), var(--x4t-link));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  
  /* Glass utilities - Non-critical */
  .glass-surface-strong {
    background: var(--x4t-glass-surface-20);
    border: 1px solid var(--x4t-glass-border-strong);
    backdrop-filter: blur(16px);
  }
  
  .glass-border {
    border: 1px solid var(--x4t-glass-border);
  }
  
  .glass-border-strong {
    border: 1px solid var(--x4t-glass-border-strong);
  }
  
  /* Marquee animations - Non-critical */
  @keyframes marquee-dynamic {
    0% { transform: translateX(0%); }
    100% { transform: translateX(var(--translate-end, -50%)); }
  }
  
  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-33.33%); }
  }
  
  .ticker-container:hover [style*="marquee-dynamic"] {
    animation-play-state: paused;
  }
  
  .animate-marquee {
    animation: marquee 35s linear infinite;
    will-change: transform;
  }
  
  .animate-marquee:hover {
    animation-play-state: paused;
  }
  
  /* Background patterns - Non-critical */
  .bg-x4t-grid-pattern {
    background-image: 
      linear-gradient(rgba(13, 76, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13, 76, 255, 0.1) 1px, transparent 1px),
      linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(168, 85, 247, 0.05) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  }

  /* Mobile Performance Optimizations */
  @media (max-width: 768px) {
    .network-node { animation-duration: 12s; }
    .network-connection { animation-duration: 16s; }
    .data-packet { animation-duration: 8s; }
    .x4t-identifier { animation-duration: 15s; }
    
    .card-x4t {
      backdrop-filter: none;
      background: rgba(28, 28, 46, 0.8);
    }
    
    .card-x4t-glass {
      backdrop-filter: none;
      background: rgba(15, 23, 42, 0.8);
    }
  }
}