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

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

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

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%       { opacity: 0.8; transform: translateY(6px); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(201, 162, 126, 0); }
  50%       { box-shadow: 0 0 40px rgba(201, 162, 126, 0.15); }
}

/* ─── Utility Classes ──────────────────────────────────── */
.animate-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.animate-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

.animate-fade-in {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.animate-fade-in.in-view { opacity: 1; }

/* Stagger delays */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 550ms; }
.delay-6 { transition-delay: 700ms; }

/* ─── Scroll indicator ─────────────────────────────────── */
.scroll-indicator {
  animation: scrollPulse 2.5s ease-in-out infinite;
}

/* ─── Parallax ──────────────────────────────────────────── */
.parallax-img {
  will-change: transform;
}

/* ─── Hover glow ───────────────────────────────────────── */
.hover-glow {
  transition: box-shadow var(--duration-mid) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: 0 0 40px rgba(201, 162, 126, 0.12);
}

/* ─── Line reveal ───────────────────────────────────────── */
.line-reveal {
  display: block;
  overflow: hidden;
}

.line-reveal span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.line-reveal.in-view span {
  transform: translateY(0);
}

/* ─── Image scale in ────────────────────────────────────── */
.scale-in {
  transform: scale(1.08);
  transition: transform var(--duration-xslow) var(--ease-out);
}

.scale-in.in-view {
  transform: scale(1);
}

/* ─── Observer Script Injection ─────────────────────────── */
/* Handled by /scripts/animations.js */