/* --------------------------------------------------------------------------
Animations & Micro-interactions (Phase 4)
Premium, subtle, delightful animations
-------------------------------------------------------------------------- */

/* ===== KEYFRAME ANIMATIONS ===== */

/* Fade in on page load */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade in with slide up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in with slide down */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in with scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Glow effect on hover */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(15,133,119,0.2);
  }
  50% {
    box-shadow: 0 4px 16px rgba(15,133,119,0.3);
  }
}

/* Subtle pulse */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Bounce animation (subtle) */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Shimmer loading effect */
@keyframes shimmer {
  0% {
    background-position: -1200px 0;
  }
  100% {
    background-position: 1200px 0;
  }
}

/* Underline animation */
@keyframes underlineSlide {
  from {
    transform: scaleX(0);
    transform-origin: right;
  }
  to {
    transform: scaleX(1);
    transform-origin: right;
  }
}

@keyframes underlineSlideRight {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ===== PAGE ENTRANCE ANIMATIONS ===== */

body {
  animation: fadeIn 0.4s ease-out;
}

.hero {
  animation: fadeInDown 0.6s ease-out;
}

.hero-title {
  animation: fadeInUp 0.7s ease-out 0.1s both;
}

.hero-description {
  animation: fadeInUp 0.7s ease-out 0.2s both;
}

.hero-button {
  animation: fadeInUp 0.7s ease-out 0.3s both;
}

/* ===== CARD ANIMATIONS ===== */

.card {
  animation: fadeInUp 0.5s ease-out both;
  
  /* Stagger effect per card position */
  &:nth-child(1) { animation-delay: 0.1s; }
  &:nth-child(2) { animation-delay: 0.2s; }
  &:nth-child(3) { animation-delay: 0.3s; }
  &:nth-child(4) { animation-delay: 0.4s; }
  &:nth-child(5) { animation-delay: 0.5s; }
  &:nth-child(6) { animation-delay: 0.6s; }
}

/* Card image parallax-like effect on scroll */
.card-thumbnail {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .card-thumbnail {
  transform: scale(1.05);
}

/* Card badge entrance */
.card-badge {
  animation: fadeInScale 0.4s ease-out 0.2s both;
}

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

button,
.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  position: relative;
  overflow: hidden;
  
  &::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 0.6s, height 0.6s;
  }
  
  &:active::before {
    width: 300px;
    height: 300px;
  }
}

/* Button scale animation */
button:active,
.button:active,
input[type="button"]:active,
input[type="submit"]:active {
  transform: scale(0.98) !important;
}

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

/* Smooth link color transition */
a {
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* Underline animation for content links */
.entry-content a::after,
.page-content a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.entry-content a:hover::after,
.page-content a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ===== FORM ANIMATIONS ===== */

input:focus,
textarea:focus,
select:focus {
  animation: pulse 0.4s ease-out;
}

/* Input label animation (if applicable) */
label {
  transition: color 0.2s ease, transform 0.2s ease;
}

input:focus ~ label,
textarea:focus ~ label {
  color: var(--color-primary);
}

/* Success/Error message entrance */
.newsletter-messages,
.form-message {
  animation: fadeInUp 0.4s ease-out;
}

/* ===== LOADING & SKELETON ===== */

.loading::after,
[aria-busy="true"]::after {
  content: '';
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Skeleton loader shimmer */
.skeleton,
[aria-busy="true"] {
  background: linear-gradient(
    90deg,
    var(--color-bg-subtle) 0%,
    var(--color-bg-alt) 50%,
    var(--color-bg-subtle) 100%
  );
  background-size: 1200px 100%;
  animation: shimmer 2s infinite;
}

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

.featured-section,
.categories-section,
.recommendations-section {
  animation: fadeInUp 0.6s ease-out;
}

.featured-section {
  animation-delay: 0.1s;
}

.categories-section {
  animation-delay: 0.2s;
}

.recommendations-section {
  animation-delay: 0.3s;
}

/* ===== COMMENT ANIMATIONS ===== */

.comment-body {
  animation: fadeInUp 0.5s ease-out;
  
  .comment-list .comment-body {
    animation-delay: 0.1s;
  }
}

/* Reply form entrance */
#reply-title,
.comment-respond {
  animation: fadeInUp 0.5s ease-out;
}

/* ===== PAGINATION ANIMATIONS ===== */

.navigation.pagination a,
.navigation.pagination span {
  transition: all 0.2s ease;
}

.navigation.pagination a:hover {
  animation: bounce 0.4s ease-out;
}

/* ===== DROPDOWN ANIMATIONS ===== */

.main-navigation .menu {
  animation: fadeDown 0.3s ease-out;
}

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

/* ===== TEXT ANIMATIONS ===== */

/* Character reveal (if using JavaScript) */
.char {
  display: inline-block;
  animation: fadeInUp 0.5s ease-out backwards;
  
  &:nth-child(1) { animation-delay: 0.05s; }
  &:nth-child(2) { animation-delay: 0.1s; }
  &:nth-child(3) { animation-delay: 0.15s; }
  &:nth-child(4) { animation-delay: 0.2s; }
  &:nth-child(5) { animation-delay: 0.25s; }
  &:nth-child(6) { animation-delay: 0.3s; }
  &:nth-child(n+7) { animation-delay: 0.35s; }
}

/* ===== TRANSITION UTILITIES ===== */

.transition-fast {
  transition: all 0.15s ease;
}

.transition-base {
  transition: all 0.2s ease;
}

.transition-slow {
  transition: all 0.3s ease;
}

.transition-slower {
  transition: all 0.5s ease;
}

/* ===== 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;
  }
}

/* ===== SMOOTH SCROLL ===== */

html {
  scroll-behavior: smooth;
}

/* ===== HOVER STATE ANIMATIONS ===== */

/* Slightly larger on hover for interactive elements */
button:hover,
.button:hover,
a[role="button"]:hover {
  transform: scale(1.02);
}

/* Card elevation animation */
.category-card:hover,
.recommendation-card:hover {
  animation: none;
}

/* ===== FOCUS VISIBLE ANIMATIONS ===== */

:focus-visible {
  animation: pulse 0.4s ease-out;
}

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

/* These work with Intersection Observer or on-scroll JS */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
}

.scroll-reveal.in-view {
  animation: fadeInUp 0.6s ease-out forwards;
}

.scroll-reveal:nth-child(1).in-view { animation-delay: 0s; }
.scroll-reveal:nth-child(2).in-view { animation-delay: 0.1s; }
.scroll-reveal:nth-child(3).in-view { animation-delay: 0.2s; }
.scroll-reveal:nth-child(4).in-view { animation-delay: 0.3s; }
.scroll-reveal:nth-child(5).in-view { animation-delay: 0.4s; }

/* ===== THEME TRANSITION ===== */

/* Smooth transition when theme changes */
:root {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== MENU TOGGLE ANIMATION ===== */

.menu-toggle {
  transition: transform 0.2s ease;
}

.menu-toggle:hover {
  transform: scale(1.08);
}

.menu-toggle:active {
  transform: scale(0.96);
}

/* ===== BREADCRUMB ANIMATIONS ===== */

.breadcrumbs {
  animation: fadeIn 0.5s ease-out;
}

.breadcrumbs a {
  transition: color 0.2s ease, transform 0.2s ease;
}

.breadcrumbs a:hover {
  transform: translateX(2px);
}