/* SynapFuse — Motion Physics System
 *
 * Spring-style motion using cubic-bezier approximations.
 * Avoids linear animations — everything has organic deceleration.
 */

/* -----------------------------------------------------------------------
   Spring easing tokens
   ----------------------------------------------------------------------- */

:root {
  /* Gentle spring — natural deceleration with slight overshoot */
  --sf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Snappy spring — fast entry, elastic settle */
  --sf-spring-snappy: cubic-bezier(0.22, 1.4, 0.36, 1);

  /* Soft spring — gentle overshoot for large elements */
  --sf-spring-soft: cubic-bezier(0.45, 1.3, 0.55, 1);

  /* Decelerate — no overshoot, smooth stop */
  --sf-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);

  /* Accelerate-decelerate — symmetric ease */
  --sf-accel-decel: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* -----------------------------------------------------------------------
   Node entrance — scale + fade with spring overshoot
   ----------------------------------------------------------------------- */

@keyframes sf-node-enter {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.sf-node-enter {
  animation: sf-node-enter 0.5s var(--sf-spring) both;
}

/* Staggered entrance delays */
.sf-node-enter-1 { animation-delay: 0ms; }
.sf-node-enter-2 { animation-delay: 60ms; }
.sf-node-enter-3 { animation-delay: 120ms; }
.sf-node-enter-4 { animation-delay: 180ms; }
.sf-node-enter-5 { animation-delay: 240ms; }

/* -----------------------------------------------------------------------
   Panel expansion — slide up with spring
   ----------------------------------------------------------------------- */

@keyframes sf-panel-expand {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  70% {
    opacity: 1;
    transform: translateY(-3px) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.sf-panel-expand {
  animation: sf-panel-expand 0.6s var(--sf-spring-soft) both;
}

/* -----------------------------------------------------------------------
   Cursor hover — lift with spring
   ----------------------------------------------------------------------- */

.sf-hover-lift {
  transition: transform 0.35s var(--sf-spring),
              box-shadow 0.35s var(--sf-decelerate);
}

.sf-hover-lift:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 16px rgba(79, 227, 193, 0.06);
}

/* -----------------------------------------------------------------------
   Button press — scale down spring
   ----------------------------------------------------------------------- */

.sf-press-spring {
  transition: transform 0.15s var(--sf-spring-snappy);
}

.sf-press-spring:active {
  transform: scale(0.95);
}

/* -----------------------------------------------------------------------
   Fade in up — content entrance
   ----------------------------------------------------------------------- */

@keyframes sf-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sf-fade-in-up {
  animation: sf-fade-in-up 0.5s var(--sf-decelerate) both;
}

/* -----------------------------------------------------------------------
   Glow breathe — subtle ambient pulse
   ----------------------------------------------------------------------- */

@keyframes sf-glow-breathe {
  0%, 100% {
    box-shadow: 0 0 16px rgba(79, 227, 193, 0.08);
  }
  50% {
    box-shadow: 0 0 28px rgba(79, 227, 193, 0.15);
  }
}

.sf-glow-breathe {
  animation: sf-glow-breathe 4s ease-in-out infinite;
}