/* One motion language for all V2 pages. Layout and content remain unchanged. */
:root {
  --motion-fast:160ms;
  --motion-control:220ms;
  --motion-ease:cubic-bezier(.22,1,.36,1);
}
.motion-sizing { overflow:hidden!important; }
nav[aria-label="In this walkthrough"] a { border-radius:6px; }
nav[aria-label="In this walkthrough"] a[aria-current="location"] { color:var(--purple); background:#f0eaff; box-shadow:0 0 0 4px #f0eaff; }
.faq-list details[data-motion-expanded="false"] summary .icon { transform:rotate(0); }
.faq-list details[data-motion-expanded="true"] summary .icon { transform:rotate(45deg); }
@media(max-width:1240px) {
  .main-nav[data-motion-visible] { display:block; }
}
@media(prefers-reduced-motion:no-preference) {
  .button, .text-link, main a[class], main button, main summary {
    transition:color var(--motion-fast),background-color var(--motion-fast),
      border-color var(--motion-fast),box-shadow var(--motion-control),
      translate var(--motion-control) var(--motion-ease),transform var(--motion-control) var(--motion-ease);
  }
  .button:active { transform:translateY(0); scale:.98; }
  .button { transition:background-color var(--motion-fast),border-color var(--motion-fast),
    box-shadow var(--motion-control),transform var(--motion-control) var(--motion-ease),scale var(--motion-fast); }
  .text-link > .icon,.button > .icon { transition:translate var(--motion-fast) var(--motion-ease); }
  .text-link:hover > .icon,.button:hover > .icon { translate:3px 0; }
  .text-link:focus-visible > .icon { translate:3px 0; }
  main summary::after, .faq-indicator::after { transition:transform var(--motion-control) var(--motion-ease); }
  .mobile-toggle .icon { animation:motion-icon-in var(--motion-fast) var(--motion-ease); }
  dialog[open]::backdrop { animation:motion-backdrop-in var(--motion-control) ease-out; }
  dialog.motion-dialog-closing::backdrop { animation:motion-backdrop-out var(--motion-fast) ease-in forwards; }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  main a:is([data-listing-preview],[data-template-preview],.feature-card,.wh-card-main,.lg-choice,.gg-choice,.ab-audience-card,.bl-card-link,.wn-card-cover):hover {
    translate:0 -3px;
    box-shadow:0 12px 28px #21183b12;
    border-color:#d3c7ef;
  }
}
@keyframes motion-icon-in { from { opacity:0; transform:rotate(-12deg); } to { opacity:1; transform:rotate(0); } }
@keyframes motion-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes motion-backdrop-out { from { opacity:1; } to { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto!important; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}