/* Motion layer — light 手感 only. Everything is opt-in via
 * `@media (prefers-reduced-motion: no-preference)`, so with reduce set the site
 * behaves exactly as before. Animate only opacity/transform (compositor-only);
 * the sole exception is background/colour/border transitions on hover/focus.
 * Hover feedback is a colour fade — never lift, shadow, or translate.
 * Tokens: assets/css/tokens.css (--pfd-dur-*, --pfd-ease*, --pfd-z-progress).
 * JS assist: assets/js/motion.js (reveal + theme-crossfade class only).
 */

/* Focus visibility — deliberately OUTSIDE the motion gate so keyboard users
 * always get a visible ring regardless of motion preference. */
:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

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

  /* 1 · Hover / colour transitions — explicit properties only (180ms). */
  .hdr-nav a,
  .hdr-btn,
  .hdr-more summary,
  .hdr-more-menu a,
  .hdr-search-drop a.hs-hit,
  .pfd-card-title a,
  .pfd-cat,
  .pfd-badge,
  .pfd-rail-item,
  .pfd-rail-item .pfd-ico,
  .pfd-rail-star,
  .ftr a,
  .pfd-quick a,
  .btn-load,
  .tr-btn,
  .pfd-sheet-x,
  .pfd-firm-chip,
  .pfd-topic-chip,
  .pfd-search-chips button,
  .pfd-me-nav a,
  .pfd-ask-pop-grid button {
    transition:
      color var(--pfd-dur-2) var(--pfd-ease),
      background-color var(--pfd-dur-2) var(--pfd-ease),
      border-color var(--pfd-dur-2) var(--pfd-ease),
      opacity var(--pfd-dur-2) var(--pfd-ease);
  }

  /* 2 · Press feedback — SMALL icon/chip controls only, and deliberately not a global
   * `button:active`: on wide buttons a 3% shrink reads as the page moving, not as touch
   * feedback. Base rule below gives a smooth release as well as a smooth press. */
  .hdr-btn,
  .mob-tab,
  .btn-load,
  .pfd-firm-chip,
  .pfd-topic-chip,
  .pfd-search-chips button,
  .pfd-sheet-x,
  .pfd-ask-pop-x,
  .pfd-rail-star {
    transition: transform var(--pfd-dur-1) var(--pfd-ease);
  }
  .hdr-btn:active,
  .mob-tab:active,
  .btn-load:active,
  .pfd-firm-chip:active,
  .pfd-topic-chip:active,
  .pfd-search-chips button:active,
  .pfd-sheet-x:active,
  .pfd-ask-pop-x:active,
  .pfd-rail-star:active {
    transform: scale(.97);
  }

  /* 3 · Card hover — background fade only (desktop pointers). No shadow/lift. */
  @media (hover: hover) {
    .pfd-card {
      transition: background-color var(--pfd-dur-2) var(--pfd-ease);
    }
    .pfd-card:hover {
      background: color-mix(in srgb, var(--bg-alt) 55%, transparent);
    }
  }

  /* 5 · Smooth in-page jumps (reduce-motion users keep instant jumps). */
  html { scroll-behavior: smooth; }
  :target,
  .entry-content h2,
  .entry-content h3 {
    scroll-margin-top: calc(var(--hdr-stack, 101px) + 16px);
  }

  /* 6 · Selection colour. */
  ::selection {
    background: color-mix(in srgb, var(--link) 30%, transparent);
  }

  /* 7 · Dropdown entry — modern CSS only; graceful no-op where unsupported. */
  @starting-style {
    .hdr-search-drop:not([hidden]),
    .hdr-sub-drop:not([hidden]),
    .hdr-more-menu {
      opacity: 0;
      transform: translateY(-3px);
    }
  }
  .hdr-search-drop:not([hidden]),
  .hdr-sub-drop:not([hidden]),
  .hdr-more-menu {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--pfd-dur-1) var(--pfd-ease),
      transform var(--pfd-dur-1) var(--pfd-ease);
    transition-behavior: allow-discrete;
  }

  /* 8 · <details> panels — fade only; disclosure panels must not slide. */
  details[open] > *:not(summary) {
    animation: pfd-fade var(--pfd-dur-2) var(--pfd-ease-out);
  }

  /* 9 · Scroll reveal — default visible; JS adds .pfd-motion + data-pfd-reveal. */
  html.pfd-motion [data-pfd-reveal] {
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity var(--pfd-dur-3) var(--pfd-ease-out),
      transform var(--pfd-dur-3) var(--pfd-ease-out);
  }
  html.pfd-motion [data-pfd-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* 10 · Reading progress — pure CSS scroll timeline; hidden where unsupported. */
  #pfdProgress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--link);
    z-index: var(--pfd-z-progress);
    pointer-events: none;
    display: none;
  }
  @supports (animation-timeline: scroll()) {
    #pfdProgress {
      display: block;
      animation: pfd-progress linear both;
      animation-timeline: scroll(root block);
    }
  }

  /* 11 · Theme-crossfade helper (JS toggles html.pfd-theming for 220ms). */
  html.pfd-theming body,
  html.pfd-theming .hdr,
  html.pfd-theming .main,
  html.pfd-theming .pfd-card,
  html.pfd-theming .ftr,
  html.pfd-theming .pfd-rail {
    transition:
      background-color var(--pfd-dur-2) linear,
      color var(--pfd-dur-2) linear,
      border-color var(--pfd-dur-2) linear;
  }

  /* 12 · Mobile tab bar — colour/opacity only, no movement. */
  .mob-tab,
  .mob-tab .pfd-ico {
    transition:
      color var(--pfd-dur-2) var(--pfd-ease),
      opacity var(--pfd-dur-2) var(--pfd-ease);
  }

  @keyframes pfd-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes pfd-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}