/* Course pages: the motion layer. Everything here lives under html.mo, which is
   only ever set when motion is allowed, so with JS off, with reduced motion, or if
   motion.js never arrives, the page renders exactly as it did before.
   Only transform and opacity animate. The individual translate / scale / rotate
   properties carry the entrances, so the transform property stays free for the
   pointer tilt written by motion.js and the two never fight. */
html.mo{--mo-e:cubic-bezier(.22,1,.36,1);--mo-e2:cubic-bezier(.16,1,.3,1)}

/* ---------- HERO ENTRANCE (pure CSS, so it runs even if motion.js fails) ---------- */
@keyframes moUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes moWord{from{translate:0 112%;rotate:4deg}to{translate:0 0;rotate:0deg}}
@keyframes moPortrait{from{opacity:0;scale:.9;rotate:y -14deg;translate:40px 0}to{opacity:1;scale:1;rotate:y 0deg;translate:0 0}}
@keyframes moFadeIn{from{opacity:0}to{opacity:1}}

html.mo .c-hero .c-kicker,html.mo .i-hero .c-kicker{animation:moUp 1s var(--mo-e) .05s both}
html.mo .c-title,html.mo .i-hero h1{animation:moUp 1.1s var(--mo-e) .15s both}
html.mo .c-title.mo-split,html.mo .i-hero h1.mo-split{animation:none}
html.mo .c-hero .c-promise{animation:moUp 1.1s var(--mo-e) .55s both}
html.mo .i-hero .lead{animation:moUp 1.1s var(--mo-e) .6s both}
html.mo .i-hero .lead+.lead{animation-delay:.72s}
html.mo .i-hero .lead+.lead+.lead{animation-delay:.84s}
html.mo .c-hero .fact{animation:moUp 1s var(--mo-e) .7s both}
html.mo .c-hero .fact:nth-child(2){animation-delay:.78s}
html.mo .c-hero .fact:nth-child(3){animation-delay:.86s}
html.mo .c-hero .fact:nth-child(4){animation-delay:.94s}
html.mo .c-hero .c-ctas .btn{animation:moUp 1s var(--mo-e) 1s both}
html.mo .c-hero .c-ctas .btn+.btn{animation-delay:1.08s}
html.mo .c-hero .c-note{animation:moUp 1s var(--mo-e) 1.16s both}
html.mo .c-hero .c-note+.c-note{animation-delay:1.24s}
html.mo .c-hero .grid{perspective:1400px}
html.mo .c-hero .portrait{animation:moPortrait 1.6s var(--mo-e2) .3s both;transform-origin:50% 60%;will-change:transform}
html.mo .c-hero .portrait img{scale:1.08;will-change:transform}
html.mo .c-hero .portrait .cap{animation:moUp 1s var(--mo-e) 1.2s both}

/* Split title: each word rises out of its own mask */
/* .c-title span and .i-hero h1 span are the gold second line; the word wrappers
   must not inherit that rule, so they are named with the same weight plus one */
.c-title span.mo-w,.i-hero h1 span.mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em .14em;margin:-.08em -.03em -.14em;color:inherit}
.c-title span.mo-wi,.i-hero h1 span.mo-wi{display:inline-block;color:inherit}
html.mo .mo-split .mo-wi{animation:moWord 1.15s var(--mo-e2) calc(.18s + var(--i,0) * .07s) both}

/* A loaded late (no head snippet): the hero is already on screen, so no entrance */
html.mo.mo-late .c-hero .wrap *,html.mo.mo-late .i-hero .wrap *,html.mo.mo-late .c-title,html.mo.mo-late .i-hero h1{animation:none!important}

