/* Motion follows the charcoal-and-pink visual system. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.site-header{transition:background .35s ease,box-shadow .35s ease}
.site-header.is-scrolled{background:#1d2024f2;box-shadow:0 8px 30px #10121640}
.site-header::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:linear-gradient(90deg,#ff014f,#ff78a0);transform:scaleX(var(--read-progress,0));transform-origin:left;pointer-events:none;box-shadow:0 0 10px #ff014f55}
.brand-mark{transition:transform .6s var(--motion-ease),box-shadow .5s,border-color .4s}
.brand:hover .brand-mark{transform:rotate(-9deg);border-color:var(--pink);box-shadow:0 0 22px #ff014f20}
.nav a:not(.nav-contact){position:relative}
.nav a:not(.nav-contact)::after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--motion-ease)}
.nav a:not(.nav-contact):is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
.hero-photo{isolation:isolate;transform:translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0);transition:transform .7s var(--motion-ease)}
.hero-photo::before{content:'';position:absolute;z-index:-1;inset:12% -6% 2%;background:radial-gradient(ellipse at 53% 55%,#ff014f20,transparent 66%);filter:blur(20px);pointer-events:none}
.hero-photo img{transform-origin:50% 80%}
.hero h1 .accent{display:inline-block;text-shadow:0 0 50px #ff014f12}
.motion-ready .hero-copy>.eyebrow{animation:enter-up .9s var(--motion-ease) both}
.motion-ready .hero-copy h1{animation:enter-up 1s var(--motion-ease) .1s both}
.motion-ready .hero-intro{animation:enter-up 1s var(--motion-ease) .2s both}
.motion-ready .hero-detail{animation:enter-up 1s var(--motion-ease) .29s both}
.motion-ready .hero-copy>.actions{animation:enter-up 1s var(--motion-ease) .38s both}
.motion-ready .hero-photo{animation:portrait-enter 1.2s var(--motion-ease) .12s both}
.motion-ready .hero-photo img{animation:portrait-float 7s ease-in-out 1.3s infinite}
.motion-ready .hero-photo::before{animation:ambient-breathe 8s ease-in-out infinite}
.motion-ready .discipline-strip{animation:enter-up 1.1s var(--motion-ease) .45s both}
.discipline-strip span{transition:color .3s,transform .4s var(--motion-ease),text-shadow .4s}
.discipline-strip span:hover{color:#f4dde5;transform:translateY(-4px);text-shadow:0 0 24px #ff014f55}
.js-reveal .reveal{transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease),border-color .35s,box-shadow .4s;transition-delay:var(--reveal-delay,0ms)}
.js-reveal .reveal.pending{opacity:0;transform:translate3d(0,30px,0)}
.tilt-card{position:relative;isolation:isolate;transform:perspective(1100px) translate3d(0,var(--hover-lift,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s var(--motion-ease),border-color .4s,box-shadow .5s;transition-delay:0ms!important}
.tilt-card::after{content:'';position:absolute;z-index:2;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--pointer-x,50%) var(--pointer-y,50%),#ff487a12,transparent 70%);opacity:0;transition:opacity .45s}
.tilt-card.is-hovered::after,.tilt-card:focus-within::after{opacity:1}
.tilt-card.is-hovered{--hover-lift:-6px;transform:perspective(1100px) translate3d(0,var(--hover-lift,0px),0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:#774255;box-shadow:18px 22px 42px #121418aa,-5px -5px 20px #292d32,0 0 25px #ff014f06;transition-duration:.22s,.35s,.5s;will-change:transform}
.tilt-card:focus-within{border-color:#a95170}
.tilt-card.reveal.pending{transform:translate3d(0,30px,0)}
.cap-icon{transform-origin:30% 70%;transition:transform .6s var(--motion-ease),filter .5s}
.cap-card:is(:hover,:focus-within) .cap-icon{transform:translateY(-5px) rotate(-8deg) scale(1.09);filter:drop-shadow(0 5px 10px #ff014f45)}
.project-copy h3,.note-card h3{transition:color .4s}
.project-card:is(:hover,:focus-within) h3,.note-card:is(:hover,:focus-within) h3{color:#ffe1ea}
.button,.nav-contact{position:relative;isolation:isolate;overflow:hidden;transform:translate3d(var(--magnetic-x,0px),var(--magnetic-y,0px),0);transition:transform .45s var(--motion-ease),background .35s,border-color .35s,box-shadow .4s}
.button::after,.nav-contact::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 20%,#ffffff19 48%,transparent 75%);transform:translateX(-130%);transition:transform .8s var(--motion-ease)}
.button:is(:hover,:focus-visible),.nav-contact:is(:hover,:focus-visible){transform:translate3d(var(--magnetic-x,0px),calc(var(--magnetic-y,0px) - 3px),0);box-shadow:0 10px 28px #11171d65,0 0 24px #ff014f18}
.button:is(:hover,:focus-visible)::after,.nav-contact:is(:hover,:focus-visible)::after{transform:translateX(130%)}
.button.primary:is(:hover,:focus-visible){box-shadow:0 12px 35px #ff014f38}
.button:active{transform:translateY(1px) scale(.985)}
.text-link{position:relative;transition:color .3s,border-color .3s}
.text-link::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--pink-light);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--motion-ease)}
.text-link:is(:hover,:focus-visible)::after{transform:scaleX(1);transform-origin:left}
.problem{transition:border-color .4s,background .4s}
.problem summary{transition:color .35s,padding-left .4s var(--motion-ease)}
.problem summary:after{transition:transform .45s var(--motion-ease),color .35s}
.problem summary:hover{padding-left:8px;color:#ffb0c8}
.problem:hover{border-color:#754252}
.problem summary:hover:after{transform:rotate(90deg)}
.problem[open] summary:after{transform:rotate(180deg)}
.motion-ready .problem[open] p{animation:enter-up .45s var(--motion-ease) both}
.tags span{transition:border-color .35s,color .35s,background .35s}
.project-card:is(:hover,:focus-within) .tags span{border-color:#62414f;color:#e1c7d2;background:#37263070}
.project-visual::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,#ff6b9620 49%,transparent 100%);height:22%;opacity:0}
.project-visual.bocao::after{background:linear-gradient(180deg,transparent,#d89b5b15,transparent)}
.project-visual.woods::after{background:linear-gradient(180deg,transparent,#8fc5b016,transparent)}
.motion-ready .project-visual::after{animation:diagram-scan 9s linear infinite}
.motion-ready .mini-row{--node-color:#e64e80;animation:node-highlight 8s ease-in-out infinite}
.motion-ready .mini-row:nth-child(2){animation-delay:1.3s}
.motion-ready .mini-row:nth-child(3){animation-delay:2.6s}
.motion-ready .mini-row:nth-child(4){animation-delay:3.9s}
.motion-ready .mini-row:nth-child(5){animation-delay:5.2s}
.motion-ready .mini-dot{animation:node-light 8s ease-in-out infinite;animation-delay:inherit}
.motion-ready .journey-grid span{--node-color:#c68761;animation:node-highlight 8s ease-in-out infinite}
.motion-ready .journey-grid span:nth-child(2){animation-delay:1.2s}
.motion-ready .journey-grid span:nth-child(3){animation-delay:2.4s}
.motion-ready .journey-grid span:nth-child(4){animation-delay:3.6s}
.motion-ready .journey-grid span:nth-child(5){animation-delay:4.8s}
.motion-ready .state-flow>div,.motion-ready .workflow>article{--node-color:#93c5b0;animation:node-highlight 10s ease-in-out infinite}
.motion-ready .state-flow>div:nth-child(2),.motion-ready .workflow>article:nth-child(2){animation-delay:1.3s}
.motion-ready .state-flow>div:nth-child(3),.motion-ready .workflow>article:nth-child(3){animation-delay:2.6s}
.motion-ready .state-flow>div:nth-child(4),.motion-ready .workflow>article:nth-child(4){animation-delay:3.9s}
.motion-ready .state-flow>div:nth-child(5),.motion-ready .workflow>article:nth-child(5){animation-delay:5.2s}
.motion-ready .state-flow>div:nth-child(6),.motion-ready .workflow>article:nth-child(6){animation-delay:6.5s}
.process-step{transition:background .35s}
.process-step::after{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--pink-light);transform:scaleX(0);transform-origin:left}
.motion-ready .process-step::after{animation:process-trace 12s ease-in-out infinite;animation-delay:calc(var(--step-index,0) * 1.35s)}
.process-step b,.process-step span{display:block;transition:transform .4s var(--motion-ease),color .4s}
.process-step:hover b{transform:translateY(-4px);color:var(--pink-light)}
.process-step:hover span{color:#e7c6d2}
.technology{position:relative;transition:transform .4s var(--motion-ease),border-color .4s}
.technology:hover{transform:translateY(-5px);border-color:#c3466e}
.studio-image{transition:transform .8s var(--motion-ease),box-shadow .6s}
.studio-image:hover{transform:scale(1.025) rotate(-.4deg);box-shadow:18px 22px 40px #141619}
.contact-form{transition:border-color .4s,box-shadow .5s}
.contact-form:focus-within{border-color:#8e4260;box-shadow:var(--shadow),0 0 40px #ff014f09}
input,textarea,select{transition:border-color .3s,box-shadow .3s,background .3s}
input:focus,textarea:focus,select:focus{border-color:#d34c75;background:#1c1e24;box-shadow:0 0 0 3px #ff014f0c}
.motion-toggle{border:0;border-bottom:1px solid #5b3a49;border-radius:0;padding:0 0 2px;background:transparent;color:#aeb8c6;font-size:.8125rem;line-height:1.6;white-space:nowrap}
.motion-toggle:hover{color:var(--pink-light)}
.footer-links{align-items:start;flex-wrap:wrap}
.motion-scene:not(.in-view),.motion-scene:not(.in-view)::before,.motion-scene:not(.in-view)::after,.motion-scene:not(.in-view) *,.motion-scene:not(.in-view) *::before,.motion-scene:not(.in-view) *::after{animation-play-state:paused!important}
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation:none!important;transition:none!important}
html.motion-paused{scroll-behavior:auto}
html.motion-paused .reveal.pending{opacity:1;transform:none}
html.motion-paused .tilt-card,html.motion-paused .hero-photo,html.motion-paused .hero-photo img,html.motion-paused .button,html.motion-paused .nav-contact,html.motion-paused .cap-icon,html.motion-paused .studio-image,html.motion-paused .technology,html.motion-paused .discipline-strip span{transform:none!important}
@keyframes enter-up{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes portrait-enter{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes portrait-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ambient-breathe{0%,100%{opacity:.4;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes diagram-scan{0%{transform:translateY(-110%);opacity:0}10%{opacity:.7}60%{opacity:.7}76%,100%{transform:translateY(600%);opacity:0}}
@keyframes node-highlight{0%,28%,100%{box-shadow:0 0 0 transparent}8%,17%{border-color:var(--node-color);box-shadow:0 0 19px -9px var(--node-color)}}
@keyframes node-light{0%,28%,100%{opacity:.65;box-shadow:0 0 0 transparent}8%,17%{opacity:1;box-shadow:0 0 10px #ff5789}}
@keyframes process-trace{0%{transform:scaleX(0);opacity:1}10%,15%{transform:scaleX(1);opacity:1}25%,100%{transform:scaleX(1);opacity:0}}
@media(max-width:820px){.nav a:not(.nav-contact)::after{bottom:6px;width:35px}.hero-photo::before{inset:15% 0 0}}
@media(hover:none),(pointer:coarse){.tilt-card{transform:none}.tilt-card:active{border-color:#774255}.button:active{transform:scale(.98)}.hero-photo{transform:none}.motion-ready .hero-photo img{animation-duration:9s}.project-visual::after{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-reveal .reveal.pending{opacity:1;transform:none}.tilt-card,.hero-photo,.hero-photo img,.button,.nav-contact,.cap-icon,.studio-image,.technology,.discipline-strip span{transform:none!important}}
