/* Motria / motion layer. Static content remains complete without this layer. */
:root{--header-height:84px;--index-height:85px;--page-progress:0}
html{scroll-padding-top:calc(var(--header-height) + var(--index-height) + 24px)}
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;transform-origin:left center;transform:scaleX(var(--page-progress));background:var(--coral)}
.hero{isolation:isolate;background:#111827}
.hero-grid,.hero-bottom{position:relative;z-index:2}
.brand-outline{position:absolute;z-index:0;width:clamp(560px,66vw,1030px);height:auto;right:-220px;top:-170px;pointer-events:none;overflow:visible;color:var(--coral)}
.mark-fill{fill:currentColor;opacity:.025}.mark-stroke{fill:none;stroke:currentColor;stroke-width:.13;opacity:.25}
.mark-stroke rect{stroke-dasharray:100;stroke-dashoffset:0}
.motion-ready .brand-outline{transform:translate3d(0,var(--mark-shift,0px),0) rotate(var(--mark-turn,0deg))}
.motion-ready .mark-stroke rect{stroke-dashoffset:var(--mark-offset,0)}
.motion-ready .mark-stroke rect:nth-child(2){stroke-dashoffset:calc(var(--mark-offset,0)*.8)}
.motion-ready .mark-stroke rect:nth-child(3){stroke-dashoffset:calc(var(--mark-offset,0)*.6)}
.title-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.title-line>span{display:block}.title-line em{display:block}
.motion-ready .title-line>span{animation:title-in .9s var(--ease) both}
.motion-ready .title-line:nth-child(2)>span{animation-delay:.13s}
.motion-ready .hero .label,.motion-ready .hero-lead,.motion-ready .hero-actions,.motion-ready .hero-small{animation:hero-in .85s var(--ease) both}
.motion-ready .hero-lead{animation-delay:.18s}.motion-ready .hero-actions{animation-delay:.28s}.motion-ready .hero-small{animation-delay:.38s}
.hero-desktop,.hero-phone{transition:box-shadow .25s var(--ease)}
.hero-desktop:hover,.hero-phone:hover{box-shadow:0 32px 75px #0008}
.motion-ready .hero-desktop{transform:translate3d(0,var(--desktop-shift,0px),0) rotate(calc(-3deg + var(--scene-turn,0deg)))}
.motion-ready .hero-phone{transform:translate3d(0,var(--phone-shift,0px),0) rotate(calc(3deg - var(--scene-turn,0deg)))}
.hero-bottom strong{position:relative;padding-bottom:8px}.hero-bottom strong::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--coral);transform-origin:left;transform:scaleX(var(--hero-progress,1))}
.project-index{position:sticky;top:var(--header-height);z-index:25;background:#f5f1e8f5;padding:15px 0 5px;border-bottom:1px solid #ccc9c3;backdrop-filter:blur(16px)}
.portfolio{padding-top:0}.portfolio>.wrap{padding-top:86px}
.index-top{margin-bottom:4px;font-size:.75rem;letter-spacing:.09em}.index-list{padding:5px 2px 12px;gap:22px}.index-list a{position:relative;min-height:36px;display:flex;align-items:center;padding-bottom:5px;font-size:.875rem}
.index-list a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:#b83425;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.index-list a.active::after,.index-list a:hover::after,.index-list a:focus-visible::after{transform:scaleX(1)}
.work{scroll-margin-top:18px}.work+.work{border-top:0;padding-top:28px;margin-top:68px}
.chapter-intro{display:flex;align-items:center;gap:30px;margin-bottom:25px;pointer-events:none}
.chapter-intro>span{font-family:Sora,Manrope,sans-serif;font-size:clamp(65px,7.6vw,108px);letter-spacing:-.085em;line-height:.95;color:transparent;-webkit-text-stroke:1px #969990;font-weight:700;min-width:130px}
.chapter-intro svg{display:block;flex:1;min-width:0;height:64px;overflow:visible}
.chapter-intro path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.chapter-base{stroke:#b7b7ae}.chapter-trace{stroke:#b83425;stroke-dasharray:1;stroke-dashoffset:0}.chapter-intro circle{fill:#b83425}
.motion-ready .chapter-trace{stroke-dashoffset:var(--chapter-offset,0)}
.motion-ready .chapter-intro>span{color:rgba(17,24,39,var(--number-fill,0));transition:color .2s}
.work-heading{margin-bottom:28px}.work-heading h3{letter-spacing:-.06em}
.showcase{box-shadow:0 20px 65px #11182712;transition:box-shadow .3s var(--ease)}
.showcase:hover{box-shadow:0 24px 70px #11182720}
.motion-ready .showcase{transform:translate3d(0,var(--chapter-lift,0px),0) scale(var(--chapter-scale,1));transform-origin:center top}
.showcase.is-playing{transform:none!important}
.showcase-toolbar{background:#192333}.device-tabs{position:relative}
.device-tabs button{transition:background .2s,color .2s,border-color .2s}
.demo-panel.demo-enter{animation:panel-in .38s var(--ease) both}
.play-recording{overflow:hidden}
.play-icon{position:relative}.play-icon::after{content:'';position:absolute;inset:-6px;border:1px solid #ffffff70;border-radius:50%;opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s}
.play-recording:hover .play-icon::after,.play-recording:focus-visible .play-icon::after{opacity:1;transform:scale(1)}
.motion-item{opacity:1;transform:none}
.motion-ready .motion-item{transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .motion-item.motion-waiting{opacity:0;translate:0 24px}
.motion-ready .motion-item.motion-visible{opacity:1;translate:0 0}
.approach{position:relative;overflow:hidden;isolation:isolate}
.approach-flow{display:block;width:100%;height:24px;margin:48px 0 -34px;overflow:visible;pointer-events:none}
.approach-flow path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.flow-base{stroke:#667082}.flow-trace{stroke:var(--coral);stroke-dasharray:1;stroke-dashoffset:0}.approach-flow circle{fill:var(--coral)}
.motion-ready .flow-trace{stroke-dashoffset:var(--flow-offset,0)}
.approach-steps{margin-top:55px}.approach-step{border-top:0;padding-top:12px}
.button{position:relative;overflow:hidden;isolation:isolate}.button::before{content:'';position:absolute;inset:0;background:#ffffff19;transform:translateX(-105%);transition:transform .3s var(--ease);z-index:-1}.button:hover::before{transform:translateX(0)}
.text-link{position:relative;transition:color .2s}.text-link:hover{color:#b83425}.dark .text-link:hover{color:var(--coral)}
.contact{isolation:isolate}.contact .contact-mark{position:absolute;z-index:-1;right:-170px;bottom:-230px;width:650px;height:650px;opacity:.045;pointer-events:none}
@keyframes title-in{from{transform:translate3d(0,105%,0) rotate(2deg);opacity:.1}to{transform:translate3d(0,0,0) rotate(0);opacity:1}}
@keyframes hero-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes panel-in{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.brand-outline{right:-260px;top:-100px}.chapter-intro>span{min-width:105px}.index-list{justify-content:flex-start;gap:24px}}
@media(max-width:820px){:root{--header-height:74px;--index-height:60px}.project-index{padding:9px 0 0}.index-top{display:none}.index-list{padding-bottom:10px;gap:25px}.hero .brand-outline{top:-190px;right:-300px;width:820px}.chapter-intro{gap:22px}.chapter-intro>span{min-width:95px;font-size:80px}.approach-flow{display:none}.approach-step{border-top:1px solid #647083;padding-top:20px}}
@media(max-width:740px){.motion-ready .hero-desktop{transform:rotate(-3deg)}.motion-ready .hero-phone{transform:rotate(3deg)}.motion-ready .showcase{transform:none}.motion-ready .motion-item.motion-waiting{translate:0 12px}.motion-ready .brand-outline{transform:none}}
@media(max-width:600px){.chapter-intro{gap:20px;margin-bottom:21px}.chapter-intro>span{min-width:75px;font-size:68px}.chapter-intro svg{height:45px}.work+.work{margin-top:48px;padding-top:12px}.index-list a{font-size:.875rem;min-height:36px}.work-heading{margin-bottom:23px}.brand-outline{opacity:.8}.motion-ready .title-line>span{animation-duration:.7s}.contact .contact-mark{right:-290px;bottom:-180px;width:560px;height:560px}}
@media(max-width:600px){.portfolio>.wrap{padding-top:55px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reading-progress{display:none}.motion-ready .brand-outline,.motion-ready .hero-desktop,.motion-ready .hero-phone,.motion-ready .showcase,.motion-item,.motion-ready .motion-item.motion-waiting{opacity:1;transform:none;translate:none}.motion-ready .mark-stroke rect,.motion-ready .chapter-trace,.motion-ready .flow-trace{stroke-dashoffset:0}.motion-ready .title-line>span,.motion-ready .hero .label,.motion-ready .hero-lead,.motion-ready .hero-actions,.motion-ready .hero-small{animation:none;opacity:1;transform:none}.demo-panel.demo-enter{animation:none}.hero-bottom strong::after{transform:none}}