.mm-intro-lock,
.mm-intro-lock body{overflow:hidden}

.mm-intro{
  position:fixed;
  inset:0;
  z-index:9998;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#0D213D;
  background:
    radial-gradient(circle at 22% 18%, rgba(22,125,82,.13), transparent 34%),
    radial-gradient(circle at 78% 78%, rgba(13,33,61,.09), transparent 38%),
    linear-gradient(rgba(13,33,61,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,33,61,.055) 1px, transparent 1px),
    #FAF6EC;
  background-size:auto, auto, 32px 32px, 32px 32px, auto;
  isolation:isolate;
}

.mm-intro::before{
  content:'';
  position:absolute;
  inset:clamp(18px,4vw,54px);
  border:1px solid rgba(13,33,61,.1);
  border-radius:20px;
  pointer-events:none;
}

.mm-intro__shell{
  position:relative;
  z-index:1;
  width:min(1180px, calc(100% - 44px));
  text-align:center;
}

.mm-intro__label{
  margin:0 0 22px;
  color:#4F5A78;
  font-family:'IBM Plex Mono',Consolas,monospace;
  font-size:clamp(.66rem,1.2vw,.76rem);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.mm-intro__stage{
  position:relative;
  width:100%;
  aspect-ratio:1888 / 813;
  margin:auto;
  filter:drop-shadow(0 18px 24px rgba(13,33,61,.08));
}

.mm-intro__part{
  position:absolute;
  display:block;
  width:var(--part-w);
  height:var(--part-h);
  left:var(--part-x);
  top:var(--part-y);
  object-fit:contain;
  transform-origin:center;
  will-change:transform,opacity,filter;
}

.mm-intro__final{
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:auto;
  opacity:0;
  transform:translate(-50%,-50%) scale(.96);
  filter:drop-shadow(0 16px 28px rgba(13,33,61,.1));
  will-change:transform,opacity,filter;
}

.mm-intro__proof{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:30px;
  margin-top:18px;
  padding:5px 10px;
  border:1px solid rgba(13,33,61,.12);
  border-radius:999px;
  background:rgba(255,255,255,.64);
  color:#4F5A78;
  font-family:'IBM Plex Mono',Consolas,monospace;
  font-size:clamp(.62rem,1.1vw,.72rem);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.mm-intro__proof span{color:#167D52}

.mm-intro__skip{
  position:absolute;
  right:max(16px, env(safe-area-inset-right));
  top:max(16px, env(safe-area-inset-top));
  z-index:3;
  min-height:44px;
  padding:9px 14px;
  border:1px solid rgba(13,33,61,.16);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#0D213D;
  box-shadow:0 10px 26px rgba(13,33,61,.08);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.mm-intro__skip:hover{border-color:rgba(22,125,82,.42);color:#167D52}
.mm-intro__skip:focus-visible{outline:3px solid rgba(22,125,82,.32);outline-offset:3px}

.mm-intro--lightweight .mm-intro__part,
.mm-intro--lightweight .mm-intro__proof{display:none}

body.mm-home-reveal main,
body.mm-home-reveal .site-header,
body.mm-home-reveal .footer{
  opacity:0;
  transform:translate3d(0,10px,0) scale(.998);
}

@media(max-width:760px){
  .mm-intro__shell{width:calc(100% - 24px)}
  .mm-intro__label{margin-bottom:14px}
  .mm-intro__stage{width:124%;margin-left:-12%}
  .mm-intro__proof{margin-top:12px}
}

@media(max-width:480px){
  .mm-intro::before{inset:10px;border-radius:14px}
  .mm-intro__stage{width:142%;margin-left:-21%}
  .mm-intro__final{width:40%}
}

@media(prefers-reduced-motion:reduce){
  .mm-intro__part,.mm-intro__proof{display:none}
  .mm-intro__final{opacity:1}
}