:root{--motion-ease:cubic-bezier(.19,1,.22,1)}
#page-transition{position:fixed;inset:0;z-index:10000;background:#0e0b2a;display:grid;place-items:center;pointer-events:none;visibility:hidden;transform:translateY(-105%);border-radius:0 0 45% 45%;transition:transform .9s var(--motion-ease),border-radius .9s var(--motion-ease),visibility 0s .9s}
.motion-entering #page-transition,.motion-leaving #page-transition{visibility:visible;transform:translateY(0);border-radius:0;transition:transform .38s cubic-bezier(.7,0,.2,1),border-radius .38s,visibility 0s;pointer-events:auto}
.motion-entering #app{visibility:hidden}
.intro-brand{display:flex;flex-direction:column;align-items:center;gap:32px;width:min(68vw,390px)}
.intro-brand img{width:100%;height:auto;animation:brand-arrive .9s var(--motion-ease) both}
.intro-line{width:100%;height:1px;background:#ffffff20;overflow:hidden}
.intro-line::after{content:'';display:block;height:100%;background:#4fc3f7;transform-origin:left;animation:intro-line 1.1s var(--motion-ease) both}
[data-intro=return] .intro-brand,[data-mode=transition] .intro-brand{display:none}
.page-hero::after{content:'';position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(90deg,#4fc3f7aa,#ffffff18);transform-origin:left;animation:hero-rule 1s ease-in-out both}
.motion-entering .page-hero::after{animation-play-state:paused}
.mobile-menu{animation:none}
.mobile-services,.mobile-menu.services-open nav{animation:none}
.mobile-menu.services-open .mobile-services,.mobile-menu:not(.services-open) nav{animation:panel-arrive .45s var(--motion-ease) both}
dialog[open]{animation:dialog-arrive .5s var(--motion-ease) both}
dialog[open]::backdrop{animation:backdrop-arrive .35s ease both}
.cta b,.project-meta>b,.service-links a span{transition:transform .45s var(--motion-ease)}
.cta:hover b,.project-card:hover .project-meta>b,.service-links a:hover span{transform:translate(3px,-3px)}
.reveal{transition-timing-function:var(--motion-ease)}
.motion-disabled #page-transition{display:none}
.motion-disabled *, .motion-disabled *::before,.motion-disabled *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
.motion-disabled .reveal{opacity:1;transform:none}
@keyframes brand-arrive{from{opacity:0;transform:translateY(18px);clip-path:inset(100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes intro-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hero-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes panel-arrive{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#page-transition{display:none}}