/**
 * Interactive Animations and Micro-interactions
 * Smooth transitions, hover effects, focus states, and loading animations
 */

/* ==========================================================================
   CSS Custom Properties for Animations
   ========================================================================== */

:root {
  /* Animation Durations */
  --animation-fast: 150ms;
  --animation-base: 200ms;
  --animation-slow: 300ms;
  --animation-slower: 500ms;
  --animation-slowest: 800ms;
  
  /* Animation Easings */
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Transform Values */
  --scale-hover: 1.05;
  --scale-active: 0.95;
  --translate-hover: -2px;
  --translate-active: 1px;
  
  /* Shadow Values for Hover States */
  --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

/* ==========================================================================
   Page Transitions and Loading Animations
   ========================================================================== */

/* Page fade-in animation */
.page-content {
  animation: pageEnter var(--animation-slower) var(--ease-out-cubic) both;
}

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

/* Staggered content animation */
.hero-content > * {
  animation: fadeInUp var(--animation-slow) var(--ease-out-cubic) both;
}

.hero-title {
  animation-delay: 0.1s;
}

.hero-subtitle {
  animation-delay: 0.2s;
}

.hero-actions {
  animation-delay: 0.3s;
}

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

/* Section reveal animation */
.section {
  animation: sectionReveal var(--animation-slower) var(--ease-out-cubic) both;
}

.section:nth-child(2) { animation-delay: 0.2s; }
.section:nth-child(3) { animation-delay: 0.4s; }
.section:nth-child(4) { animation-delay: 0.6s; }

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

/* Loading spinner for dynamic content */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 1s ease-in-out infinite;
}

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

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(90deg, 
    var(--color-surface) 25%, 
    var(--color-border) 50%, 
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* ==========================================================================
   Button Animations and Hover Effects
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  transition: all var(--animation-base) var(--ease-out-cubic);
  transform: translateY(0);
}

/* Hover effects */
.btn:hover {
  transform: translateY(var(--translate-hover));
  box-shadow: var(--shadow-hover);
}

.btn:active {
  transform: translateY(var(--translate-active));
  transition-duration: var(--animation-fast);
}

/* Ripple effect for buttons */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width var(--animation-slow) var(--ease-out-cubic),
              height var(--animation-slow) var(--ease-out-cubic);
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* Primary button specific animations */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  background-size: 200% 200%;
  transition: all var(--animation-base) var(--ease-out-cubic),
              background-position var(--animation-slow) var(--ease-out-cubic);
}

.btn-primary:hover {
  background-position: 100% 100%;
  transform: translateY(var(--translate-hover)) scale(1.02);
}

/* Secondary button hover effect */
.btn-secondary {
  position: relative;
}

.btn-secondary::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--animation-base) var(--ease-out-cubic);
  border-radius: inherit;
  z-index: -1;
}

.btn-secondary:hover::after {
  opacity: 0.1;
}

/* Outline button animation */
.btn-outline {
  position: relative;
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  overflow: hidden;
}

.btn-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  transition: left var(--animation-base) var(--ease-out-cubic);
  z-index: -1;
}

.btn-outline:hover {
  color: white;
}

.btn-outline:hover::before {
  left: 0;
}

/* ==========================================================================
   Card Animations and Hover Effects
   ========================================================================== */

.card, .note-card {
  transition: all var(--animation-base) var(--ease-out-cubic);
  transform: translateY(0) scale(1);
}

.card:hover, .note-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-hover);
}

/* Card shimmer effect on hover */
.card::before, .note-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent
  );
  transition: left var(--animation-slow) var(--ease-out-cubic);
  z-index: 1;
  pointer-events: none;
}

.card:hover::before, .note-card:hover::before {
  left: 100%;
}

/* Card content animation */
.card-title, .note-title {
  transition: color var(--animation-base) var(--ease-out-cubic);
}

.card:hover .card-title a,
.note-card:hover .note-title a {
  color: var(--color-primary);
}

/* Tag hover animations */
.tag, .badge {
  position: relative;
  transition: all var(--animation-base) var(--ease-out-cubic);
  transform: translateY(0);
}

.tag:hover, .badge:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-sm);
}

/* Tag shimmer effect */
.tag::before, .badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.4), 
    transparent
  );
  transition: left var(--animation-base) var(--ease-out-cubic);
  border-radius: inherit;
}

.tag:hover::before, .badge:hover::before {
  left: 100%;
}

/* ==========================================================================
   Navigation Animations
   ========================================================================== */

