/* ============================================================
   ANIMATIONS — animations.css
   ============================================================ */

/* ---- Scroll-reveal ---- */
.js-loaded .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.js-loaded .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Clip-path reveal variant */
.js-loaded .reveal-clip {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease-out);
}
.js-loaded .reveal-clip.is-visible {
  clip-path: inset(0 0 0% 0);
}

/* Fade only */
.js-loaded .reveal-fade {
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
.js-loaded .reveal-fade.is-visible { opacity: 1; }

/* Delays */
.js-loaded .reveal--delay-1 { transition-delay: 80ms; }
.js-loaded .reveal--delay-2 { transition-delay: 160ms; }
.js-loaded .reveal--delay-3 { transition-delay: 240ms; }
.js-loaded .reveal--delay-4 { transition-delay: 320ms; }
.js-loaded .reveal--delay-5 { transition-delay: 400ms; }

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes counterUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Hero entrance ---- */
.js-loaded .hero-animate {
  animation: slideUp var(--duration-slow) var(--ease-out) both;
}

.js-loaded .hero-animate--delay-1 { animation-delay: 100ms; }
.js-loaded .hero-animate--delay-2 { animation-delay: 220ms; }
.js-loaded .hero-animate--delay-3 { animation-delay: 340ms; }
.js-loaded .hero-animate--delay-4 { animation-delay: 460ms; }
.js-loaded .hero-animate--delay-5 { animation-delay: 580ms; }

/* ---- Image hover overlay ---- */
.img-hover-overlay {
  position: relative;
  overflow: hidden;
}

.img-hover-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.img-hover-overlay:hover::after { opacity: 1; }

/* ---- Mobile nav slide ---- */
.mobile-nav {
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

/* ---- Accent line animation ---- */
.js-loaded .accent-line-animate {
  animation: lineGrow 0.6s var(--ease-out) both;
}

/* ---- Number counter ---- */
.stat-num.counting {
  animation: counterUp 0.5s var(--ease-out) both;
}

/* ---- Page transition ---- */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
}