/* ===================================================
   CairoTech – Animations Stylesheet
=================================================== */

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float-anim { animation: float 4s ease-in-out infinite; }
.float-anim-slow { animation: float 6s ease-in-out infinite; }

@keyframes shimmer {
  from { background-position: -200% center; }
  to { background-position: 200% center; }
}
.shimmer-text {
  background: linear-gradient(90deg, var(--gold) 0%, #fff8e1 25%, var(--gold-light) 50%, #fff8e1 75%, var(--gold) 100%);
  background-size: 200%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite;
}

@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(0,61,165,.3); } 50% { box-shadow: 0 0 40px rgba(0,61,165,.6); } }
.glow-btn { animation: glow-pulse 2s ease-in-out infinite; }

.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.stagger.animate > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .0s; }
.stagger.animate > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .1s; }
.stagger.animate > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .2s; }
.stagger.animate > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .3s; }
.stagger.animate > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .4s; }
.stagger.animate > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .5s; }
.stagger.animate > *:nth-child(7) { opacity: 1; transform: none; transition-delay: .6s; }
.stagger.animate > *:nth-child(n+8) { opacity: 1; transform: none; transition-delay: .7s; }

.fade-enter { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fade-enter.visible { opacity: 1; transform: none; }
.slide-right { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; }
.slide-right.visible { opacity: 1; transform: none; }
.slide-left { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; }
.slide-left.visible { opacity: 1; transform: none; }

.card-lift { transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s; }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.15); }

.gradient-border { position: relative; background: var(--white); border-radius: var(--radius-lg); }
.gradient-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, var(--primary), var(--accent), var(--gold)); z-index: -1; opacity: 0; transition: opacity .3s; }
.gradient-border:hover::before { opacity: 1; }

.underline-draw { position: relative; }
.underline-draw::after { content: ''; position: absolute; bottom: -2px; right: 0; left: 0; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.underline-draw:hover::after { transform: scaleX(1); transform-origin: left; }

@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 20s linear infinite; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fadeInUp { animation: fadeInUp .5s ease; }

.progress-bar { height: 6px; background: var(--border); border-radius: 6px; overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 6px; width: 0; transition: width 1.5s cubic-bezier(.4,0,.2,1); }