/* MOGEOSH / living matter V2 — CSS layer, no third-party assets */
:root{--liquid-ease:cubic-bezier(.18,.89,.23,1);--liquid-dark:#282d2a}
body{overflow-x:clip}
/* Motion control is always accessible, even without JavaScript */
.site-header .motion-toggle{border:1px solid rgba(38,41,39,.16);background:transparent;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:9px;color:#727971;padding:10px 13px;font:650 9px/1 system-ui,sans-serif;letter-spacing:.12em;min-height:37px;transition:background .35s,color .35s,border-color .35s;white-space:nowrap}
.site-header .motion-toggle:hover{background:#e9d9dd;border-color:#c8a1a9;color:#373c37}
.motion-led,.lab-kicker i,.lab-stage-live i{width:7px;height:7px;background:#a1b7a5;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px rgba(160,184,170,.13);flex:none}
.motion-toggle:focus-visible,.lab-button:focus-visible{outline-offset:4px}
html[data-motion="off"] .motion-led{background:#af8d93;box-shadow:none}
/* hero: floating network gently connects the body to the world */
.hero-art{cursor:crosshair;contain:paint}
.art-network-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:2;pointer-events:none;opacity:.72}
.art-interaction-note{position:absolute;z-index:4;left:36px;bottom:69px;font-size:9px;color:rgba(242,235,227,.53);letter-spacing:.15em;pointer-events:none}
.art-interaction-note span{margin-left:10px;color:#ddbac3}
.art-blob{backface-visibility:hidden}
.art-core{box-shadow:0 0 0 0 rgba(230,192,201,0);transition:box-shadow .5s ease}
.hero-art.is-awake .art-core{box-shadow:0 0 0 30px rgba(232,195,202,.055),0 0 0 84px rgba(232,195,202,.028)}
.hero-art .art-label{transition:translate .9s var(--liquid-ease)}
.hero-art:hover .art-label-top{translate:0 -5px}
.hero-art:hover .art-label-bottom{translate:0 5px}
/* cards react without changing document layout */
.project-card{isolation:isolate;transition:border-radius .85s var(--liquid-ease),filter .5s}
.project-card:hover{border-radius:9px 39px 12px 33px}
.project-card .project-visual{transition:filter .7s,clip-path .95s var(--liquid-ease)}
.project-card .project-card-copy{transition:background .6s var(--liquid-ease)}
.project-card .project-symbol .soft-dot{transition:transform .65s var(--liquid-ease)}
.project-card:hover .project-symbol .soft-dot{transform:scale(1.6) translateX(3px)}
.project-card::after{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at var(--shine-x,65%) var(--shine-y,35%),rgba(255,255,255,.12),transparent 24%);opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:9;transition:opacity .8s}
.project-card:hover::after{opacity:1}
.project-card:hover .project-visual{filter:saturate(1.07)}
.project-card .project-visual::before{content:"";position:absolute;inset:0;border:1px solid transparent;pointer-events:none;z-index:6;transition:border-color .45s}
.project-card:hover .project-visual::before{border-color:rgba(255,255,255,.2)}
.pill-button{isolation:isolate;overflow:hidden}
.pill-button::before{content:"";position:absolute;inset:0;background:rgba(232,191,202,.19);border-radius:55% 35% 58% 25%;transform:translate3d(-105%,0,0);transition:transform .8s var(--liquid-ease);pointer-events:none}
.pill-button:hover::before{transform:translate3d(0,0,0)}
.pill-button>span{position:relative;z-index:1;transition:translate .24s}
.pill-button:active{transform:scale(.975);border-radius:30px 21px 33px 16px}
.pill-button.is-magnetic>span{translate:var(--mag-x,0px) var(--mag-y,0px)}
/* SOPHIDEA receives proper typography without claiming original source app was renamed */
.project-ideas h3{font-size:clamp(47px,5.7vw,93px);letter-spacing:-.087em}
.project-ideas h3 span{color:#bd8b9a}
.ideas-question{font-size:clamp(150px,17vw,280px);color:#58434f;transition:transform .8s var(--liquid-ease)}
.project-ideas:hover .ideas-question{transform:translate(-50%,-50%) rotate(-7deg) scale(1.03)}
/* collaboration: restrained placeholder, not the friend's brand design */
.project-knapsack .project-card-copy{background:#ebe8e2}
.project-knapsack h3{font-size:clamp(45px,5.8vw,86px)}
.project-knapsack h3 span{color:#8e978c}
.visual-knapsack{background:#b6bcb1;color:#30372f;position:relative}
.visual-knapsack:after{content:"";position:absolute;width:70%;height:70%;border:1px solid rgba(41,52,44,.24);border-radius:49% 51% 59% 41%/47% 33% 67% 53%;left:15%;top:13%;animation:partner-turn 24s linear infinite alternate}
.partner-label,.partner-art-caption{position:absolute;z-index:3;left:35px;right:35px;letter-spacing:.16em;font-size:10px;font-weight:600;display:flex;justify-content:space-between}
.partner-label{top:32px}
.partner-art-caption{bottom:33px}
.partner-art-word{position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;font:600 clamp(130px,22vw,320px)/1 Georgia,serif;letter-spacing:-.1em;opacity:.8;white-space:nowrap}
.partner-art-word span{position:absolute;top:4%;font:500 65px system-ui,sans-serif;transform:translateY(var(--partner-arrow-y,0px));transition:transform .9s}
.project-knapsack:hover .partner-art-word span{--partner-arrow-y:-15px}
@keyframes partner-turn{to{transform:rotate(35deg);border-radius:37% 63% 41% 59%/57% 60% 40% 43%}}
/* physical lab */
.living-lab{display:grid;grid-template-columns:minmax(280px,.77fr) minmax(360px,1.23fr);align-items:stretch;gap:clamp(30px,4vw,74px);padding:clamp(95px,11vw,170px) clamp(22px,5.2vw,88px);background:#dedfd4;color:#30362f;isolation:isolate}
.lab-intro{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;min-width:0}
.lab-intro .section-index{color:#6d7a70;margin-bottom:32px}
.lab-kicker{display:inline-flex;gap:12px;align-items:center;font-size:10px;font-weight:650;letter-spacing:.13em;color:#808c7e;margin-bottom:26px}
.lab-intro h2{font-size:clamp(54px,5.6vw,91px);letter-spacing:-.08em;line-height:1.03;margin-bottom:30px;white-space:nowrap}
.lab-intro h2 em{color:#9f8c9a}
.lab-intro p{font-size:14px;line-height:1.87;color:#737d70;max-width:430px;margin-bottom:33px}
.lab-controls{display:flex;gap:9px;flex-wrap:wrap}
.lab-button{border:1px solid #303830;background:#303830;color:#f2f0e8;min-height:48px;border-radius:99px;padding:12px 18px;font-size:11px;font-weight:650;transition:border-radius .6s var(--liquid-ease),background .3s,transform .5s}
.lab-button span{margin-left:10px;font-size:16px}
.lab-button:hover{border-radius:17px 30px 14px 29px;transform:translateY(-2px)}
.lab-button:active{transform:scale(.97)}
.lab-button-outline{background:transparent;color:#303830;border-color:rgba(40,53,42,.35)}
.lab-button-outline:hover{background:#ced5c8}
.lab-caveat{display:block;color:#869085;font-size:10px;margin-top:23px}
.lab-stage{position:relative;min-height:530px;background:#282f2a;color:#eceae2;overflow:hidden;isolation:isolate;border-radius:4px;contain:paint}
.lab-stage:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(242,240,232,.029) 1px,transparent 1px),linear-gradient(90deg,rgba(242,240,232,.029) 1px,transparent 1px);background-size:64px 64px}
.lab-stage:after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(233,227,217,.07);pointer-events:none}
.lab-stage-top,.lab-stage-bottom{position:absolute;z-index:3;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;gap:15px;letter-spacing:.15em;font-size:9px;color:#b8c0b6;pointer-events:none}
.lab-stage-top{top:28px}.lab-stage-bottom{bottom:25px}
.lab-stage-live{display:flex;align-items:center;gap:11px}
.lab-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:crosshair;touch-action:none;display:block}
.lab-stage-cross{position:absolute;z-index:1;color:#94a69a;font-size:18px;font-weight:200;opacity:.45}
.cross-a{left:14%;top:25%}.cross-b{right:13%;bottom:21%}
/* partner info */
.partner-hero{background:#29322c;color:#f4efe8}
.partner-hero .detail-head h1{font-size:clamp(62px,8vw,135px)}
.partner-hero .detail-head h1 em{color:#b4c1ac}
.partner-hero-mark{font:400 clamp(200px,28vw,430px)/1 Georgia,serif;color:#b3c2ad;transform:rotate(-12deg);animation:partner-float 13s ease-in-out infinite alternate}
.partner-hero-mark span{font-size:.22em;vertical-align:top}
@keyframes partner-float{to{transform:translateY(-24px) rotate(6deg)}}
/* Freeze all ambient motion when requested or outside viewport; JS sets auto idle policy */
html[data-motion="quiet"] .art-blob,html[data-motion="quiet"] .ideas-liquid,html[data-motion="quiet"] .closing-liquid,html[data-motion="quiet"] .detail-orb{animation-duration:40s!important}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition-duration:0s!important;scroll-behavior:auto!important}
html[data-motion="off"] [data-reveal]{opacity:1!important;transform:none!important}
html[data-motion="off"] .art-network-canvas{opacity:.4}
html.is-hidden .art-blob,html.is-hidden .ideas-liquid,html.is-hidden .closing-liquid,html.is-hidden .detail-orb{animation-play-state:paused!important}
@media (max-width:1140px){.lab-intro h2{white-space:normal;font-size:clamp(54px,6vw,77px)}.site-header .motion-toggle{margin-left:auto;margin-right:17px}}
@media(max-width:860px){.living-lab{grid-template-columns:1fr}.lab-intro{align-items:flex-start}.lab-stage{min-height:455px}.site-header .motion-toggle{order:0;margin-left:auto;margin-right:14px}.site-header .mobile-menu-button{order:1}}
@media(max-width:560px){.motion-toggle .motion-text{font-size:8px}.site-header .motion-toggle{padding:9px 10px;margin-right:11px}.art-interaction-note{left:19px;bottom:57px}.living-lab{padding:93px 19px;gap:38px}.lab-intro h2{font-size:clamp(48px,12.6vw,72px)}.lab-stage{min-height:360px}.lab-stage-top,.lab-stage-bottom{left:17px;right:17px;font-size:7px}.lab-stage-top{top:20px}.lab-stage-bottom{bottom:19px}.lab-controls{width:100%}.lab-button{flex:1;padding:11px;min-height:50px;font-size:10px}.lab-button span{margin-left:4px}.project-ideas h3{font-size:clamp(48px,11vw,66px)}.project-knapsack h3{font-size:clamp(45px,10vw,63px)}.partner-art-word{font-size:230px}.partner-label,.partner-art-caption{left:22px;right:22px;font-size:8px}.partner-hero .detail-head h1{font-size:clamp(59px,11.5vw,90px)}.partner-hero-mark{font-size:260px}}
/* OS accessibility wins over manual settings */
@media(prefers-reduced-motion:reduce){.living-lab *, .living-lab *::before,.living-lab *::after{animation:none!important;transition:none!important}.art-network-canvas{opacity:.35}.project-card:hover{border-radius:0}.partner-hero-mark{animation:none!important}}
@media (pointer:coarse){.project-card:hover{border-radius:0}.project-card::after{display:none}.hero-art{cursor:auto}.lab-canvas{cursor:auto}}

.motion-asleep .art-blob,.motion-asleep .ideas-liquid,.motion-asleep .detail-orb,.motion-asleep .closing-liquid,.motion-asleep .partner-hero-mark,.motion-asleep::before,.motion-asleep::after{animation-play-state:paused!important}
html.is-hidden .project-visual *,html.is-hidden .partner-hero-mark{animation-play-state:paused!important}

html:not(.js) [data-reveal]{opacity:1!important;transform:none!important}

@media(max-width:360px){.site-header .motion-toggle{width:38px;min-width:38px;padding:0}.site-header .motion-toggle .motion-text{display:none}}
@media(pointer:coarse){.art-blob,.ideas-liquid,.closing-liquid,.detail-orb{animation-duration:26s!important}}