/* Responsive Design for NFT Section and Animations */

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  /* NFT Section */
  .nft-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .nft-card {
    max-width: 320px;
    margin: 0 auto;
  }
  
  /* Reduce animation intensity on mobile */
  .float-animation {
    animation-duration: 3s;
    animation-distance: 5px;
  }
  
  /* Adjust particle density for better performance */
  .particles-bg {
    opacity: 0.3;
  }
  
  /* Adjust rotating borders */
  .rotating-border, 
  .rotating-border-reverse {
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
  }
  
  /* Adjust decorative circles */
  .nft-decorative-circle-1 {
    width: 150px;
    height: 150px;
  }
  
  .nft-decorative-circle-2 {
    width: 120px;
    height: 120px;
  }
  
  /* Adjust 3D tilt effect for touch devices */
  .tilt-card {
    transform: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .tilt-card:hover {
    transform: translateY(-5px) !important;
  }
  
  /* Adjust matrix rain for mobile */
  #matrix-rain {
    opacity: 0.05;
  }
  
  /* Adjust moving background */
  #moving-background {
    opacity: 0.1;
  }
  
  /* Hide cursor effects on touch devices */
  .cursor-dot-outline,
  .cursor-dot {
    display: none;
  }
}

/* Tablet Responsive Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  /* NFT Section */
  .nft-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  /* Adjust animation intensity */
  .float-animation {
    animation-duration: 4s;
  }
  
  /* Adjust particle density */
  .particles-bg {
    opacity: 0.4;
  }
  
  /* Adjust decorative circles */
  .nft-decorative-circle-1 {
    width: 200px;
    height: 200px;
  }
  
  .nft-decorative-circle-2 {
    width: 180px;
    height: 180px;
  }
}

/* Touch Device Detection */
@media (hover: none) {
  /* Disable hover animations on touch devices */
  .hover-scale:hover,
  .hover-glow:hover,
  .hover-rotate:hover {
    transform: none;
    box-shadow: none;
  }
  
  /* Replace hover effects with active state for touch */
  .hover-scale:active,
  .hover-glow:active,
  .hover-rotate:active {
    transform: scale(0.98);
    transition: transform 0.2s ease;
  }
  
  /* Adjust magnetic buttons for touch */
  .magnetic-button {
    transform: none !important;
  }
  
  /* Disable glitch effect on touch */
  .glitch-effect:hover {
    animation: none;
  }
  
  .glitch-effect:hover::before,
  .glitch-effect:hover::after {
    display: none;
  }
  
  /* Adjust 3D card effect for touch */
  .tilt-card {
    transform: none !important;
  }
}

/* Low-end Device Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
  /* Disable or reduce animations for users who prefer reduced motion */
  .float-animation,
  .pulse-element,
  .rotate-slow,
  .rotate-medium,
  .rotate-fast,
  .shimmer-effect,
  .animated-gradient,
  .glitch-effect:hover,
  .animated-path,
  .rotating-border,
  .rotating-border-reverse {
    animation: none !important;
    transition: none !important;
  }
  
  /* Disable particle animations */
  #particles-js,
  .particles-bg,
  #moving-background,
  #matrix-rain {
    display: none;
  }
  
  /* Simplify fade-in animations */
  .fade-in-element.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease;
  }
}

/* Responsive Font Sizes */
@media (max-width: 640px) {
  .section-title h2 {
    font-size: 1.75rem;
  }
  
  .section-title p {
    font-size: 1rem;
  }
  
  .nft-name {
    font-size: 1.1rem;
  }
  
  .nft-attribute-name,
  .nft-attribute-value {
    font-size: 0.75rem;
  }
}

/* Landscape Mode Adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .nft-section {
    padding: 3rem 0;
  }
  
  .nft-grid {
    margin-top: 1.5rem;
  }
  
  .section-title {
    margin-bottom: 1.5rem;
  }
}

/* High-DPI Screen Adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Ensure SVGs render crisply */
  .nft-image svg {
    shape-rendering: geometricPrecision;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  /* Already dark themed, but ensure contrast is maintained */
  .nft-attribute-name {
    color: var(--color-gray-300);
  }
  
  .nft-progress {
    background-color: var(--color-gray-700);
  }
}

/* Print Styles */
@media print {
  .nft-section {
    page-break-inside: avoid;
  }
  
  .nft-grid {
    display: block;
  }
  
  .nft-card {
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1rem;
  }
  
  /* Hide animations and decorative elements when printing */
  .particles-bg,
  .rotating-border,
  .rotating-border-reverse,
  .nft-decorative-circle,
  #moving-background,
  #matrix-rain,
  .cursor-dot-outline,
  .cursor-dot {
    display: none !important;
  }
}