/* MAKBY motion layer - v3.7 - 17 Oct 2026
   Loaded after style.css and never edits it. Panels appear whole, one after another, and their
   shadow comes off the page; only the page title is printed line by line. Smooth, short waits.
   Classes from the inline head snippet: mo-js, mo-live (page really shown), mo-again (home opening seen).
   Everything that moves is inside prefers-reduced-motion: no-preference. */

@property --mo-p{syntax:'<percentage>';inherits:true;initial-value:106%}
@property --mo-mk{syntax:'<color>';inherits:false;initial-value:transparent}

:root{--mo-snap:cubic-bezier(.2,.9,.25,1);--mo-ease:cubic-bezier(.25,.8,.25,1);--mo-turn:cubic-bezier(.65,0,.35,1);--mo-thud:cubic-bezier(.3,1.35,.5,1)}
@supports (animation-timing-function:linear(0,1)){:root{--mo-thud:linear(0,.62 16%,1.06 30%,.985 46%,1.005 64%,1)}}

/* ============ finishes: static, always on ============ */
:root{--mo-grain: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%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E")}
body{background-image:var(--mo-grain)}
p{text-wrap:pretty}
html{overflow-x:clip}
.page-hero.te-bg:not(.flyer-hero){background:linear-gradient(100deg,#ffe5d6 46%,rgba(255,229,214,0) 90%),radial-gradient(circle,rgba(203,56,42,.3) 1.3px,transparent 1.8px) 0 0/10px 10px,#ffe5d6}
@media(max-width:760px){.page-hero.te-bg:not(.flyer-hero){background:linear-gradient(100deg,#ffe5d6 62%,rgba(255,229,214,0) 100%),radial-gradient(circle,rgba(203,56,42,.3) 1.3px,transparent 1.8px) 0 0/10px 10px,#ffe5d6}}
.cta{-webkit-mask:radial-gradient(circle at 9px 100%,#0000 6px,#000 6.5px) 0 0/18px 100% repeat-x;mask:radial-gradient(circle at 9px 100%,#0000 6px,#000 6.5px) 0 0/18px 100% repeat-x}
.cta .btn{box-shadow:4px 4px 0 var(--ink)}
@media(max-width:760px){.nav-links .btn{display:inline-flex;align-self:flex-start;margin-top:10px;padding:11px 22px}}

/* step numbers ("01", "02"...) are removed when the layer is applied; this hides any that slip through */
.step>b:first-child{display:none}

/* buttons lift under the pointer and press down on click */
@media(hover:hover){
 .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--red)}
 .btn.purple:hover{box-shadow:6px 6px 0 var(--purple)}
 .cta .btn:hover{box-shadow:6px 6px 0 var(--ink)}
 .pill:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--red);text-decoration:none}
}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--red)}
.btn.purple:active{box-shadow:0 0 0 var(--purple)}
.cta .btn:active{box-shadow:0 0 0 var(--ink)}
.filter:active,.model-tabs button:active{transform:scale(.96)}

/* text links fill with ink; menu and footer links get a drawn underline */
.text-link{--mo-fill:var(--ink);--mo-on:var(--paper);border-bottom:0;padding:0 3px 1px;margin:0 -3px;background:linear-gradient(var(--mo-fill),var(--mo-fill)) 0 100%/100% 1px no-repeat}
:is(.dark,.flyer-hero,.tissue-specification-hero,.specialist-cover,.studio-image-background,.journey-cover,.isomakby-cover,.picomakby-cover,.domomakby-cover) .text-link{--mo-fill:var(--paper);--mo-on:var(--ink)}
@media(hover:hover){.text-link:hover{background-size:100% 100%;color:var(--mo-on);text-decoration:none;text-shadow:none}}
@media(min-width:761px){
 .nav-links a:not(.btn){padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat}
 .nav-links a:not(.btn):hover,.nav-links a[aria-current=page]{background-size:100% 2px;text-decoration:none}
}
.footer-links a{padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat}
.footer-links a:hover{background-size:100% 1px;text-decoration:none}

/* FAQ: a plus sign that turns into a cross */
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+"/"";flex:none;font:800 2rem/.7 'Barlow Condensed','Arial Narrow',sans-serif;color:var(--red)}
.faq details[open] summary::after{transform:rotate(45deg)}

#model-detail,main section[id]{scroll-margin-top:20px}
.mo-hit{background-image:linear-gradient(transparent 60%,var(--mo-mk) 60%,var(--mo-mk) 92%,transparent 92%);background-repeat:no-repeat;background-size:100% 100%}
.mo-lens{position:relative;overflow:hidden}
.mo-lens-in{position:relative}

/* ============ microscope (Science page) ============ */
.mo-scope{margin:0}
.mo-scope-view{position:relative;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:#15141a;overflow:hidden}
.mo-scope-view img{display:block;width:100%;height:auto}
.mo-scope-ready .mo-scope-view{aspect-ratio:10/7;cursor:zoom-in;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mo-scope-ready .mo-scope-view.mo-scope-max{cursor:zoom-out}
.mo-scope-ready .mo-scope-view img{position:absolute;left:0;top:0;opacity:0;filter:grayscale(1) contrast(1.1)}
.mo-scope-ready .mo-scope-view img.on{opacity:1}
.mo-scope-ready .mo-scope-view::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(99,64,173,.32),rgba(203,56,42,.16));mix-blend-mode:multiply;pointer-events:none}
.mo-scope-reticle{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(255,249,238,.5),rgba(255,249,238,.5)) 50% 50%/1px 30% no-repeat,linear-gradient(rgba(255,249,238,.5),rgba(255,249,238,.5)) 50% 50%/30% 1px no-repeat}
.mo-scope-mag{position:absolute;top:-2px;left:-2px;z-index:3;background:var(--red);color:var(--paper);border:2px solid var(--ink);padding:5px 13px 6px;font:800 1.7rem/1 'Barlow Condensed','Arial Narrow',sans-serif}
.mo-scope-scale{position:absolute;left:0;right:0;bottom:0;height:56px;z-index:3;background:linear-gradient(transparent,rgba(21,20,26,.88));pointer-events:none}
.mo-scope-bar{position:absolute;right:14px;bottom:12px;height:9px;border:2px solid var(--paper);border-top:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,249,238,.9) calc(10% - 1px) 10%)}
.mo-scope-len{position:absolute;right:14px;bottom:26px;color:var(--paper);font-style:normal;font-weight:700;font-size:13px}
.mo-scope-controls{margin:28px 0 0}
.mo-scope figcaption{margin-top:14px}

