/**
 * Animations — Apple-style, performant (transform/opacity)
 * Use classes .anim-fade-in, .anim-slide-up, etc. with Intersection Observer in app.js.
 * Easing: cubic-bezier(0.16, 1, 0.3, 1) for that “loved” feel.
 */

:root {
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ─── Scroll-triggered: smoother, slightly scale + fade ─── */
.anim-fade-in {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity 0.7s var(--ease-apple), transform 0.7s var(--ease-apple);
}
.anim-fade-in.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.anim-slide-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--ease-apple) 0.1s, transform 0.8s var(--ease-apple) 0.1s;
}
.anim-slide-up.in {
  opacity: 1;
  transform: translateY(0);
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s var(--ease-apple), transform 0.6s var(--ease-apple);
}
.anim-scale-in.in {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children — Apple-style delays */
.anim-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-apple), transform 0.6s var(--ease-apple);
}
.anim-stagger.in > *:nth-child(1) { transition-delay: 0s; }
.anim-stagger.in > *:nth-child(2) { transition-delay: 0.1s; }
.anim-stagger.in > *:nth-child(3) { transition-delay: 0.2s; }
.anim-stagger.in > *:nth-child(4) { transition-delay: 0.3s; }
.anim-stagger.in > *:nth-child(5) { transition-delay: 0.4s; }
.anim-stagger.in > *:nth-child(6) { transition-delay: 0.5s; }
.anim-stagger.in > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Hover / focus (always on) ─── */
.anim-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.anim-lift:hover { transform: translateY(-4px); }

.anim-glow-link { transition: color 0.2s ease, text-shadow 0.2s ease; }
.anim-glow-link:hover { color: var(--gold2); }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-in,
  .anim-slide-up,
  .anim-scale-in,
  .anim-stagger > * { transition-duration: 0.01s; }
  .anim-lift:hover { transform: none; }
}