/* ===================================
   Advanced Animations & Visual Polish
   =================================== */

/* Physics-Based Staggered Grid Entrance */
.physics-stagger {
  opacity: 0;
  transform: translateY(40px) scale(0.8);
  animation: physicsReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.physics-stagger:nth-child(1) { animation-delay: 0ms; }
.physics-stagger:nth-child(2) { animation-delay: 120ms; }
.physics-stagger:nth-child(3) { animation-delay: 240ms; }
.physics-stagger:nth-child(4) { animation-delay: 360ms; }
.physics-stagger:nth-child(5) { animation-delay: 480ms; }
.physics-stagger:nth-child(6) { animation-delay: 600ms; }
.physics-stagger:nth-child(7) { animation-delay: 720ms; }
.physics-stagger:nth-child(8) { animation-delay: 840ms; }

@keyframes physicsReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  60% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.05);
  }
  80% {
    opacity: 0.9;
    transform: translateY(2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Parallax Scrolling for Background Elements */
.parallax-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.parallax-layer-1 {
  position: absolute;
  top: -200px;
  left: -200px;
  width: 400px;
  height: 400px;
  background: var(--resources-coral);
  border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  filter: blur(40px);
  opacity: 0.08;
  transform: translateZ(0);
  will-change: transform;
}

.parallax-layer-2 {
  position: absolute;
  top: 50%;
  right: -175px;
  width: 350px;
  height: 350px;
  background: var(--resources-amber);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  filter: blur(40px);
  opacity: 0.08;
  transform: translateZ(0);
  will-change: transform;
}

.parallax-layer-3 {
  position: absolute;
  bottom: -150px;
  left: 50%;
  width: 300px;
  height: 300px;
  background: var(--resources-mint);
  border-radius: 60% 40% 30% 70% / 60% 30% 30% 60%;
  filter: blur(40px);
  opacity: 0.08;
  transform: translateZ(0);
  will-change: transform;
}

.parallax-layer-4 {
  position: absolute;
  top: 30%;
  left: 30%;
  width: 350px;
  height: 350px;
  background: var(--resources-lavender);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: blur(40px);
  opacity: 0.08;
  transform: translateZ(0);
  will-change: transform;
}

/* Seasonal Theme Support */
.seasonal-spring {
  --resources-coral: #FF9B8F;
  --resources-amber: #FFB366;
  --resources-mint: #9BC4B0;
  --resources-lavender: #B5A8D0;
  --resources-sky: #9ED8F3;
}

.seasonal-summer {
  --resources-coral: #FF8B7B;
  --resources-amber: #FFA656;
  --resources-mint: #7BC4AC;
  --resources-lavender: #A598C2;
  --resources-sky: #8EC8E3;
}

.seasonal-autumn {
  --resources-coral: #E07A5F;
  --resources-amber: #E49251;
  --resources-mint: #81B29A;
  --resources-lavender: #9B8EC2;
  --resources-sky: #7EC8E3;
}

.seasonal-winter {
  --resources-coral: #FFB3A3;
  --resources-amber: #FFC291;
  --resources-mint: #A8D0C0;
  --resources-lavender: #D4EAE0;
  --resources-sky: #D4EBF4;
}

/* Typography Enhancements */
.variable-font-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'wght' 600, 'opsz' 32;
  transition: font-variation-settings 0.3s ease;
}

.variable-font-heading:hover {
  font-variation-settings: 'wght' 700, 'opsz' 48;
}

.gradient-text {
  background: linear-gradient(135deg, var(--resources-coral) 0%, var(--resources-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Improved Typography Hierarchy */
.text-hierarchy-primary {
  font-family: var(--resources-font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--resources-text-warm);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--youth-spacing-lg);
}

.text-hierarchy-secondary {
  font-family: var(--resources-font-base);
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
  font-weight: 500;
  color: var(--resources-text-warm-secondary);
  line-height: 1.6;
  margin-bottom: var(--youth-spacing-md);
}

.text-hierarchy-tertiary {
  font-family: var(--resources-font-base);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 400;
  color: var(--resources-text-warm-secondary);
  line-height: 1.5;
  opacity: 0.8;
}

/* Reading Mode Toggle */
.reading-mode {
  background: #FFFEF9;
  color: #2C2416;
  max-width: 65ch;
  margin: 0 auto;
  padding: var(--youth-spacing-xl);
  line-height: 1.8;
  font-size: 1.125rem;
}

.reading-mode .category-card {
  background: white;
  border: 1px solid #E5DDD5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.reading-mode .category-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: #2C2416;
  margin-bottom: var(--youth-spacing-sm);
}

.reading-mode .category-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #5C4D4D;
}

.reading-mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--resources-coral);
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 123, 107, 0.3);
}

.reading-mode-toggle:hover {
  background: var(--resources-amber);
  transform: scale(1.1);
}

.reading-mode-toggle.active {
  background: var(--resources-mint);
}

/* Advanced Loading States */
.skeleton-enhanced {
  background: linear-gradient(
    90deg,
    var(--resources-bg-warm) 25%,
    var(--resources-coral-light) 50%,
    var(--resources-bg-warm) 75%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: inherit;
}

@keyframes skeletonPulse {
  0% {
    background-position: 200% 0;
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: -200% 0;
    opacity: 0.6;
  }
}

/* Enhanced Image Optimization */
.responsive-image-enhanced {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.responsive-image-enhanced.lazy {
  opacity: 0;
}

.responsive-image-enhanced.loaded {
  opacity: 1;
}

.responsive-image-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--resources-bg-warm-secondary);
  z-index: -1;
}

/* Enhanced CSS Containment */
.contain-strict {
  contain: strict;
  contain: layout style paint size;
}

.contain-layout {
  contain: layout;
}

.contain-style {
  contain: style;
}

.contain-paint {
  contain: paint;
}

/* Advanced Performance Optimizations */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* Smooth Scrolling Enhancements */
.smooth-scroll-enhanced {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  scroll-snap-type: y mandatory;
}

.smooth-scroll-enhanced > * {
  scroll-snap-align: start;
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
  .physics-stagger {
    animation-duration: 0.6s;
  }
  
  .parallax-layer-1,
  .parallax-layer-2,
  .parallax-layer-3,
  .parallax-layer-4 {
    opacity: 0.04;
  }
  
  .reading-mode {
    padding: var(--youth-spacing-lg);
    font-size: 1rem;
  }
  
  .reading-mode-toggle {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
  }
}

/* Dark Mode Enhancements */
html.dark-mode .gradient-text {
  background: linear-gradient(135deg, var(--resources-coral-light) 0%, var(--resources-amber-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.dark-mode .reading-mode {
  background: #1a1612;
  color: #FFFBF7;
}

html.dark-mode .reading-mode .category-card {
  background: #2a2218;
  border-color: #3a3228;
}

html.dark-mode .reading-mode .category-title {
  color: #FFFBF7;
}

html.dark-mode .reading-mode .category-description {
  color: #D4EAE0;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .physics-stagger {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .parallax-layer-1,
  .parallax-layer-2,
  .parallax-layer-3,
  .parallax-layer-4 {
    transform: none !important;
  }
  
  .gradient-text {
    animation: none;
  }
  
  .skeleton-enhanced {
    animation: none;
  }
}

/* High DPI Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .category-card {
    border-width: 0.5px;
  }
  
  .filter-pill {
    border-width: 0.5px;
  }
}