/**
 * AI WORLD NEWS — Motion & Animation Styles
 * ========================================================================== */

@import url('variables.css');
@import url('base.css');
@import url('components.css');

/* ==========================================================================
   1. REDUCED MOTION SUPPORT
   ========================================================================== */

@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;
  }
  
  html{
    scroll-behavior:auto;
  }
}

/* ==========================================================================
   2. PAGE TRANSITIONS
   ========================================================================== */

.page-enter{
  animation:pageEnter 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes pageEnter{
  0%{
    opacity:0;
    transform:translateY(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* ==========================================================================
   3. SCROLL REVEAL ANIMATIONS
   ========================================================================== */

.reveal-on-scroll{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1),
              transform 0.8s cubic-bezier(0.4,0,0.2,1);
  will-change:opacity,transform;
}

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

/* Staggered Children */
.stagger-children>*:nth-child(1){transition-delay:0ms}
.stagger-children>*:nth-child(2){transition-delay:100ms}
.stagger-children>*:nth-child(3){transition-delay:200ms}
.stagger-children>*:nth-child(4){transition-delay:300ms}
.stagger-children>*:nth-child(5){transition-delay:400ms}

/* ==========================================================================
   4. HOVER MICRO-INTERACTIONS
   ========================================================================== */

.card-hover{
  transition:transform var(--transition-slow),
              box-shadow var(--transition-slow);
}

.card-hover:hover,.card-hover:focus-within{
  transform:translateY(-4px) scale(1.01);
  box-shadow:var(--shadow-xl);
}

/* ==========================================================================
   5. IMAGE PARALLAX & TRANSITIONS
   ========================================================================== */

.parallax-image{
  will-change:transform;
  transition:transform var(--transition-slower);
}

.parallax-image--hover:hover,.parallax-image--hover:focus-within{
  transform:scale(1.03);
}

/* Lazy Load Fade In */
.lazy-fade-in{
  opacity:0;
  transition:opacity 0.5s ease-in;
}

.lazy-fade-in.loaded{
  opacity:1;
}

/* ==========================================================================
   6. BUTTON FEEDBACK
   ========================================================================== */

.btn--ripple::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--border-radius-md);
  background:rgba(255,255,255,0.2);
  transform:scale(0);
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.btn--ripple:active::before{
  transform:scale(1);
  transition:0s;
}

/* ==========================================================================
   7. LOADING ANIMATIONS
   ========================================================================== */

.spinner{
  width:40px;
  height:40px;
  border:3px solid var(--border-primary);
  border-top-color:var(--accent-primary);
  border-radius:var(--border-radius-full);
  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.spinner--small{
  width:24px;
  height:24px;
  border-width:2px;
}

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

@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}

/* Bounce Animation */
.bounce{
  animation:bounce 1s cubic-bezier(0.36,0.76,0.36,1) infinite;
}

@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ==========================================================================
   8. SKELETON ANIMATIONS
   ========================================================================== */

.skeleton--text{
  animation:shimmerText 1.5s infinite;
}

@keyframes shimmerText{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

.skeleton--image{
  animation:shimmerImage 2s infinite;
}

@keyframes shimmerImage{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

/* ==========================================================================
   9. NAVIGATION TRANSITIONS
   ========================================================================== */

.navbar--scrolled{
  background:rgba(10,10,11,0.98);
  backdrop-filter:saturate(180%) blur(24px);
  box-shadow:var(--shadow-md);
}

.mobile-menu-enter{
  animation:slideInLeft 0.3s cubic-bezier(0.4,0,0.2,1);
}

@keyframes slideInLeft{
  from{
    opacity:0;
    transform:translateX(-100%);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* ==========================================================================
   10. CATEGORY FILTER ANIMATIONS
   ========================================================================== */

.filter-item-enter{
  animation:filterSlideIn 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes filterSlideIn{
  from{
    opacity:0;
    transform:translateX(-20px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* ==========================================================================
   11. BADGE & TAG ANIMATIONS
   ========================================================================== */

.badge--pop{
  animation:badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

@keyframes badgePop{
  0%{
    transform:scale(0);
    opacity:0;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

/* ==========================================================================
   12. SCROLL PROGRESS INDICATOR
   ========================================================================== */

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:transparent;
  z-index:var(--z-fixed);
}

.scroll-progress__bar{
  height:100%;
  background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));
  width:0;
  transition:width 0.1s linear;
}

/* ==========================================================================
   13. FADE IN/OUT UTILITIES
   ========================================================================== */

.fade-in{
  animation:fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.fade-out{
  animation:fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut{
  from{opacity:1}
  to{opacity:0}
}

/* ==========================================================================
   14. MOBILE MENU ANIMATIONS
   ========================================================================== */

.mobile-menu-content{
  transform:translateX(-100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
}

.mobile-menu-content.is-open{
  transform:translateX(0);
}

/* ==========================================================================
   15. ARTICLE READING PROGRESS
   ========================================================================== */

.reading-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:transparent;
  z-index:var(--z-fixed);
  pointer-events:none;
}

.reading-progress__bar{
  height:100%;
  background:var(--accent-primary);
  width:0;
  transition:width 0.1s linear;
}

/* ==========================================================================
   16. RELATED ARTICLES ANIMATION
   ========================================================================== */

.related-list{
  display:grid;
  gap:var(--grid-gap-sm);
}

.related-item{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s ease-out,transform 0.5s ease-out;
}

.related-item.is-visible{
  opacity:1;
  transform:translateY(0);
}

.related-item:nth-child(1){transition-delay:100ms}
.related-item:nth-child(2){transition-delay:200ms}
.related-item:nth-child(3){transition-delay:300ms}
.related-item:nth-child(4){transition-delay:400ms}

/* ==========================================================================
   17. SHARE BUTTON HOVER EFFECTS
   ========================================================================== */

.share-btn{
  position:relative;
  overflow:visible;
}

.share-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--accent-primary);
  opacity:0;
  transition:opacity var(--transition-base);
  border-radius:inherit;
}

.share-btn:hover::after{
  opacity:1;
}

/* ==========================================================================
   18. SCROLLBAR STYLING
   ========================================================================== */

::-webkit-scrollbar{
  width:12px;
  height:12px;
}

::-webkit-scrollbar-track{
  background:var(--bg-primary);
}

::-webkit-scrollbar-thumb{
  background:var(--border-secondary);
  border-radius:var(--border-radius-full);
  border:3px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover{
  background:var(--text-tertiary);
}

/* ==========================================================================
   19. SELECTOR & INPUT ANIMATIONS
   ========================================================================== */

select,input,textarea{
  transition:border-color var(--transition-fast),
              background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* ==========================================================================
   20. TABLE OF CONTENTS ANIMATION
   ========================================================================== */

.toc-list{
  overflow:hidden;
  transition:overflow 0.3s ease-out;
}

@media (prefers-reduced-motion:reduce){
  .toc-list{
    overflow:visible;
  }
}

/* ==========================================================================
   21. HERO TEXT REVEAL
   ========================================================================== */

.hero-text-reveal{
  clip-path:inset(0 0 100% 0);
  animation:revealText 1s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes revealText{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}

/* ==========================================================================
   22. CATEGORY ICON ANIMATION
   ========================================================================== */

.category-icon{
  transition:transform var(--transition-base),
              color var(--transition-fast);
}

.category-item:hover .category-icon{
  transform:rotate(180deg) scale(1.1);
}

/* ==========================================================================
   23. AUTHORED BY ANIMATION
   ========================================================================== */

.author-reveal{
  opacity:0;
  animation:authorReveal 0.6s ease-out forwards;
}

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

/* ==========================================================================
   24. COMMENT SECTION ANIMATION
   ========================================================================== */

.comments-list{
  animation:commentsLoad 0.6s ease-out forwards;
}

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

/* ==========================================================================
   25. EMPTY STATE ANIMATION
   ========================================================================== */

.empty-state-icon{
  animation:bounceIcon 2s ease-in-out infinite;
}

@keyframes bounceIcon{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ==========================================================================
   26. IMAGE LOAD ANIMATION
   ========================================================================== */

.image-loaded{
  animation:imageAppear 0.6s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes imageAppear{
  from{opacity:0;filter:blur(10px)}
  to{opacity:1;filter:blur(0)}
}

/* ==========================================================================
   27. NEWSLETTER SUCCESS ANIMATION
   ========================================================================== */

.newsletter-success-icon{
  animation:checkmark 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

@keyframes checkmark{
  0%{transform:scale(0);opacity:0}
  50%{transform:scale(1.2)}
  100%{transform:scale(1);opacity:1}
}

/* ==========================================================================
   28. ERROR STATE ANIMATION
   ========================================================================== */

.error-shake{
  animation:errorShake 0.5s cubic-bezier(0.36,0.76,0.36,1) infinite;
}

@keyframes errorShake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-5px)}
  40%,80%{transform:translateX(5px)}
}

/* ==========================================================================
   29. LOADING OVERLAY
   ========================================================================== */

.loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,11,0.8);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:var(--z-modal-backdrop);
  animation:fadeIn 0.3s ease-out;
}

/* ==========================================================================
   30. BACKGROUND SUBTLE MOTION
   ========================================================================== */

.background-mesh{
  position:relative;
  overflow:hidden;
}

.background-mesh::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle at 1px 1px,var(--border-primary) 1px,transparent 0);
  background-size:48px 48px;
  opacity:0.03;
  animation:meshMove 60s linear infinite;
}

@keyframes meshMove{
  from{background-position:0 0}
  to{background-position:48px 48px}
}

/* ==========================================================================
   31. SCROLL SPY ANIMATION
   ========================================================================== */

.nav-item--active{
  animation:navPulse 0.3s ease-out;
}

@keyframes navPulse{
  0%{background-color:transparent;color:var(--text-secondary)}
  50%{background-color:rgba(99,102,241,0.2);color:var(--accent-primary)}
  100%{background-color:transparent;color:var(--text-primary)}
}

/* ==========================================================================
   32. MODAL ENTER/EXIT
   ========================================================================== */

.modal-enter{
  animation:modalSlideIn 0.3s cubic-bezier(0.4,0,0.2,1);
}

.modal-exit{
  animation:modalSlideOut 0.2s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes modalSlideIn{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes modalSlideOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-20px)}
}

/* ==========================================================================
   33. DRAWER ANIMATION
   ========================================================================== */

.drawer-enter{
  animation:drawerSlideIn 0.3s cubic-bezier(0.4,0,0.2,1);
}

@keyframes drawerSlideIn{
  from{transform:translateX(calc(100% + var(--space-4)))}
  to{transform:translateX(0)}
}

/* ==========================================================================
   34. TOAST ANIMATIONS
   ========================================================================== */

.toast-enter{
  animation:toastEnter 0.3s cubic-bezier(0.4,0,0.2,1);
}

@keyframes toastEnter{
  from{opacity:0;transform:translateX(100%)}
  to{opacity:1;transform:translateX(0)}
}

/* ==========================================================================
   35. AUTO-PLAY ANIMATION (Optional)
   ========================================================================== */

.auto-play-media{
  animation:autoPlayFade 3s ease-in-out infinite;
}

@keyframes autoPlayFade{
  0%,100%{opacity:1}
  50%{opacity:0.8}
}

/* ==========================================================================
   36. PERFORMANCE OPTIMIZATION
   ========================================================================== */

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

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

.contains-animations{
  contain:layout style paint;
}

/* ==========================================================================
   37. IMAGE GALLERY ANIMATION
   ========================================================================== */

.gallery-item{
  opacity:0;
  transform:scale(0.9) translateX(-20px);
  transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.gallery-item.is-visible{
  opacity:1;
  transform:scale(1) translateX(0);
}

/* ==========================================================================
   38. CODE BLOCK ANIMATION
   ========================================================================== */

.code-block-enter{
  animation:codeFadeIn 0.4s ease-out;
}

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

/* ==========================================================================
   39. DATA VISUALIZATION ANIMATION
   ========================================================================== */

.bar-chart-bar{
  animation:barGrow 0.8s cubic-bezier(0.4,0,0.2,1) forwards;
  transform-origin:bottom;
}

@keyframes barGrow{
  from{height:0;opacity:0}
  to{opacity:1}
}

/* ==========================================================================
   40. RESPONSIVE ANIMATION ADJUSTMENTS
   ========================================================================== */

@media (max-width:768px){
  .reveal-on-scroll{
    transition-duration:0.5s;
  }
  
  .stagger-children>*:nth-child(n){
    transition-delay:0ms;
  }
}

/* ==========================================================================
   41. ACCESSIBILITY — Motion Preferences
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .reveal-on-scroll,.gallery-item{
    opacity:1;
    transform:none;
    transition:none;
  }
  
  .stagger-children>*{
    transition-delay:0ms;
  }
}