/* ================================================================
   DFC motion layer.
   Kept in its own file on purpose: it is additive polish that must
   survive regeneration of styles.css. Loaded after styles.css and
   research.css on every page. Only adds interaction feedback; it
   never changes layout, colour or type.
   ================================================================ */
:root {
  --dur-press: .12s;
  --dur-ui: .18s;
  --dur-panel: .24s;
  --dur-modal: .3s;
  --ease-press: cubic-bezier(.2, 0, .1, 1);
}

/* ---- 1. Direct manipulation ----------------------------------- */
.btn, .btn-apply, .copy-addr, .yf, .navburger, .scheme-toggle, .to-top {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active, .btn-apply:active, .copy-addr:active, .yf:active {
  transform: translateY(0) scale(.985); transition-duration: var(--dur-press);
}
.btn-apply {
  transition: transform var(--dur-ui) var(--ease-out),
              background var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease);
}
.scheme-toggle:active, .to-top:active { transform: scale(.94); }

/* ---- 2. Inputs ------------------------------------------------ */
.field input, .field select, .field textarea, .nl-form input[type="email"] {
  transition: border-color var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease),
              background var(--dur-ui) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: rgba(242, 237, 227, 0.28);
}
.field input:user-invalid, .field textarea:user-invalid {
  border-color: var(--error); box-shadow: 0 0 0 3px rgba(224, 122, 95, .14);
}

/* ---- 3. Selection controls ------------------------------------ */
.chk span {
  transition: border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease),
              background var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease-press);
}
.chk:active span { transform: scale(.97); }
.opt {
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease),
              box-shadow var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease-press);
}
.opt:active { transform: scale(.995); }
.yf { transition: background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease),
                  border-color var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease-press); }

/* ---- 4. Cards and rows: one hover behaviour ------------------- */
.qcard, .nx-item, .pub-list .pub, .deal-card, .report-card, .pband figure {
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease),
              transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease);
}
.nx-item:hover { border-color: var(--amber-line); }
.pub-list a.pub:active { transform: translateX(1px); }

/* ---- 5. Accordions -------------------------------------------- */
.faq details[open] > p, .faq details[open] > div, .toc-mobile[open] > .toc {
  animation: panelIn var(--dur-panel) var(--ease-out) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  .faq details::details-content, .toc-mobile::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height var(--dur-panel) var(--ease-out),
                opacity var(--dur-panel) var(--ease),
                content-visibility var(--dur-panel) allow-discrete;
  }
  .faq details[open]::details-content, .toc-mobile[open]::details-content { height: auto; opacity: 1; }
  .faq details[open] > p, .toc-mobile[open] > .toc { animation: none; }
}

/* ---- 6. Overlays: delay in, none out -------------------------- */
.stat-ctx, .ba-sub, .sp-pop {
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  transition-delay: 0s;
}
.stat:hover .stat-ctx, .btn-apply:hover .ba-sub, .sp-avatars:hover .sp-pop { transition-delay: .18s; }
.stat:focus-within .stat-ctx, .btn-apply:focus-visible .ba-sub, .sp-avatars:focus-within .sp-pop { transition-delay: 0s; }

/* ---- 7. Feedback states --------------------------------------- */
[aria-disabled="true"], .btn:disabled { cursor: default; opacity: .7; }
[aria-disabled="true"] { animation: pulseSoft 1.4s var(--ease) infinite; }
@keyframes pulseSoft { 0%, 100% { opacity: .7; } 50% { opacity: .45; } }
#apply-done, #nl-done, #done-msg, .form-sent {
  animation: panelIn var(--dur-modal) var(--ease-out) both;
}

/* ---- 8. Focus moves like everything else ---------------------- */
a, button, input, select, textarea, summary, [tabindex] {
  transition-property: outline-color, box-shadow, border-color, color, background, transform;
  transition-duration: var(--dur-ui);
  transition-timing-function: var(--ease);
}
:focus-visible { outline-offset: 3px; }

/* ---- 9. Nav underline and skip link on transforms ------------- */
/* re-declared here so they survive regeneration of styles.css */
.nav-links a:not(.btn)::after {
  width: 100%; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-panel) var(--ease-out);
}
.nav-links a:not(.btn):hover::after, .nav-links a.active::after { transform: scaleX(1); }
.skip { top: 0; transform: translateY(-100%); transition: transform var(--dur-ui) var(--ease-out); }
.skip:focus { transform: translateY(0); }

/* ---- 10. Honour the setting ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .faq details[open] > p, .faq details[open] > div, .toc-mobile[open] > .toc,
  #apply-done, #nl-done, #done-msg, .form-sent, [aria-disabled="true"] { animation: none; }
  .btn:active, .btn-apply:active, .chk:active span, .opt:active, .yf:active,
  .pub-list a.pub:active, .scheme-toggle:active, .to-top:active { transform: none; }
  @supports (interpolate-size: allow-keywords) {
    .faq details::details-content, .toc-mobile::details-content { transition: none; }
  }
}