/* Additional responsive features and animations */

/* Enhance responsive behavior for cards */
@media (max-width: 992px) {
  .card {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Improve mobile navigation and spacing */
@media (max-width: 576px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  h1, h2, h3 {
    word-wrap: break-word;
  }
  
  .profile-pic img {
    max-width: 80%;
  }
}

/* Add smooth scroll behavior for all browsers */
html {
  scroll-behavior: smooth;
}

/* Enhance card animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Add hover effects for links */
a:not(.card-image a):hover {
  text-decoration: underline;
}

/* Improve accessibility for focus states */
a:focus, button:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Add dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --light-gray: #2a2a2a;
    --dark-gray: #999;
    --link-color: #6ab0ff;
    --link-hover-color: #90c8ff;
    --accent-color: #6ab0ff;
  }
  
  .card {
    background-color: #1e1e1e;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }
  
  img {
    filter: brightness(0.9);
  }
}

/* Add print styles */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  
  .container {
    max-width: 100%;
    width: 100%;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  .card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  .fade-in, .fade-in-delay-1, .fade-in-delay-2, .fade-in-delay-3 {
    animation: none;
    opacity: 1;
  }
  
  footer {
    margin-top: 2cm;
  }
}

/* Touch-friendly improvements */
@media (hover: none) {
  a, button {
    padding: 0.5rem 0;
  }
  
  .card {
    transform: none !important;
  }
  
  .card-image img {
    transform: none !important;
  }
}

/* Improve loading performance */
.card img {
  content-visibility: auto;
}

/* Add support for reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}