/* ============================================================
   ReviewGudian - Animations & Transitions
   Keyframes, scroll-reveal, hover effects, loading states
   ============================================================ */

/* ------------------------------------------------------------
   1. Core Keyframe Animations
   ------------------------------------------------------------ */

/* Fade In Up - primary entrance animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In Right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade In - pure opacity */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade Out */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Scale In */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide In Up - full slide from below viewport */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Slide In Down */
@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}


/* ------------------------------------------------------------
   2. Decorative / Infinite Keyframes
   ------------------------------------------------------------ */

/* Float - gentle floating motion for decorative elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Float delayed - offset timing for variety */
@keyframes floatDelayed {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(2deg);
  }
  66% {
    transform: translateY(-10px) rotate(-1deg);
  }
}

/* Pulse - scale breathing */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Glow - box-shadow pulse */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.15);
  }
  50% {
    box-shadow: 0 0 40px rgba(108, 92, 231, 0.3);
  }
}

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

/* Rotate - full rotation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Gradient Shift - animated gradient background */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Typewriter cursor blink */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Typewriter text reveal */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Bounce In - elastic entrance */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Ripple - expanding circle */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Subtle bob for icons or buttons */
@keyframes bob {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(3px);
  }
}

/* Border draw animation for cards */
@keyframes borderDraw {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* Slide in from the right and stay */
@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Progress bar animation */
@keyframes progressFill {
  from {
    width: 0;
  }
}

/* Ping animation for notification dots */
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}


/* ------------------------------------------------------------
   3. Scroll Reveal Classes
   ------------------------------------------------------------ */

/* Base reveal - hidden by default, transitions when .active added */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Directional reveal variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Reveal from below with bigger offset */
.reveal-up-lg {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-up-lg.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers - used with any reveal class */
.delay-1 { transition-delay: 100ms !important; }
.delay-2 { transition-delay: 200ms !important; }
.delay-3 { transition-delay: 300ms !important; }
.delay-4 { transition-delay: 400ms !important; }
.delay-5 { transition-delay: 500ms !important; }
.delay-6 { transition-delay: 600ms !important; }
.delay-7 { transition-delay: 700ms !important; }
.delay-8 { transition-delay: 800ms !important; }

/* Duration modifiers */
.duration-fast {
  transition-duration: 0.4s !important;
}

.duration-slow {
  transition-duration: 1.2s !important;
}


/* ------------------------------------------------------------
   4. Hover Animation Classes
   ------------------------------------------------------------ */

/* Lift on hover */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

/* Glow on hover */
.hover-glow {
  transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-glow:hover {
  box-shadow: 0 0 40px rgba(108, 92, 231, 0.25);
}

/* Scale on hover */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* Subtle tilt on hover */
.hover-tilt {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
}

/* Shine sweep on hover - decorative overlay */
.hover-shine {
  position: relative;
  overflow: hidden;
}

.hover-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.03),
    transparent
  );
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}

.hover-shine:hover::before {
  left: 100%;
}

/* Border gradient on hover */
.hover-border {
  position: relative;
  transition: border-color 0.3s ease;
}

.hover-border:hover {
  border-color: rgba(108, 92, 231, 0.4);
}

/* Underline expand on hover (for links) */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.hover-underline:hover::after {
  width: 100%;
  left: 0;
}

/* Icon rotate on parent hover */
.hover-rotate-icon:hover .icon-rotate {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}


/* ------------------------------------------------------------
   5. Loading States
   ------------------------------------------------------------ */

/* Skeleton shimmer for content placeholders */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--dark-surface) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    var(--dark-surface) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.skeleton-text:last-child {
  width: 70%;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: 16px;
  border-radius: 4px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
}

.skeleton-card {
  background: var(--dark-card);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid rgba(108, 92, 231, 0.08);
}

/* Loading spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(108, 92, 231, 0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: rotate 0.8s linear infinite;
}

.loading-spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.loading-spinner-lg {
  width: 60px;
  height: 60px;
  border-width: 4px;
}

/* Dot loading indicator */
.loading-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Page loading overlay */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
}

/* Progress bar loading */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-primary);
  z-index: 10000;
  animation: progressFill 2s ease-out forwards;
  border-radius: 0 3px 3px 0;
}


