/* Motion for the academy site. Short, one direction (up), no bounce.
   Everything is inside prefers-reduced-motion: no-preference, and hidden-until-revealed
   states only apply once motion.js has added .js-motion, so content is never stuck invisible. */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }

.pfa-nav { transition: background-color .2s, border-color .2s; }
.pfa-nav.is-scrolled { background: var(--surface); border-bottom-color: var(--border-strong); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: lines rise in on load */
  .js-motion .intro > * { animation: pfa-rise .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
  .js-motion .intro-shot { animation: pfa-fade 1s var(--ease-out) .35s both; }
  @keyframes pfa-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes pfa-fade { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

  /* Scroll reveal: blocks and grid children slide up (staggered by --i). They stay fully visible
     the whole time, so the page reads complete at rest and in thumbnails. */
  .js-motion .reveal, .js-motion .stagger > * {
    transform: translateY(16px);
    transition: transform .6s var(--ease-out), border-color .2s, box-shadow .2s;
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js-motion .reveal.is-in, .js-motion .stagger > .is-in { opacity: 1; transform: none; }

  /* Hover: cards lift a little, buttons nudge */
  .pfa-course, .tool, .pfa-grid > .pfa-card { transition: transform .2s var(--ease-out), border-color .2s; }
  .js-motion .stagger > .is-in.pfa-card:hover, .pfa-grid > .pfa-card:hover { transform: translateY(-4px); border-color: var(--border-strong); transition-delay: 0s; }
  .pfa-grid > .pfa-plan--featured:hover { border-color: var(--brand); }
  .pfa-grid > .pfa-plan--vip:hover { border-color: var(--gold); }
  .pfa-btn { transition: background-color .15s, border-color .15s, transform .15s var(--ease-out); }
  .pfa-btn--primary:hover { transform: translateY(-1px); }
  .pfa-btn:active { transform: translateY(1px); }
  .tool__mark { transition: transform .25s var(--ease-out); }
  .tool:hover .tool__mark { transform: rotate(-6deg) scale(1.06); }

  /* Course progress fills in */
  .pfa-progress > span { animation: pfa-grow .9s var(--ease-out) .2s both; transform-origin: left; }
  @keyframes pfa-grow { from { transform: scaleX(0); } to { transform: none; } }

  /* FAQ plus turns into a minus */
  .faq summary::after { transition: transform .2s var(--ease-out); }
  .faq details[open] summary::after { transform: rotate(180deg); }
  .faq details[open] p { animation: pfa-rise .35s var(--ease-out) both; }

  /* Filters and the language switch slide their active pill */
  .filters button, .lang button { transition: background-color .2s, color .2s; }

  /* Language swap: content fades out and back in */
  main, .demo-bar, .footer { transition: opacity .14s ease; }
  .is-swapping main, .is-swapping .demo-bar, .is-swapping .footer { opacity: 0; }

  /* Demo note and coupon message */
  .note:not([hidden]) { animation: pfa-rise .3s var(--ease-out) both; }
}

/* Safety net: if the animation clock is frozen (background tab, some screenshot tools),
   motion.js adds .motion-settled after 1.5 s and everything shows in its final state. */
.motion-settled .intro > *, .motion-settled .intro-shot { animation: none !important; opacity: 1 !important; transform: none !important; }
.motion-settled .reveal.is-in, .motion-settled .stagger > .is-in { opacity: 1 !important; transform: none; }