/* === Scroll-triggered animations === */

.anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-entrance) var(--ease-out-expo),
              transform var(--duration-entrance) var(--ease-out-expo);
}

.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-fade-in {
  opacity: 0;
  transition: opacity var(--duration-entrance) var(--ease-out-expo);
}

.anim-fade-in.is-visible {
  opacity: 1;
}

.anim-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-entrance) var(--ease-out-expo),
              transform var(--duration-entrance) var(--ease-out-expo);
}

.anim-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-entrance) var(--ease-out-expo),
              transform var(--duration-entrance) var(--ease-out-expo);
}

.anim-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-scale-up {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-entrance) var(--ease-out-expo),
              transform var(--duration-entrance) var(--ease-out-expo);
}

.anim-scale-up.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* === Stagger children === */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-entrance) var(--ease-out-expo),
              transform var(--duration-entrance) var(--ease-out-expo);
}

.anim-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.anim-stagger.is-visible > *:nth-child(2) { transition-delay: 120ms; }
.anim-stagger.is-visible > *:nth-child(3) { transition-delay: 240ms; }
.anim-stagger.is-visible > *:nth-child(4) { transition-delay: 360ms; }
.anim-stagger.is-visible > *:nth-child(5) { transition-delay: 480ms; }
.anim-stagger.is-visible > *:nth-child(6) { transition-delay: 600ms; }

.anim-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* === Text underline reveal === */
.anim-underline {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 3px;
  transition: background-size var(--duration-slow) var(--ease-out-expo);
  padding-bottom: 2px;
  display: inline;
}

.anim-underline.is-visible {
  background-size: 100% 3px;
}

/* === Hero character-by-character reveal === */
.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: heroCharReveal 0.6s var(--ease-out-expo) forwards;
}

@keyframes heroCharReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Line draw (for decorative elements) === */
.anim-line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s var(--ease-out-expo);
}

.anim-line-draw.is-visible {
  stroke-dashoffset: 0;
}

/* === Counter number === */
.counter-number {
  font-family: var(--font-english), var(--font-primary);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-weight-black);
  line-height: 1;
  color: var(--color-primary);
}

.counter-unit {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  margin-left: var(--space-2xs);
}

.counter-label {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  margin-top: var(--space-xs);
}

/* === Scroll indicator (hero) === */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
}

.scroll-indicator__line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-text-muted), transparent);
  animation: scrollLine 1.5s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.1% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* === Accessibility: Reduce motion === */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-in,
  .anim-slide-left,
  .anim-slide-right,
  .anim-scale-up,
  .anim-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-char {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .anim-underline {
    background-size: 100% 3px;
    transition: none;
  }

  .scroll-indicator__line {
    animation: none;
  }
}