/* MOTION LAYER v1.1 for the masterclass page.
   Fail-open: nothing is hidden unless the script has added .mo to <html>,
   and the script reveals everything after 6 seconds whatever happens.
   Only transform, opacity and filter move, so the browser animates on the GPU. */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-out:cubic-bezier(.22,1,.36,1);interpolate-size:allow-keywords}

/* words of a headline rise out of a soft blur, one after another */
.mo .sw{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.mo .in .sw,.mo .sw.in{opacity:1;transform:none;filter:none}

/* every other block slides up into place as it reaches the screen */
.mo .rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.mo .rv.in{opacity:1;transform:none}
.mo .rv-scale{opacity:0;transform:translateY(40px) scale(.94);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.mo .rv-scale.in{opacity:1;transform:none}

/* the gold highlighter that sweeps behind the hero question */
.hl-sweep{background-image:linear-gradient(transparent 62%,rgba(220,187,114,.55) 62%,rgba(220,187,114,.55) 92%,transparent 92%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.2s var(--ease) .9s}
.hl-on .hl-sweep,.hl-sweep.in{background-size:100% 100%}

/* buttons: a light sweep across the gold, and a small lift */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background .2s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 45%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
@media (hover:hover){
  .btn:hover{box-shadow:0 14px 30px -10px rgba(107,81,25,.55)}
  .btn:hover::after{transform:translateX(120%)}
}
.btn.idle-shine::after{animation:mo-shine 5.5s var(--ease) 2.5s infinite}
@keyframes mo-shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* the film grows to full size as it scrolls into view */
#video .player{transform-origin:50% 0;will-change:transform}

/* images drift slightly against the scroll */
#how .room-shot,#register .shot img{will-change:transform}
#register .shot{overflow:hidden}

/* the three cards tilt toward the pointer, with a light that follows it */
#parts .card{transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
#parts .card .top{position:relative}
#parts .card .top::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,226,160,.28),transparent 55%)}
@media (hover:hover){
  #parts .card:hover{box-shadow:0 30px 60px -24px rgba(6,12,21,.45)}
  #parts .card:hover .top::after{opacity:1}
}

/* the five levels: rings turn slowly, levels arrive one by one, the centre breathes */
#leave .orbit .r1{animation:mo-spin 60s linear infinite}
#leave .orbit .r2{animation:mo-spin 90s linear infinite reverse}
@keyframes mo-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.mo #leave .lvl b,.mo #leave .lvl span{opacity:0;transform:scale(.4);transition:opacity .7s var(--ease),transform .9s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--d,0) * 1ms)}
.mo #leave .orbit.in .lvl b,.mo #leave .orbit.in .lvl span{opacity:1;transform:none}
#leave .orbit .core i{animation:mo-breathe 3.2s ease-in-out infinite}
@keyframes mo-breathe{0%,100%{box-shadow:0 0 0 0 rgba(220,187,114,.45)}50%{box-shadow:0 0 0 14px rgba(220,187,114,0)}}

/* a soft gold light follows the pointer across the dark section */
#how{position:relative}
#how>.container{position:relative;z-index:1}
#how::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),rgba(220,187,114,.12),transparent 60%)}
@media (hover:hover){#how:hover::before{opacity:1}}

/* header slips away on the way down, returns on the way up */
.topbar{transition:transform .5s var(--ease)}
.topbar.mo-hide{transform:translateY(-100%)}
.topbar .hd{transition:box-shadow .4s}
.topbar.mo-solid .hd{box-shadow:0 8px 30px -12px rgba(0,0,0,.18)}

/* the registration form rises in instead of appearing */
.dlg.on{animation:mo-fade .35s ease both}
.dlg.on .panel{animation:mo-rise .6s var(--ease) both}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-rise{from{opacity:0;transform:translateY(28px) scale(.97)}}

/* FAQ answers open with a smooth height change where the browser supports it */
details::details-content{height:0;overflow:clip;transition:height .55s var(--ease),content-visibility .55s allow-discrete}
details[open]::details-content{height:auto}

@media (prefers-reduced-motion:reduce){
  .mo .sw,.mo .rv,.mo .rv-scale,.mo #leave .lvl b,.mo #leave .lvl span{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  #leave .orbit .r1,#leave .orbit .r2,#leave .orbit .core i,.btn.idle-shine::after{animation:none!important}
  .hl-sweep{background-size:100% 100%;transition:none}
  .dlg.on,.dlg.on .panel{animation:none}
  #video .player,#how .room-shot,#register .shot img{transform:none!important}
}

/* ===== TYPE LAYER v1.1 ===== */
/* the hero headline thickens under the cursor (Manrope is loaded as a variable font, 200 to 800) */
.hero h1 .ch{display:inline-block;font-weight:var(--w,500);transition:font-weight .35s var(--ease)}

/* statement headings fill in word by word as you scroll through them */
.mo .fill .sw{color:rgba(6,12,21,.14);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease),color .45s ease}
.mo .fill .sw.lit{color:inherit}
.mo .fill .sw.now{color:var(--accent-text)}

/* eyebrow labels decode out of currency symbols */
.pill .dec{font-variant-numeric:tabular-nums}

/* the five levels, as a moving band of big type */
.mo-band{overflow:hidden;padding:34px 0;background:#fff;user-select:none;pointer-events:none}
.mo-band .trk{display:flex;width:max-content;will-change:transform}
.mo-band span{font:800 clamp(56px,9vw,132px)/1 var(--font);letter-spacing:-.04em;white-space:nowrap;padding-right:.35em;color:var(--navy)}
.mo-band span.o{color:transparent;-webkit-text-stroke:1.5px var(--navy)}
.mo-band span.g{color:var(--accent);font-size:clamp(28px,4vw,56px);align-self:center}

/* the start time rolls in digit by digit when it appears or changes */
#tzamt .dg{display:inline-block;animation:mo-roll .7s var(--ease) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes mo-roll{from{opacity:0;transform:translateY(.6em) rotateX(-70deg);filter:blur(6px)}}

@media (prefers-reduced-motion:reduce){
  .mo-band{display:none}
  #tzamt .dg{animation:none}
  .mo .fill .sw{color:inherit!important}
}