/* Motion layer for /about only. No hidden-by-default content or scroll hijacking. */
:root {
  --flow-ease: cubic-bezier(0.25, 1, 0.5, 1);
}
.site-header {
  transition:
    box-shadow 450ms var(--flow-ease),
    border-color 450ms var(--flow-ease);
}
.site-header.is-scrolled {
  box-shadow: 0 5px 22px #263f3209;
  border-bottom-color: #cdd2c1;
}
.motion-preferences {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.motion-preferences button {
  font: inherit;
  font-size: 11px;
  color: var(--ink);
  border: 1px solid #cdd2c1;
  border-radius: 30px;
  padding: 8px 14px;
  background: transparent;
  min-height: 38px;
}
.motion-preferences button:disabled {
  cursor: default;
  opacity: 1;
  color: var(--muted);
}
.motion-preferences p {
  font-size: 10px;
  color: var(--muted);
}
[data-startup-motion='on'] .button,
[data-startup-motion='on'] .reveal-button,
[data-startup-motion='on'] .demo-tabs button {
  transition:
    background-color 280ms ease,
    color 280ms ease,
    border-color 280ms ease,
    transform 450ms var(--flow-ease),
    box-shadow 450ms var(--flow-ease);
}
[data-startup-motion='on'] .button span,
[data-startup-motion='on'] .text-link span,
[data-startup-motion='on'] .reveal-button span {
  display: inline-block;
  transition: transform 400ms var(--flow-ease);
}
[data-startup-motion='on'] .feature-card,
[data-startup-motion='on'] .plan-card {
  transition:
    transform 550ms var(--flow-ease),
    box-shadow 550ms var(--flow-ease),
    border-color 550ms ease;
}
[data-startup-motion='on'] .word-stack > span,
[data-startup-motion='on'] .progress-art i,
[data-startup-motion='on'] .detail-icon,
[data-startup-motion='on'] .sound-wave i {
  transition: transform 650ms var(--flow-ease);
}
[data-startup-motion='on'] .progress-art i,
[data-startup-motion='on'] .sound-wave i {
  transform-origin: center bottom;
}
[data-startup-motion='on'] .site-nav > a:not(.button) {
  position: relative;
}
[data-startup-motion='on'] .site-nav > a:not(.button):after {
  content: '';
  position: absolute;
  height: 1px;
  background: currentColor;
  inset: auto 0 -5px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--flow-ease);
}
[data-startup-motion='on'] .site-nav > a:not(.button):focus-visible:after {
  transform: scaleX(1);
}
[data-startup-motion='on'] .faq-list details {
  transition: border-color 300ms ease;
}
[data-startup-motion='on'] .faq-list details[open] {
  border-color: #9ba98c;
}
[data-startup-motion='on'] .faq-list summary:after {
  content: '+';
  transition: transform 300ms var(--flow-ease);
}
[data-startup-motion='on'] .faq-list details[open] summary:after {
  transform: rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  [data-startup-motion='on'] .demo-card {
    translate: var(--pointer-x, 0px) var(--pointer-y, 0px);
    transition:
      translate 650ms var(--flow-ease),
      box-shadow 450ms ease;
  }
  [data-startup-motion='on'] .floating-note {
    translate: calc(var(--pointer-x, 0px) * -0.7) calc(var(--pointer-y, 0px) * -0.7);
    transition: translate 850ms var(--flow-ease);
  }
  [data-startup-motion='on'] .hero-visual:hover .demo-card {
    box-shadow:
      0 25px 65px #304c3c1c,
      0 3px 8px #304c3c0a;
  }
  [data-startup-motion='on'] .button:hover span {
    transform: translate(2px, -2px);
  }
  [data-startup-motion='on'] .text-link:hover span,
  [data-startup-motion='on'] .reveal-button:hover span {
    transform: translateX(3px);
  }
  [data-startup-motion='on'] .feature-card:hover,
  [data-startup-motion='on'] .plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px #263f3209;
    border-color: #aab69c;
  }
  [data-startup-motion='on'] .feature-vocab:hover .word-stack > span:first-child {
    transform: rotate(-8deg) translateY(-3px);
  }
  [data-startup-motion='on'] .feature-vocab:hover .word-stack > span + span {
    transform: rotate(7deg) translateY(3px);
  }
  [data-startup-motion='on'] .feature-practice:hover .sound-wave i:nth-child(odd) {
    transform: scaleY(1.15);
  }
  [data-startup-motion='on'] .feature-practice:hover .sound-wave i:nth-child(even) {
    transform: scaleY(0.8);
  }
  [data-startup-motion='on'] .feature-progress:hover .progress-art i {
    transform: scaleY(1.08);
  }
  [data-startup-motion='on'] .detail-grid article:hover .detail-icon {
    transform: rotate(-8deg);
  }
  [data-startup-motion='on'] .site-nav > a:not(.button):hover:after {
    transform: scaleX(1);
  }
}
[data-startup-motion='off'] {
  scroll-behavior: auto;
}
[data-startup-motion='off'] *,
[data-startup-motion='off'] *:before,
[data-startup-motion='off'] *:after {
  animation: none !important;
  transition: none !important;
}
[data-startup-motion='off'] .button:hover {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .button:hover {
    transform: none;
  }
}