/* Original composition, animated through typography, masks and depth. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.page-loader{position:fixed;inset:0;background:#090f18;z-index:1000;display:grid;place-items:center;transition:clip-path .85s var(--motion-ease);clip-path:inset(0)}
.page-loader img{width:72px;height:47px;animation:logo-breathe 1.3s ease-in-out infinite}
.page-loader.leaving{clip-path:inset(0 0 100%);pointer-events:none}
.motion-word{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
.scroll-element{transition:none;transform-origin:center}
.motion-boot .header,.motion-boot .hero-copy,.motion-boot .nickname,.motion-boot .hero-cta,.motion-boot .tapir-question,.motion-boot .scroll-cue{opacity:0}
.motion-ready .header,.motion-ready .hero-copy .eyebrow{animation:soft-enter 1.1s var(--motion-ease) both}
.motion-ready h1 .motion-word{animation:word-enter 1.25s var(--motion-ease) both;animation-delay:calc(.12s + var(--word-delay))}
.motion-ready .hero-cta{animation:soft-enter 1.2s .65s var(--motion-ease) both}
.motion-ready .nickname{animation:nickname-enter 1s .9s var(--motion-ease) both}
.motion-ready .nickname .pixel{animation:nickname-type .8s 1s steps(20,end) both;white-space:nowrap}
.motion-ready .nickname small{animation:soft-enter .8s 1.5s both}
.motion-ready .tapir-question{animation:nickname-type .8s 1.5s steps(18,end) both}
.motion-ready .scroll-cue{animation:soft-enter 1s 1.7s both}
.scroll-cue img,.nickname>span:last-child{animation:marker-float 3s ease-in-out infinite}
.hero-art{transform:translate3d(0,var(--hero-drift,0px),0)}
.service-intro{position:sticky;top:25vh;align-self:start}
.services-grid{align-items:start}
.service-list article{margin-bottom:calc(72 * var(--u))}
.service-list article p,.service-list article .number{opacity:calc(.3 + var(--service-reveal,1)*.7);transform:translateY(calc((1 - var(--service-reveal,1))*24px));transition:opacity .25s,transform .35s var(--motion-ease)}
.service-list article h3{transition:text-shadow .5s}
.service-list article.is-active h3{text-shadow:0 0 16px #9ed0ff35}
.stats strong{font-variant-numeric:tabular-nums}
.gallery.motion-gallery{display:block;width:100%;padding:0;overflow-x:auto;scroll-snap-type:none;scroll-behavior:auto;cursor:grab;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.gallery.motion-gallery:active{cursor:grabbing}
.gallery-track{display:flex;width:max-content}
.gallery-group{display:flex;flex:none;gap:calc(21 * var(--u));padding-right:calc(21 * var(--u))}
.motion-gallery img{user-select:none;-webkit-user-drag:none;transition:filter .65s,transform .8s var(--motion-ease)}
.motion-gallery img:hover{transform:scale(1.025)}
.button{transition:background .3s,color .3s,box-shadow .3s,translate .4s var(--motion-ease)}
.button:hover{translate:0 -3px}
.project-card{transition:border-color .4s,transform .65s var(--motion-ease)}
.project-card:hover{transform:translateY(-5px)}
.socials a{transition:padding .35s,color .35s}.socials a:hover{padding-left:7px}
nav:not([hidden]),dialog[open]{animation:soft-enter .4s var(--motion-ease) both}
@keyframes word-enter{from{opacity:0;transform:translate3d(0,65%,0) rotateX(40deg) scale(.94);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes soft-enter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@keyframes nickname-enter{from{opacity:0;translate:0 15px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:none}}
@keyframes nickname-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes logo-breathe{50%{opacity:.4;scale:.93}}
@keyframes marker-float{50%{translate:0 5px}}
@media(max-width:1000px){.service-intro{position:static}.service-list article{margin-bottom:42px}.gallery-group{gap:14px;padding-right:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-word,.scroll-element,.service-list article p,.service-list .number{opacity:1!important;transform:none!important;translate:none!important;filter:none!important;clip-path:none!important}.hero-art{transform:none}.page-loader{display:none}}

/* The specialty indicator requested in the reference screenshot. */
.service-status{display:flex;align-items:center;gap:14px;margin-top:38px;font:13px 'Pixelify Sans',monospace;letter-spacing:.04em;color:#9ed0ff88;white-space:nowrap}
.service-current{display:inline-block;color:var(--blue);font-size:22px;font-variant-numeric:tabular-nums;min-width:2ch}
.service-track{display:block;width:95px;height:2px;background:#9ed0ff20;overflow:hidden}
.service-track>span{display:block;width:100%;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--service-progress,0));transition:transform .25s linear}
@media(max-width:1000px){.service-status{margin-top:25px;gap:12px;font-size:12px}.service-track{width:70px}.service-current{font-size:20px}}

