/* ============================================
   STUDIO KURA — Animations
   All @keyframes + scroll-triggered effects
   ============================================ */

/* --- Scroll Pulse (Hero scroll indicator) --- */
@keyframes scroll-pulse {
  0%, 100% {
    width: 40px;
    opacity: 0.5;
  }
  50% {
    width: 60px;
    opacity: 1;
  }
}

/* --- Page Enter --- */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* --- Fade Out --- */
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* --- Slide Up --- */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Slide In From Left --- */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Slide In From Right --- */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Scale In --- */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Counter Roll (for stats) --- */
@keyframes counter-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Line Grow (decorative) --- */
@keyframes line-grow {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* --- Stagger Classes --- */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }

/* --- Hero Text Entrance --- */
.hero__title {
  animation: slide-up 1s var(--ease-out) 0.2s both;
}

.hero__tagline {
  animation: slide-up 1s var(--ease-out) 0.5s both;
}

.hero__scroll-indicator {
  animation: fade-in 1s var(--ease-out) 1.2s both;
}

/* --- Nav Entrance --- */
.site-nav {
  animation: fade-in 0.8s var(--ease-out) 0.1s both;
}

/* --- Card Hover Animation --- */
.project-card__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(200, 255, 0, 0.04);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.project-card:hover .project-card__placeholder::after {
  opacity: 1;
}

/* --- Marquee-style scroll for clients (optional) --- */
@keyframes marquee-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- Reduced Motion Override --- */
@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__tagline,
  .hero__scroll-indicator,
  .site-nav {
    animation: none;
    opacity: 1;
    transform: none;
  }
}