/* X Profits: motion. Everything here is switched off for people who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {

  /* ---- press + hover on everything clickable ---- */
  .btn, .lang, .tab, .plan-opt {
    position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, filter .2s, background-color .25s, box-shadow .3s, color .2s;
  }
  .btn:hover, .lang:hover { transform: translateY(-2px); }
  .btn-primary:hover { box-shadow: 0 8px 22px rgba(201,164,92,.22), 0 0 0 1px rgba(255,255,255,.08); }
  .btn:not(.btn-primary):hover { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
  .btn:active, .lang:active, .tab:active, .plan-opt:active { transform: scale(.95); transition-duration: .06s; }
  .link { transition: color .2s; }

  .ripple {
    position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .3;
    transform: scale(0); animation: ripple .65s ease-out forwards;
  }
  @keyframes ripple { to { transform: scale(1); opacity: 0; } }

  /* ---- header ---- */
  .brand img { transition: transform .7s cubic-bezier(.3,1.5,.5,1); }
  .brand:hover img { transform: rotate(360deg) scale(1.08); }
  .nav a { position: relative; }
  .nav a::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: 1px; background: var(--chrome);
    transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .nav a:hover::after { transform: scaleX(1); }

  /* ---- cards ---- */
  .card { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .35s; }
  .course:hover { transform: translateY(-4px); border-color: #4a4f58; box-shadow: 0 16px 36px rgba(0,0,0,.45); }
  .plan { transition: background-color .3s; }
  .plan:hover { background: var(--panel-2); }
  .plan .price { transition: transform .35s cubic-bezier(.2,.8,.2,1); transform-origin: left center; }
  [dir=rtl] .plan .price { transform-origin: right center; }
  .plan:hover .price { transform: scale(1.06); }
  .earn article { transition: border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
  .earn article:hover { border-color: var(--gold); transform: translateY(-4px); }
  .edu li { transition: padding-inline-start .3s cubic-bezier(.2,.8,.2,1), color .2s; }
  .edu li:hover { padding-inline-start: 14px; }
  .steps li { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .steps li::before { transition: background-color .3s, color .3s, transform .4s cubic-bezier(.3,1.6,.5,1); }
  .steps li:hover::before { background: var(--chrome); color: var(--ink); transform: scale(1.12) rotate(-8deg); }
  .certs img { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
  .certs img:hover { transform: translateY(-5px) scale(1.07); box-shadow: 0 14px 30px rgba(0,0,0,.5); position: relative; z-index: 2; }
  .founder img.ph { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .founder img.ph:hover { transform: scale(1.025); }
  .item, tbody tr { transition: background-color .2s; }
  tbody tr:hover { background: rgba(255,255,255,.03); }
  input, select, textarea { transition: border-color .2s, background-color .2s, box-shadow .25s; }
  input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px rgba(201,164,92,.14); }
  .plan-opt:has(input:checked) { box-shadow: 0 0 0 1px var(--chrome); }
  .plan-opt input:checked { animation: pop .35s cubic-bezier(.3,1.7,.5,1); }

  /* ---- things appearing ---- */
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pop { from { opacity: 0; transform: scale(.94); } 60% { transform: scale(1.02); } to { opacity: 1; transform: none; } }

  #appView.anim > *, #body.anim > *, #authView, #authView form, #denied { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
  #appView.anim > :nth-child(2), #body.anim > :nth-child(2) { animation-delay: .06s; }
  #appView.anim > :nth-child(3) { animation-delay: .12s; }
  #appView.anim > :nth-child(4) { animation-delay: .18s; }
  #appView.anim > :nth-child(n+5) { animation-delay: .24s; }
  #appView.anim .grid2 > * { animation: rise .55s cubic-bezier(.2,.8,.2,1) both; }
  #appView.anim .grid2 > :nth-child(1) { animation-delay: .1s; }
  #appView.anim .grid2 > :nth-child(2) { animation-delay: .18s; }
  #appView.anim .grid2 > :nth-child(3) { animation-delay: .26s; }
  #appView.anim .grid2 > :nth-child(n+4) { animation-delay: .34s; }
  .player { animation: pop .5s cubic-bezier(.2,.9,.3,1.1) both; }
  #upgrade .plans + div > * { animation: fadein .4s ease both; }
  .status:not(:empty) { animation: pop .35s cubic-bezier(.2,.9,.3,1.1) both; }
  .badge { transition: border-color .2s, color .2s; }
  #loading { animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .35; } }

  /* switching language */
  main.swap { animation: swap .45s ease; }
  @keyframes swap { 0% { opacity: .15; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

  /* ---- landing: logo ---- */
  .hero-art { animation: float 8s ease-in-out infinite; }
  @keyframes float { 50% { transform: translateY(-12px); } }
  .hero-art img { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .hero-art img.ready {
    animation: none; opacity: 1; filter: none;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s ease-out;
  }
  .hero-ring {
    position: absolute; inset: 10% 10% 22%; border: 2px solid rgba(225,229,236,.6); border-radius: 50%;
    pointer-events: none; z-index: 2; animation: ring .9s ease-out forwards;
  }
  @keyframes ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }

  /* ---- landing: reveal on scroll (the class .mo is added by motion.js) ---- */
  .mo .rv {
    opacity: 0; transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--d, 0s);
  }
  .mo .rv.in { opacity: 1; transform: none; }
}