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

@keyframes imageReveal {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes drawLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

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

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ── Pre-animation state ── */
[data-anim="up"],
[data-anim="fade"],
[data-anim="reveal"] {
  opacity: 0;
}

/* ── Triggered states ── */
[data-anim="up"].is-visible {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--delay, 0) * 1ms);
}

[data-anim="fade"].is-visible {
  animation: fadeIn 0.8s ease both;
  animation-delay: calc(var(--delay, 0) * 1ms);
}

[data-anim="reveal"].is-visible {
  animation: imageReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--delay, 0) * 1ms);
}