/* MOQ signature opening — "Movement of Qube"
   Reusable on every collab landing page. Needs intro.js.
   Config on <html>: data-moq-series="01" data-moq-artist="Ron English" */
:root{
  --moq-ink:#0A0A0A;
  --moq-line:#5E5A52;
  --moq-text:#8C877D;
  --moq-bone:#F2EEE6;
  --moq-grin:#FFD400;
  --moq-rec:#FF4A1C;
  --moq-mono:'JetBrains Mono',ui-monospace,monospace;
}
/* Pre-cover so the page never flashes before intro.js builds the overlay */
html.has-intro:not(.moq-ready) body::after{content:"";position:fixed;inset:0;background:var(--moq-ink);z-index:199}
html.has-intro body{overflow:hidden}
html.moq-done body{overflow:auto}

.moq-intro{position:fixed;inset:0;z-index:200;pointer-events:auto;font:400 11px/1.5 var(--moq-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--moq-text)}
.moq-intro.gone{display:none}

/* Stage: the icon, centred on its inner window (the aperture) */
.moq-stage{position:absolute;left:50%;top:50%;width:min(34vmin,300px);aspect-ratio:470/440;transform:translate(-45%,-49.55%)}
.moq-rig{position:absolute;inset:0;transform-origin:45% 49.55%;will-change:transform}
.moq-aperture{position:absolute;left:19.79%;top:17.27%;width:50.43%;height:64.55%;background:var(--moq-ink);box-shadow:0 0 0 300vmax var(--moq-ink)}
.moq-mark{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.moq-mark .f,.moq-mark .t{fill:var(--moq-grin)}
.moq-mark .d{fill:var(--moq-ink)}
.moq-mark .b{fill:var(--moq-grin)}
.moq-mark .f{clip-path:inset(100% 0 0 0)}
.moq-mark .t,.moq-mark .d{opacity:0}
.moq-mark .b{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}

/* Viewfinder brackets around the stage */
.moq-vf{position:absolute;left:50%;top:50%;width:min(46vmin,400px);aspect-ratio:1;transform:translate(-50%,-50%) scale(0)}
.moq-vf i{position:absolute;width:18px;height:18px;border:1px solid var(--moq-line)}
.moq-vf i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.moq-vf i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.moq-vf i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.moq-vf i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.moq-count{position:absolute;left:50%;top:calc(50% + min(23vmin,200px) + 18px);transform:translateX(-50%);color:var(--moq-bone);font-variant-numeric:tabular-nums;opacity:0}

/* HUD */
.moq-hud{position:absolute;inset:20px;opacity:0}
.moq-hud .c{position:absolute;width:28px;height:28px;border:1px solid var(--moq-line)}
.moq-hud .c1{left:0;top:0;border-right:0;border-bottom:0}
.moq-hud .c2{right:0;top:0;border-left:0;border-bottom:0}
.moq-hud .c3{left:0;bottom:0;border-right:0;border-top:0}
.moq-hud .c4{right:0;bottom:0;border-left:0;border-top:0}
.moq-hud .tl{position:absolute;left:16px;top:14px}
.moq-hud .tl b{display:block;color:var(--moq-bone);font-weight:700}
.moq-hud .tr{position:absolute;right:16px;top:14px;display:flex;align-items:center;gap:8px;color:var(--moq-bone);font-variant-numeric:tabular-nums}
.moq-hud .tr i{width:7px;height:7px;border-radius:50%;background:var(--moq-rec);animation:moqBlink 1s steps(2) infinite}
.moq-hud .bl{position:absolute;left:16px;bottom:14px}
.moq-hud .br{position:absolute;right:16px;bottom:14px;display:flex;gap:18px;align-items:center;font-variant-numeric:tabular-nums}
.moq-skip{all:unset;cursor:pointer;color:var(--moq-bone);border-bottom:1px solid var(--moq-line);padding-bottom:1px}
.moq-skip:focus-visible{outline:2px solid var(--moq-grin);outline-offset:4px}
@keyframes moqBlink{50%{opacity:.15}}

/* Ruler: the "movement" scale */
.moq-ruler{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(320px,60vw);height:22px}
.moq-ruler .ticks{position:absolute;left:0;right:0;bottom:0;height:16px;display:flex;justify-content:space-between;align-items:flex-end}
.moq-ruler .ticks span{width:1px;height:8px;background:var(--moq-line);opacity:0}
.moq-ruler .ticks span:nth-child(5n+1){height:16px}
.moq-ruler .cur{position:absolute;left:0;top:-4px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid var(--moq-grin);transform:translateX(-50%)}

/* Page content waiting behind the intro */
html.has-intro .moq-enter{opacity:0;transform:translateY(28px)}
html.moq-done .moq-enter{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}

@media (max-width:640px){
  .moq-hud{inset:12px}
  .moq-hud .bl{display:none}
  .moq-ruler{width:44vw}
}
@media (prefers-reduced-motion:reduce){
  .moq-hud .tr i{animation:none}
  html.moq-done .moq-enter{transition:opacity .3s}
}