/* ============================================
     SCROLL-DRIVEN ANIMATION CSS
     ============================================ */
  
  [data-animate="fade-up"] {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  [data-animate="fade-down"] {
    opacity: 0;
    transform: translateY(-40px);
    animation: fadeDown ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes fadeDown {
    from {
      opacity: 0;
      transform: translateY(-40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  [data-animate="fade-left"] {
    opacity: 0;
    transform: translateX(40px);
    animation: fadeLeft ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes fadeLeft {
    from {
      opacity: 0;
      transform: translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  [data-animate="fade-right"] {
    opacity: 0;
    transform: translateX(-40px);
    animation: fadeRight ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes fadeRight {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  [data-animate="fade"] {
    opacity: 0;
    animation: fadeIn ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  [data-animate="zoom-in"] {
    opacity: 0;
    transform: scale(0.85);
    animation: zoomIn ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale(0.85);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  [data-animate="zoom-out"] {
    opacity: 0;
    transform: scale(1.15);
    animation: zoomOut ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes zoomOut {
    from {
      opacity: 0;
      transform: scale(1.15);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  [data-animate="flip-up"] {
    opacity: 0;
    transform: perspective(400px) rotateX(15deg);
    animation: flipUp ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes flipUp {
    from {
      opacity: 0;
      transform: perspective(400px) rotateX(15deg);
    }
    to {
      opacity: 1;
      transform: perspective(400px) rotateX(0);
    }
  }
  
  [data-animate="flip-down"] {
    opacity: 0;
    transform: perspective(400px) rotateX(-15deg);
    animation: flipDown ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes flipDown {
    from {
      opacity: 0;
      transform: perspective(400px) rotateX(-15deg);
    }
    to {
      opacity: 1;
      transform: perspective(400px) rotateX(0);
    }
  }
  
  [data-animate="flip-left"] {
    opacity: 0;
    transform: perspective(400px) rotateY(15deg);
    animation: flipLeft ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes flipLeft {
    from {
      opacity: 0;
      transform: perspective(400px) rotateY(15deg);
    }
    to {
      opacity: 1;
      transform: perspective(400px) rotateY(0);
    }
  }
  
  [data-animate="flip-right"] {
    opacity: 0;
    transform: perspective(400px) rotateY(-15deg);
    animation: flipRight ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes flipRight {
    from {
      opacity: 0;
      transform: perspective(400px) rotateY(-15deg);
    }
    to {
      opacity: 1;
      transform: perspective(400px) rotateY(0);
    }
  }
  
  [data-animate="slide-up"] {
    opacity: 0;
    transform: translateY(100%);
    animation: slideUp ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  [data-animate="slide-down"] {
    opacity: 0;
    transform: translateY(-100%);
    animation: slideDown ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  [data-animate="slide-left"] {
    opacity: 0;
    transform: translateX(100%);
    animation: slideLeft ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes slideLeft {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  [data-animate="slide-right"] {
    opacity: 0;
    transform: translateX(-100%);
    animation: slideRight ease-out;
    animation-timeline: view();
    animation-fill-mode: both;
    animation-range: entry 40% entry 100%;
  }
  
  @keyframes slideRight {
    from {
      opacity: 0;
      transform: translateX(-100%);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    [data-animate] {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
    
/* Fallback for animation-timeline */
@supports not (animation-timeline: view()) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* Animación fade-up automática solo para el featured post */
. .blog-index__post.featured-post {
  animation: autoFadeUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(40px);
}

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

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  . .blog-index__post.featured-post {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}