@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes blob { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(40px,-30px) scale(1.08); } 66% { transform:translate(-25px,20px) scale(0.95); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes spin-slow { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes shimmer { 0% { background-position:200% center; } 100% { background-position:-200% center; } }

body { animation: fadeIn 0.35s ease both; overflow-x: hidden; }
html { overflow-x: hidden; }

.reveal { opacity:0; transform:translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: var(--reveal-delay, 0ms); }
.reveal.visible { opacity:1; transform:none; }
.reveal-title { opacity:0; transform:translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal-title.visible { opacity:1; transform:none; }

.mobile-menu { position:fixed; top:0; right:0; height:100vh; width:300px; max-width:85vw; background:#111; border-left:1px solid rgba(255,255,255,0.06); transform:translateX(110%); transition:transform 0.32s cubic-bezier(0.4,0,0.2,1); z-index:300; overflow-y:auto; display:flex; flex-direction:column; }
.mobile-menu.open { transform:translateX(0); }
.mobile-overlay { position:fixed; inset:0; right:300px; background:transparent; opacity:0; pointer-events:none; z-index:199; }
.mobile-overlay.open { opacity:1; pointer-events:auto; }
body.menu-open { overflow:hidden; }

.nav-active { color:white !important; }
.nav-active::after { content:''; position:absolute; bottom:-2px; left:4px; right:4px; height:2px; background:#3b82f6; border-radius:2px; }
.navbar.scrolled { box-shadow: 0 1px 20px rgba(0,0,0,0.6); }

footer { opacity:0; transition:opacity 0.5s ease; }
footer.visible { opacity:1; }

@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.marquee-track { animation: marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

.role-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.role-card:hover { transform: translateY(-4px); }

@keyframes ping-slow { 0%,100% { transform:scale(1); opacity:0.6; } 50% { transform:scale(1.4); opacity:0; } }
.ping-slow { animation: ping-slow 2.5s ease-in-out infinite; }

.blob { animation: blob 12s ease-in-out infinite; }
.blob-2 { animation: blob 16s ease-in-out infinite reverse; animation-delay:-5s; }
.blob-3 { animation: blob 20s ease-in-out infinite; animation-delay:-10s; }
.float { animation: float 4s ease-in-out infinite; }
.spin-slow { animation: spin-slow 20s linear infinite; }

.glow-card { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.glow-card:hover { border-color: rgba(59,130,246,0.25); box-shadow: 0 0 30px rgba(59,130,246,0.06); }

.shimmer-text {
  background: linear-gradient(90deg, #fff 0%, #93c5fd 40%, #fff 60%, #93c5fd 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}