/* Slop laboratory — kinetic portfolio layer. */
:root { --bg:#0c0b09;--surface:#15130f;--surface-2:#1d1a15;--line:#302d23;--ink:#f4f0e6;--muted:#aaa697;--slop-text:#c6f432;--on-slop:#141807;color-scheme:dark }
body { background-image:radial-gradient(ellipse at 80% 0%,#202512 0,transparent 45%); }
.wrap {max-width:1480px}
.nav {background:#0c0b09e8;border-bottom:1px solid var(--line)}
.nav .wrap {height:76px}
.brand:before {content:'✳';display:inline-block;color:var(--slop);margin-right:10px;font-size:30px;vertical-align:middle}
.nav a.link {color:var(--ink);font-size:13px}
.hero {min-height:850px;min-height:100svh;align-items:center;border-bottom:1px solid var(--line)}
.hero:before {content:'';position:absolute;inset:0;z-index:-2;background-image:linear-gradient(#c6f43208 1px,transparent 1px),linear-gradient(90deg,#c6f43208 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(black,transparent)}
.hero .wrap {padding-top:170px;padding-bottom:150px}
.hero h1 {position:relative;max-width:9ch;font-size:clamp(90px,12vw,180px);line-height:.83;mix-blend-mode:normal;color:var(--ink);letter-spacing:-.075em}
.hero h1 em {color:var(--slop);display:inline-block}
.hero h1 .outline {color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.lab-label {display:flex;align-items:center;gap:10px;margin-bottom:30px;font:11px var(--mono);letter-spacing:.13em;color:var(--muted)}
.lab-label:before {content:'';width:7px;height:7px;border-radius:50%;background:var(--slop);box-shadow:0 0 14px var(--slop);animation:blink 2s infinite}
.lede {max-width:365px;font-size:16px;line-height:1.65;margin-top:28px}
.lede strong {display:block;margin-top:5px}
.hero .actions {gap:16px;margin-top:28px;max-width:460px}
.btn {border-radius:8px;font-size:14px;min-height:52px;padding:0 22px}
.tlink {font-size:14px}
.specimen {position:absolute;width:62%;height:90%;right:-6%;top:7%;z-index:-1;pointer-events:none}
.specimen canvas {width:100%;height:100%;display:block}
.orbit-label {position:absolute;right:8%;top:21%;font:10px var(--mono);color:var(--muted);letter-spacing:.15em}
.orbit-label:after {content:'';display:block;width:90px;height:40px;border-top:1px solid #6b763a;border-right:1px solid #6b763a;margin:12px 0 0 -40px;transform:skewX(-25deg)}
.hero-bottom {position:absolute;bottom:0;left:0;right:0;border-top:1px solid var(--line);background:#0c0b09aa}
.hero-bottom .wrap {padding-block:18px;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:auto}
.lab-controls {display:flex;gap:10px;align-items:center}
.lab-controls button,.random-button {border:1px solid #605f43;background:transparent;color:var(--ink);font:11px var(--mono);padding:12px 16px;min-height:44px;cursor:pointer;border-radius:5px}
.lab-controls button:hover,.random-button:hover {background:var(--slop);color:var(--on-slop);border-color:var(--slop)}
.lab-controls button[aria-pressed=true] {background:var(--slop);color:var(--on-slop)}
.lab-status {font:10px var(--mono);letter-spacing:.1em;color:var(--muted)}
.ticker {background:var(--slop);color:var(--on-slop);overflow:hidden;padding:17px 0;transform:rotate(-1.3deg) scale(1.01);margin:0 0 12px}
.ticker-track {display:flex;width:max-content;animation:marquee 32s linear infinite;font-size:17px;font-weight:800;letter-spacing:-.02em;gap:40px}
.ticker-track span {white-space:nowrap}
.ticker-track b {margin-left:40px}
.head h2 {font-size:clamp(42px,6vw,82px);letter-spacing:-.065em}
.head {border-top:1px solid var(--line);padding-top:28px}
.feature {border-radius:12px;grid-template-columns:1.35fr 1fr}
.feature .shot {min-height:480px}
.feature h3 {font-size:clamp(50px,6vw,90px)}
.feature .when:before {content:'FRESH FROM THE MACHINE / ';color:var(--slop);font-size:10px}
.feature .info {background:radial-gradient(ellipse at 100% 0,#c6f43213,transparent 70%)}
.card {border-radius:10px;transition:border-color .3s,box-shadow .3s,transform .4s;will-change:auto}
.card:hover {transform:translateY(-8px) rotate(-.5deg);box-shadow:0 24px 70px -35px #c6f43666}
.card .shot {overflow:hidden}
.card .shot img {transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
.card:hover .shot img {transform:scale(1.06)}
.card .body {padding:24px}
.card h3 {font-size:34px;letter-spacing:-.045em}
.filter {border-radius:7px;flex-wrap:wrap}
.filter button {border-radius:4px}
.catalogue-tools {display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.random-button {color:var(--slop)}
.platform {gap:clamp(30px,8vw,120px)}
.panel {border-radius:10px}
footer {background:var(--slop);color:var(--on-slop);overflow:hidden}
footer .big-link span,footer .fine {color:#384710}
footer .big-link:hover span {color:#000}
footer .octo {background:#101209;border-radius:50%;margin:28px}
.scroll-cue {display:none}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after {animation-play-state:paused!important;scroll-behavior:auto!important}
body.motion-paused .reveal {opacity:1;transform:none}
body.chaos .hero h1 em {animation:jelly 1.3s ease-in-out infinite}
@keyframes marquee {to{transform:translateX(-50%)}}
@keyframes blink {50%{opacity:.35}}
@keyframes jelly {50%{transform:skewX(-5deg) scaleY(1.07)}}
@media(min-width:1600px){.specimen{right:0;width:57%}}
@media(max-width:900px){
 .hero{min-height:1000px}.hero .wrap{padding-top:125px;padding-bottom:430px}
 .hero h1{font-size:clamp(82px,15vw,135px);max-width:11ch}
 .lede{max-width:390px}.specimen{width:75%;height:65%;right:-15%;top:32%}
 .orbit-label{top:58%;right:8%}.hero-bottom .wrap{padding-block:14px}
 .feature .shot{min-height:340px}
}
@media(max-width:560px){
 .nav .wrap{height:65px;gap:15px}.brand{font-size:18px}.brand:before{font-size:24px}
 .hero{min-height:1020px}.hero .wrap{padding-top:112px;padding-bottom:440px}
 .hero h1{font-size:clamp(76px,19vw,108px)}.lab-label{font-size:9px}
 .specimen{width:115%;height:48%;right:-22%;top:48%}.orbit-label{top:65%;right:6%;font-size:8px}
 .hero-bottom .wrap{display:block}.lab-status{display:block;margin-bottom:10px;font-size:9px}
 .lab-controls{justify-content:space-between}.lab-controls button{flex:1;font-size:10px;padding-inline:9px}
 .hero .actions{align-items:flex-start;flex-direction:column;gap:10px}
 .lede{font-size:15px;max-width:330px}.feature .shot{min-height:240px}
 .filter button{padding-inline:12px}.head h2{font-size:48px}.card h3{font-size:30px}
 footer .octo{margin:24px auto}.ticker{padding:12px 0}.ticker-track{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.hero h1 em{animation:none!important}}
.motion-paused [data-fx]:not(.hero) canvas{display:none}.motion-paused [data-fx] .fx-fallback{opacity:1}

html {overflow-x:clip}
.hero .hero-bottom .wrap {padding-top:18px;padding-bottom:18px}
@media(max-width:560px){.hero .hero-bottom .wrap{padding-top:14px;padding-bottom:14px}}