/* Each specialty now occupies a distinct scroll scene. No decorative additions. */
.service-list article{min-height:72vh;margin-bottom:0;padding:0 0 22vh}
.service-list article:last-child{min-height:48vh;padding-bottom:12vh}
.service-intro{top:32vh}
.specialty-content{position:relative;transform-origin:left center;will-change:transform,opacity;transition:filter .15s linear}
.service-list article p,.service-list article .number{opacity:1;transform:none}
.motion-heading{perspective:900px}
.motion-heading.awaiting-entry .motion-word{opacity:0}
.scroll-element.awaiting-entry{opacity:0}
.project-grid{perspective:1400px}
.portrait{transform-origin:center top}
.hero-art{animation:scene-open 2.2s var(--motion-ease) both}
@keyframes scene-open{from{scale:1.1;filter:blur(8px);opacity:0}to{scale:1;filter:blur(0);opacity:1}}
@media(max-width:1000px){.service-intro{position:sticky;top:20px;z-index:2;padding:20px 0;background:linear-gradient(#090f18 80%,#090f1800)}.services-grid{gap:80px}.service-list article{min-height:65vh;padding-bottom:18vh}.service-list article:last-child{min-height:45vh}.service-status{margin-top:18px}.specialty-content{transform-origin:center}.service-list{padding-top:30px}}
@media(prefers-reduced-motion:reduce){.specialty-content,.motion-heading.awaiting-entry .motion-word,.scroll-element.awaiting-entry{opacity:1!important;transform:none!important;filter:none!important}.service-list article{min-height:0;padding-bottom:70px}.service-intro{position:static}.motion-word{clip-path:none!important}}

.services{overflow-x:clip}

/* Fine film grain, composited above the scene without intercepting interaction. */
body::after{content:"";position:fixed;inset:-180px;z-index:50;pointer-events:none;background:url('assets/grain.svg') repeat;opacity:.065;mix-blend-mode:screen;animation:film-grain .65s steps(1,end) infinite;will-change:transform}
@keyframes film-grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-70px,35px)}40%{transform:translate(45px,-90px)}60%{transform:translate(-110px,-45px)}80%{transform:translate(85px,70px)}}
/* Midpoint between the dense list and the previous full-screen beats. */
.service-list article{min-height:46vh;padding-bottom:12vh}
.service-list article:last-child{min-height:30vh;padding-bottom:5vh}
.specialty-content{transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s ease,filter .45s ease}
.service-list h3{transition:text-shadow .8s ease}
.service-list article.is-active h3{text-shadow:0 0 12px #9ed0ff60,0 0 28px #9ed0ff30}
.motion-ready h1 .motion-word{animation-name:title-mist;animation-duration:1.6s}
@keyframes title-mist{0%{opacity:0;translate:0 28px;filter:blur(12px);text-shadow:0 0 40px #9ed0ff}65%{opacity:1;filter:blur(1px);text-shadow:0 0 26px #9ed0ffaa}100%{opacity:1;translate:0 0;filter:blur(0);text-shadow:0 0 15px #9ed0ff50}}
/* Achievement notification: icon pop, panel arrival, then one light sweep. */
.achievement{position:relative;isolation:isolate;overflow:hidden}
.achievement-pending{opacity:0}
.achievement-unlocked{animation:unlock-panel 1.25s cubic-bezier(.16,1,.3,1) both}
.achievement-unlocked>img{animation:unlock-trophy 1.2s .12s cubic-bezier(.16,1,.3,1) both}
.achievement-unlocked>div{animation:unlock-copy .8s .35s ease both}
.achievement-unlocked::after{content:"";position:absolute;inset:-50%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#9ed0ff38 49%,#e0f1ff65 50%,transparent 65%);animation:unlock-sweep 1.4s .45s ease-in-out both}
@keyframes unlock-panel{0%{opacity:0;transform:translateY(25px) scale(.88);filter:blur(5px);box-shadow:0 0 0 #9ed0ff00}45%{opacity:1;filter:blur(0);box-shadow:0 0 30px #9ed0ff38,inset 0 0 18px #9ed0ff12;border-color:#d6ebff}70%{transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:none;filter:none;box-shadow:0 0 0 #9ed0ff00}}
@keyframes unlock-trophy{0%{opacity:0;transform:scale(.35) rotate(-18deg);filter:blur(3px)}55%{opacity:1;transform:scale(1.22) rotate(5deg);filter:drop-shadow(0 0 10px #9ed0ff)}100%{opacity:1;transform:none;filter:none}}
@keyframes unlock-copy{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes unlock-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.page-hidden::after,.page-hidden body::after{animation-play-state:paused}
@media(max-width:1000px){.service-list article{min-height:43vh;padding-bottom:10vh}.service-list article:last-child{min-height:30vh;padding-bottom:4vh}body::after{opacity:.05}}
@media(prefers-reduced-motion:reduce){body::after{animation:none;will-change:auto}.achievement-pending,.achievement-unlocked,.achievement-unlocked>img,.achievement-unlocked>div{opacity:1;transform:none;filter:none;animation:none}.achievement-unlocked::after{display:none}.service-list article{min-height:0;padding-bottom:64px}}
/* Updated Figma frames 1:2 and 34:64. */
.service-status{font-size:calc(19.629 * var(--u));gap:calc(16 * var(--u));margin-top:calc(44 * var(--u))}
.service-current{font-size:calc(28.934 * var(--u))}
.service-track{width:calc(207 * var(--u));height:3px;border-radius:6px}
.service-list{position:relative}
.service-list::before{content:"";position:absolute;left:0;top:0;bottom:10%;width:1px;background:linear-gradient(#9ed0ff,#9ed0ff33)}
.service-list article{min-height:clamp(235px,32vh,320px);padding-bottom:72px}
.service-list article:last-child{min-height:0;padding-bottom:30px}
#navigation.menu-screen{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#090f18;box-shadow:none;overflow-x:hidden;overflow-y:auto;color:var(--blue);isolation:isolate}
#navigation::backdrop{background:#090f18;backdrop-filter:none}
#navigation[open]{animation:menu-open .7s cubic-bezier(.16,1,.3,1) both}
#navigation.is-closing{animation:menu-close .26s ease both}
.menu-scenery{position:absolute;inset:0;z-index:-2;background:url('assets/menu-background.webp') center/cover no-repeat;opacity:.055;pointer-events:none}
.menu-light{position:absolute;left:-7%;top:-12%;width:55%;height:70%;object-fit:fill;opacity:.13;pointer-events:none;z-index:-1}
.menu-top{display:flex;align-items:center;justify-content:space-between;padding-top:calc(69 * var(--u))}
.menu-close{display:flex;align-items:center;gap:5px;font-family:Aboreto,serif;font-size:calc(20 * var(--u));letter-spacing:-.08em;padding:5px 0}
.menu-close img{width:calc(18 * var(--u));height:calc(18 * var(--u))}
#navigation .menu-links{position:relative;inset:auto;display:flex;flex-direction:column;align-items:flex-start;gap:calc(14 * var(--u));padding:0;margin-top:calc(141 * var(--u));border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none;animation:none}
#navigation .menu-links a{display:flex;align-items:center;gap:calc(30 * var(--u));height:calc(78 * var(--u));padding:0;font:calc(53.584 * var(--u))/1.07 Aboreto,serif;letter-spacing:-.1em;color:#9ed0ff33;transform-origin:left center;transition:color .4s ease,transform .55s cubic-bezier(.16,1,.3,1),text-shadow .4s}
#navigation .menu-links a img{width:calc(34.5 * var(--u));height:calc(31 * var(--u));object-fit:contain;transform:scaleX(-1);opacity:0;transition:opacity .4s;filter:drop-shadow(0 0 7px #9ed0ff55)}
#navigation .menu-links a.is-highlighted{color:#9ed0ff;transform:translateX(calc(22 * var(--u))) scale(1.337);text-shadow:0 0 15px #9ed0ff20}
#navigation .menu-links a.is-highlighted img{opacity:1}
#navigation[open] .menu-links a span{animation:menu-link-in 1s cubic-bezier(.16,1,.3,1) both}
#navigation[open] .menu-links a:nth-child(2) span{animation-delay:.1s}
#navigation[open] .menu-links a:nth-child(3) span{animation-delay:.2s}
@keyframes menu-open{from{opacity:0;clip-path:inset(0 0 100%)}to{opacity:1;clip-path:inset(0)}}
@keyframes menu-close{to{opacity:0;transform:translateY(-12px)}}
@keyframes menu-link-in{from{opacity:0;translate:0 20px;filter:blur(9px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(max-width:1000px){.service-status{font-size:12px;gap:12px;margin-top:20px}.service-current{font-size:20px}.service-track{width:100px}.service-list article{min-height:0;padding-bottom:100px}.service-list article:last-child{padding-bottom:32px}.menu-top{padding-top:40px}.menu-close{font-size:15px}.menu-close img{width:18px;height:18px}#navigation .menu-links{margin-top:95px;gap:18px}#navigation .menu-links a{font-size:36px;height:64px;gap:22px}#navigation .menu-links a.is-highlighted{transform:translateX(10px) scale(1.2)}#navigation .menu-links a img{width:30px;height:27px}.menu-scenery{background-position:60% center}.menu-light{width:110%;height:55%;left:-30%;top:-5%}}
@media(prefers-reduced-motion:reduce){#navigation,#navigation *{animation:none!important;transition:none!important}}

@media(min-width:1001px){.service-list article{padding-bottom:calc(72 * var(--u));min-height:calc(303 * var(--u))}.service-list article:first-child{min-height:calc(231 * var(--u))}.service-list article:last-child{min-height:0;padding-bottom:calc(30 * var(--u))}}
#navigation::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:url('assets/grain.svg') repeat;opacity:.05;mix-blend-mode:screen;animation:menu-grain .65s steps(1,end) infinite}
@keyframes menu-grain{25%{background-position:50px -30px}50%{background-position:-80px 65px}75%{background-position:100px 20px}}
@media(prefers-reduced-motion:reduce){#navigation::before{animation:none}}
.menu-scenery{z-index:0}.menu-light{z-index:1}.menu-top,#navigation .menu-links{position:relative;z-index:2}

/* Visible scenery and a layered entrance, using the original exported artwork. */
.menu-scenery{z-index:0;opacity:1;background-image:url('assets/menu-background.webp?v=9')}
#navigation[open] .menu-scenery{animation:menu-scene-arrive 1.8s cubic-bezier(.22,1,.36,1) both}
.menu-light{opacity:.24}
@keyframes menu-scene-arrive{from{transform:scale(1.12);filter:blur(14px);opacity:0}to{transform:scale(1);filter:blur(0);opacity:1}}
#navigation[open] .menu-links a span{animation-duration:1.35s;animation-timing-function:cubic-bezier(.25,.6,.25,1)}
#navigation[open] .menu-links a:nth-child(2) span{animation-delay:.18s}
#navigation[open] .menu-links a:nth-child(3) span{animation-delay:.36s}
.motion-heading .motion-word{will-change:transform,filter,opacity}
@media(prefers-reduced-motion:reduce){.motion-heading .motion-word{opacity:1!important;filter:none!important;transform:none!important;will-change:auto}.menu-scenery{animation:none!important;opacity:1}}