/* Motion and editorial imagery: each area has a different visual rhythm. */
:root{--ease-expo:cubic-bezier(.16,1,.3,1)}
html,body{overflow-x:clip}
.reading-progress{position:fixed;z-index:1000;top:0;left:0;width:100%;height:4px;background:#d6ff66;transform:scaleX(0);transform-origin:left center;pointer-events:none;box-shadow:0 0 15px #d6ff66aa}
.hero-stage{--stage-accent:#d6ff66}
.hero-stage[data-active="triad"]{--stage-accent:#7ba8ff}
.hero-stage[data-active="mereone"]{--stage-accent:#f4ba67}
.hero-stage[data-active="esp32"]{--stage-accent:#6de1c1}
.stage-device{border-color:#10162c;box-shadow:0 42px 70px #1618346e,0 0 0 2px var(--stage-accent);transition:transform .55s var(--ease-expo),box-shadow .55s ease,border-color .55s ease}
.stage-chrome{border-bottom:2px solid var(--stage-accent);transition:border-color .55s ease}
.stage-selector button.is-active{background:var(--stage-accent);transition:background .4s ease,color .4s ease}
.stage-image{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1360/850}
.stage-image>img{aspect-ratio:1360/850}
.stage-image img.stage-transition-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;will-change:clip-path,transform}
.stage-caption{overflow:hidden}
.stage-caption>*{transition:transform .4s var(--ease-expo),opacity .4s ease}
.stage-device.is-changing .stage-caption>*{transform:translateY(18px);opacity:.18}
.stage-ghost-one,.stage-ghost-two{transition:transform .8s var(--ease-expo),opacity .6s ease}
.hero-stage[data-active="triad"] .stage-ghost-one{transform:rotate(5deg) translateX(-18px) scale(.85)}
.hero-stage[data-active="mereone"] .stage-ghost-two{transform:rotate(-5deg) translateX(20px) scale(.86)}
.hero-stage[data-active="esp32"] .stage-ghost-one{transform:rotate(13deg) translateY(-12px) scale(.83)}
.ticker{position:relative;z-index:3;transform:skewY(-2deg) scaleY(1.05);transform-origin:left center;overflow:hidden}
.ticker>div{animation:marquee-lab 26s linear infinite;white-space:nowrap;width:max-content;will-change:transform}
@keyframes marquee-lab{to{transform:translateX(-50%)}}
.section-bridge{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;min-height:235px;width:100%;transition:background .8s ease}
.bridge-code{background:#3225a9;color:#d6ff66;clip-path:polygon(0 13%,100% 0,100% 86%,0 100%);min-height:285px;margin:40px 0 -5px}
.bridge-code:before{content:'';position:absolute;inset:-30%;background:repeating-linear-gradient(90deg,transparent 0 54px,#ffffff20 54px 55px);transform:rotate(13deg)}
.bridge-track{display:flex;gap:60px;white-space:nowrap;font-size:clamp(70px,10vw,170px);font-weight:850;letter-spacing:-.09em;line-height:.8;transform:rotate(-3deg) translateX(-3%);animation:bridge-drift 18s linear infinite}
@keyframes bridge-drift{to{transform:rotate(-3deg) translateX(-50%)}}
.bridge-code b{position:absolute;right:6%;bottom:46px;font:13px var(--mono);color:#fff}
.bridge-orbit{position:absolute;right:18%;top:23%;width:200px;height:200px;border:1px solid #fff8;border-radius:50%;box-shadow:0 0 0 60px #ffffff12,0 0 0 120px #ffffff0a;transform:scale(.5);transition:transform 1.2s var(--ease-expo)}
.bridge-code.is-visible .bridge-orbit{transform:scale(1)}
.bridge-publish{background:#11182c;color:#fff;min-height:310px;align-items:end;padding:0 6% 70px;clip-path:polygon(0 0,100% 8%,100% 100%,0 100%)}
.bridge-publish:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,#ec6347 42.3% 100%);z-index:-1}
.bridge-disc{position:absolute;right:-3%;top:-65%;width:min(58vw,680px);aspect-ratio:1;border:2px solid #ffdbbd;border-radius:50%;box-shadow:0 0 0 35px #f79b6b40,0 0 0 75px #f79b6b26;transform:scale(.55) rotate(-40deg);transition:transform 1.15s var(--ease-expo)}
.bridge-publish.is-visible .bridge-disc{transform:scale(1) rotate(0)}
.bridge-publish span{font-size:clamp(50px,8.8vw,130px);letter-spacing:-.095em;font-weight:850;line-height:.87;max-width:950px;position:relative;z-index:1}
.bridge-publish b{font-size:70px;position:absolute;right:8%;bottom:35px}
.bridge-method{min-height:200px;background:#d6ff66;color:#172037;justify-content:space-evenly;gap:20px;clip-path:polygon(0 0,100% 15%,100% 100%,0 85%);margin-top:-2px}
.bridge-method span{font-size:clamp(28px,5.6vw,85px);font-weight:850;letter-spacing:-.075em;white-space:nowrap}
.bridge-method i{font-size:clamp(30px,6vw,100px);font-style:normal;animation:bridge-spin 18s linear infinite}
@keyframes bridge-spin{to{transform:rotate(360deg)}}
.bridge-path{background:#3427a9;color:#d6ff66;justify-content:space-between;padding:30px 6%;min-height:165px;transform:skewY(-2deg);margin:35px 0}
.bridge-path span:first-child{font-size:clamp(35px,6vw,88px);font-weight:850;letter-spacing:-.075em;line-height:.9}
.bridge-path span:last-child{font-size:50px;white-space:nowrap;animation:bridge-pulse 2.5s ease-in-out infinite alternate}
@keyframes bridge-pulse{to{letter-spacing:12px;opacity:.45}}
.publication-section{padding-top:95px;padding-bottom:130px}
.publication-reel{display:flex;flex-direction:column;gap:86px;align-items:stretch}
.publication-item,.publication-item:nth-child(2){display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);background:transparent;color:#191a2b;gap:4%;margin:0;align-items:center}
.publication-item:nth-child(2){grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr)}
.publication-item:nth-child(2) .publication-art{order:2}
.publication-art,.publication-mentor .publication-art{height:auto;display:block;background:transparent;overflow:visible;position:relative}
.publication-heart .publication-art:before,.publication-heart .publication-art:after{display:none}
.publication-image{display:block;position:relative;background:#11172d;box-shadow:22px 22px 0 #2a2388,0 35px 65px #713b4155;transform:rotate(-1.4deg);transition:transform .65s var(--ease-expo),box-shadow .65s ease;overflow:hidden}
.publication-mentor .publication-image{background:#f1eee9;box-shadow:-22px 22px 0 #d6ff66,0 35px 65px #713b4155;transform:rotate(1.4deg);padding:12px}
.publication-image:hover{transform:rotate(0) translateY(-10px);box-shadow:10px 24px 0 #2a2388,0 38px 75px #713b4166}
.publication-mentor .publication-image:hover{box-shadow:-10px 24px 0 #d6ff66,0 38px 75px #713b4166}
.publication-image img{display:block;width:100%;height:auto;object-fit:contain}
.publication-media-label{display:block;margin-top:34px;font:11px var(--mono);letter-spacing:.16em;color:#352343}
.publication-copy{min-height:0;padding:0 0 0 20px;color:#1a1526}
.publication-item:nth-child(2) .publication-copy{padding:0 25px 0 0}
.publication-number,.publication-mentor .publication-number{color:#2b227c;border:1px solid #482948;border-radius:99px;align-self:flex-start;padding:9px 13px;background:#ffb094}
.publication-copy h3{font-size:clamp(56px,6.7vw,110px);margin:26px 0 18px;line-height:.89}
.publication-copy p{max-width:510px;font-size:18px;line-height:1.5}
.publication-tech,.publication-mentor .publication-tech{color:#352343;margin-top:26px}
.publication-copy a{font-size:13px;margin-top:35px}
.publication-all{margin-top:70px;font-size:14px}
body.motion-ready .motion-reveal:not(.is-visible){opacity:0;transform:translate3d(0,65px,0) rotate(1deg)}
body.motion-ready .motion-reveal.from-left:not(.is-visible){transform:translate3d(-90px,25px,0) rotate(-2deg)}
body.motion-ready .motion-reveal.from-right:not(.is-visible){transform:translate3d(90px,25px,0) rotate(2deg)}
.motion-reveal{transition:opacity .9s ease,transform 1.15s var(--ease-expo)}
.motion-reveal.is-visible{opacity:1;transform:none}
.project-card .project-media{transition:transform .8s var(--ease-expo)}
.project-card:hover .project-media{transform:translateY(-7px) rotate(-.4deg)}
.project-card:nth-child(even):hover .project-media{transform:translateY(-7px) rotate(.4deg)}
@media(max-width:800px){.section-bridge{min-height:155px}.bridge-code{min-height:190px}.bridge-publish{min-height:230px;padding-bottom:45px}.bridge-method{min-height:135px;gap:9px}.bridge-method span{font-size:clamp(18px,4vw,36px)}.bridge-method i{font-size:28px}.bridge-path{min-height:110px}.bridge-path span:last-child{font-size:25px}.publication-item,.publication-item:nth-child(2){grid-template-columns:1fr;gap:32px}.publication-item:nth-child(2) .publication-art{order:0}.publication-copy,.publication-item:nth-child(2) .publication-copy{padding:0 5px}.publication-copy h3{font-size:clamp(55px,12vw,76px)}.publication-reel{gap:90px}.publication-image{box-shadow:12px 12px 0 #2a2388}.publication-mentor .publication-image{box-shadow:-12px 12px 0 #d6ff66}.publication-section{padding-top:70px}}
@media(max-width:480px){.bridge-publish span{font-size:50px}.bridge-publish b{font-size:43px;right:4%}.bridge-method{min-height:100px;flex-wrap:wrap;padding:24px 8px;gap:5px}.bridge-method span{font-size:22px}.bridge-method i{font-size:24px}.bridge-path span:first-child{font-size:36px}.bridge-path span:last-child{font-size:19px}.publication-copy h3{font-size:60px}.publication-copy p{font-size:16px}.publication-media-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.ticker>div,.bridge-track,.bridge-method i,.bridge-path span:last-child{animation:none!important}.motion-reveal,body.motion-ready .motion-reveal:not(.is-visible){opacity:1;transform:none;transition:none}.stage-image img.stage-transition-frame{animation:none!important}.bridge-orbit,.bridge-disc{transform:none;transition:none}}