/* ====================================
   EduNews - Animations
==================================== */

/* Fade Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

.fade-in { animation: fadeIn 0.6s ease forwards; }
.fade-in-up { animation: fadeInUp 0.6s ease forwards; }
.fade-in-down { animation: fadeInDown 0.6s ease forwards; }
.fade-in-left { animation: fadeInLeft 0.6s ease forwards; }
.fade-in-right { animation: fadeInRight 0.6s ease forwards; }

/* Delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* Scale Animations */
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.scale-in { animation: scaleIn 0.4s ease forwards; }

/* Bounce */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.bounce { animation: bounce 0.6s ease; }

/* Pulse */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pulse { animation: pulse 1.5s infinite; }

/* Rotate */
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.rotate { animation: rotate 1s linear infinite; }

/* Float */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.float { animation: float 3s ease-in-out infinite; }

/* Shimmer */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer { background: linear-gradient(90deg, var(--light) 25%, var(--gray-lighter) 50%, var(--light) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

/* Typing */
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 0%, 100% { border-color: transparent; } 50% { border-color: var(--primary); } }
.typing { overflow: hidden; white-space: nowrap; border-right: 3px solid var(--primary); animation: typing 2s steps(30) forwards, blink 0.8s infinite; }

/* Hover Effects */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.5s ease; }
.img-zoom:hover img { transform: scale(1.1); }

.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }

.glow-hover { transition: box-shadow 0.3s ease; }
.glow-hover:hover { box-shadow: 0 0 30px rgba(30, 64, 175, 0.4); }

.underline-hover { position: relative; }
.underline-hover::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--primary); transition: width 0.3s ease; }
.underline-hover:hover::after { width: 100%; }

/* Loading Animations */
.spinner { width: 40px; height: 40px; border: 4px solid var(--light); border-top-color: var(--primary); border-radius: 50%; animation: rotate 1s linear infinite; }

.dots-loading { display: flex; gap: 8px; }
.dots-loading span { width: 10px; height: 10px; background: var(--primary); border-radius: 50%; animation: bounce 0.6s ease infinite; }
.dots-loading span:nth-child(2) { animation-delay: 0.1s; }
.dots-loading span:nth-child(3) { animation-delay: 0.2s; }

/* Skeleton Loading */
.skeleton { background: linear-gradient(90deg, var(--light) 25%, var(--lighter) 50%, var(--light) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
.skeleton-text { height: 16px; margin-bottom: 10px; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 15px; }
.skeleton-image { height: 200px; margin-bottom: 15px; }

/* Scroll Reveal */
.scroll-reveal { opacity: 0; transform: translateY(50px); transition: opacity 0.6s ease, transform 0.6s ease; }
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

/* Hero Slide Animations */
.hero-slide .hero-content { opacity: 0; transform: translateX(-50px); }
.hero-slide.active .hero-content { opacity: 1; transform: translateX(0); transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s; }
.hero-slide .hero-tag { opacity: 0; transform: translateY(-20px); }
.hero-slide.active .hero-tag { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s; }
.hero-slide .hero-title { opacity: 0; transform: translateY(20px); }
.hero-slide.active .hero-title { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s; }
.hero-slide .hero-desc { opacity: 0; }
.hero-slide.active .hero-desc { opacity: 0.9; transition: opacity 0.6s ease 0.9s; }
.hero-slide .btn { opacity: 0; transform: translateY(20px); }
.hero-slide.active .btn { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease 1.1s, transform 0.6s ease 1.1s; }

/* Card Stagger Animation */
.stagger-container .news-card { opacity: 0; transform: translateY(30px); }
.stagger-container.animate .news-card { animation: fadeInUp 0.5s ease forwards; }
.stagger-container.animate .news-card:nth-child(1) { animation-delay: 0.1s; }
.stagger-container.animate .news-card:nth-child(2) { animation-delay: 0.2s; }
.stagger-container.animate .news-card:nth-child(3) { animation-delay: 0.3s; }
.stagger-container.animate .news-card:nth-child(4) { animation-delay: 0.4s; }

/* Mobile Menu Animation */
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

/* Chatbot Animations */
.chat-message.bot { animation: fadeInLeft 0.3s ease; }
.chat-message.user { animation: fadeInRight 0.3s ease; }

.typing-indicator { display: flex; gap: 5px; padding: 15px; background: var(--light); border-radius: 0 var(--radius) var(--radius) var(--radius); width: fit-content; }
.typing-indicator span { width: 8px; height: 8px; background: var(--gray); border-radius: 50%; animation: bounce 0.6s ease infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.1s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.2s; }

/* Notification Animations */
@keyframes slideInNotification { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutNotification { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.notification-enter { animation: slideInNotification 0.3s ease forwards; }
.notification-exit { animation: slideOutNotification 0.3s ease forwards; }

/* Counter Animation */
@keyframes countUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.stat-number { animation: countUp 0.8s ease forwards; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}