/* ------------------------------------------------------------
   6. Stagger Animations for Grids
   ------------------------------------------------------------ */

/* Children stagger with increasing delays */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children > *:nth-child(8) { transition-delay: 560ms; }
.stagger-children > *:nth-child(9) { transition-delay: 640ms; }

/* Animation stagger with animation-delay */
.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 100ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 200ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 300ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 400ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 500ms; }


/* ------------------------------------------------------------
   7. Parallax Helper
   ------------------------------------------------------------ */
.parallax {
  will-change: transform;
  transform: translateZ(0);
}

.parallax-slow {
  will-change: transform;
  transition: transform 0.1s linear;
}


/* ------------------------------------------------------------
   8. Page Transitions
   ------------------------------------------------------------ */
.page-enter {
  animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-exit {
  animation: fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Route transition wrapper */
.route-transition {
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ------------------------------------------------------------
   9. Counter Animation Helper
   ------------------------------------------------------------ */
.count-up {
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------
   10. Text Reveal Animations
   ------------------------------------------------------------ */

/* Clip-path text reveal from bottom */
.text-reveal {
  clip-path: inset(100% 0 0 0);
  animation: textRevealClip 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Clip-path reveal from left */
.text-reveal-left {
  clip-path: inset(0 100% 0 0);
  animation: textRevealLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Individual word reveal - each word gets its own animation */
.word-reveal {
  overflow: hidden;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
}

.word-reveal > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: wordReveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.word-reveal > span:nth-child(1) { animation-delay: 0ms; }
.word-reveal > span:nth-child(2) { animation-delay: 50ms; }
.word-reveal > span:nth-child(3) { animation-delay: 100ms; }
.word-reveal > span:nth-child(4) { animation-delay: 150ms; }
.word-reveal > span:nth-child(5) { animation-delay: 200ms; }
.word-reveal > span:nth-child(6) { animation-delay: 250ms; }
.word-reveal > span:nth-child(7) { animation-delay: 300ms; }
.word-reveal > span:nth-child(8) { animation-delay: 350ms; }
.word-reveal > span:nth-child(9) { animation-delay: 400ms; }
.word-reveal > span:nth-child(10) { animation-delay: 450ms; }

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

/* Typewriter effect container */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--primary);
  animation:
    typewriter 3s steps(40) forwards,
    blink 0.75s step-end infinite;
  width: 0;
}

/* Character by character reveal */
.char-reveal > span {
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.05s forwards;
}


/* ------------------------------------------------------------
   11. Animated Gradient Backgrounds
   ------------------------------------------------------------ */
.animated-gradient {
  background: linear-gradient(135deg, #6C5CE7, #00CEC9, #FD79A8, #6C5CE7);
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
}

.animated-gradient-text {
  background: linear-gradient(135deg, #6C5CE7, #00CEC9, #FD79A8, #6C5CE7);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtle border gradient animation */
.animated-border {
  position: relative;
  overflow: hidden;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #6C5CE7, #00CEC9, #FD79A8, #6C5CE7);
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  border-radius: inherit;
  z-index: -1;
}

.animated-border::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--dark-card);
  border-radius: inherit;
  z-index: -1;
}


/* ------------------------------------------------------------
   12. Ripple Effect (for buttons)
   ------------------------------------------------------------ */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: ripple 0.6s ease-out forwards;
  pointer-events: none;
}


/* ------------------------------------------------------------
   13. Notification / Toast Animations
   ------------------------------------------------------------ */
.toast-enter {
  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

.toast-exit {
  animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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


/* ------------------------------------------------------------
   14. Focus Animations (Accessibility)
   ------------------------------------------------------------ */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.5);
  transition: box-shadow 0.15s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* ------------------------------------------------------------
   15. Marquee / Scrolling Text
   ------------------------------------------------------------ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


/* ------------------------------------------------------------
   16. Image Reveal
   ------------------------------------------------------------ */
.image-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-reveal.active {
  clip-path: inset(0 0 0 0);
}

.image-zoom-reveal {
  overflow: hidden;
  border-radius: var(--radius);
}

.image-zoom-reveal img {
  transform: scale(1.2);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-zoom-reveal.active img {
  transform: scale(1);
}