@media print{.mo-rv,.mo-ln,.mo-steps>.step>*{opacity:1!important;clip-path:none!important;animation:none!important}.mo-rv::after{display:none!important}.mo-js main h1{visibility:visible!important}}

/* ============ first entry on the home: the logo lands like a superhero ============ */
@property --mo-iris{syntax:'<length>';inherits:false;initial-value:0px}
html.mo-intro::after{content:"";position:fixed;inset:0;z-index:9998;background:var(--paper) var(--mo-grain);pointer-events:none;-webkit-mask:radial-gradient(circle at 50% 50%,#0000 var(--mo-iris),#000 calc(var(--mo-iris) + 1px));mask:radial-gradient(circle at 50% 50%,#0000 var(--mo-iris),#000 calc(var(--mo-iris) + 1px));animation:mo-gone 0s linear 4s forwards}
/* once motion.js runs (mo-intro-js) it owns the cover, until the end of the opening circle: a click lands on it and skips, instead of hitting a link that is still hidden */
html.mo-intro.mo-intro-js::after{animation:none;pointer-events:auto}
html.mo-intro.mo-iris::after{animation:mo-iris .62s cubic-bezier(.55,0,.8,.3) forwards}
html.mo-intro .site-header .header-brand{visibility:hidden;animation:mo-show 0s linear 4s forwards}
html.mo-intro.mo-intro-js .site-header .header-brand{animation:none}
.mo-intro-stage{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.mo-intro-hero.site-header{position:fixed;margin:0;padding:0;border:0;background:none;transform-origin:50% 50%;will-change:transform}
.mo-intro-body{position:relative;width:100%;height:100%;transform-origin:50% 100%}
.mo-intro-hero .header-brand{visibility:visible!important;animation:none!important}
.mo-intro-lines{position:absolute;inset:0}
.mo-intro-lines i{position:absolute;bottom:108%;width:1px;margin-left:-.5px;background:var(--ink);border-radius:2px;opacity:.85}
.mo-intro-shadow{position:fixed;border-radius:50%;background:var(--ink);opacity:0}
/* the superhero lands in a comic panel; the old TV switches on, flickers and switches off */
.mo-intro-body>.header-brand{position:absolute;left:0;top:0}
.mo-intro-panel{position:fixed;opacity:0;overflow:visible}
.mo-intro-panel g{transform-box:fill-box;transform-origin:center}
.mo-tv-fringe{opacity:0}
.mo-tv-line{position:fixed;left:15vw;width:70vw;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--ink);box-shadow:0 0 12px 2px rgba(99,64,173,.55);opacity:0}
.mo-tv-scan{position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(32,31,37,.07) 0 1px,transparent 1px 4px);opacity:0}
.mo-tv-bar{position:fixed;background:repeating-linear-gradient(0deg,rgba(32,31,37,.4) 0 2px,rgba(255,249,238,.55) 2px 5px);opacity:0}
/* the glass: speed lines, the burst and the flying pieces are drawn on a canvas; when the glass breaks the paper cover goes */
.mo-glass-canvas{position:fixed;inset:0;width:100%;height:100%}
html.mo-intro.mo-cover-off::after{visibility:hidden}
/* the neon sign: a dark brick wall instead of the paper cover; the sign, and its light on the wall */
html.mo-intro.mo-intro-neon::after{background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(0,0,0,.8) 100%),url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='52'%3E%3Crect%20width='56'%20height='52'%20fill='%230b0a0f'/%3E%3Cg%20fill='%231c1920'%3E%3Crect%20x='1'%20y='1'%20width='54'%20height='24'%20rx='1.5'/%3E%3Crect%20x='-27'%20y='27'%20width='54'%20height='24'%20rx='1.5'/%3E%3Crect%20x='29'%20y='27'%20width='54'%20height='24'%20rx='1.5'/%3E%3C/g%3E%3Cg%20fill='%2325202b'%20opacity='.55'%3E%3Crect%20x='5'%20y='4'%20width='22'%20height='8'%20rx='1'/%3E%3Crect%20x='34'%20y='31'%20width='17'%20height='7'%20rx='1'/%3E%3Crect%20x='3'%20y='33'%20width='12'%20height='6'%20rx='1'/%3E%3C/g%3E%3C/svg%3E") 0 0/56px 52px,#0b0a0f}
.mo-neon-sign{position:fixed}
.mo-neon-part{position:absolute;inset:0;opacity:.07}
.mo-neon-part img{position:absolute;max-width:none;display:block}
.mo-neon-glow{position:fixed;border-radius:50%;background:radial-gradient(closest-side,rgba(255,54,208,.34),rgba(34,200,255,.13) 55%,transparent 100%);opacity:.07}
html.mo-intro.mo-tv-off::after{animation:mo-tv-off .42s cubic-bezier(.55,0,.8,.3) forwards;transform-origin:50% 50%}
@keyframes mo-tv-off{70%{transform:scaleY(.004)}to{transform:scaleY(.004) scaleX(0)}}
@keyframes mo-iris{to{--mo-iris:150vmax}}
@keyframes mo-gone{to{visibility:hidden}}
@keyframes mo-show{to{visibility:visible}}

/* ============ drawings: workflow icons (home), print band (bioprinter pages), bioprinting tip over the home video ============ */
.step>.mo-icon{display:block;width:64px;height:64px;margin:0 0 4px;overflow:visible}
.mo-icon .mo-acc{stroke:#ff7965}
.mo-icon .mo-thin{stroke-width:1.4}
@media(max-width:760px){.step>.mo-icon{width:56px;height:56px}}
.mo-print{display:none}
.mo-js .mo-print{display:block;height:36px;margin:0 0 -10px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mo-print svg{display:block;overflow:visible}
.mo-print svg *{pointer-events:none}
/* on the extrusion printers the drawn head is the pointer while the visitor prints (motion.js, printers) */
.mo-print-live[data-mode=extrusion] svg,.mo-print-live[data-mode=multimodal] svg{cursor:none}
/* home video: the pointer is a bioprinting tip, and where it moves it lays a filament of biomaterial (motion.js, mo-printing) */
.mo-printing .hero-video{cursor:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%20stroke-linejoin=%22round%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M8%202.5h16M10%203h12v10H10zM12%2013h8v3.2l-3.3%2013.6h-1.4L12%2016.2z%22%20fill=%22none%22%20stroke=%22%23fff9ee%22%20stroke-width=%223.4%22/%3E%3Cpath%20d=%22M10%203h12v10H10z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M11.2%207.5h9.6v4.9h-9.6z%22%20fill=%22%23cb382a%22/%3E%3Cpath%20d=%22M8%202.5h16%22%20stroke=%22%23201f25%22%20stroke-width=%221.6%22/%3E%3Cpath%20d=%22M12%2013h8v3.2l-3.3%2013.6h-1.4L12%2016.2z%22%20fill=%22%236340ad%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M12%2016.2h8%22%20stroke=%22%23201f25%22%20stroke-width=%221%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2230.4%22%20r=%221.2%22%20fill=%22%23cb382a%22/%3E%3C/svg%3E") 16 31,crosshair}
.mo-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ============ tissue pages: comic loupe on the header picture (motion.js, loupe): the pointer is a microscope objective ============ */
.mo-loupe-on{position:relative}
.mo-loupe-on>.container{position:relative;z-index:1}
.mo-loupe{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mo-loupe-on.mo-loupe-fine{cursor:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%20stroke-linejoin=%22round%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M11%201.5h10v4H11zM9%205.5h14v5H9zM10%2010.5h12v9H10zM10%2019.5h12l-3.5%209h-5z%22%20fill=%22none%22%20stroke=%22%23fff9ee%22%20stroke-width=%223.6%22/%3E%3Cpath%20d=%22M11%201.5h10v4H11z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M9%205.5h14v5H9z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M11.8%206.3v3.4M14.2%206.3v3.4M16.6%206.3v3.4M19%206.3v3.4M21.4%206.3v3.4%22%20stroke=%22%23201f25%22%20stroke-width=%221%22/%3E%3Cpath%20d=%22M10%2010.5h12v9H10z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M10.6%2012.6h10.8v3.2H10.6z%22%20fill=%22%23cb382a%22/%3E%3Cpath%20d=%22M10%2019.5h12l-3.5%209h-5z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M12%2024.6h8%22%20stroke=%22%236340ad%22%20stroke-width=%221.2%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2229.2%22%20r=%221.7%22%20fill=%22%23201f25%22/%3E%3C/svg%3E") 16 30,crosshair}
.mo-loupe-on.mo-loupe-fine .container :is(a,button){cursor:pointer}
.mo-loupe-spot{position:absolute;left:0;top:0;width:32px;height:32px;background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%2032%2032%22%20stroke-linejoin=%22round%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M11%201.5h10v4H11zM9%205.5h14v5H9zM10%2010.5h12v9H10zM10%2019.5h12l-3.5%209h-5z%22%20fill=%22none%22%20stroke=%22%23fff9ee%22%20stroke-width=%223.6%22/%3E%3Cpath%20d=%22M11%201.5h10v4H11z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M9%205.5h14v5H9z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M11.8%206.3v3.4M14.2%206.3v3.4M16.6%206.3v3.4M19%206.3v3.4M21.4%206.3v3.4%22%20stroke=%22%23201f25%22%20stroke-width=%221%22/%3E%3Cpath%20d=%22M10%2010.5h12v9H10z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M10.6%2012.6h10.8v3.2H10.6z%22%20fill=%22%23cb382a%22/%3E%3Cpath%20d=%22M10%2019.5h12l-3.5%209h-5z%22%20fill=%22%23fff9ee%22%20stroke=%22%23201f25%22%20stroke-width=%221.3%22/%3E%3Cpath%20d=%22M12%2024.6h8%22%20stroke=%22%236340ad%22%20stroke-width=%221.2%22/%3E%3Ccircle%20cx=%2216%22%20cy=%2229.2%22%20r=%221.7%22%20fill=%22%23201f25%22/%3E%3C/svg%3E") no-repeat}
.mo-loupe-lens{position:absolute;border-radius:50%;background-repeat:no-repeat;background-color:var(--ink);border:5px solid var(--paper);box-shadow:0 0 0 2px var(--ink),8px 8px 0 2px var(--ink)}
.mo-diving .mo-loupe{visibility:hidden}
@media print{.mo-loupe{display:none}}

/* ============ motion ============ */
@media (prefers-reduced-motion:no-preference){

/* between pages: the new page turns in from the right (from the left going back) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:.42s;animation-timing-function:var(--mo-turn);animation-fill-mode:both}
::view-transition-old(root){animation-name:mo-turn-out}
::view-transition-new(root){animation-name:mo-turn-in}
html:active-view-transition-type(back)::view-transition-old(root){animation-name:mo-turn-out-back}
html:active-view-transition-type(back)::view-transition-new(root){animation-name:mo-turn-in-back}
/* Preclinical NAMs <-> tissue pages: instead of the page turn, the tissue card opens into the page header, as if diving into the tissue (and back out) */
html:active-view-transition-type(dive)::view-transition-old(root){animation:mo-fade-out .3s ease both}
html:active-view-transition-type(dive)::view-transition-new(root){animation:mo-fade-in .32s ease .1s both}
.tissue-choice.mo-diving>:is(a,button),.tissue-specification-hero.mo-diving>.container{visibility:hidden}
::view-transition-group(mo-dive){animation-duration:.55s;animation-timing-function:var(--mo-turn);overflow:clip}
::view-transition-old(mo-dive),::view-transition-new(mo-dive){width:100%;height:100%;object-fit:cover;animation-duration:.55s;animation-timing-function:var(--mo-turn)}

/* interaction feedback */
.btn{transition:transform .16s var(--mo-snap),box-shadow .16s var(--mo-snap)}
.btn:active{transition-duration:.05s}
.pill,.filter,.model-tabs button{transition:transform .14s var(--mo-snap),box-shadow .14s var(--mo-snap),background-color .15s,color .15s}
.text-link{transition:background-size .2s var(--mo-snap),color .2s}
.nav-links a:not(.btn),.footer-links a{transition:background-size .22s var(--mo-snap)}
.faq summary::after{transition:transform .26s var(--mo-snap)}
.mo-scope-bar{transition:width .5s var(--mo-snap)}

/* coloured bands open from a panel to the full page as they scroll in; the home video zooms like a lens */
@supports (animation-timeline:view()){
 main :is(.section.dark,.section.nam-bg,.cta){animation:mo-band linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
 .mo-lens{view-timeline:--mo-lens block}
 .mo-lens-in{animation:mo-lens linear both;animation-timeline:--mo-lens;animation-range:cover 50% cover 100%}
}

/* panels appear whole, one after another, and their shadow comes off the page */
.mo-rv:not(.mo-in){opacity:0}
.mo-rv.mo-in{animation:mo-rise .4s var(--mo-ease) var(--mo-d,0s) backwards}
.mo-rv.mo-draw.mo-in{animation:mo-panel .45s var(--mo-ease) var(--mo-d,0s) backwards}
.contact-box,.model-detail{--mo-sh:var(--purple)}

/* titles are printed line by line */
.mo-js main h1:not(.mo-split){visibility:hidden;animation:mo-failsafe 0s linear 2.5s forwards}
.mo-ln{display:block;width:fit-content;max-width:100%;position:relative;--mo-pd:.5s}
main h2 .mo-ln{--mo-pd:.4s}
.mo-ln[data-mo=wait]{clip-path:inset(0 100% 0 0)}
.mo-ln[data-mo=go]{clip-path:inset(-20% calc(100% - var(--mo-p)) -20% -.2em);animation:mo-pass var(--mo-pd) var(--mo-ease) var(--mo-d,0s) backwards}
.mo-ln[data-mo=go]::after{content:"";position:absolute;top:6%;bottom:6%;left:clamp(0px,calc(var(--mo-p) - .1em),calc(100% - .1em));width:.1em;background:currentColor;animation:mo-head var(--mo-pd) var(--mo-ease) var(--mo-d,0s) both}
.mo-ln[data-mo=go] :is(.red,.purple-text){animation:mo-register .3s ease-out backwards;animation-delay:calc(var(--mo-d,0s) + var(--mo-pd) - .1s)}
:is(.red,.purple-text)>.mo-ln[data-mo=go]{animation:mo-pass var(--mo-pd) var(--mo-ease) var(--mo-d,0s) backwards,mo-register .3s ease-out calc(var(--mo-d,0s) + var(--mo-pd) - .1s) backwards}
.purple-text{--mo-reg:rgba(203,56,42,.5)}
.mo-ln[data-mo-wrap]::after{display:none}
/* section titles appear whole: only the page title is printed */
main h2 .mo-ln[data-mo=wait]{clip-path:none;opacity:0}
main h2 .mo-ln[data-mo=go]{clip-path:none;animation:mo-rise .42s var(--mo-ease) var(--mo-d,0s) backwards}
main h2 .mo-ln[data-mo=go]::after{display:none}
main h2 .mo-ln[data-mo=go] :is(.red,.purple-text){animation:none}

/* home opening, once per visit, about one second in all (held back while the landing intro plays) */
.mo-live:not(.mo-again):not(.mo-hold) .hero>div>.eyebrow{animation:mo-rise .4s var(--mo-ease) backwards}
.mo-live:not(.mo-again):not(.mo-hold) .hero>div>p{animation:mo-rise .42s var(--mo-ease) .35s backwards}
.mo-live:not(.mo-again):not(.mo-hold) .hero .actions{animation:mo-pop .35s var(--mo-ease) .6s backwards}
.mo-live:not(.mo-again):not(.mo-hold) .hero-art{animation:mo-panel .55s var(--mo-ease) .1s backwards}
.mo-live:not(.mo-again):not(.mo-hold) .hero-art .stamp{animation:mo-impact .42s var(--mo-thud) .55s backwards}
.mo-live:not(.mo-again):not(.mo-hold) .ticker .container>*{animation:mo-pop .35s var(--mo-ease) backwards}
.mo-live:not(.mo-again):not(.mo-hold) .ticker .container>:nth-child(1){animation-delay:.75s}
.mo-live:not(.mo-again):not(.mo-hold) .ticker .container>:nth-child(2){animation-delay:.9s}
.mo-live:not(.mo-again):not(.mo-hold) .ticker .container>:nth-child(3){animation-delay:1.05s}

/* the two journeys on the home: the one under the pointer comes forward, the other dims a little */
@media(hover:hover) and (pointer:fine){
 .journey-cover{transition:transform .28s var(--mo-snap),box-shadow .28s var(--mo-snap),filter .28s}
 .journey-cover.te:is(:hover,:focus-within){transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--red)}
 .journey-cover.nam:is(:hover,:focus-within){transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--purple)}
 .two:has(>.journey-cover:is(:hover,:focus-within))>.journey-cover:not(:hover,:focus-within){filter:saturate(.55) brightness(.85)}
}

/* steps: the line is drawn across, each step appears as the line reaches it */
.mo-steps>.step{border-top-color:transparent;position:relative}
.mo-steps>.step::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left}
.mo-steps:not(.mo-run)>.step>*{opacity:0}
.mo-run>.step::before{transform:none;animation:mo-draw .32s var(--mo-ease) backwards;animation-delay:calc(var(--mo-i,0)*.22s)}
.mo-run>.step>*{animation:mo-pop .35s var(--mo-ease) backwards;animation-delay:calc(var(--mo-i,0)*.22s + .18s)}
/* home workflow: each drawing is inked line by line as its step appears */
.mo-run>.step>.mo-icon{animation:none}
.mo-run>.step>.mo-icon :is(path,circle,ellipse){stroke-dasharray:1 1;animation:mo-ink .5s var(--mo-ease) backwards;animation-delay:calc(var(--mo-i,0)*.22s + .12s + var(--mo-k,0)*.07s)}

/* atlas: the contents of the panel come in again for the new tissue */
.model-detail.mo-swap>*{animation:mo-rise .32s var(--mo-ease) backwards}
.model-detail.mo-swap>*+*{animation-delay:.06s}

/* phone menu: the entries appear one after the other */
@media(max-width:760px){
 .nav-links.open>*{animation:mo-pop .26s var(--mo-ease) backwards}
 .nav-links.open>:nth-child(2){animation-delay:.04s}
 .nav-links.open>:nth-child(3){animation-delay:.08s}
 .nav-links.open>:nth-child(4){animation-delay:.12s}
 .nav-links.open>:nth-child(5){animation-delay:.16s}
}

/* questions open smoothly where the browser can animate to an automatic height */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
 :is(.faq,.legal-full) details{interpolate-size:allow-keywords}
 :is(.faq,.legal-full) details::details-content{block-size:0;overflow-y:clip;transition:block-size .32s var(--mo-snap),content-visibility .32s allow-discrete}
 :is(.faq,.legal-full) details[open]::details-content{block-size:auto}
}

/* tissue pages: the loupe pops in */
.mo-loupe-in .mo-loupe-lens{animation:mo-impact .42s var(--mo-thud) backwards}
.mo-loupe-in .mo-loupe-spot{animation:mo-pop .3s var(--mo-ease) .12s backwards}

/* reaching a section through an in-page link: a marker stroke under its title */
.mo-hit{animation:mo-marker 1.6s var(--mo-snap) var(--mo-d,0s) both}

/* microscope extras */
.mo-scope-view.mo-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;background:var(--paper);animation:mo-scan .55s linear both}
.mo-scope-mag.mo-hit-mag{animation:mo-impact .34s var(--mo-thud)}
}

/* ============ keyframes ============ */
@keyframes mo-fade-out{to{opacity:0}}
@keyframes mo-fade-in{from{opacity:0}}
@keyframes mo-ink{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}to{stroke-dashoffset:0}}
@keyframes mo-failsafe{to{visibility:visible}}
@keyframes mo-rise{0%{opacity:0;transform:translateY(10px)}}
@keyframes mo-panel{0%{opacity:0;transform:translateY(14px) scale(.985);box-shadow:0 0 0 var(--mo-sh,var(--ink))}55%{opacity:1}}
@keyframes mo-pop{0%{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes mo-impact{0%{opacity:0;transform:rotate(-10deg) scale(1.4)}30%{opacity:1}}
@keyframes mo-pass{from{--mo-p:-6%}to{--mo-p:106%}}
@keyframes mo-head{0%,85%{opacity:1}100%{opacity:0}}
@keyframes mo-register{from{text-shadow:.05em .035em 0 var(--mo-reg,rgba(99,64,173,.5))}to{text-shadow:0 0 0 transparent}}
@keyframes mo-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mo-marker{0%{background-size:0 100%;--mo-mk:rgba(203,56,42,.42)}28%{background-size:100% 100%;--mo-mk:rgba(203,56,42,.42)}72%{background-size:100% 100%;--mo-mk:rgba(203,56,42,.42)}100%{background-size:100% 100%;--mo-mk:rgba(203,56,42,0)}}
@keyframes mo-turn-out{to{clip-path:inset(0 100% 0 0)}}
@keyframes mo-turn-in{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes mo-turn-out-back{to{clip-path:inset(0 0 0 100%)}}
@keyframes mo-turn-in-back{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes mo-band{from{clip-path:inset(0 3% 0 3%)}to{clip-path:inset(0)}}
@keyframes mo-lens{to{scale:1.2}}
@keyframes mo-scan{from{top:0;opacity:.9}to{top:100%;opacity:0}}
/* ---------- 16 Oct 2026, changes asked for by MAKBY: the looping videos have no pause button any more (the buttons stay in the page, app.js needs them to start the videos); Makby Studio is named under the software title like the bioprinters; the comic and the Motion Lab videos on Science ---------- */
.hero-video-toggle,.about-video-toggle,.scaffold-video-toggle{display:none!important}
.mo-studio-name{margin-top:18px}
.studio-image-background .detail-name:hover{color:#ffd5c3}
.mo-video-figure{margin:0}
.mo-video{margin-top:0}
.mo-lab .section-head>.text-link{margin-top:16px}