/* ==========================================================================
   志远 Design System — Radii, shadow & motion tokens
   Source: references/components.md (observed values) + references/scene-tutorial.md § 动效
   ========================================================================== */

:root {
  /* ---- Corner radii ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, warm — never harsh black) ---- */
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15);
  --shadow-float: 0 4px 32px rgba(26, 26, 46, 0.08);

  /* ---- Motion ---- */
  /* expo ease-out — the ONLY easing used for entrances */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-reveal: 0.7s; /* @kind other */
  --duration-fast: 0.2s; /* @kind other */
  --duration-base: 0.3s; /* @kind other */
}

/* ==========================================================================
   Scroll Reveal — the almost-universal entrance treatment (components.md #4)
   Usage: add class="reveal" (+ optional reveal-d1..d5 for staggering) to any
   element, then observe with IntersectionObserver (see any component's
   .prompt.md, or components/misc/Reveal.jsx for a wrapper component).
   opacity + transform ONLY — never animate layout properties. No bounce.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--duration-reveal) var(--ease-reveal),
              transform var(--duration-reveal) var(--ease-reveal);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }
.reveal-d5 { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}