/* ==========================================================================
   KDFTek motion layer — Worker 5 (2026-10-03)
   Micro-interactions & polish. Additive only: no layout, SEO, AdSense or
   existing-JS changes. Card lift hover already ships via Worker 3
   (.tool-tile:hover) and is intentionally NOT duplicated here.
   Every transition/animation lives inside
   @media (prefers-reduced-motion: no-preference).
   JS-added classes use the .rv-* prefix (see redesign-v1-motion.js).
   Weight: ~1.9 KB.
   ========================================================================== */

/* ---- 1. Accessible focus states (brand color; not motion, always on) ---- */
:focus-visible{
  outline:2px solid var(--green,#2f9e5f);
  outline-offset:2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  border-color:var(--green,#2f9e5f);
}

@media (prefers-reduced-motion: no-preference){

  /* ---- 2. Button hover: brightness lift + gentle scale.
          Base .btn already transitions transform/background (~200ms). ---- */
  .btn:hover{
    filter:brightness(1.06);
    transform:scale(1.02);
  }
  .tools-chip:hover,
  .tools-cats [role="tab"]:hover{
    filter:brightness(1.04);
  }

  /* ---- 3. Press feedback: tactile shrink on tap/click ---- */
  .btn:active,
  .rv-pressed{
    transform:scale(.98);
    filter:brightness(.97);
  }

  /* ---- 4. Link affordance (buttons, brand mark and cards excluded) ---- */
  .cat-link,
  .crumbs a,
  .tool-more-links a,
  .foot-grid a{
    transition:color .15s ease;
  }
  .cat-link:hover,
  .crumbs a:hover,
  .tool-more-links a:hover,
  .foot-grid a:hover{
    color:var(--green-deep);
  }

  /* ---- 5. Scroll reveal.
          JS adds .rv-pre only when IntersectionObserver is supported
          (progressive enhancement: content is visible by default), then
          .rv-in on intersect and removes both classes after the animation
          so native transitions are restored untouched. ---- */
  .rv-pre{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .4s ease,transform .4s ease;
  }
  .rv-pre.rv-in{
    opacity:1;
    transform:none;
  }

  /* ---- 6. Opt-in skeleton shimmer. NOT auto-applied: hooking it to
          per-tool result rendering would require touching tool JS,
          which is out of scope. Add class="rv-skeleton" manually to a
          result placeholder when wiring a future loading state. ---- */
  .rv-skeleton{
    position:relative;
    overflow:hidden;
    min-height:1.4em;
    border-radius:8px;
    background:rgba(0,0,0,.06);
    color:transparent !important;
    pointer-events:none;
  }
  .rv-skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);
    animation:rv-shimmer 1.4s infinite;
  }
  @keyframes rv-shimmer{
    from{transform:translateX(-100%)}
    to{transform:translateX(100%)}
  }
}