/* Non-critical CSS - loaded asynchronously after critical CSS */

/* Animation utilities - not needed for initial render */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Glass card effects - not critical for LCP */
.glass-card {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Neumorphic effects - decorative only */
.neumorphic-btn {
  box-shadow: 
    8px 8px 16px rgba(0, 0, 0, 0.3),
    -8px -8px 16px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.neumorphic-btn:hover {
  box-shadow: 
    4px 4px 8px rgba(0, 0, 0, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.neumorphic-btn:active {
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.3),
    inset -4px -4px 8px rgba(255, 255, 255, 0.1);
  transform: translateY(0);
}

/* Carousel and interactive elements */
.carousel-container {
  contain: layout style paint;
}

/* Hover effects - not needed for mobile/touch */
@media (hover: hover) {
  .hover-scale {
    transition: transform 0.2s ease;
  }
  
  .hover-scale:hover {
    transform: scale(1.05);
  }
  
  .story-link {
    position: relative;
  }
  
  .story-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: hsl(var(--primary));
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease;
  }
  
  .story-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
}

/* Complex layouts not needed above-the-fold */
.grid-masonry {
  columns: 3;
  column-gap: 1rem;
}

@media (max-width: 768px) {
  .grid-masonry {
    columns: 2;
  }
}

@media (max-width: 480px) {
  .grid-masonry {
    columns: 1;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}