/* Motion for the public site (paired with motion.js). Only active when <html> has .motion,
   which motion.js adds unless the visitor asked for reduced motion. */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* scroll progress line under the header */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--brand), #6F97EA 60%, var(--sky)); transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .scroll-progress { transform-origin: right center; background: linear-gradient(270deg, var(--brand), #6F97EA 60%, var(--sky)); }

/* headlines: each word rises out of its own line */
.motion .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.motion .split .w > span { display: inline-block; transform: translateY(110%) rotate(2deg); transition: transform 1s cubic-bezier(.16, .84, .24, 1); }
.motion .intro .split .w > span { transform: none; }
.motion .rise { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.16, .84, .24, 1); }
.motion .intro .rise { opacity: 1; transform: none; }

/* reveals */
.motion .reveal { opacity: 0; transform: translateY(30px); filter: blur(5px);
  transition: opacity .95s cubic-bezier(.2, .7, .2, 1), transform .95s cubic-bezier(.2, .7, .2, 1), filter .95s ease; }
.motion .reveal.in { opacity: 1; transform: none; filter: none; }
.motion .unveil { clip-path: inset(12% 8% 12% 8% round 28px); transition: clip-path 1.3s cubic-bezier(.16, .84, .24, 1); }
.motion .unveil.in { clip-path: inset(0 0 0 0 round 0); }
.parallax-img { will-change: transform; }

/* the academy board follows the pointer a little */
.motion .ac-hero .ac-notebook { transition: translate .6s cubic-bezier(.2, .7, .2, 1); translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 14px); }
.motion .ac-hero .ac-grid-bg { inset: -22% 0; }

/* cards tilt toward the pointer, with a soft light where it points */
.motion .card, .motion .ac-way { transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s ease, opacity .95s cubic-bezier(.2, .7, .2, 1), filter .95s ease; }
.motion .card.tilt, .motion .ac-way.tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-6px);
  box-shadow: 0 30px 60px -32px rgba(20, 36, 75, .45); }
.motion .card .top, .motion .ac-way { position: relative; }
.motion .card .cover::after { z-index: 1; }
.motion .card .cover::after, .motion .card .top::after, .motion .ac-way::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .18), transparent 60%); }
.motion .card.tilt .cover::after, .motion .card.tilt .top::after, .motion .ac-way.tilt::after { opacity: 1; }

/* course filter: cards fall into place when the filter changes */
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.motion .card.flip-in { animation: card-in .55s cubic-bezier(.2, .7, .2, 1) both; }

/* pinned step sections (wide screens): the section stays while the steps light up as you scroll */
@media (min-width: 1080px) and (min-height: 760px) {
  .motion .pin-sec { height: calc(100vh + var(--pin-steps, 4) * 42vh); padding-top: 0 !important; padding-bottom: 0 !important; }
  .motion .pin-sec .pin-inner { position: sticky; top: 84px; min-height: calc(100vh - 84px); padding: 48px 0; }
  .motion .journey.pin-sec .pin-inner { display: flex; flex-direction: column; justify-content: center; }
  .motion .ac-how.pin-sec .pin-inner { align-content: center; padding: 22px 0; }
  .motion .ac-how.pin-sec .steps { margin-top: 26px; }
  .motion .ac-how.pin-sec .step { padding: 15px 0; }
  .motion .ac-how.pin-sec .wrap > div > div[style] { margin-top: 22px !important; }

  .motion .pin-sec .step { opacity: .3; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .motion .pin-sec .step.lit { opacity: 1; transform: none; }
  .motion .pin-sec .jstep .box { opacity: .35; translate: 0 16px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1), border-color .5s, box-shadow .5s, transform .5s cubic-bezier(.2, .7, .2, 1); }
  .motion .pin-sec .jstep .n { opacity: .5; transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
  .motion .pin-sec .jstep.lit .box { opacity: 1; translate: 0 0; }
  .motion .pin-sec .jstep.lit .n { opacity: 1; }
  .motion .journey.pin-sec .jstep.now .box { border-color: var(--brand); box-shadow: 0 26px 50px -30px rgba(40, 93, 205, .55); transform: translateY(-6px); }
  .motion .journey.pin-sec .jstep.now .n { transform: scale(1.12); box-shadow: 0 0 0 8px var(--ice), 0 0 0 14px rgba(40, 93, 205, .18); }
  /* the dotted line fills in as the steps light up */
  .motion .journey.pin-sec .jsteps::after { content: ""; position: absolute; top: 27px; left: 28px; height: 2px; width: calc((100% - 56px) * var(--pin-p, 0)); background: var(--brand); border-radius: 2px; }
  [dir="rtl"] .motion .journey.pin-sec .jsteps::after { left: auto; right: 28px; }
  .motion .ac-how.pin-sec .step.now .n { background: var(--brand); color: #fff; transition: background .4s, color .4s; }
  .motion .ac-how.pin-sec .cert img { transform: rotate(calc(-7deg + var(--pin-p, 1) * 5deg)) scale(calc(.9 + var(--pin-p, 1) * .1)); transition: transform .2s linear; }
}

/* "four ways to learn" cards */
.motion .ac-way .ac-way-ic { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.motion .ac-way.tilt .ac-way-ic { transform: translateY(-4px) rotate(-6deg); }