/* GIIIFT feel-kit: the "details that make interfaces feel better", as a shared layer.
 *
 * Sibling of hover-kit.css. Where hover-kit is a pure :hover vocabulary you opt
 * into per element, feel-kit has TWO layers:
 *
 *   (1) AUTO BASE — shipped to EVERY page by netlify/edge-functions/feel-inject.ts
 *       (injected before </head>, exactly like telemetry.js / pulse-bar.js, so it
 *       reaches all pages with zero file edits — lane-safe). Element selectors
 *       only, no !important except the reduced-motion kill-switch, so any page's
 *       own rules win. Today: font-smoothing + text-wrap (#8, #10).
 *
 *   (2) OPT-IN UTILITIES — inert until you add a class. These need per-element
 *       intent and/or light/dark awareness, so they can't be blanket-applied.
 *
 * House idiom (from hover-kit): transform/scale/opacity/filter only (no reflow),
 * transition only the properties that change (never `all`), every move gated
 * behind prefers-reduced-motion. Tokens below; map + per-surface guide in
 * docs/FEEL_KIT.md. Principle numbers (#n) reference the make-interfaces-feel-better skill.
 *
 * Link it once per page (the injector does this for you):
 *   <link rel="stylesheet" href="/feel-kit.css">
 */

:root {
  --feel-ease:        cubic-bezier(.2, 0, 0, 1); /* the skill's recommended easing */
  --feel-dur:         .22s;
  --feel-press-dur:   .15s;
  --feel-stagger:     .09s;
  --feel-enter-dur:   .55s;

  /* #11 image outline — a NEUTRAL separator. Pure black on light, pure white on
   * dark (never a tinted near-black/white, which reads as dirt on the edge). */
  --feel-outline:      rgba(0, 0, 0, .10);
  --feel-outline-dark: rgba(255, 255, 255, .10);

  /* #3 shadow-as-border — 3 layers on light (ring + lift + ambient); a single
   * white ring on dark (layered depth is invisible on dark backgrounds). */
  --feel-shadow-border:
    0 0 0 1px rgba(0, 0, 0, .06),
    0 1px 2px -1px rgba(0, 0, 0, .06),
    0 2px 4px 0 rgba(0, 0, 0, .04);
  --feel-shadow-border-hover:
    0 0 0 1px rgba(0, 0, 0, .08),
    0 1px 2px -1px rgba(0, 0, 0, .08),
    0 2px 4px 0 rgba(0, 0, 0, .06);
  --feel-shadow-border-dark:       0 0 0 1px rgba(255, 255, 255, .08);
  --feel-shadow-border-dark-hover: 0 0 0 1px rgba(255, 255, 255, .13);
}

/* ============================================================================
 * (1) AUTO BASE — every page. Element selectors only; no !important (except the
 *     reduced-motion block). Idempotent with pages that already set these.
 * ========================================================================== */

/* #8 Font smoothing — crisper, thinner text on macOS. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* #10 Text wrapping — balanced headings (≤6 lines; longer is silently ignored),
 *     orphan-free body text. Only changes break points, never box size. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }

/* ============================================================================
 * (2) OPT-IN UTILITIES — add the class to opt in.
 * ========================================================================== */

/* #12 Scale on press — tactile feedback. Uses the INDEPENDENT `scale` property
 *     (not `transform`) so it composes with an existing hover lift. NOTE: this
 *     sets `transition`, which resets the element's own transition list — for a
 *     button that already tailors `transition`, add `scale` to THAT rule + a
 *     `:active { scale:.96 }` instead (see FEEL_KIT.md). 0.96 exactly; never <0.95. */
.feel-press { transition: scale var(--feel-press-dur) ease-out; }
.feel-press:active { scale: .96; }

/* #9 Tabular numbers — equal-width digits so updating values don't shift layout. */
.feel-nums { font-variant-numeric: tabular-nums; }

/* #11 Image outline — inset 1px neutral ring (layout unchanged). Default = light
 *     surface (black 10%); add `feel-img-dark` on dark surfaces (white 10%). */
.feel-img { outline: 1px solid var(--feel-outline); outline-offset: -1px; }
.feel-img-dark { outline-color: var(--feel-outline-dark); }

/* #3 Shadow-as-border — depth that adapts to any background. `feel-card` = light;
 *    add `feel-card-dark` for the dark single-ring. (Use on cards/buttons that
 *    carry a border for ELEVATION — not on layout dividers.) */
.feel-card { box-shadow: var(--feel-shadow-border); transition: box-shadow var(--feel-dur) ease-out; }
.feel-card:hover { box-shadow: var(--feel-shadow-border-hover); }
.feel-card-dark { box-shadow: var(--feel-shadow-border-dark); transition: box-shadow var(--feel-dur) ease-out; }
.feel-card-dark:hover { box-shadow: var(--feel-shadow-border-dark-hover); }

/* #16 Minimum hit area — lift a small control to ≥40×40 without changing the size
 *     of its visible box (centred flex). Shrink if it would overlap a neighbour. */
.feel-hit { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

/* #7 Contextual icon animation — reveal an icon with scale/opacity/blur instead of
 *    toggling visibility. Server-render the resting state WITH `is-in` so it never
 *    animates on first paint (#13 skip-on-load); toggle `is-in` to animate.
 *    Exact values: scale .25→1, opacity 0→1, blur 4px→0. */
.feel-icon-in {
  opacity: 0; transform: scale(.25); filter: blur(4px);
  transition: opacity var(--feel-dur) var(--feel-ease),
              transform var(--feel-dur) var(--feel-ease),
              filter var(--feel-dur) var(--feel-ease);
  will-change: transform, opacity, filter;
}
.feel-icon-in.is-in { opacity: 1; transform: none; filter: blur(0); }

/* #5 Split + stagger enter — put `feel-enter` on a container; its DIRECT children
 *    rise in, each delayed by its `--feel-i` (0,1,2,…). Pure CSS, runs once on
 *    load, no-JS-safe (both-fill leaves children visible at rest). Combine
 *    opacity + translateY + blur, ~90ms apart. */
.feel-enter > * {
  animation: feel-rise var(--feel-enter-dur) var(--feel-ease) both;
  animation-delay: calc(var(--feel-i, 0) * var(--feel-stagger));
  will-change: transform, opacity, filter;
}
@keyframes feel-rise {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* #6 Subtle exit — softer than the enter (small fixed lift, shorter, interruptible
 *    transition not keyframe). Toggle `is-out` just before removing the node. */
.feel-exit { transition: opacity .15s ease-in, transform .15s ease-in, filter .15s ease-in; }
.feel-exit.is-out { opacity: 0; transform: translateY(-12px); filter: blur(4px); }

/* ============================================================================
 * Reduced motion — the ONLY !important block (matches hover-kit). Kill the
 * motion; keep every final/resting state visible.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .feel-press, .feel-card, .feel-card-dark, .feel-icon-in, .feel-enter > *, .feel-exit {
    transition: none !important;
    animation: none !important;
  }
  .feel-press:active { scale: 1 !important; }
  .feel-icon-in, .feel-enter > * {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}