/* ========================================
   SolidW — Animations
   Minimal · Elegant · Smooth
   ======================================== */

@import url('variables.css');

/* ----- Fade In ----- */
.fade-in {
  opacity: 0;
  animation: fadeIn var(--duration-slow) ease-out forwards;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(1.5rem);
  animation: fadeInUp var(--duration-slow) ease-out forwards;
}

.fade-in-down {
  opacity: 0;
  transform: translateY(-1.5rem);
  animation: fadeInDown var(--duration-slow) ease-out forwards;
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-1.5rem);
  animation: fadeInLeft var(--duration-slow) ease-out forwards;
}

.fade-in-right {
  opacity: 0;
  transform: translateX(1.5rem);
  animation: fadeInRight var(--duration-slow) ease-out forwards;
}

/* ----- Animation Delays ----- */
.delay-100 {
  animation-delay: 100ms;
}
.delay-200 {
  animation-delay: 200ms;
}
.delay-300 {
  animation-delay: 300ms;
}
.delay-400 {
  animation-delay: 400ms;
}
.delay-500 {
  animation-delay: 500ms;
}
.delay-600 {
  animation-delay: 600ms;
}
.delay-700 {
  animation-delay: 700ms;
}
.delay-800 {
  animation-delay: 800ms;
}

/* ----- Keyframes ----- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-1.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ----- Scale In ----- */
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  animation: scaleIn var(--duration-slow) var(--ease-glass) forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ----- Stagger Children ----- */
.stagger > * {
  opacity: 0;
}

.stagger.visible > *:nth-child(1) {
  animation: fadeInUp var(--duration-slow) ease-out forwards;
}
.stagger.visible > *:nth-child(2) {
  animation: fadeInUp var(--duration-slow) ease-out 100ms forwards;
}
.stagger.visible > *:nth-child(3) {
  animation: fadeInUp var(--duration-slow) ease-out 200ms forwards;
}
.stagger.visible > *:nth-child(4) {
  animation: fadeInUp var(--duration-slow) ease-out 300ms forwards;
}
.stagger.visible > *:nth-child(5) {
  animation: fadeInUp var(--duration-slow) ease-out 400ms forwards;
}
.stagger.visible > *:nth-child(6) {
  animation: fadeInUp var(--duration-slow) ease-out 500ms forwards;
}

/* ----- Hover Animations ----- */
.hover-lift {
  transition: transform var(--duration-base), box-shadow var(--duration-base);
}

.hover-lift:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-lg);
}

.hover-glow {
  transition: all var(--duration-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow-accent), var(--shadow-xl);
  border-color: var(--color-accent-line);
}

/* ----- Scroll-triggered (Intersection Observer) ----- */
.scroll-fade {
  opacity: 0;
  transform: translateY(2rem);
  transition: all var(--duration-slow);
}

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

/* ----- Loading Skeleton Pulse ----- */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, var(--color-ink-soft) 25%, var(--color-paper-alt) 50%, var(--color-ink-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* ----- Smooth Scroll Offset ----- */
.scroll-offset {
  scroll-margin-top: calc(var(--header-height) + var(--space-6));
}