/* Scoped to the top logo. The untouched master is always the resting/fallback state. */
.site-header > .logo{position:relative;isolation:isolate}
.site-header > .logo > svg{opacity:1}
.site-header > .logo .logo-motion{position:absolute;inset:0;display:block;visibility:hidden;perspective:var(--logo-perspective,520px);perspective-origin:50% 44%;pointer-events:none;transform-style:preserve-3d;--lm-knock:#fff;--lm-ink:#2b2b2b}
.site-header > .logo.logo-is-moving > svg{opacity:0}
.site-header > .logo.logo-is-moving .logo-motion{visibility:visible}

/* The book fold. Leaf B hangs off leaf A's right edge, so the seam is a real hinge:
   as A compresses about its left edge, B unfolds out of the seam and the mark keeps its width. */
.lm-exit{position:absolute;inset:0;transform-origin:50% 0%;transform-style:preserve-3d;will-change:transform,opacity}
.lm-fold{position:absolute;inset:0;transform-origin:50% 50%;transform-style:preserve-3d;will-change:transform}
.lm-leaf{position:absolute;top:0;width:100%;height:100%;transform-origin:left center;transform-style:preserve-3d;will-change:transform}
.lm-leaf-a{left:0}
.lm-leaf-b{left:100%}
.lm-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:filter}
.lm-sheet{position:absolute;inset:0;will-change:opacity}
.lm-sheet > svg{width:100%;height:100%;display:block;overflow:visible}

/* The vertical deal. Outer hinges the plate away over the top edge (or carries the landing
   follow-through); inner hinges the plate up out of the bottom edge. */
.lm-card{position:absolute;inset:0;transform-origin:50% 0%;transform-style:preserve-3d;opacity:0;will-change:transform,opacity}
.lm-card--land{transform-origin:50% 50%}
.lm-card-in{position:absolute;inset:0;transform-origin:50% 100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,filter}
.lm-card-in > svg{width:100%;height:100%;display:block;overflow:visible}

/* States. currentColor keeps the mark correct on the themed project headers. */
.lm-red .lm-sil,.lm-red .lm-frame{fill:currentColor}
.lm-red .lm-glyph{fill:var(--lm-knock)}
.lm-wire .lm-sil{fill:none}
.lm-wire .lm-frame,.lm-wire .lm-glyph{fill:currentColor}
.lm-paper .lm-sil{fill:var(--lm-knock)}
.lm-paper .lm-frame,.lm-paper .lm-glyph{fill:currentColor}
.lm-char .lm-sil{fill:var(--lm-ink)}
.lm-char .lm-frame{fill:currentColor}
.lm-char .lm-glyph{fill:var(--lm-knock)}
.lm-glyph{transform-box:fill-box;transform-origin:center}

@media(prefers-reduced-motion:reduce){
  .site-header > .logo.logo-is-moving > svg{opacity:1}
  .site-header > .logo .logo-motion{display:none!important}
}
.site-header > .logo-motion-toggle{position:absolute;width:23px;height:23px;display:grid;place-items:center;color:var(--ink);opacity:0;transition:opacity .15s;z-index:2}
.logo-motion-toggle svg{width:13px;height:13px}
.site-header > .logo:hover + .logo-motion-toggle,.site-header > .logo:focus-visible + .logo-motion-toggle,.site-header > .logo-motion-toggle:hover,.site-header > .logo-motion-toggle:focus-visible{opacity:.65}
@media(hover:none){.site-header > .logo-motion-toggle{opacity:.45}}
@media(prefers-reduced-motion:reduce){.site-header > .logo-motion-toggle{display:none}}

/* The resting plate matches the loop's red face, including reduced motion. */
.site-header>.logo,.themed-project .site-header>.logo{color:var(--red)}
.site-header>.logo::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;clip-path:polygon(0 0,85.3061% 0,100% 32.7273%,100% 100%,8.77551% 100%,0 80.4545%)}
.site-header>.logo>svg>path:not(:first-child){fill:#fff}
.site-header>.logo.logo-is-moving::before{opacity:0}
@media(prefers-reduced-motion:reduce){.site-header>.logo.logo-is-moving::before{opacity:1}}