/* ─────────────────────────────────────────────────────────────────────────── */
/* ClipDraft · animations.css                                                  */
/* A: Inter already in _base.html / base.css                                   */
/* C: Card & button micro-interactions                                          */
/* D: Staggered page-load entrance animation                                   */
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── D: Page-load entrance ──────────────────────────────────────────────── */
@keyframes cd-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cd-enter {
  animation: cd-fade-up .38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger delays — JS sets --cd-i on each element */
.cd-enter { animation-delay: calc(var(--cd-i, 0) * 55ms); }

/* Respect reduced-motion: skip animation, just show */
@media (prefers-reduced-motion: reduce) {
  .cd-enter { animation: none !important; }
}


/* ── C: Card hover lift ─────────────────────────────────────────────────── */
.card {
  transition:
    transform .18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow .18s ease,
    border-color .18s ease;
  will-change: transform;
}

/* Lift only cards that aren't main layout panels or glow-cards
   (glow-cards have their own ring effect, lift feels odd there) */
.card:not(.glow-card):not(.cd-app-stage > .card):not(.cd-hooks-tool):hover {
  transform: translateY(-2px);
  border-color: rgba(138, 180, 255, .38);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, .38),
    0 4px 10px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Subtle active press on clickable cards */
.card:not(.glow-card):not(.cd-app-stage > .card):not(.cd-hooks-tool):active {
  transform: translateY(0px);
  transition-duration: .08s;
}


/* ── C: Global button improvements ─────────────────────────────────────── */
button {
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease,
    color .15s ease;
}

button:hover:not(:disabled) {
  background: #23242e;
  border-color: rgba(138, 180, 255, .32);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: .06s;
}

button:disabled {
  opacity: .46;
  cursor: not-allowed;
}

button:focus-visible {
  outline: 2px solid rgba(138, 180, 255, .55);
  outline-offset: 2px;
}


/* ── C: Automation action chips ─────────────────────────────────────────── */
.cd-auto-action {
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .12s ease,
    box-shadow .15s ease;
}

.cd-auto-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .24);
}

.cd-auto-action:active {
  transform: translateY(0);
  transition-duration: .06s;
}


/* ── C: Footer pills ────────────────────────────────────────────────────── */
.tt-pill {
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    color .15s ease,
    transform .12s ease;
}

.tt-pill:hover {
  transform: translateY(-1px);
}

.tt-pill:active {
  transform: translateY(0);
  transition-duration: .06s;
}


/* ── C: Pack/shop buttons ───────────────────────────────────────────────── */
.cd-pack-btn {
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
}

.cd-pack-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(138, 180, 255, .22);
}

.cd-pack-btn:active {
  transform: translateY(0);
  transition-duration: .06s;
}


/* ── C: Site hero CTA ───────────────────────────────────────────────────── */
.cd-site-hero__cta {
  transition:
    background .18s ease,
    box-shadow .18s ease,
    transform .14s ease,
    color .18s ease;
}

.cd-site-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px rgba(63, 130, 255, .36),
    0 0 0 1px rgba(138, 180, 255, .30);
}

.cd-site-hero__cta:active {
  transform: translateY(0);
  transition-duration: .07s;
}


/* ── C: Load-more button ────────────────────────────────────────────────── */
.job-history__load-more {
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .12s ease;
}

.job-history__load-more:hover {
  transform: translateY(-1px);
}

.job-history__load-more:active {
  transform: translateY(0);
  transition-duration: .06s;
}


/* ── TikTok-style two-ball loader ───────────────────────────────────────── */
@keyframes cd-tt-ball-1 {
  0%, 100% { transform: translateX(0);    z-index: 1; }
  50%       { transform: translateX(10px); z-index: 2; }
}
@keyframes cd-tt-ball-2 {
  0%, 100% { transform: translateX(0);     z-index: 2; }
  50%       { transform: translateX(-10px); z-index: 1; }
}

.cd-tt-loader {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.cd-tt-loader__ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cd-tt-loader__ball--1 {
  background: #fe2c55;
  animation: cd-tt-ball-1 .7s ease-in-out infinite;
}
.cd-tt-loader__ball--2 {
  background: #01f7ee;
  animation: cd-tt-ball-2 .7s ease-in-out infinite;
}


/* ── C: Number/select inputs — Inter numeric figures ───────────────────── */
input[type="number"],
select {
  font-family: 'Inter', system-ui, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, box-shadow .15s ease;
}

select:focus {
  border-color: rgba(138, 180, 255, .50);
  outline: none;
  box-shadow: 0 0 0 1px rgba(138, 180, 255, .18);
}


/* ── Render-Performance: GPU-Layer-Hints ──────────────────────────── */
.tt-loader__ball {
  will-change: transform;
}
.cd-spinner,
.cd-spinner > * {
  will-change: transform;
}
.status-line.is-loading {
  will-change: opacity;
}