/* Integration styles for new features */

/* Base styles for better typography with our new font */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

h1, h2, h3, .hero-card-name {
  font-family: 'Playfair Display', serif;
}

/* Improved focus styles for accessibility */
:focus-visible {
  outline: 2px solid #3a5db0;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Responsive typography */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

/* Enhanced section styles for parallax */
section {
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* Card styles for 3D effect */
.timeline-item, .cert-card, .words-grid > div {
  transform-style: preserve-3d;
  transition: transform 0.5s, box-shadow 0.5s;
  will-change: transform;
}

.timeline-item:hover, .cert-card:hover, .words-grid > div:hover {
  transform: translateZ(10px);
  box-shadow: var(--shadow-lg);
}

/* Enhanced hero card layout */
.hero-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* Container query for card content */
@container card (max-width: 400px) {
  .card-content {
    padding: 1rem;
  }
}

/* Timeline enhancements */
.timeline-container {
  position: relative;
  overflow: visible;
}

.timeline-bar {
  position: relative;
  overflow: visible;
}

/* Improved transitions */
.timeline-item, .cert-category, .words-grid > div {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
  
  .timeline-filter-container {
    padding: 0 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .timeline-filter-container::-webkit-scrollbar {
    display: none;
  }
}

/* Remove mobile warning modal */
.mobile-warning-modal {
  display: none !important;
}