/**
 * deep-interactions.css
 * OS-level micro-interactions — Linear/Raycast/Vercel quality.
 * Subtle, intentional, never flashy.
 */

:root {
  /* Easing curves — engineered, not bouncy */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-tight: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out-precise: cubic-bezier(0.65, 0, 0.35, 1);

  /* Interaction durations */
  --t-instant: 80ms;
  --t-fast: 140ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ── Global motion baseline ─────────────────────────── */
html {
  scroll-behavior: smooth;
}

a,
button,
.svc-capability,
.svc-proof-card,
.client-logo,
.credibility-item,
.cs-section,
.svc-rescue-section,
.process-timeline-step {
  transition-property: color, background-color, border-color, box-shadow,
    transform, opacity, filter;
  transition-duration: var(--t-base);
  transition-timing-function: var(--ease-out-soft);
}

/* ── Focus-visible (precise, accessible) ─────────────── */
*:focus {
  outline: none;
}
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset var(--t-fast) var(--ease-out-tight);
}
.btn-cta:focus-visible,
.btn-ghost:focus-visible {
  outline-offset: 4px;
}

/* ── Inline link underline animation (engineered) ────── */
.svc-capabilities-lead a,
.svc-services-intro-text a,
.svc-page-crosslink a,
.cs-prose a,
.svc-proof-footnote a,
.svc-engineering-close-lead a {
  position: relative;
  text-decoration: none;
  color: var(--accent);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-slow) var(--ease-out-tight);
}
.svc-capabilities-lead a:hover,
.svc-services-intro-text a:hover,
.svc-page-crosslink a:hover,
.cs-prose a:hover {
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* ── Capability card: borders interpolate, not jump ──── */
.svc-capability {
  position: relative;
  transition:
    border-color var(--t-slow) var(--ease-out-soft),
    box-shadow var(--t-slow) var(--ease-out-soft),
    background-color var(--t-base) var(--ease-out-soft);
}
.svc-capability::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color var(--t-slow) var(--ease-out-soft);
}
.svc-capability:hover::after {
  border-color: rgba(24, 24, 27, 0.08);
}
.svc-capability:hover .svc-capability-icon {
  background: rgba(234, 88, 12, 0.12);
  border-color: rgba(234, 88, 12, 0.22);
}
.svc-capability-icon {
  transition:
    background-color var(--t-slow) var(--ease-out-soft),
    border-color var(--t-slow) var(--ease-out-soft);
}

/* ── Capability CTA: directional arrow, no bounce ────── */
.svc-capability-cta,
.svc-proof-link {
  position: relative;
  isolation: isolate;
}
.svc-capability-cta span,
.svc-proof-link span {
  display: inline-block;
  transition: transform var(--t-base) var(--ease-out-tight);
  will-change: transform;
}
.svc-capability-cta:hover span,
.svc-proof-link:hover span {
  transform: translateX(3px);
}

/* ── Proof / case study card hover (quiet) ───────────── */
.svc-proof-card {
  position: relative;
  transition:
    border-color var(--t-slow) var(--ease-out-soft),
    background-color var(--t-base) var(--ease-out-soft);
}
.svc-proof-card:hover {
  background: #ffffff;
  border-color: rgba(24, 24, 27, 0.16);
}

/* ── Primary CTA (engineered weight) ─────────────────── */
.btn-cta {
  position: relative;
  transition:
    background-color var(--t-base) var(--ease-out-tight),
    color var(--t-base) var(--ease-out-tight),
    box-shadow var(--t-base) var(--ease-out-tight),
    transform var(--t-instant) var(--ease-out-tight);
}
.btn-cta:active {
  transform: translateY(0.5px);
}
.btn-cta.btn-primary:hover {
  box-shadow:
    0 6px 18px -8px rgba(234, 88, 12, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.btn-ghost {
  transition:
    color var(--t-base) var(--ease-out-tight),
    border-color var(--t-base) var(--ease-out-tight),
    background-color var(--t-base) var(--ease-out-tight);
}
.btn-ghost:hover {
  border-color: rgba(24, 24, 27, 0.32);
  color: var(--text-0);
}

/* ── Trust logos (engineered hover, no scale) ────────── */
.clients-logos--trust .client-logo {
  transition:
    background-color var(--t-slow) var(--ease-out-soft),
    border-color var(--t-slow) var(--ease-out-soft);
}
.clients-logos--trust .client-logo img {
  transition:
    opacity var(--t-slow) var(--ease-out-soft),
    filter var(--t-slow) var(--ease-out-soft);
}

/* ── Process timeline step ───────────────────────────── */
.process-timeline-step {
  transition:
    border-color var(--t-slow) var(--ease-out-soft),
    background-color var(--t-base) var(--ease-out-soft);
}
.process-timeline-step:hover {
  background: #fafafa;
  border-color: rgba(24, 24, 27, 0.12);
}

/* ── Reveal timing (slower, more deliberate) ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 620ms var(--ease-out-soft),
    transform 620ms var(--ease-out-soft);
  will-change: opacity, transform;
}
.js-ready .reveal.revealed,
.js-ready .reveal.visible,
.reveal.revealed,
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Staggered reveal for grids — feels engineered */
.svc-capabilities-grid .reveal:nth-child(1),
.svc-proof-grid .reveal:nth-child(1),
.svc-principles-list .reveal:nth-child(1) {
  transition-delay: 0ms;
}
.svc-capabilities-grid .reveal:nth-child(2),
.svc-proof-grid .reveal:nth-child(2),
.svc-principles-list .reveal:nth-child(2) {
  transition-delay: 70ms;
}
.svc-capabilities-grid .reveal:nth-child(3),
.svc-proof-grid .reveal:nth-child(3),
.svc-principles-list .reveal:nth-child(3) {
  transition-delay: 140ms;
}
.svc-capabilities-grid .reveal:nth-child(4),
.svc-principles-list .reveal:nth-child(4) {
  transition-delay: 210ms;
}
.svc-principles-list .reveal:nth-child(5) {
  transition-delay: 280ms;
}
.svc-principles-list .reveal:nth-child(6) {
  transition-delay: 350ms;
}

/* ── Selection styling (subtle accent) ───────────────── */
::selection {
  background: rgba(234, 88, 12, 0.18);
  color: var(--text-0);
}

/* ── Reduced motion: respect user preference ─────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html {
    scroll-behavior: auto;
  }
}