/* ============================================================
   Aush — animations.css
   Keyframe definitions + scroll-reveal utility classes
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   }
  50%       { transform: translateX(-50%) translateY(8px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* ── Scroll-reveal utility classes ────────────────────────── */
/* Applied by scroll-animations.js when element enters viewport */

.reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity   var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 110ms);
}

.reveal.fade-up {
  transform: translateY(56px);
}

.reveal.fade-in {
  transform: none;
}

.reveal.fade-left {
  transform: translateX(-48px);
}

.reveal.fade-right {
  transform: translateX(48px);
}

.reveal.scale-in {
  transform: scale(.94);
}

/* Triggered state — JavaScript adds .is-revealed */
.reveal.is-revealed {
  opacity: 1;
  transform: none !important;
}

/* Legacy: keep data-stagger for backward compat (no-op now, delay already on .reveal) */
.reveal[data-stagger] {
  transition-delay: calc(var(--stagger, 0) * 110ms);
}

/* ── Image reveal (clip-path wipe) ─────────────────────────── */
.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duration-slower) var(--ease-out);
  will-change: clip-path;
}
.img-reveal.is-revealed {
  clip-path: inset(0 0% 0 0);
}

/* ── Loading skeleton / shimmer ─────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* ── Hover lift utility ──────────────────────────────────────── */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Hover zoom image utility ────────────────────────────────── */
.hover-zoom {
  overflow: hidden;
}
.hover-zoom img {
  transition: transform var(--duration-slow) var(--ease-out);
}
.hover-zoom:hover img {
  transform: scale(1.07);
}

/* ── Gold underline link effect ──────────────────────────────── */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-out);
}
.link-underline:hover::after { width: 100%; }

/* ── Spin loader ─────────────────────────────────────────────── */
.loader {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}

/* ── Transition presets ───────────────────────────────────────── */
.transition-all   { transition: all var(--duration-base) var(--ease-out); }
.transition-color { transition: color var(--duration-fast), background-color var(--duration-fast); }
.transition-transform { transition: transform var(--duration-base) var(--ease-out); }

/* ── Reduced motion overrides ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .img-reveal,
  .hover-lift,
  .hover-zoom img {
    transition: none !important;
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none !important;
  }
  .img-reveal {
    clip-path: none !important;
  }
}