.fade-in { animation: fadeIn .8s ease both; }
.zoom-in { animation: zoomIn .8s ease both; }
.float { animation: floatUp 3s ease-in-out infinite; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}

.ripple { position: relative; overflow: hidden; }
.ripple::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.3) 0, transparent 60%); transform: scale(0); opacity: 0; transition: transform .45s ease, opacity .45s ease; }
.ripple:active::after { transform: scale(2); opacity: 1; }

.gradient-text { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); -webkit-background-clip: text; background-clip: text; color: #ff751f; }