/* Motion mode and source choreography that must survive an OS reduce preference.
   data-motion=full opts in. data-motion=auto follows the OS. data-motion=reduced forces quiet.
   The OS media query never overrides an explicit full preview. */

.motion-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid rgba(199, 243, 107, .3);
  border-radius: 999px;
  background: var(--ink);
  color: var(--accent);
  box-shadow: 0 6px 28px #0002;
}

.motion-switch span {
  padding: 0 8px 0 10px;
  font-size: 13px;
  line-height: 1;
}

.motion-switch button {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}

.motion-switch button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .motion-switch button:hover { background: #272d20; }
  .motion-switch button[aria-pressed="true"]:hover { background: var(--accent); color: var(--ink); }
  .blueprint-toggle { transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out); }
  .u-pill { transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
}

@keyframes wf-hero-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes wf-case-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Sales iso reveal: blur 12px / 1.2s source curve, opacity .8s. Home iso also starts at scale 1.15. */
html[data-motion="full"] .u-iso,
html[data-motion="auto"] .u-iso {
  filter: blur(12px);
  opacity: 0;
  transform: scale(1.15);
  transition: filter 1.2s cubic-bezier(.22, 1, .36, 1), opacity .8s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

html[data-motion="full"] .u-hero-bg.is-revealed .u-iso,
html[data-motion="auto"] .u-hero-bg.is-revealed .u-iso {
  filter: blur(0);
  opacity: 1;
  transform: none;
}

/* Home heading stagger: eyebrow .2s, first line 0, rotator .4s, second line .6s, all 2.4s. */
html[data-motion="full"] .u-hero.is-in .u-eye,
html[data-motion="auto"] .u-hero.is-in .u-eye {
  animation: wf-hero-fade 2.4s cubic-bezier(0, 0, .2, 1) .2s both;
}

html[data-motion="full"] .u-hero.is-in .u-hero-line:nth-child(1),
html[data-motion="auto"] .u-hero.is-in .u-hero-line:nth-child(1) {
  animation: wf-hero-fade 2.4s cubic-bezier(0, 0, .2, 1) both;
}

html[data-motion="full"] .u-hero.is-in .u-rotator,
html[data-motion="auto"] .u-hero.is-in .u-rotator {
  animation: wf-hero-fade 2.4s cubic-bezier(0, 0, .2, 1) .4s both;
}

html[data-motion="full"] .u-hero.is-in .u-hero-line:nth-child(2),
html[data-motion="auto"] .u-hero.is-in .u-hero-line:nth-child(2) {
  animation: wf-hero-fade 2.4s cubic-bezier(0, 0, .2, 1) .6s both;
}

/* Ask prompt. Sequence classes come from sales.js 500/1200/1800/380.
   The bar shell stays 720px. is-expanded scales the background from 52/720 to 1
   over the source width .8s curve. The inner layer counter-scales so text does not. */
html[data-motion="full"] .u-ask-bar,
html[data-motion="auto"] .u-ask-bar {
  opacity: 0;
  transform: translateY(60px) scale(.8);
  filter: blur(8px);
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1), filter .5s cubic-bezier(.16, 1, .3, 1);
}

html[data-motion="full"] .u-ask.is-visible .u-ask-bar,
html[data-motion="auto"] .u-ask.is-visible .u-ask-bar {
  opacity: 1;
  transform: none;
  filter: none;
}

html[data-motion="full"] .u-ask-scale,
html[data-motion="auto"] .u-ask-scale {
  transform: scaleX(calc(52 / 720));
  transform-origin: center center;
}

html[data-motion="full"] .u-ask.is-expanded .u-ask-scale,
html[data-motion="auto"] .u-ask.is-expanded .u-ask-scale {
  transform: scaleX(1);
  transition: transform .8s cubic-bezier(.34, 1.4, .64, 1);
}

html[data-motion="full"] .u-ask-inner,
html[data-motion="auto"] .u-ask-inner {
  transform: scaleX(calc(720 / 52));
  transform-origin: center center;
}

html[data-motion="full"] .u-ask.is-expanded .u-ask-inner,
html[data-motion="auto"] .u-ask.is-expanded .u-ask-inner {
  transform: none;
  transition: transform .8s cubic-bezier(.34, 1.4, .64, 1);
}

html[data-motion="full"] .u-sugs,
html[data-motion="auto"] .u-sugs {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
}

html[data-motion="full"] .u-ask.is-suggestions .u-sugs,
html[data-motion="auto"] .u-ask.is-suggestions .u-sugs {
  opacity: 1;
  transform: none;
}

html[data-motion="full"] .u-ask.is-settled .u-ask-spin,
html[data-motion="auto"] .u-ask.is-settled .u-ask-spin {
  opacity: 0;
  transition: opacity .8s ease;
}

html[data-motion="full"] .u-ask.is-exiting,
html[data-motion="auto"] .u-ask.is-exiting {
  opacity: 0;
  transform: translateY(-6px) scale(.94);
  transition: opacity .32s ease, transform .32s cubic-bezier(.7, 0, .84, 0);
}

html[data-motion="full"] .m-case__panel.is-on,
html[data-motion="auto"] .m-case__panel.is-on {
  animation: wf-case-in .4s cubic-bezier(.22, 1, .36, 1) both;
}

/* Auto must honor OS reduce. These resets beat the auto rules above and do not match full. */
@media (prefers-reduced-motion: reduce) {
  html[data-motion="auto"] .u-iso,
  html[data-motion="auto"] .u-hero-bg.is-revealed .u-iso {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  html[data-motion="auto"] .u-hero.is-in .u-eye,
  html[data-motion="auto"] .u-hero.is-in .u-hero-line,
  html[data-motion="auto"] .u-hero.is-in .u-rotator,
  html[data-motion="auto"] .m-case__panel.is-on {
    animation: none;
  }

  html[data-motion="auto"] .u-ask-bar,
  html[data-motion="auto"] .u-ask.is-visible .u-ask-bar,
  html[data-motion="auto"] .u-ask-scale,
  html[data-motion="auto"] .u-ask-inner,
  html[data-motion="auto"] .u-sugs,
  html[data-motion="auto"] .u-ask.is-suggestions .u-sugs,
  html[data-motion="auto"] .u-ask.is-exiting {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  html[data-motion="auto"] .u-ask.is-settled .u-ask-spin { opacity: 1; transition: none; }

  /* Lower lane keeps its own durations when the user explicitly previews full motion. */
  html[data-motion="full"] .l-cases__track {
    transition: transform 500ms cubic-bezier(.4, 0, .2, 1);
  }

  html[data-motion="full"] .l-faq__icon:after {
    transition: transform .25s ease, opacity .25s ease;
  }
}

html[data-motion="reduced"] .l-cases__track,
html[data-motion="reduced"] .l-faq__icon:after {
  transition: none;
}