/* Navigation link hover effects */
.nav-link {
  position: relative;
  transition: all var(--animation-base) var(--ease-out-cubic);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: all var(--animation-base) var(--ease-out-cubic);
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active::after {
  width: 20px;
}

/* Mobile menu animation */
.nav-menu {
  transition: transform var(--animation-base) var(--ease-out-cubic);
}

.nav-menu.active {
  animation: slideInRight var(--animation-base) var(--ease-out-cubic);
}

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

/* Hamburger animation */
.hamburger-line {
  transition: all var(--animation-base) var(--ease-out-cubic);
}

.nav-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.nav-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Theme toggle animation */
.theme-toggle {
  transition: all var(--animation-base) var(--ease-out-cubic);
}

.theme-toggle:hover {
  transform: scale(var(--scale-hover)) rotate(15deg);
}

.theme-icon {
  transition: transform var(--animation-base) var(--ease-out-cubic);
}

/* ==========================================================================
   Form and Input Animations
   ========================================================================== */

/* Search input animations */
#search-input, .search-input {
  transition: all var(--animation-base) var(--ease-out-cubic);
}

#search-input:focus, .search-input:focus {
  transform: translateY(-2px);
  box-shadow: var(--shadow-focus), var(--shadow-md);
}

/* Search results animation */
.search-results {
  animation: fadeInDown var(--animation-base) var(--ease-out-cubic);
  transform-origin: top;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px) scaleY(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

.search-result-item {
  transition: all var(--animation-fast) var(--ease-out-cubic);
}

.search-result-item:hover {
  transform: translateX(4px);
  background-color: var(--color-surface);
}

/* Tag filter animations */
.tag-filter {
  transition: all var(--animation-base) var(--ease-out-cubic);
  overflow: hidden;
}

.tag-filter[aria-hidden="false"] {
  animation: expandDown var(--animation-base) var(--ease-out-cubic);
}

@keyframes expandDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 200px;
    opacity: 1;
  }
}

.tag-button {
  transition: all var(--animation-base) var(--ease-out-cubic);
  position: relative;
}

.tag-button:hover {
  transform: translateY(-2px) scale(1.05);
}

.tag-button.active {
  animation: tagActivate var(--animation-base) var(--ease-out-back);
}

@keyframes tagActivate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   Focus States and Keyboard Navigation
   ========================================================================== */

/* Enhanced focus styles */
*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-base);
}

/* Button focus states */
.btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-focus), var(--shadow-md);
}

/* Link focus states */
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Card focus states */
.card:focus-within, .note-card:focus-within {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-focus), var(--shadow-lg);
}

/* Navigation focus states */
.nav-link:focus-visible {
  background-color: var(--color-surface);
  transform: scale(1.05);
}

/* Skip link animation */
.skip-link {
  transform: translateY(-100%);
  transition: transform var(--animation-base) var(--ease-out-cubic);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Loading States and Micro-interactions
   ========================================================================== */

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

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

/* Bounce animation for notifications */
.bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

/* Shake animation for errors */
.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/* Fade transitions for dynamic content */
.fade-enter {
  opacity: 0;
  transform: translateY(10px);
}

.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--animation-base) var(--ease-out-cubic);
}

.fade-exit {
  opacity: 1;
  transform: translateY(0);
}

.fade-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: all var(--animation-base) var(--ease-out-cubic);
}

/* ==========================================================================
   Scroll-based Animations
   ========================================================================== */

/* Scroll reveal animation */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-slower) var(--ease-out-cubic);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reading progress bar animation */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-surface);
  z-index: var(--z-sticky);
}

.reading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  width: 0%;
  transition: width var(--animation-fast) linear;
}

/* ==========================================================================
   Responsive Animation Adjustments
   ========================================================================== */

/* Reduce animations on mobile for performance */
@media (max-width: 768px) {
  .card:hover, .note-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  .btn:hover {
    transform: translateY(-1px);
  }
  
  .tag:hover, .badge:hover {
    transform: translateY(-1px) scale(1.02);
  }
}

/* ==========================================================================
   Accessibility: Respect User Motion Preferences
   ========================================================================== */

@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;
  }
  
  .card:hover, .note-card:hover,
  .btn:hover,
  .tag:hover, .badge:hover,
  .nav-link:hover {
    transform: none;
  }
  
  .reading-progress-bar {
    transition: none;
  }
  
  .scroll-reveal {
    opacity: 1;
    transform: none;
  }
  
  .page-content,
  .hero-content > *,
  .section {
    animation: none;
  }
}

/* ==========================================================================
   High Contrast Mode Support
   ========================================================================== */

@media (prefers-contrast: high) {
  .btn:focus-visible,
  .card:focus-within,
  .note-card:focus-within {
    outline: 3px solid;
    outline-offset: 2px;
  }
  
  .nav-link::after {
    height: 3px;
  }
}

/* ==========================================================================
   Print Styles - Disable Animations
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}