﻿[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s ease;
  will-change: transform, opacity;
}

[data-reveal="left"] {
  transform: translateX(-30px);
}

[data-reveal="right"] {
  transform: translateX(30px);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

[data-delay="80"] {
  transition-delay: 0.08s;
}

[data-delay="120"] {
  transition-delay: 0.12s;
}

[data-delay="160"] {
  transition-delay: 0.16s;
}

[data-delay="240"] {
  transition-delay: 0.24s;
}

.orb-1 {
  animation: drift 12s ease-in-out infinite alternate;
}

.status-dot {
  animation: blink 1.8s ease-in-out infinite;
}

.hero-panel {
  animation: panel-float 5s ease-in-out infinite;
}

.project-hero-card {
  animation: panel-float 5.5s ease-in-out infinite;
}

.scroll-progress span {
  background-size: 170% 100%;
  animation: progress-shift 3.8s linear infinite;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(20px, -24px, 0) scale(1.08);
  }
}

@keyframes blink {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(24, 138, 122, 0.32);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(24, 138, 122, 0);
  }
}

@keyframes panel-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes progress-shift {
  from {
    background-position: 0% 0%;
  }

  to {
    background-position: 100% 0%;
  }
}
