/* ==========================================
   SOFTEDGE SOLUTION — ANIMATIONS
   ========================================== */

/* ── Float Animation (hero cards) ── */
@keyframes float-1 {
  0%, 100% { transform: translateY(0px) rotate(-1deg); }
  50%       { transform: translateY(-16px) rotate(1deg); }
}
@keyframes float-2 {
  0%, 100% { transform: translateY(-8px) rotate(1deg); }
  50%       { transform: translateY(8px) rotate(-1deg); }
}
@keyframes float-3 {
  0%, 100% { transform: translateY(0px) rotate(0.5deg); }
  33%       { transform: translateY(-12px) rotate(-0.5deg); }
  66%       { transform: translateY(6px) rotate(1deg); }
}
@keyframes float-4 {
  0%, 100% { transform: translateY(-4px); }
  50%       { transform: translateY(12px); }
}
@keyframes float-5 {
  0%, 100% { transform: translateY(4px) rotate(-0.5deg); }
  50%       { transform: translateY(-10px) rotate(0.5deg); }
}

/* ── Subtle float for section elements ── */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* ── Gradient Shift ── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Pulse Glow ── */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
  50%       { box-shadow: 0 0 0 16px rgba(37,99,235,0.08); }
}

@keyframes pulse-glow-purple {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
  50%       { box-shadow: 0 0 0 20px rgba(124,58,237,0.08); }
}

/* ── Spin ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Scale In ── */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Slide Up ── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Slide Down ── */
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Fade In ── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Shimmer ── */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ── Blink Cursor ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Number count up  (for counters) ── */
@keyframes counter-scale {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Orbit (decorative rings) ── */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

/* ── Morph (blob shapes) ── */
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  33%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  66%       { border-radius: 40% 60% 70% 30% / 40% 70% 60% 30%; }
}

/* ── Draw line (for process steps) ── */
@keyframes draw-line {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Ripple ── */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

/* ── Bounce ── */
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: translateY(-14px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

/* ── Typewriter ── */
@keyframes type-cursor {
  0%, 100% { border-right-color: var(--accent); }
  50%       { border-right-color: transparent; }
}

/* ── Notification ping ── */
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ── Blob decorative ── */
.blob {
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  filter: blur(64px);
  opacity: 0.6;
  animation: morph 10s ease-in-out infinite, gentle-float 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.blob-blue {
  background: radial-gradient(circle, rgba(37,99,235,0.18) 0%, rgba(37,99,235,0) 70%);
}

.blob-purple {
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, rgba(124,58,237,0) 70%);
}

.blob-soft {
  background: radial-gradient(circle, rgba(37,99,235,0.1) 0%, rgba(124,58,237,0.1) 50%, rgba(37,99,235,0) 70%);
}

/* ── Animate classes (JS triggers) ── */
.animate-float-1 { animation: float-1 5s ease-in-out infinite; }
.animate-float-2 { animation: float-2 6s ease-in-out infinite; }
.animate-float-3 { animation: float-3 7s ease-in-out infinite; }
.animate-float-4 { animation: float-4 5.5s ease-in-out infinite; }
.animate-float-5 { animation: float-5 6.5s ease-in-out infinite; }
.animate-float-6 { animation: gentle-float 5s ease-in-out infinite; }

.animate-spin      { animation: spin 8s linear infinite; }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }
.animate-pulse     { animation: pulse-glow 3s ease-in-out infinite; }
.animate-morph     { animation: morph 10s ease-in-out infinite; }
.animate-bounce    { animation: bounce-y 2s ease-in-out infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* ── Ping indicator (live dot) ── */
.ping-dot {
  position: relative;
  display: inline-block;
}

.ping-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: ping 1.4s cubic-bezier(0,0,0.2,1) infinite;
}

/* ── Gradient bg animate ── */
.animated-gradient-bg {
  background: linear-gradient(135deg, #EFF6FF, #F5F3FF, #F8FAFC, #EFF6FF);
  background-size: 400% 400%;
  animation: gradient-shift 10s ease infinite;
}

/* ── Skeleton loader ── */
.skeleton {
  background: linear-gradient(90deg, var(--secondary) 25%, var(--border) 50%, var(--secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}

/* ── Card hover glow ── */
.glow-hover {
  transition: box-shadow var(--t-slow);
}
.glow-hover:hover {
  box-shadow: 0 0 0 2px var(--accent-light), var(--shadow-hover);
}

/* ── Section entry animations (JS-applied) ── */
.anim-hero-heading {
  animation: slide-up 0.9s var(--ease-out) both;
}
.anim-hero-sub {
  animation: slide-up 0.9s 0.15s var(--ease-out) both;
}
.anim-hero-cta {
  animation: slide-up 0.9s 0.3s var(--ease-out) both;
}
.anim-hero-card {
  animation: scale-in 0.7s 0.5s var(--ease-out) both;
}

/* ── Progress bar (skills) ── */
.skill-bar-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.skill-bar-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 3px;
  width: 0%;
  transition: width 1.2s var(--ease-out);
}

/* ── Top Scroll Progress Bar ── */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #2563EB, #7C3AED, #EC4899);
  z-index: 10001;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(37,99,235,0.8);
}

/* ── Cursor Spotlight Effect ── */
.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, -1000px);
  left: var(--mouse-x, -1000px);
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(124, 58, 237, 0.05) 50%, transparent 80%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  transition: opacity 0.3s ease;
  opacity: 0;
  z-index: 1;
}
.spotlight-card:hover::before {
  opacity: 1;
}

/* ── Button Click Ripple ── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}
@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── Interactive Demo Modal ── */
.demo-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.demo-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.demo-modal-card {
  background: var(--card-bg, #0D1527);
  border: 1.5px solid var(--border-glow, rgba(37,99,235,0.3));
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 30px rgba(37,99,235,0.2);
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  padding: 32px;
  position: relative;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text, #F8FAFC);
}
.demo-modal-backdrop.active .demo-modal-card {
  transform: scale(1) translateY(0);
}
.demo-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: var(--text, #FFF);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.demo-modal-close:hover {
  background: rgba(255,255,255,0.2);
  transform: rotate(90deg);
}

/* ── Staggered Reveal Utility ── */
.stagger-parent .reveal:nth-child(1) { transition-delay: 0.05s; }
.stagger-parent .reveal:nth-child(2) { transition-delay: 0.12s; }
.stagger-parent .reveal:nth-child(3) { transition-delay: 0.19s; }
.stagger-parent .reveal:nth-child(4) { transition-delay: 0.26s; }
.stagger-parent .reveal:nth-child(5) { transition-delay: 0.33s; }
.stagger-parent .reveal:nth-child(6) { transition-delay: 0.40s; }