/**
 * Razorweave Website - Animations
 * Smooth, polished animations for enhanced user experience
 */

/* ===================================
   FADE IN ANIMATIONS
   =================================== */

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

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

/* Hero content fades in on load */
.hero-content {
  animation: fadeInUp 0.6s ease-out;
}

/* Cards and sections start hidden, animate when visible */
.card,
section:not(.hero) {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible class added by Intersection Observer */
.card.visible,
section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger card animations in grids */
.grid .card.visible:nth-child(1) { transition-delay: 0.1s; }
.grid .card.visible:nth-child(2) { transition-delay: 0.2s; }
.grid .card.visible:nth-child(3) { transition-delay: 0.3s; }
.grid .card.visible:nth-child(4) { transition-delay: 0.4s; }

/* ===================================
   BUTTON ANIMATIONS
   =================================== */

/* Button press effect */
.btn:active,
.dark-mode-toggle:active,
.breadcrumb-search-btn:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* ===================================
   LINK ANIMATIONS
   =================================== */

/* Underline slide animation */
a:not(.btn):not(.site-nav a):not(.breadcrumb a) {
  position: relative;
}

a:not(.btn):not(.site-nav a):not(.breadcrumb a)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-hot-pink);
  transition: width var(--transition-normal);
}

a:not(.btn):not(.site-nav a):not(.breadcrumb a):hover::after {
  width: 100%;
}

/* ===================================
   CARD HOVER ENHANCEMENTS
   =================================== */

.card {
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

.card:hover {
  transform: translateY(-8px);
}

/* Glow effect on card hover */
.card-accent-left:hover {
  box-shadow: var(--shadow-lg),
              -4px 0 20px rgba(0, 217, 255, 0.3);
}

.card-accent-top:hover {
  box-shadow: var(--shadow-lg),
              0 -4px 20px rgba(255, 0, 110, 0.3);
}

/* ===================================
   NAVIGATION ANIMATIONS
   =================================== */

/* Smooth nav link transitions */
.site-nav a {
  position: relative;
  transition: all var(--transition-fast);
}

.site-nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-hot-pink);
  transform: translateX(-50%);
  transition: width var(--transition-fast);
}

.site-nav a:hover::before {
  width: 80%;
}

/* Active page underline grows from center */
.site-nav a.active::before {
  width: 100%;
}

/* ===================================
   DARK MODE TOGGLE ANIMATION
   =================================== */

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

.dark-mode-toggle svg {
  transition: transform var(--transition-normal);
}

.dark-mode-toggle:hover svg {
  transform: rotate(20deg);
}

.dark-mode-toggle:active svg {
  animation: rotate 0.5s ease;
}

/* ===================================
   HERO SECTION ANIMATIONS
   =================================== */

.hero-logo {
  animation: fadeIn 1s ease-out;
}

.hero p {
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-cta {
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Floating animation for hero logo */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.hero-logo {
  animation: fadeIn 1s ease-out, float 6s ease-in-out 1s infinite;
}

/* ===================================
   LOADING STATES
   =================================== */

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

/* ===================================
   SCROLL ANIMATIONS
   =================================== */

/* Smooth scroll behavior already defined in reader.css */

/* Add entrance animation for sections on scroll */
@media (prefers-reduced-motion: no-preference) {
  section {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
  }
}

/* ===================================
   ACCESSIBILITY
   =================================== */

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