/* ─── Motion ──────────────────────────────────────────────────────────────── *
 *  Apple motion principles:                                                    *
 *  – Short (400–600ms), eased out, never bouncy                               *
 *  – Translate Y ≤ 24px — just enough to feel alive                           *
 *  – Stagger children 80ms apart max                                           *
 *  – Always respect prefers-reduced-motion                                     *
 * ─────────────────────────────────────────────────────────────────────────── */

/* Base hidden state — applied by JS before element enters viewport */
.will-animate {
  opacity: 0;
  transform: translateY(22px);
}

/* Triggered state — added by IntersectionObserver */
.anim-in {
  animation: fadeSlideUp 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero stagger — driven by CSS animation-delay, no JS needed */
.hero-eyebrow  { animation: fadeSlideUp 0.55s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-display  { animation: fadeSlideUp 0.60s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-lead     { animation: fadeSlideUp 0.60s 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-actions  { animation: fadeSlideUp 0.55s 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-footnote { animation: fadeSlideUp 0.50s 0.46s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Stagger delays for grid children — applied via nth-child in JS */
.stagger-1  { animation-delay: 0.00s !important; }
.stagger-2  { animation-delay: 0.08s !important; }
.stagger-3  { animation-delay: 0.16s !important; }
.stagger-4  { animation-delay: 0.24s !important; }
.stagger-5  { animation-delay: 0.32s !important; }

/* Nav scroll shadow */
.nav--scrolled {
  border-bottom-color: rgba(0, 0, 0, 0.14);
  transition: border-bottom-color 0.25s;
}

/* Button press — system-wide */
.btn-pill:active,
.nav-cta:active {
  transform: scale(0.96);
  transition: transform 0.1s;
}

/* Provider chips slide in with stagger */
.provider-chip {
  transition: box-shadow 0.2s, border-color 0.2s;
}

.provider-chip:hover {
  border-color: #a1a1a6;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

/* Mode cards hover lift (hairline only — no shadow) */
.mode-card {
  transition: border-color 0.2s, background 0.2s;
}
.mode-card:hover {
  border-color: #b0b0b5;
  background: #fafafa;
}

/* Mock card row highlight on stagger entry */
.mock-row {
  transition: background 0.15s;
}

/* Step number pulse on entry */
@keyframes stepPop {
  0%   { transform: scale(0.75); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1);    opacity: 1; }
}

.step-num.anim-in {
  animation: stepPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Respect reduced motion — strip all animation */
@media (prefers-reduced-motion: reduce) {
  .will-animate,
  .hero-eyebrow, .hero-display, .hero-lead, .hero-actions, .hero-footnote {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .anim-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  .mode-card, .provider-chip { transition: none !important; }
  .sb-panel, .sb-transfer-btn--anim, .sb-h-card--anim, .sb-h-empty--anim { animation: none !important; }
}

/* ── Extension panel animations ──────────────────────────────────────────── */
/*
 * Total loop: 5.5s
 *
 * 0–1.8s  — static, panel settles
 * 1.8–2.1s — Claude button highlights (hover glow)
 * 2.1–2.4s — button pressed (scale down)
 * 2.4–2.7s — button releases
 * 2.7–3.2s — history card slides up
 * 3.2–4.8s — card visible
 * 4.8–5.2s — card fades out, empty state returns
 * 5.2–5.5s — reset
 */

/* Panel gentle levitation */
@keyframes sbFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.sb-panel {
  animation: sbFloat 5s ease-in-out infinite;
}

/* Claude button: highlight → press → release */
@keyframes sbBtnPress {
  0%, 31%   { background: rgba(0,0,0,0.04); transform: scale(1); }
  35%        { background: rgba(0,102,204,0.1); transform: scale(1.015); }  /* hover glow */
  40%        { background: rgba(0,102,204,0.16); transform: scale(0.965); } /* press */
  46%, 100%  { background: rgba(0,0,0,0.04); transform: scale(1); }         /* release */
}

.sb-transfer-btn--anim {
  animation: sbBtnPress 5.5s ease-in-out infinite;
  transition: background 0.15s, transform 0.1s;
}

/* History card: invisible → slide up → visible → fade out */
@keyframes sbCardAppear {
  0%, 47%   { opacity: 0; transform: translateY(10px); }
  58%        { opacity: 1; transform: translateY(0); }
  86%        { opacity: 1; transform: translateY(0); }
  95%, 100%  { opacity: 0; transform: translateY(-4px); }
}

.sb-h-card--anim {
  animation: sbCardAppear 5.5s ease-in-out infinite;
}

/* Empty state: visible at start, hides when card appears */
@keyframes sbEmptyHide {
  0%, 45%   { opacity: 1; }
  50%, 93%  { opacity: 0; }
  98%, 100% { opacity: 1; }
}

.sb-h-empty--anim {
  animation: sbEmptyHide 5.5s ease-in-out infinite;
}