/* ---------- DEPTH: a slow drifting light behind the hero ---------- */
html.mo .c-hero,html.mo .i-hero{position:relative;overflow:hidden;overflow:clip}
html.mo .c-hero>.wrap,html.mo .i-hero>.wrap{position:relative;z-index:1}
.mo-light{position:absolute;z-index:0;pointer-events:none;left:50%;top:-30%;width:110vmax;height:110vmax;margin-left:-55vmax;opacity:0;
  background:radial-gradient(closest-side at 62% 38%,rgba(201,164,104,.16),rgba(201,164,104,0) 70%),radial-gradient(closest-side at 30% 70%,rgba(242,235,225,.06),rgba(242,235,225,0) 70%);
  animation:moFadeIn 2.4s ease .2s forwards,moDrift 22s ease-in-out infinite alternate;will-change:transform}
@keyframes moDrift{0%{transform:translate3d(-6%,-2%,0) scale(1)}50%{transform:translate3d(4%,3%,0) scale(1.08)}100%{transform:translate3d(-2%,6%,0) scale(.96)}}
html.mo .sparkle{will-change:transform}

/* ---------- SCROLL CHOREOGRAPHY: sections rise in with depth ----------
   courses.js still owns the timing (it adds .in). Under html.mo the rise swaps
   the flat 24px slide for a rise, a settle in scale and a slight lean back. */
html.mo .mo-p{perspective:1400px}
html.mo .reveal{transform:none;opacity:0;translate:0 46px;scale:.965;rotate:x 7deg;transform-origin:50% 0;
  transition:opacity 1s var(--mo-e) var(--mo-d,0s),translate 1.25s var(--mo-e2) var(--mo-d,0s),scale 1.25s var(--mo-e2) var(--mo-d,0s),rotate 1.25s var(--mo-e2) var(--mo-d,0s),border-color .4s,box-shadow .4s,transform .5s var(--mo-e)}
html.mo .reveal.in{opacity:1;translate:0 0;scale:1;rotate:x 0deg}

/* Syllabus: the days turn in one after another, the numeral following its row */
html.mo .syl details.reveal{rotate:x 14deg;translate:0 30px}
html.mo .syl details.reveal.in{rotate:x 0deg;translate:0 0}
html.mo .syl details.reveal .day{opacity:0;translate:-18px 0;transition:opacity .9s var(--mo-e) calc(var(--mo-d,0s) + .18s),translate 1s var(--mo-e2) calc(var(--mo-d,0s) + .18s)}
html.mo .syl details.reveal.in .day{opacity:1;translate:0 0}
@keyframes moBody{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
html.mo .syl details[open] .body{animation:moBody .55s var(--mo-e) both}

/* Prices settle after they count */
@keyframes moSettle{0%{opacity:.4;translate:0 14px;scale:.96}100%{opacity:1;translate:0 0;scale:1}}
html.mo .price.mo-count{animation:moSettle 1.2s var(--mo-e2) both}
.mo-num{font-variant-numeric:tabular-nums}

/* ---------- CARDS: pointer tilt and a moving light (hover devices only) ---------- */
html.mo .mo-tilt{position:relative;backface-visibility:hidden}
html.mo .mo-tilt.mo-hot{transition-property:opacity,translate,scale,rotate,border-color,box-shadow}
.mo-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2;opacity:0;transition:opacity .5s var(--mo-e)}
.mo-sheen i{position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,244,222,.17),rgba(255,244,222,.05) 55%,rgba(255,244,222,0))}
.mo-hot>.mo-sheen{opacity:1}
.about-row .mo-sheen i{width:760px;height:760px;margin:-380px 0 0 -380px}

/* Magnetic gold buttons */
html.mo .btn-gold.mo-mag{transition:transform .3s var(--mo-e),box-shadow .3s,background .3s,border-color .3s}

/* ---------- SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  html.mo *,html.mo *::before,html.mo *::after{animation:none!important;transition:none!important}
  html.mo .reveal,html.mo .syl details.reveal .day{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
  .mo-light,.mo-sheen{display:none!important}
}
@media print{
  html.mo .reveal,html.mo .syl details.reveal .day{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
  .mo-light,.mo-sheen{display:none!important}
}