/*
 * Performance & UX Enhancements
 */

/* Card Animations */

.card, .card-coin {
  /* Hardware acceleration */
  will-change: transform, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
  
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover, .card-coin:hover {
  transform: translateY(-8px) scale(1.02) translateZ(0);
  
  box-shadow: 
    0 25px 50px rgba(0, 255, 136, 0.2),
    0 10px 30px rgba(0, 217, 255, 0.15),
    0 5px 15px rgba(0, 0, 0, 0.1);
}

.card::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.1), rgba(0, 217, 255, 0.1));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.card:hover::after {
  opacity: 1;
}

/* Smooth Scroll */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  :focus-visible {
    transition: outline-offset 0.01ms !important;
  }
}

/* Image Loading */

img {
  /* Prevent layout shift */
  height: auto;
  max-width: 100%;
}

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* Profile Image Animations */

.profile-image {
  /* Optimize for transform animations */
  will-change: transform, box-shadow;
  transform-origin: center;
  
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.profile-image:hover {
  transform: scale(1.08) rotate(2deg) translateZ(0) !important;
  
  box-shadow: 
    0 0 70px rgba(0, 255, 136, 0.6),
    0 0 140px rgba(0, 217, 255, 0.4),
    inset 0 0 40px rgba(0, 255, 136, 0.12),
    0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Pulse Animations */

@keyframes pulse-optimized {
  0%, 100% {
    transform: scale(1) translateZ(0);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
  }
  50% {
    transform: scale(1.05) translateZ(0);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
  }
}

.pulse-node-inner {
  animation: pulse-optimized 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}

/* Intersection Observer Fade-In */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.delay-1 {
  transition-delay: 0.1s;
}

.animate-on-scroll.delay-2 {
  transition-delay: 0.2s;
}

.animate-on-scroll.delay-3 {
  transition-delay: 0.3s;
}

.animate-on-scroll.delay-4 {
  transition-delay: 0.4s;
}

/* Navbar Optimization */

.navbar {
  /* Hardware acceleration for smooth scrolling */
  will-change: background, box-shadow;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.nav-link {
  will-change: transform, color;
  transform: translateZ(0);
}

.nav-link::after {
  will-change: width;
  transform: translateX(-50%) translateZ(0);
}

/* Focus-Visible */

:focus-visible {
  outline: 3px solid rgba(0, 255, 136, 0.8);
  outline-offset: 4px;
  border-radius: 2px;
  transition: outline-offset 0.2s ease;
}

a:focus-visible,
button:focus-visible {
  outline-color: rgba(0, 255, 136, 0.9);
}

/* Text Selection */

::selection {
  background-color: rgba(0, 255, 136, 0.3);
  color: #ffffff;
  text-shadow: none;
}

::-moz-selection {
  background-color: rgba(0, 255, 136, 0.3);
  color: #ffffff;
  text-shadow: none;
}

/* Link Hover */

a {
  /* Smooth color transitions */
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

/* Canvas Optimization */

canvas {
  /* GPU rendering */
  will-change: contents;
  transform: translateZ(0);
}

#networkCanvas,
#binary-canvas {
  /* Optimize background animations */
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   HR DIVIDER ENHANCEMENTS
   ============================================ */

hr {
  /* Smooth appearance */
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

hr.visible {
  opacity: 1;
  transform: scaleX(1);
}

/* ============================================
   PERFORMANCE HINTS
   ============================================ */

/* Optimize frequently animated elements */
.btn,
.card,
.nav-link,
.profile-image,
.pulse-node-inner {
  /* Hint to browser for GPU acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */

/* Add padding to body for fixed navbar */
body {
  padding-top: 80px; /* Account for fixed navbar height */
}

@media (max-width: 991.98px) {
  body {
    padding-top: 70px; /* Slightly less padding on mobile */
  }
}

@media (max-width: 768px) {
  /* Improve touch responsiveness */
  body {
    -webkit-tap-highlight-color: rgba(0, 255, 136, 0.2);
    touch-action: manipulation;
    padding-top: 65px; /* Account for smaller navbar on mobile */
  }
  
  /* Reduce animation complexity on mobile */
  .card:hover {
    transform: translateY(-6px) scale(1.01) translateZ(0);
  }
  
  .profile-image:hover {
    transform: scale(1.05) translateZ(0) !important;
  }
  
  /* Faster transitions on mobile */
  .animate-on-scroll {
    transition-duration: 0.5s;
  }
  
  /* Reduce blur for better mobile performance */
  .navbar {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ============================================
   CONTENT VISIBILITY OPTIMIZATION
   ============================================ */

/* Hint browser to skip rendering off-screen content */
.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* ============================================
   PREFERS REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  /* Disable all decorative animations */
  .animate-on-scroll,
  .card,
  .profile-image,
  .pulse-node-inner,
  .nav-link::after,
  hr {
    animation: none !important;
    transition: none !important;
  }
  
  /* Keep essential state changes instant */
  .btn:hover,
  .card:hover,
  a:hover {
    transition: background-color 0.1s ease, color 0.1s ease;
  }
}

/* ============================================
   PRINT OPTIMIZATION
   ============================================ */

@media print {
  /* Hide decorative elements */
  .cursor,
  #binary-canvas,
  #networkCanvas,
  .pulse-node-inner::before,
  .card::after {
    display: none !important;
  }
  
  /* Remove shadows and effects */
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  /* Ensure text is readable */
  body {
    background: white !important;
    color: black !important;
  }
}