/* static/css/animations.css — extracted from index.html (FrameFlow prototype) */
  /* Animations */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
  }

  @keyframes shine {
    0% { transform: translateX(-100%); }
    20% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
  }

  /* View states */
  .view { display: none; }
  .view.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
    animation: viewSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes viewSlideIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Projects view */
  .filter-bar {
    display: flex;
    gap: 10px;
    padding: 4px;
  }

  .filter-pill {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .filter-pill:hover { background: var(--surface-hover); }
  .filter-pill.active {
    background: rgba(74,222,128,0.12);
    border-color: rgba(74,222,128,0.35);
    color: var(--neon-bright);
    box-shadow: 0 0 20px rgba(74,222,128,0.10);
  }