/* MOE loader v4 (loader-fx.js). The element starts as a full-screen black frame; each look draws inside it.
   Exits: the reel frame grows into the site, the letterbox opens onto it, the camera flies through the last word. */
.moe-loader-fx{position:fixed;inset:0;z-index:100;overflow:hidden;background:#000;color:#fff;font-family:Inter,sans-serif}
.moe-loader-fx.is-done{pointer-events:none}
.moe-loader-fx.is-gone{visibility:hidden}

/* 1 — reel. The frame's huge shadow is the black screen, so growing the frame uncovers the site. */
.lf-is-reel{background:transparent;--fw:min(50vw,86vh)}
.lf-frame{position:absolute;left:50%;top:46%;width:var(--fw);height:calc(var(--fw)*.5625);margin:calc(var(--fw)*-.28125) 0 0 calc(var(--fw)*-.5);background:#060608;box-shadow:0 0 0 200vmax #000;overflow:hidden;
 transition:width .95s cubic-bezier(.76,0,.24,1),height .95s cubic-bezier(.76,0,.24,1),margin .95s cubic-bezier(.76,0,.24,1),top .95s cubic-bezier(.76,0,.24,1),background-color .4s ease .3s}
.lf-frame:after{content:'';position:absolute;inset:0;border:1px solid #ffffff1a;pointer-events:none;transition:opacity .3s}
.lf-stage{position:absolute;inset:0;transition:opacity .45s ease .2s}
.lf-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.lf-stage img.on{opacity:1;animation:lf-push .7s linear forwards}
@keyframes lf-push{from{transform:scale(1)}to{transform:scale(var(--z,1.06))}}
.lf-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.lf-flash.hit{animation:lf-flash .14s ease-out}
@keyframes lf-flash{from{opacity:.16}to{opacity:0}}
.lf-card{position:absolute;inset:0;display:grid;place-items:center;background:#000;opacity:0}
.lf-card svg{width:auto;height:30%;fill:#8052ff;transform:scale(1.25);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.lf-card-on .lf-card{opacity:1}.lf-card-on .lf-card svg{transform:none}
.lf-rbar{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff14}
.lf-rbar i{position:absolute;inset:0;background:#8052ff;transform:scaleX(var(--p,0));transform-origin:0 50%}
.lf-slate{position:absolute;left:0;right:0;display:flex;justify-content:space-between;gap:12px;padding:12px 14px;font:600 10px/1.2 Inter,sans-serif;letter-spacing:.24em;color:#ffffffd9;text-shadow:0 1px 8px #000c;transition:opacity .25s}
.lf-slate-top{top:0}.lf-slate-bottom{bottom:4px;letter-spacing:.16em}
.lf-rec:before{content:'';display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;border-radius:50%;background:#8052ff;animation:lf-blink .5s steps(1) infinite}
@keyframes lf-blink{50%{opacity:0}}
.lf-name{font-family:Inter,Alexandria,sans-serif}
.lf-tc{font-variant-numeric:tabular-nums;color:#ffffff99}
.lf-count{position:absolute;left:50%;top:calc(46% + var(--fw)*.28125 + 6px);width:var(--fw);margin-left:calc(var(--fw)*-.5);display:flex;justify-content:flex-end;direction:ltr;transition:opacity .25s,transform .4s cubic-bezier(.22,1,.36,1)}
.lf-count b{font:800 clamp(56px,7.2vw,124px)/1 Inter,sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.lf-is-reel.lf-out .lf-frame{top:50%;width:100vw;height:100vh;margin:-50vh 0 0 -50vw;background-color:transparent}
.lf-is-reel.lf-out .lf-stage,.lf-is-reel.lf-out .lf-card{opacity:0;transition:opacity .45s ease .15s}
.lf-is-reel.lf-out .lf-slate,.lf-is-reel.lf-out .lf-rbar,.lf-is-reel.lf-out .lf-frame:after{opacity:0}
.lf-is-reel.lf-out .lf-count{opacity:0;transform:translateY(20px)}
@media(max-width:700px){.lf-is-reel{--fw:88vw}.lf-slate{padding:9px 10px;font-size:8px}}

/* 2 — titles. Letterbox bars over a scope; the scope clears and the bars open. */
.lf-is-titles{background:transparent;--bar:12.5%}
.lf-bar{position:absolute;left:0;right:0;height:var(--bar);background:#000;z-index:2;transition:transform .85s cubic-bezier(.76,0,.24,1) .5s}
.lf-bar-top{top:0;box-shadow:0 1px 0 #ffffff12}.lf-bar-bottom{bottom:0;box-shadow:0 -1px 0 #ffffff12}
.lf-scope{position:absolute;left:0;right:0;top:var(--bar);bottom:var(--bar);overflow:hidden;background:#060509;transition:background-color .55s ease .3s}
.lf-grain{position:absolute;inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:lf-grain .4s steps(4) infinite}
@keyframes lf-grain{25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-2%)}}
.lf-pre,.lf-main,.lf-sub,.lf-cred{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;opacity:0}
.lf-pre{top:50%;margin-top:-.5em;font:500 13px/1 Inter,Alexandria,sans-serif;letter-spacing:.5em;padding-inline-start:.5em;color:#cfc9da}
.lf-is-titles{--mw:clamp(260px,38vw,620px)}
.lf-main{top:50%;width:var(--mw);opacity:1;transform:translate(-50%,-70%)}
.lf-main img,.lf-main b{display:block;width:100%;height:auto;clip-path:inset(0 100% 0 0)}
.lf-main b{font:800 120px/1 Inter,sans-serif;text-align:center}
.lf-sweep{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;pointer-events:none}
.lf-sweep i{position:absolute;top:0;left:0;width:55vw;height:2px;transform:translateX(-50%);opacity:0;background:linear-gradient(90deg,transparent,#8052ff 35%,#fff 50%,#8052ff 65%,transparent)}
.lf-sweep i:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;filter:blur(3px)}
.lf-sub{top:calc(50% + var(--mw)*.0534 + 22px);font:500 12px/1 Inter,Alexandria,sans-serif;letter-spacing:.5em;padding-inline-start:.5em;color:#b8b3c4}
.lf-cred{bottom:14%;display:flex;gap:28px;font:600 10px/1 Inter,Alexandria,sans-serif;letter-spacing:.32em;color:#8d879a}
.lf-cred span{opacity:0}
.lf-is-titles.lf-in .lf-pre{animation:lf-pre .8s cubic-bezier(.22,1,.36,1) .05s forwards}
@keyframes lf-pre{0%{opacity:0;filter:blur(6px);letter-spacing:.8em}35%,70%{opacity:1;filter:none;letter-spacing:.5em}100%{opacity:0;filter:blur(4px);letter-spacing:.5em}}
.lf-is-titles.lf-in .lf-main img,.lf-is-titles.lf-in .lf-main b{animation:lf-reveal .6s cubic-bezier(.65,0,.35,1) .8s forwards,lf-settle 2.2s cubic-bezier(.22,1,.36,1) .8s forwards}
@keyframes lf-reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes lf-settle{from{scale:1.08}to{scale:1}}
.lf-is-titles.lf-in .lf-sweep i{animation:lf-sweep .6s cubic-bezier(.65,0,.35,1) .8s forwards}
@keyframes lf-sweep{0%{opacity:0;left:0}12%,85%{opacity:1}100%{opacity:0;left:100%}}
.lf-is-titles.lf-in .lf-sub{animation:lf-fade .6s ease 1.3s forwards}
.lf-is-titles.lf-in .lf-cred{opacity:1}
.lf-is-titles.lf-in .lf-cred span{animation:lf-fade .4s ease forwards}
.lf-cred span:nth-child(1){animation-delay:1.45s!important}.lf-cred span:nth-child(2){animation-delay:1.55s!important}.lf-cred span:nth-child(3){animation-delay:1.65s!important}.lf-cred span:nth-child(4){animation-delay:1.75s!important}
@keyframes lf-fade{to{opacity:1}}
.lf-is-titles.lf-out .lf-main,.lf-is-titles.lf-out .lf-sub,.lf-is-titles.lf-out .lf-cred,.lf-is-titles.lf-out .lf-grain{opacity:0!important;filter:blur(6px);transition:opacity .3s,filter .3s}
.lf-is-titles.lf-out .lf-scope{background-color:transparent}
.lf-is-titles.lf-out .lf-bar-top{transform:translateY(-101%)}
.lf-is-titles.lf-out .lf-bar-bottom{transform:translateY(101%)}
@media(max-aspect-ratio:1/1){.lf-is-titles{--bar:calc(50% - 32vw)}.lf-is-titles{--mw:56vw}.lf-sub{font-size:9px;letter-spacing:.4em}.lf-pre{font-size:9px;letter-spacing:.4em}.lf-cred{bottom:12%;gap:16px;font-size:8px}}

/* 3 — kinetic type */
.lf-kin{position:absolute;inset:0;display:grid;place-items:center}
.lf-w{grid-area:1/1;font:900 clamp(64px,17vw,330px)/.9 Inter,sans-serif;letter-spacing:-.055em;white-space:nowrap;opacity:0;padding:0 .05em}
.lf-ar .lf-w{font-family:Alexandria,sans-serif;letter-spacing:0;font-size:clamp(56px,16vw,300px);line-height:1.15}
.lf-is-kinetic.lf-inv{background:#fff;color:#000;transition:none}
.lf-inv .lf-ktc{color:#00000080}.lf-inv .lf-krule{background:#0000001a}
@media(max-width:700px){.lf-w{font-size:23vw}.lf-ar .lf-w{font-size:21vw}}
.lf-w.on{opacity:1}
.lf-w-up.on{animation:lf-up .26s cubic-bezier(.2,1,.3,1) both,lf-drift 1s linear .26s both}
.lf-w-left.on{animation:lf-left .26s cubic-bezier(.2,1,.3,1) both,lf-drift 1s linear .26s both}
.lf-w-right.on{animation:lf-right .26s cubic-bezier(.2,1,.3,1) both,lf-drift 1s linear .26s both}
.lf-w-zoom.on{animation:lf-zoom .26s cubic-bezier(.2,1,.3,1) both,lf-drift 1s linear .26s both}
@keyframes lf-up{from{transform:translateY(45%) skewY(8deg);filter:blur(10px)}to{transform:none;filter:none}}
@keyframes lf-left{from{transform:translateX(35%) scaleX(1.7);filter:blur(14px)}to{transform:none;filter:none}}
@keyframes lf-right{from{transform:translateX(-35%) scaleX(1.7);filter:blur(14px)}to{transform:none;filter:none}}
@keyframes lf-zoom{from{transform:scale(2.6);filter:blur(16px);opacity:0}to{transform:none;filter:none;opacity:1}}
@keyframes lf-drift{from{scale:1}to{scale:1.05}}
.lf-w-final{display:grid;justify-items:center;gap:.06em;transition:transform 1s cubic-bezier(.7,0,.2,1),opacity .45s ease .4s}
.lf-w-final small{font:600 clamp(12px,1.5vw,22px)/1 Inter,Alexandria,sans-serif;letter-spacing:.6em;padding-inline-start:.6em;color:#b8b3c4}
.lf-w-final span{color:#8052ff}
.lf-ar .lf-w-final small{font:700 clamp(18px,2.4vw,34px)/1 Alexandria,sans-serif;letter-spacing:0;padding:0;color:#fff}
.lf-w-final.on{animation:lf-slam .34s cubic-bezier(.2,1,.3,1) both}
@keyframes lf-slam{0%{transform:scale(1.7);filter:blur(14px);opacity:0}60%{transform:scale(.97);filter:none;opacity:1}80%{transform:translate(1px,-1px) scale(1.01)}100%{transform:none}}
.lf-krule{position:absolute;left:clamp(16px,4vw,56px);right:clamp(16px,4vw,56px);bottom:clamp(20px,5vh,48px);height:1px;background:#ffffff1a}
.lf-krule i{position:absolute;inset:0;background:#8052ff;transform:scaleX(var(--p,0));transform-origin:0 50%}
.lf-ar .lf-krule i{transform-origin:100% 50%}
.lf-ktc{position:absolute;left:clamp(16px,4vw,56px);bottom:calc(clamp(20px,5vh,48px) + 12px);font:600 10px/1 Inter,sans-serif;letter-spacing:.2em;color:#8d879a;font-variant-numeric:tabular-nums}
.lf-is-kinetic.lf-out{background-color:transparent;transition:background-color .5s ease .25s}
.lf-is-kinetic.lf-out .lf-w-final{animation:none;opacity:0;transform:scale(16)}
.lf-is-kinetic.lf-out .lf-krule,.lf-is-kinetic.lf-out .lf-ktc{opacity:0;transition:opacity .25s}

/* 4–5 — ribbon. A big M sits behind at low opacity and drifts; the wordmark is written on top as one ribbon (loader-fx.js). */
.lf-back{position:absolute;left:50%;top:50%;width:min(82vh,96vw);aspect-ratio:176.45/171.3;transform:translate(-50%,-50%);translate:calc(var(--px,0)*24px) calc(var(--py,0)*18px);pointer-events:none;opacity:0;transition:opacity 1.1s ease,translate 1.4s cubic-bezier(.22,1,.36,1)}
.lf-back-m{opacity:.065}
.lf-back-sweep{opacity:.16}
.lf-back svg{display:block;width:100%;height:100%;overflow:visible;fill:#fff;animation:lf-float 7s ease-in-out infinite alternate}
@keyframes lf-float{from{transform:translate(-1.2%,-1.6%) rotate(-1.5deg) scale(1.04)}to{transform:translate(1.2%,1.6%) rotate(1.5deg) scale(1)}}
.lf-in .lf-back{opacity:1}
/* One unit sizes the whole lockup: --lw is the wordmark's width; Hey we're, STUDIOS and every gap are fractions of it,
   so the proportions hold on every screen. It is capped by height too, so short and landscape screens still fit. */
.lf-sig{--lw:clamp(260px,min(44vw,92vh),760px);direction:ltr;position:absolute;left:50%;top:50%;width:var(--lw);transform:translate(-50%,-54%);display:grid;justify-items:center;translate:calc(var(--px,0)*-9px) calc(var(--py,0)*-6px);transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .55s ease,filter .55s ease,translate 1s cubic-bezier(.22,1,.36,1)}
.lf-sig svg{display:block;overflow:visible}
.lf-word{width:100%;height:auto;margin-top:calc(var(--lw)*.012)}
.lf-lt{fill:#fff}
.lf-lt-lead{fill:#8052ff}
.lf-lt-full{opacity:0}
.lf-rb{fill:none;stroke:#fff;stroke-width:30;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;visibility:hidden}
/* Hey we're: sits over the M, left-aligned with it, each character rising out of a soft blur */
.lf-hey{justify-self:start;margin:0 0 0 4.5%;direction:ltr;font:600 calc(var(--lw)*.064)/1.05 Inter,sans-serif;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.lf-hey span{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);filter:blur(6px);transition:opacity .5s ease,transform .7s cubic-bezier(.34,1.56,.64,1),filter .5s ease;transition-delay:calc(var(--i)*32ms)}
.lf-hey-on .lf-hey span{opacity:1;transform:none;filter:none}
.lf-hey .lf-wave{transform-origin:20% 90%;transition:none;opacity:1;filter:none;transform:none}
.lf-hey-on .lf-wave{animation:lf-wave 1s cubic-bezier(.36,0,.2,1) .55s both}
@keyframes lf-wave{0%,100%{rotate:0deg}22%{rotate:-9deg}48%{rotate:6deg}72%{rotate:-3deg}}
.lf-sheen{mix-blend-mode:normal;opacity:.85}
.lf-studios{margin:calc(var(--lw)*.05) 0 0;direction:ltr;font:600 calc(var(--lw)*.039)/1 Inter,sans-serif;letter-spacing:.62em;padding-left:.62em;color:#fff}
.lf-studios span{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .45s ease,transform .6s cubic-bezier(.34,1.56,.64,1),filter .45s ease;transition-delay:calc(var(--i)*45ms)}
.lf-written .lf-studios span{opacity:1;transform:none;filter:none}
.lf-wipe{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.lf-wz{fill:none;stroke:#000;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;visibility:hidden}
.lf-wz-edge{fill:none;stroke:#8052ff;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;visibility:hidden}
/* Opening: the lockup lifts and dissolves while the black opens from the centre in a soft-edged circle. */
@property --lf-r{syntax:'<percentage>';inherits:false;initial-value:-25%}
.lf-open-circle.lf-out,.lf-open-thru.lf-out{--lf-r:125%;-webkit-mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,48%),transparent var(--lf-r),#000 calc(var(--lf-r) + 22%));mask-image:radial-gradient(circle at var(--cx,50%) var(--cy,48%),transparent var(--lf-r),#000 calc(var(--lf-r) + 22%));transition:--lf-r 1.15s cubic-bezier(.65,0,.35,1) .12s}
.lf-open-thru.lf-out{transition:--lf-r .9s cubic-bezier(.55,0,.35,1) .3s}
.lf-open-thru.lf-out .lf-sig{transform:translate(-50%,-54%) scale(18);opacity:0;filter:none;transition:transform 1.15s cubic-bezier(.75,0,.25,1),opacity .3s ease .8s}
/* zigzag opening: the black moves into the svg so a zigzag can be cut through it */
.lf-open-zigzag.lf-out,.lf-open-letters.lf-out{background:transparent}
.lf-open-zigzag.lf-out .lf-wipe,.lf-open-letters.lf-out .lf-wipe{display:block}
/* letters opening: the white letters give way to letter-shaped windows; the rest of the lockup fades */
.lf-open-letters.lf-out .lf-sig{transform:translate(-50%,-54%);opacity:1;filter:none}
.lf-open-letters.lf-out .lf-word{visibility:hidden}
.lf-open-letters.lf-out .lf-hey,.lf-open-letters.lf-out .lf-studios{opacity:0;transition:opacity .35s ease}
/* staging */
.lf-cam{width:100%;display:grid;justify-items:center;transform-origin:0 0;will-change:transform}
.lf-caret{display:none}
.lf-stage-type .lf-hey{transform:translate(var(--hx,0),var(--hy,0)) scale(2.5);transition:transform .9s cubic-bezier(.65,0,.25,1),opacity .35s ease}
.lf-stage-type.lf-hey-up .lf-hey{transform:none}
.lf-stage-type .lf-hey span{transform:none;filter:none;transition:opacity 0s;transition-delay:calc(var(--i)*65ms + .05s)}
.lf-stage-type .lf-caret{display:inline-block;width:.07em;height:.95em;margin-left:.08em;vertical-align:-.12em;background:#8052ff;opacity:1;animation:lf-blink .9s steps(1) infinite}
.lf-stage-type.lf-hey-up .lf-caret{animation:none;opacity:0;transition:opacity .25s}
@keyframes lf-blink{50%{opacity:0}}
.lf-open-zigzag.lf-out .lf-sig{transform:translate(-50%,-56%) scale(1.03);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .35s ease .15s,filter .35s ease .15s}
.lf-out .lf-sig{transform:translate(-50%,-58%) scale(1.07);opacity:0;filter:blur(8px)}
.lf-out .lf-back{opacity:0;transition:opacity .6s ease .1s}
.lf-out .lf-back svg{scale:1.25;transition:scale 1s cubic-bezier(.22,1,.36,1)}
@media(min-width:701px) and (max-aspect-ratio:1/1){.lf-sig{--lw:min(64vw,92vh,760px)}}
@media(max-width:700px){.lf-sig{--lw:min(82vw,92vh)}.lf-back{width:128vw}.lf-studios{font-size:max(12px,calc(var(--lw)*.04));letter-spacing:.5em;padding-left:.5em}}

@media(prefers-reduced-motion:reduce){.moe-loader-fx *{animation:none!important;transition:none!important}.lf-main img,.lf-main b{clip-path:none}.lf-sub,.lf-cred span{opacity:1}.moe-loader-fx.is-done{opacity:0;transition:opacity .4s}}
/* The site behind the loader waits: header and hero entrances start when the screen opens (loader-fx.js). */
html.moe-intro :is(header,.hero),html.moe-intro :is(header,.hero) *{animation-play-state:paused!important}
/* Return visits: the finished lockup fades in, then the screen opens through the O (loader-fx.js still()). */
.lf-still .lf-sig{animation:lf-sting .3s ease backwards}@keyframes lf-sting{from{opacity:0}}