/* ============================================================
   NexBuild AI — Animations & Micro-interactions
   ============================================================ */

/* ── Keyframes ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer {
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes rotate360 { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes bounceIn {
  0%{opacity:0;transform:scale(.3)}
  50%{opacity:1;transform:scale(1.05)}
  70%{transform:scale(.9)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes ripple {
  0%{transform:scale(0);opacity:.6}
  100%{transform:scale(4);opacity:0}
}
@keyframes countUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes gradientShift {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes typewriter {
  from { width: 0 }
  to { width: 100% }
}
@keyframes particleDrift {
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:1}
  100%{transform:translateY(-100px) translateX(50px) rotate(360deg);opacity:0}
}

/* ── Animated gradient bg ── */
.animated-gradient-bg {
  background: linear-gradient(270deg, #4F46E5, #06B6D4, #7C3AED, #0EA5E9);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── Ripple effect ── */
.ripple-container { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute; border-radius: 50%;
  width: 10px; height: 10px;
  background: rgba(255,255,255,.4);
  transform: scale(0);
  animation: ripple .6s linear;
  pointer-events: none;
}

/* ── Number counter ── */
.counter-number { display: inline-block; animation: countUp .8s ease; }

/* ── Particle container ── */
.particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; }
.particle {
  position: absolute; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: .15;
  animation: particleDrift linear infinite;
}

/* ── Typewriter text ── */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--primary);
  white-space: nowrap;
  animation: typewriter 2s steps(40,end), blink .7s step-end infinite alternate;
}

/* ── Genie burst ── */
@keyframes burst {
  0%{transform:scale(1)}
  30%{transform:scale(1.4) rotate(10deg)}
  60%{transform:scale(.9) rotate(-5deg)}
  100%{transform:scale(1) rotate(0)}
}
.genie-burst { animation: burst .4s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Scroll reveal variants ── */
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(.9); transition: opacity .6s ease, transform .6s ease; }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Hover lift ── */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(79,70,229,.15); }

/* ── Shimmer button ── */
.btn-shimmer {
  position: relative; overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
  animation: shimmerBtn 3s infinite;
}
@keyframes shimmerBtn {
  0%{left:-60%} 100%{left:160%}
}

/* ── Progress bar ── */
.skill-bar { background: var(--gray-200); border-radius: 50px; height: 8px; overflow: hidden; }
.skill-fill {
  height: 100%; border-radius: 50px;
  background: var(--gradient);
  width: 0%; transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
}

/* ── Tab component ── */
.tabs { display: flex; gap: 4px; background: var(--gray-100); padding: 4px; border-radius: var(--radius); width: fit-content; margin-bottom: 32px; }
.tab-btn {
  padding: 10px 20px; border-radius: calc(var(--radius) - 4px);
  font-size: .88rem; font-weight: 600; color: var(--gray-500);
  background: transparent; border: none; cursor: pointer; transition: var(--transition);
}
.tab-btn.active { background: var(--white); color: var(--primary); box-shadow: var(--shadow-sm); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeInUp .3s ease; }

/* ── Accordion ── */
.accordion-item { border: 1px solid var(--gray-200); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; cursor: pointer; transition: var(--transition);
  font-weight: 600; font-family: var(--font-heading); color: var(--gray-900);
}
.accordion-header:hover { background: var(--gradient-soft); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.accordion-body.open { max-height: 500px; }
.accordion-body-inner { padding: 0 20px 18px; color: var(--gray-600); font-size: .92rem; }

/* ── Tooltip ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--gray-900); color: white; padding: 6px 12px;
  border-radius: 6px; font-size: .75rem; white-space: nowrap;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Loading spinner ── */
.spinner {
  width: 24px; height: 24px; border: 2.5px solid var(--gray-200);
  border-top-color: var(--primary); border-radius: 50%;
  animation: rotate360 .7s linear infinite;
}

/* ── Notification dot ── */
.notif-dot {
  position: absolute; top: -4px; right: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #EF4444; border: 2px solid white;
}