/* ===== KEYFRAMES ===== */
@keyframes fadeSlideDown  { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideUp    { from{opacity:0;transform:translateY(40px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn         { from{opacity:0} to{opacity:1} }
@keyframes scrollPulse    { 0%,100%{opacity:.3;height:36px} 50%{opacity:1;height:54px} }
@keyframes spinBorder     { to{transform:rotate(360deg)} }
@keyframes spinBorderRev  { to{transform:rotate(-360deg)} }
@keyframes pulseRing      { 0%,100%{transform:scale(1);opacity:.1}  50%{transform:scale(1.09);opacity:.28} }
@keyframes blink          { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes iconFloat      { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.08)} }
@keyframes glowPulse      { 0%,100%{box-shadow:0 0 14px rgba(0,212,255,.18)} 50%{box-shadow:0 0 45px rgba(0,212,255,.55),0 0 90px rgba(124,58,237,.18)} }
@keyframes orbitDot       { from{transform:rotate(0deg) translateX(92px) rotate(0deg)} to{transform:rotate(360deg) translateX(92px) rotate(-360deg)} }
@keyframes shimmer        { 0%{background-position:-300% center} 100%{background-position:300% center} }
@keyframes gradMove       { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes cardPop        { from{opacity:0;transform:translateY(50px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes neonFlicker    { 0%,90%,100%{opacity:1} 92%,98%{opacity:.6} 94%{opacity:.85} }
@keyframes ripple         { to{transform:scale(3.5);opacity:0} }
@keyframes cursorSpin     { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes trailFade      { from{opacity:0.65;transform:scale(1)} to{opacity:0;transform:scale(0.1)} }
@keyframes magneticPulse  { 0%,100%{opacity:0.55;transform:translate(-50%,-50%) scale(1)} 50%{opacity:0.95;transform:translate(-50%,-50%) scale(1.18)} }
@keyframes dotPulse       { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.5)} }
@keyframes floatY         { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes gradientShift  { 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }
@keyframes underlineSlide { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }
@keyframes starTwinkle    { 0%,100%{opacity:0;transform:scale(.6)} 50%{opacity:1;transform:scale(1)} }
@keyframes progressFill   { from{width:0%} to{width:var(--fill)} }
@keyframes codeTyping     { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInRight   { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInLeft    { from{opacity:0;transform:translateX(-50px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn        { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }

/* ===== SMOOTH REVEAL SYSTEM ===== */
.reveal       { opacity:0; transform:translateY(48px); transition:opacity .9s cubic-bezier(.22,.8,.2,1), transform .9s cubic-bezier(.22,.8,.2,1); }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-left  { opacity:0; transform:translateX(-48px); transition:opacity .9s cubic-bezier(.22,.8,.2,1), transform .9s cubic-bezier(.22,.8,.2,1); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(48px); transition:opacity .9s cubic-bezier(.22,.8,.2,1), transform .9s cubic-bezier(.22,.8,.2,1); }
.reveal-right.visible{ opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(.92); transition:opacity .8s cubic-bezier(.22,.8,.2,1), transform .8s cubic-bezier(.22,.8,.2,1); }
.reveal-scale.visible{ opacity:1; transform:scale(1); }

/* Stagger delays for child reveal items */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ===== HERO ENTRANCE ===== */
.hero-badge    { animation:fadeSlideDown .9s cubic-bezier(.22,.8,.2,1) both; }
.hero-greeting { animation:fadeSlideUp  .9s cubic-bezier(.22,.8,.2,1) .12s both; }
.hero-title    { animation:fadeSlideUp  1.1s cubic-bezier(.22,.8,.2,1) .24s both; }
.hero-role     { animation:fadeSlideUp  1.1s cubic-bezier(.22,.8,.2,1) .42s both; }
.hero-sub      { animation:fadeSlideUp  1s   cubic-bezier(.22,.8,.2,1) .58s both; }
.hero-ctas     { animation:fadeSlideUp  1s   cubic-bezier(.22,.8,.2,1) .74s both; }
.hero-code     { animation:slideInRight 1.1s cubic-bezier(.22,.8,.2,1) .5s  both; }
.scroll-hint   { animation:fadeSlideUp  1s   cubic-bezier(.22,.8,.2,1) 1.3s both; }
.cursor-blink  { animation:blink 1s step-end infinite; }

/* ===== STAR SPARKLES (decorative) ===== */
.sparkle {
  position:absolute; pointer-events:none; border-radius:50%;
  background:#fff; animation:starTwinkle var(--dur,3s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}