/* Interaction layer — installed once by js/ui/motion.js on import; no markup class needed except where noted.
   - press ink: pointerdown on .btn .g-chip .chip-btn .ws-day .greet-goal .segmented button and the FAB adds a .ink-wrap with an
     .ink-dot that spreads and fades (all pointers). A host with position: static gets .has-ink.
   - magnetic: .btn-primary, .g-chip and .greet-goal lean ≤ 3 px toward the cursor (--mgx --mgy on the `translate` property).
   - tooltips: any element with data-tip="…" shows an ink label above it on hover or keyboard focus (desktop).
   - .ink-burst: the small celebration when the last lesson to confirm is confirmed (inkBurst()).
   Everything animates transform / opacity only; pointer effects only for (hover: hover) and (pointer: fine);
   reduced motion: motion.js skips them and motion.css silences the rest. */
@layer components {
  /* ---- press ink ---- */
  .has-ink { position: relative; }
  .ink-wrap { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
  .ink-dot { position: absolute; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0); pointer-events: none; }

  /* ---- celebration ---- */
  .ink-burst { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
  .ib-ring { position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--good); opacity: 0; }
  .ib-p { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--good); opacity: 0; }
  .ib-1 { left: -1.5px; top: -5px; width: 3px; height: 10px; border-radius: 2px; background: var(--accent); }
  .ib-2 { left: -2.5px; top: -2.5px; width: 5px; height: 5px; background: var(--ink); }

  @media (hover: hover) and (pointer: fine) {
    /* ---- magnetic primary buttons ---- */
    .btn-primary {
      translate: var(--mgx, 0px) var(--mgy, 0px);
      transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast), background var(--t-fast), translate 240ms var(--ease-out);
    }

    /* ---- tooltips ---- */
    [data-tip] { position: relative; }
    [data-tip]::after {
      content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 20;
      padding: 5px 9px; border-radius: var(--r-sm); background: var(--ink); color: var(--paper);
      font: 600 12px/1.3 var(--font-text); letter-spacing: .01em; white-space: nowrap; pointer-events: none;
      opacity: 0; transform: translate(-50%, 4px) scale(.96); transform-origin: 50% 100%;
      transition: opacity 140ms ease, transform 200ms var(--ease-settle);
    }
    [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 160ms; }
  }
}