:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.brand-intro{position:fixed;inset:0;z-index:100;background:#fff;display:grid;place-items:center;pointer-events:none;animation:intro-out .65s var(--ease-in-out) 1.65s both;overflow:hidden}.intro-aura{position:absolute;width:55vmax;height:55vmax;border-radius:50%;background:radial-gradient(circle,#e9e2ff,transparent 65%);animation:intro-aura 1.9s ease-in-out both}.intro-lockup{display:flex;align-items:center;gap:22px;position:relative;animation:intro-lockup-out .5s var(--ease-out) 1.65s both}.intro-lockup svg{width:105px;height:105px;fill:#7041ea;stroke:none;overflow:visible}.intro-name{font:600 68px/1 var(--display);letter-spacing:-4px;animation:intro-type .7s var(--ease-out) .45s both}.intro-name span{display:block;font:400 12px/1.5 var(--font);letter-spacing:3px;margin:12px 0 0 4px}.intro-lockup .mark-left{animation:intro-left .85s var(--ease-out) .05s both}.intro-lockup .mark-bridge{animation:intro-bridge 1s var(--ease-out) .18s both;transform-origin:300px 280px}.intro-lockup .mark-right{animation:intro-right .85s var(--ease-out) .3s both}.intro-line{position:absolute;width:110px;height:2px;bottom:calc(50% - 100px);background:#7041ea;transform-origin:left;animation:intro-line 1.5s var(--ease-in-out) both}
@keyframes intro-left{from{opacity:0;transform:translate(-75px,25px) rotate(-15deg)}to{opacity:1;transform:none}}@keyframes intro-bridge{from{opacity:0;transform:rotate(-55deg) scale(.8)}to{opacity:1;transform:none}}@keyframes intro-right{from{opacity:0;transform:translate(75px,-25px) rotate(15deg)}to{opacity:1;transform:none}}@keyframes intro-type{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}@keyframes intro-line{0%{transform:scaleX(0);opacity:0}20%{opacity:1}85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}@keyframes intro-out{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}@keyframes intro-lockup-out{to{opacity:0;transform:translateY(-25px) scale(1.05)}}@keyframes intro-aura{from{opacity:0;transform:scale(.8)}60%{opacity:.65}to{opacity:0;transform:scale(1.3)}}
.brand-spark{display:inline-flex;vertical-align:top}.brand-spark svg{width:27px;height:27px;fill:var(--violet);stroke:none;transform:translateY(-2px)}
.hero{overflow:hidden}.hero-art{isolation:isolate}.navori-symbol{fill:#7041ea;stroke:none;transform:none;filter:none;max-width:560px;animation:symbol-breathe 7s ease-in-out 2s infinite}.navori-symbol .mark-bridge{fill:#8b60f0}.navori-symbol .mark-right{fill:#5030b9}.halo{inset:-240px -120px -120px -280px;background:none;opacity:1;overflow:visible;z-index:-1}.halo::before,.halo::after{content:"";position:absolute;inset:-55%;pointer-events:none;will-change:transform;mix-blend-mode:multiply}.halo::before{background:radial-gradient(ellipse at 60% 32%,#9060ec 0,#aa87ed 19%,transparent 48%),radial-gradient(ellipse at 80% 68%,#74b9ee 0,#a6d2f2 15%,transparent 44%);animation:color-stream 8s ease-in-out infinite alternate}.halo::after{background:radial-gradient(ellipse at 70% 66%,#b15be1 0,#d7b4f0 18%,transparent 48%),radial-gradient(ellipse at 25% 45%,#b1caff 0,transparent 44%);animation:color-counterstream 10s ease-in-out infinite alternate;opacity:.75}.hero-art>.orbit{animation:symbol-arrive 1.1s var(--ease-out) 1.75s backwards,symbol-breathe 7s ease-in-out 2.8s infinite}.header{animation:site-arrive .8s var(--ease-out) 1.7s backwards}.hero-copy{animation:site-arrive 1s var(--ease-out) 1.85s backwards}.art-caption{font-size:11px}.hero-foot{position:relative}.hero h1{letter-spacing:-.065em}
@keyframes color-stream{0%{transform:translate(-12%,-9%) rotate(-22deg) scale(1.05)}50%{transform:translate(5%,6%) rotate(6deg) scale(1.12)}100%{transform:translate(15%,14%) rotate(25deg) scale(.95)}}@keyframes color-counterstream{from{transform:translate(14%,-12%) rotate(20deg);opacity:.4}to{transform:translate(-15%,14%) rotate(-20deg);opacity:.9}}@keyframes symbol-breathe{0%,100%{transform:translateY(6px) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}@keyframes site-arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes symbol-arrive{from{opacity:0;transform:translateY(35px) rotate(-10deg) scale(.92)}to{opacity:1;transform:none}}
.work{background:#14121a;color:#f8f6fd;overflow:hidden;padding-left:0;padding-right:0}.work>.section-heading{padding:0 5%}.work .subtle,.work .project-info>div>span{color:#aaa5b7}.carousel-viewport{overflow:hidden;touch-action:pan-y}.carousel-track{display:flex;gap:3vw;padding-left:5vw;transition:transform 1s var(--ease-out);will-change:transform}.carousel-track>.project{flex:0 0 80vw;min-width:0;margin:0;max-width:1536px}.carousel-track .project-stage{padding:40px 7% 0;border-radius:14px;overflow:hidden}.carousel-track .browser-frame{pointer-events:none}.project-stage{transition:transform .6s var(--ease-out)}.carousel-track>.project:not(.active) .project-stage{transform:scale(.96);transform-origin:center bottom}.carousel-track>.project .project-info{transition:opacity .5s}.carousel-track>.project:not(.active) .project-info{opacity:.45}.carousel-controls{padding:35px 5% 0;display:flex;justify-content:space-between;align-items:center}.carousel-count{font-size:12px;color:#aaa5b7}.carousel-dots{display:flex;gap:9px}.carousel-dots button{width:7px;height:7px;border:0;border-radius:50%;background:#5e586c;padding:0;cursor:pointer;transition:width .4s,background .4s}.carousel-dots button[aria-current=true]{width:28px;border-radius:8px;background:#b99bf7}.carousel-arrows{display:flex;gap:10px}.carousel-arrows button{width:43px;height:43px;border:1px solid #6c647b;border-radius:50%;display:grid;place-items:center;background:transparent;color:#f8f6fd;cursor:pointer}.carousel-arrows button:first-child svg{transform:rotate(-135deg)}.carousel-arrows button:last-child svg{transform:rotate(45deg)}.carousel-arrows svg{width:19px;height:19px}.concept-preview{color:var(--concept-ink);background:var(--concept-bg)}.concept-preview.vela{--concept-ink:#632f3e;--concept-bg:#f3e2df}.concept-preview.mova{--concept-ink:#19291f;--concept-bg:#e4efb5}.concept-preview.mesa{--concept-ink:#513a2b;--concept-bg:#e9dac7}.project-vela .project-stage{background:#c5a6aa}.project-mova .project-stage{background:#aec67d}.project-mesa .project-stage{background:#ab8d73}.concept-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:center;padding:5px 0 0 5%}.concept-layout img{width:100%;height:355px;object-fit:cover}.concept-layout h3{font:500 clamp(30px,4.5vw,72px)/1.08 var(--display);letter-spacing:-.05em;margin-bottom:20px}.vela .concept-layout h3,.mesa .concept-layout h3{font-family:Georgia,serif;font-weight:400}.concept-layout p{font-size:12px}.mova .concept-layout img{object-position:50% 30%}.concept-preview .preview-nav strong{font-size:23px}.studio-note{display:grid;grid-template-columns:1.2fr 1fr;gap:35px;overflow:hidden;position:relative;padding-bottom:160px}.studio-note>p{max-width:370px;align-self:center;color:var(--muted)}.word-reel{position:absolute;bottom:30px;left:0;right:0;overflow:hidden;font:500 35px/1.2 var(--display);letter-spacing:-1px;color:#9476c5;opacity:.7;white-space:nowrap}.word-reel>div{width:max-content;animation:word-flow 34s linear infinite}@keyframes word-flow{to{transform:translateX(-50%)}}.contact::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(ellipse at 20% 60%,#bea1f7,transparent 50%),radial-gradient(ellipse at 75% 45%,#9fc9f7,transparent 45%);animation:color-stream 9s ease-in-out infinite alternate}.contact-orbit{display:none}.reveal-ready{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}.reveal-ready:not(.revealed){opacity:0;transform:translateY(35px)}.service-list article{transition:transform .25s var(--ease-out)}@media(hover:hover) and (pointer:fine){.service-list article:hover{transform:translateX(7px)}.carousel-arrows button:hover{background:#7041ea;border-color:#7041ea}}
@media(max-width:900px){.carousel-track>.project{flex-basis:86vw}.carousel-track{gap:4vw}.carousel-track .project-stage{padding:30px 5% 0}.concept-layout img{height:300px}}
@media(max-width:600px){.intro-lockup{gap:12px}.intro-lockup svg{width:75px;height:75px}.intro-name{font-size:47px;letter-spacing:-2px}.intro-name span{font-size:9px;letter-spacing:2px}.intro-line{bottom:calc(50% - 75px);width:85px}.navori-symbol{max-width:300px;height:300px}.halo{inset:-180px -50px -100px -100px}.carousel-track{padding-left:6vw;gap:4vw}.carousel-track>.project{flex-basis:88vw}.carousel-track .project-stage{padding:20px 5% 0;border-radius:9px}.work>.section-heading{padding:0 6%}.concept-layout{gap:10px}.concept-layout h3{font-size:26px;letter-spacing:-1px;margin-bottom:15px}.concept-layout p{font-size:8px}.concept-layout img{height:220px}.concept-preview .preview-nav strong{font-size:16px}.carousel-controls{padding:25px 6% 0}.carousel-arrows button{width:35px;height:35px}.studio-note{grid-template-columns:1fr;padding-bottom:130px}.studio-note>p{font-size:15px}.word-reel{font-size:26px}.art-caption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.intro-lockup .mark-left,.intro-lockup .mark-bridge,.intro-lockup .mark-right,.intro-name{animation-name:gentle-fade}.intro-lockup{animation-name:gentle-fade-out}.hero-art>.orbit{animation:symbol-arrive 1s var(--ease-out) 1.75s backwards}.header,.hero-copy{animation-name:gentle-fade}.reveal-ready:not(.revealed){transform:none}.carousel-track{transition-duration:.6s}.word-reel>div{animation-duration:70s}.halo::before{animation-duration:14s}.halo::after{animation-duration:16s}}
@keyframes gentle-fade{from{opacity:0}to{opacity:1}}@keyframes gentle-fade-out{to{opacity:0}}

@media(prefers-reduced-motion:reduce){.hero-art>.orbit{animation:symbol-arrive 1s var(--ease-out) 1.75s backwards,mark-tone 7s ease-in-out 2.8s infinite}}@keyframes mark-tone{0%,100%{opacity:1}50%{opacity:.82}}

/* Approved logo replacement only: arch mark and the original asterisk. */
.brand-spark{display:inline-block}.navori-symbol,.intro-lockup svg{fill:var(--ink);stroke:none}.navori-symbol .mark-bridge,.navori-symbol .mark-right{fill:var(--ink)}.navori-symbol .logo-asterisk,.intro-lockup .logo-asterisk{fill:var(--violet)}

/* Reference lockup: mark to the left, name and descriptor to the right. */
.intro-lockup{gap:24px}.intro-lockup>svg{width:150px;height:150px;flex-shrink:0}.intro-name{font-size:96px;letter-spacing:-5px;font-weight:500}.intro-name span{font-size:17px;letter-spacing:5px;margin-top:9px;margin-left:4px}.brand-lockup{display:flex;align-items:center;gap:10px;letter-spacing:-1.5px;font-size:34px}.brand-emblem{display:flex}.brand-emblem svg{width:47px;height:47px;fill:var(--ink);stroke:none}.brand-word{display:block}.brand-lockup small{font-size:9px;letter-spacing:2px;margin-top:7px}.logo-asterisk{stroke:none}
@media(max-width:600px){.intro-lockup{gap:14px}.intro-lockup>svg{width:90px;height:90px}.intro-name{font-size:56px;letter-spacing:-3px}.intro-name span{font-size:10px;letter-spacing:3px;margin-top:7px}.brand-lockup{font-size:28px;gap:7px}.brand-emblem svg{width:38px;height:38px}.brand-lockup small{font-size:8px;letter-spacing:1.4px;margin-top:6px}}
/* Compact centered entry, legible type and independently animated asterisks. */
.intro-lockup{gap:18px;justify-content:center;align-items:center;margin:0 auto}.intro-lockup>svg{width:105px;height:105px}.intro-name{font-size:68px;letter-spacing:-2px;animation:none}.intro-name>.name-letters{display:block;font:inherit;letter-spacing:inherit;line-height:1;margin:0;white-space:nowrap}.intro-name .intro-char{display:inline-block;font:inherit;letter-spacing:inherit;line-height:1;margin:0;animation:letter-rise .8s var(--ease-out) calc(.3s + var(--char-delay)) both}.intro-name>.intro-descriptor{font:400 12px/1.5 var(--font);letter-spacing:3px;margin:10px 0 0 3px;animation:letter-rise .7s var(--ease-out) .55s both}.logo-asterisk{transform-box:fill-box;transform-origin:center;animation:asterisk-pop .9s var(--ease-out) .35s backwards}.asterisk-spin{transform-box:fill-box;transform-origin:center;animation:asterisk-turn 28s linear infinite}.intro-lockup .logo-asterisk{animation:asterisk-pop .9s var(--ease-out) .35s backwards}.brand-emblem .logo-asterisk,.hero-art .logo-asterisk{animation-delay:1.9s}.brand-lockup{letter-spacing:-.035em}.hero-copy{animation:none}.hero h1{font-size:clamp(62px,7.1vw,114px);line-height:1.1;letter-spacing:-.035em;font-kerning:normal;text-rendering:optimizeLegibility;animation:none}.title-line{display:block}.title-line>span{display:inline-block;animation:title-rise 1s var(--ease-out) 1.75s both}.title-line:nth-child(2)>span{animation-delay:1.85s}.title-line:nth-child(3)>span{animation-delay:1.98s}.hero-copy>p,.hero-copy>.button{animation:letter-rise .85s var(--ease-out) 2s both}
@keyframes asterisk-pop{0%{opacity:0;transform:translateY(8px) scale(.65)}70%{opacity:1;transform:translateY(-1px) scale(1.04)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes asterisk-turn{to{transform:rotate(360deg)}}@keyframes letter-rise{from{opacity:0;transform:translateY(24px);filter:none}to{opacity:1;transform:translateY(0);filter:none}}@keyframes title-rise{from{opacity:0;transform:translateY(32px);filter:none}to{opacity:1;transform:translateY(0);filter:none}}
@media(max-width:900px){.hero h1{font-size:7.5vw}}@media(max-width:600px){.intro-lockup{gap:12px}.intro-lockup>svg{width:76px;height:76px}.intro-name{font-size:48px;letter-spacing:-1.5px}.intro-name>.intro-descriptor{font-size:9px;letter-spacing:2px;margin-top:7px}.hero h1{font-size:15vw;line-height:1.12;letter-spacing:-.035em}}
@media(prefers-reduced-motion:reduce){.intro-name .intro-char,.intro-name>.intro-descriptor,.title-line>span,.hero-copy>p,.hero-copy>.button{animation-name:gentle-rise}.asterisk-spin{animation-duration:56s}.logo-asterisk,.intro-lockup .logo-asterisk{animation-name:gentle-fade}}

@keyframes gentle-rise{from{opacity:0;transform:translateY(8px);filter:none}to{opacity:1;transform:none;filter:none}}
/* Slower choreography and a transparent, curved color field. */
.brand-intro{animation-duration:1s;animation-delay:3s}.intro-lockup{animation-duration:.9s;animation-delay:3s}.intro-aura{animation-duration:3.8s}.intro-lockup .mark-left,.intro-lockup .mark-bridge{animation-duration:1.4s}.intro-lockup .logo-asterisk{animation-duration:1.4s;animation-delay:.65s}.intro-name .intro-char{animation-duration:1.3s;animation-delay:calc(.45s + var(--char-delay)*1.5)}.intro-name>.intro-descriptor{animation-duration:1.2s;animation-delay:.9s}.header{animation-duration:1.2s;animation-delay:3.1s}.title-line>span{animation-duration:1.4s;animation-delay:3.15s}.title-line:nth-child(2)>span{animation-delay:3.35s}.title-line:nth-child(3)>span{animation-delay:3.55s}.hero-copy>p,.hero-copy>.button{animation-duration:1.35s;animation-delay:3.6s}.hero-art>.orbit{animation-delay:3.2s,4.7s;animation-duration:1.6s,12s}.brand-emblem .logo-asterisk,.hero-art .logo-asterisk{animation-duration:1.4s;animation-delay:3.45s}.asterisk-spin{animation-duration:40s}.footer-spark{display:inline-flex;width:27px;height:27px;vertical-align:top}.footer-spark svg{width:27px;height:27px;fill:none;stroke:none;overflow:visible}.footer-spark .logo-asterisk{animation-duration:1.4s;animation-delay:0s}
.halo{inset:-230px -240px -220px -260px;background:none;opacity:1}.halo::before{inset:-15%;background:url('assets/color-wave.svg') center/100% 100% no-repeat;mix-blend-mode:normal;opacity:1;animation:wave-sway 28s ease-in-out infinite alternate}.halo::after{inset:-15%;background:url('assets/color-wave.svg') center/100% 100% no-repeat;mix-blend-mode:normal;opacity:.35;animation:wave-follow 36s ease-in-out infinite alternate}.contact{background:#f2eafa}.contact::before{inset:-80% -40%;background:url('assets/color-wave.svg') center/100% 100% no-repeat;opacity:.95;animation:wave-follow 30s ease-in-out infinite alternate}.reveal-ready{transition-duration:1.5s;transition-timing-function:var(--ease-out)}.reveal-ready:not(.revealed){transform:translateY(32px);opacity:0}.carousel-track{transition-duration:1.5s}.word-reel>div{animation-duration:50s}
@keyframes wave-sway{0%{transform:translate(8%,-5%) rotate(-9deg) scale(1.08)}50%{transform:translate(-2%,3%) rotate(1deg) scale(1.15)}100%{transform:translate(-10%,6%) rotate(10deg) scale(1.08)}}@keyframes wave-follow{0%{transform:translate(-7%,4%) rotate(8deg) scale(1.12)}100%{transform:translate(8%,-5%) rotate(-10deg) scale(1.18)}}
@media(max-width:600px){.halo{inset:-180px -180px -150px -200px}.contact::before{inset:-40% -130%;opacity:.85}.footer-spark{width:23px;height:23px}.footer-spark svg{width:23px;height:23px}}
@media(prefers-reduced-motion:reduce){.halo::before{animation-duration:40s}.halo::after{animation-duration:50s}.contact::before{animation-duration:44s}.reveal-ready:not(.revealed){transform:translateY(8px)}.hero-art>.orbit{animation-delay:3.2s,4.7s;animation-duration:1.6s,12s}.asterisk-spin{animation-duration:65s}}
/* Compositor-only looping motion, bounded textures and one owner per entrance. */
:root{--violet:#7652ce;--lilac:#e8d9ef;--brand-gradient:linear-gradient(110deg,#50c9e3 0%,#6263d2 28%,#952dba 55%,#d826b1 78%,#e991ce 100%)}
.brand-intro{animation-delay:1.35s;animation-duration:.6s}.intro-lockup{animation-delay:1.35s;animation-duration:.55s}.intro-aura{animation-duration:1.9s}.intro-lockup .mark-left,.intro-lockup .mark-bridge{animation-duration:.9s}.intro-lockup .logo-asterisk{animation-duration:.8s;animation-delay:.25s}.intro-name .intro-char{animation-duration:.8s;animation-delay:calc(.15s + var(--char-delay))}.intro-name>.intro-descriptor{animation-duration:.7s;animation-delay:.3s}.header{animation-delay:1.4s;animation-duration:1s}
.halo{inset:-130px -100px -100px -160px;overflow:visible;opacity:1}.halo::before{inset:-8%;background:url('assets/color-wave.png') center/100% 100% no-repeat;animation:light-wave 26s ease-in-out infinite alternate;mix-blend-mode:normal;opacity:1;will-change:transform}.halo::after{display:none}.contact{background:#f6edf4}.contact::before{inset:-16% -12%;background:url('assets/color-wave.png') center/100% 100% no-repeat;animation:light-wave 30s ease-in-out infinite alternate-reverse;opacity:1;will-change:transform}
@keyframes light-wave{from{transform:translate3d(4%,-3%,0) rotate(-7deg) scale(1.05)}to{transform:translate3d(-6%,4%,0) rotate(8deg) scale(1.12)}}
.hero-copy,.hero-copy>p,.hero-copy>.button,.title-line>span{animation:none}.hero-copy>p,.hero-copy>.button{animation:gentle-rise 1.1s var(--ease-out) 1.5s backwards}.title-line>span{opacity:1;filter:none;transform:none}.letter-word{display:inline-block;white-space:nowrap}.letter-unit{display:inline-block}.letter-enter .letter-unit{opacity:0;transform:translateY(.45em)}.letter-enter.is-visible .letter-unit{animation:character-arrive 1.8s var(--ease-out) calc(var(--letter-start,0ms) + var(--letter-delay,0ms)) both}.hero h1 .letter-unit{animation-duration:2.1s}.letter-enter{opacity:1;transform:none}.letter-word{line-height:inherit}.intro-name .intro-char{filter:none}
@keyframes character-arrive{0%{opacity:0;transform:translate3d(0,.45em,0);filter:none}35%{filter:none}100%{opacity:1;transform:translate3d(0,0,0);filter:none}}
.hero-art>.orbit{animation:symbol-breathe 16s ease-in-out 4.6s infinite;filter:none}.hero-art .mark-left{animation:mark-build-left 2.5s var(--ease-out) 1.45s backwards}.hero-art .mark-bridge{animation:mark-build-arch 2.7s var(--ease-out) 1.65s backwards;transform-origin:238px 255px}.hero-art .logo-asterisk{animation:asterisk-pop 2.2s var(--ease-out) 1.95s backwards}.brand-emblem .logo-asterisk{animation-delay:1.55s}.footer-spark .logo-asterisk{animation-delay:0s}.asterisk-spin{animation-duration:45s}
@keyframes mark-build-left{from{opacity:0;transform:translate3d(0,35px,0)}to{opacity:1;transform:translate3d(0,0,0)}}@keyframes mark-build-arch{from{opacity:0;transform:translate3d(0,25px,0) rotate(-12deg)}to{opacity:1;transform:translate3d(0,0,0) rotate(0)}}
.button{position:relative;isolation:isolate;overflow:hidden;transition:transform 240ms var(--ease-out),background 200ms ease}.button::before{content:"";position:absolute;inset:-15% -40%;z-index:-1;background:var(--brand-gradient);opacity:0;transition:opacity 300ms ease;transform:translate3d(-8%,0,0)}.button-label{position:relative;z-index:1}.button .letter-unit{opacity:1;transform:none}.button-label .letter-word{font:inherit;letter-spacing:inherit}.button svg{position:relative;z-index:1;flex-shrink:0}.button:active{transform:scale(.98)}.carousel-dots button[aria-current=true]{background:var(--brand-gradient)}.carousel-dots button{transition:background 250ms ease;min-width:7px}.text-link:hover{color:#9639b6}.word-reel{color:#8e55b6}.carousel-track{transition-property:transform;transition-duration:1.2s}.intro-aura{background:radial-gradient(ellipse,#d7eaf4,transparent 58%),radial-gradient(ellipse at 65% 60%,#f1d6ec,transparent 58%)}
@media(hover:hover) and (pointer:fine){.button:hover{background:var(--ink);transform:scale(1.035)}.button:hover::before{opacity:1;animation:button-flow 7s ease-in-out infinite alternate}.button-enter .button-label .letter-unit{animation:character-arrive .85s var(--ease-out) var(--letter-delay,0ms) both}.carousel-arrows button:hover{background:var(--brand-gradient);border-color:transparent}}
@keyframes button-flow{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(8%,0,0)}}
.hero-art.is-away .halo::before,.hero-art.is-away .asterisk-spin,.contact.is-away::before,.word-reel.is-away>div,.page-hidden .halo::before,.page-hidden .contact::before,.page-hidden .asterisk-spin,.page-hidden .word-reel>div{animation-play-state:paused}
@media(max-width:600px){.halo{inset:-110px -100px -100px -110px}.contact::before{inset:-10% -35%}.hero h1{font-size:13.8vw;letter-spacing:-.035em}.letter-enter.is-visible .letter-unit{animation-duration:1.6s}}
@media(prefers-reduced-motion:reduce){.letter-enter.is-visible .letter-unit{animation-name:character-soft;animation-duration:1.7s}.hero h1 .letter-unit{animation-duration:2s}.hero-art>.orbit{animation:mark-tone 14s ease-in-out 4.6s infinite}.hero-art .mark-left{animation-name:gentle-fade}.hero-art .mark-bridge{animation-name:gentle-fade}.hero-art .logo-asterisk{animation-name:gentle-fade}.halo::before,.contact::before{animation-duration:42s}.asterisk-spin{animation-duration:65s}}
@keyframes character-soft{0%{opacity:0;transform:translateY(6px);filter:none}40%{filter:none}100%{opacity:1;transform:none;filter:none}}
/* Keep the texture's transparent margins inside each section, avoiding rectangular seams. */
.halo{inset:-20px -60px -10px -170px}.halo::before{inset:0}.contact::before{inset:0 -8%}.button:focus-visible::before{opacity:1;animation:button-flow 7s ease-in-out infinite alternate}.button:focus-visible{transform:scale(1.025)}:root{--violet:#9639b6}.button:active::before{opacity:1}.button:active{transform:scale(1.015)}
@media(max-width:600px){.halo{inset:-15px -45px -5px -70px}.contact::before{inset:0 -18%}}
/* Restore the approved wave; feather the visible section edge rather than redesigning the colors. */
.halo{inset:-230px -240px -220px -260px}.halo::before{inset:-15%;background:url('assets/color-wave.svg') center/100% 100% no-repeat;animation:wave-sway 28s ease-in-out infinite alternate;mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}.halo::after{display:none}.contact{background:#f2eafa}.contact::before{inset:-80% -40%;background:url('assets/color-wave.svg') center/100% 100% no-repeat;animation:wave-follow 30s ease-in-out infinite alternate;opacity:.95;mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.hero::after,.contact::after{content:"";position:absolute;bottom:0;left:0;right:0;height:clamp(150px,21vw,260px);pointer-events:none;z-index:0;background:linear-gradient(to bottom,transparent 0%,var(--paper) 100%)}.hero-foot{z-index:2}.contact::after{height:130px;background:linear-gradient(to bottom,transparent,#f2eafa)}.contact-intro{position:relative;z-index:1}
@keyframes character-arrive{from{opacity:0;transform:translateY(.36em)}to{opacity:1;transform:translateY(0)}}@keyframes character-soft{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.letter-enter.is-visible .letter-unit{animation-timing-function:ease-out;animation-duration:1.3s;filter:none}.hero h1 .letter-unit{animation-duration:1.7s}.letter-unit.letter-settled{animation:none!important;opacity:1;transform:none;filter:none}.button-enter .button-label .letter-unit{animation-duration:.7s;animation-timing-function:ease-out;filter:none}.letter-word{filter:none}.intro-name .intro-char,.intro-name>.intro-descriptor{filter:none}
@media(max-width:600px){.halo{inset:-180px -180px -150px -200px}.contact::before{inset:-40% -130%;opacity:.85}.hero::after{height:180px}.contact::after{height:95px}}
@media(prefers-reduced-motion:reduce){.halo::before{animation-duration:40s}.contact::before{animation-duration:44s}.letter-enter.is-visible .letter-unit{animation-duration:1.3s}.hero h1 .letter-unit{animation-duration:1.7s}}
/* Feather only the background layer, keeping the N fully opaque. */
.hero::after{display:none}.halo::after{display:block;position:absolute;inset:auto -100% 80px;height:260px;z-index:1;background:linear-gradient(to bottom,transparent,var(--paper));opacity:1;transform:none;animation:none;mix-blend-mode:normal;pointer-events:none}
@media(max-width:600px){.halo::after{inset:auto -100% 40px;height:170px}}
/* Four scoped corrections: section-wide wave, stable feather, softer feedback and gradient reel. */
.wave-field{position:absolute;inset:-6% -6% 0;z-index:-1;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 72%,transparent 100%)}.wave-field::before{content:"";position:absolute;inset:-15% -8%;background:url('assets/color-wave.svg') center/100% 100% no-repeat;animation:section-wave 32s ease-in-out infinite alternate;will-change:transform}.hero-wave{inset:-8% -8% 0}.contact-wave{inset:-6% -6% 0;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 77%,transparent)}.contact::before,.contact::after,.hero::after{display:none}.hero-art{background:none}.contact{isolation:isolate;background:#f2eafa}.hero{isolation:isolate}.wave-field.is-away::before,.page-hidden .wave-field::before{animation-play-state:paused}
@keyframes section-wave{from{transform:translate3d(4%,-2%,0) rotate(-5deg) scale(1.05)}to{transform:translate3d(-5%,3%,0) rotate(6deg) scale(1.09)}}
.button,.brand-lockup{transition:transform 480ms cubic-bezier(.23,1,.32,1),background-color 300ms ease;transform-origin:center;backface-visibility:hidden}.brand-lockup{transform-origin:left center}.button::before{transition:opacity 480ms ease}.button:active{transform:scale(.99)}.brand-lockup:active{transform:scale(.99)}.brand-lockup:focus-visible{transform:scale(1.025)}.button:focus-visible{transform:scale(1.025)}
@media(hover:hover) and (pointer:fine){.button:hover{transform:scale(1.025)}.brand-lockup:hover{transform:scale(1.035)}}
.word-reel{opacity:1}.word-reel>div{background:linear-gradient(110deg,#37bfe0 0%,#4e80de 23%,#7550cc 45%,#ba2dc6 70%,#e76bc5 90%,#37bfe0 100%);background-size:50% 100%;background-clip:text;-webkit-background-clip:text;color:transparent}
@media(max-width:600px){.wave-field{inset:-6% -25% 0}.hero-wave{inset:-5% -40% 0 -50%}.contact-wave{inset:-6% -35% 0}}
@media(prefers-reduced-motion:reduce){.wave-field::before{animation-duration:45s}.button,.brand-lockup{transition-duration:400ms}}
.wave-field,.hero-wave,.contact-wave{top:0;bottom:0}
/* Diffuse color field: broad, soft edges with breathing instead of a travelling stripe. */
.wave-field::before{inset:-3%;background:url('assets/diffuse-wave.png') center/100% 100% no-repeat;animation:diffuse-breathe 20s ease-in-out infinite alternate;opacity:1}.wave-field{mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 78%,transparent)}.wave-field::after{content:"";position:absolute;inset:-3%;background:url('assets/diffuse-wave.png') center/100% 100% no-repeat;transform:translate3d(2%,1%,0) scale(1.04);opacity:0;animation:diffuse-light 24s ease-in-out infinite alternate}.contact-wave{mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 80%,transparent)}
@keyframes diffuse-breathe{from{transform:translate3d(0,-1%,0) scale(1.02)}to{transform:translate3d(-1%,1%,0) scale(1.065)}}@keyframes diffuse-light{from{opacity:0}to{opacity:.26}}
.hero-wave{left:-4%;right:-4%}.contact-wave{left:-5%;right:-5%}
/* Faster readable flow inside buttons, without changing their shape. */
.button:hover::before,.button:focus-visible::before{animation:button-flow 1.8s ease-in-out infinite alternate}.brand-lockup{transform-origin:center center}.brand-lockup .brand-word{background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text}.brand-lockup .brand-word,.brand-lockup small{transition:color 280ms ease}
@media(hover:hover) and (pointer:fine){.brand-lockup:hover .brand-word,.brand-lockup:hover small{color:transparent}.brand-lockup:hover .mark-left path,.brand-lockup:hover .mark-bridge path{fill:url(#header-spark)}.brand-lockup:hover .logo-asterisk path{fill:var(--ink)}}
.brand-lockup:focus-visible .brand-word,.brand-lockup:focus-visible small{color:transparent}.brand-lockup:focus-visible .mark-left path,.brand-lockup:focus-visible .mark-bridge path{fill:url(#header-spark)}.brand-lockup:focus-visible .logo-asterisk path{fill:var(--ink)}
/* Let the opening finish, then introduce the page in a clear hierarchy. */
.header{animation-delay:2.15s}.hero-copy>p{animation:gentle-rise 1.25s ease-out 3.5s backwards}.hero-copy>.button{animation:gentle-rise 1.15s ease-out 4.2s backwards}.hero-art .mark-left{animation-delay:3s}.hero-art .mark-bridge{animation-delay:3.2s}.hero-art .logo-asterisk{animation-delay:3.9s}.hero-art>.orbit{animation-delay:6s}.hero-foot.block-enter{transition-delay:4.4s}
.block-enter{opacity:0;transform:translateY(20px);transition:opacity 1s ease-out var(--block-delay,0ms),transform 1.15s var(--ease-out) var(--block-delay,0ms)}.block-enter.block-visible{opacity:1;transform:none}.contact-bottom .button{animation:none}
/* Build each concept from chrome to content, only when the carousel reaches the viewport. */
.project-carousel:not(.carousel-ready) .browser-top,.project-carousel:not(.carousel-ready) .preview-nav,.project-carousel:not(.carousel-ready) .alma-layout>* , .project-carousel:not(.carousel-ready) .origem-layout>*,.project-carousel:not(.carousel-ready) .concept-layout>*,.project-carousel:not(.carousel-ready) .preview-footer,.project-carousel:not(.carousel-ready) .project-info,.project-carousel:not(.carousel-ready) .carousel-controls,.project-carousel:not(.carousel-ready) .carousel-progress{opacity:0}
.carousel-track{transition-duration:1.35s;transition-timing-function:var(--ease-in-out)}.carousel-track>.project .project-stage{transition:transform 1.3s var(--ease-out),opacity 1s ease;transform:perspective(1500px) rotateY(0deg) scale(1);transform-origin:center;backface-visibility:hidden}.carousel-track>.project:not(.active) .project-stage{transform:perspective(1500px) rotateY(-5deg) scale(.94);opacity:.8}.carousel-track>.project.active .project-stage{opacity:1}
.carousel-ready .project.active .browser-top{animation:piece-arrive .7s ease-out both}.carousel-ready .project.active .preview-nav{animation:piece-arrive .8s ease-out .12s both}.carousel-ready .project.active :is(.alma-layout,.origem-layout,.concept-layout)>div{animation:piece-arrive 1s var(--ease-out) .28s both}.carousel-ready .project.active :is(.alma-layout,.origem-layout,.concept-layout)>img{animation:image-arrive 1.25s var(--ease-out) .38s both}.carousel-ready .project.active .preview-footer{animation:piece-arrive .9s ease-out .55s both}.carousel-ready .project.active .project-info{animation:piece-arrive .9s ease-out .7s both}.carousel-ready .carousel-controls,.carousel-ready .carousel-progress{animation:piece-arrive 1s ease-out .85s both}
@keyframes piece-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes image-arrive{from{opacity:0;transform:translateY(20px) scale(1.025)}to{opacity:1;transform:translateY(0) scale(1)}}
.carousel-progress{height:3px;background:#3c354a;margin:30px 5% 0;overflow:hidden;border-radius:10px}.carousel-progress>span{display:block;height:100%;background:var(--brand-gradient);transform:scaleX(0);transform-origin:left}.carousel-controls{padding-top:20px}
.wave-field.is-away::after,.page-hidden .wave-field::after{animation-play-state:paused}
@media(max-width:600px){.hero-wave{left:-25%;right:-25%}.contact-wave{left:-25%;right:-25%}.carousel-progress{margin-left:6%;margin-right:6%}.carousel-track>.project:not(.active) .project-stage{transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){.wave-field::before{animation-duration:32s}.block-enter{transform:none}.carousel-ready .project.active :is(.browser-top,.preview-nav,.preview-footer,.project-info),.carousel-ready .project.active :is(.alma-layout,.origem-layout,.concept-layout)>div{animation-name:gentle-fade}.carousel-ready .project.active :is(.alma-layout,.origem-layout,.concept-layout)>img{animation-name:gentle-fade}.carousel-track>.project:not(.active) .project-stage{transform:scale(.98)}}
/* Preserve the approved color artwork; only the slow deformation changes. */
.wave-field::before{animation:wave-undulate 15s ease-in-out infinite;transform-origin:60% 50%}.wave-field::after{animation:wave-undulate-secondary 19s ease-in-out infinite}
@keyframes wave-undulate{0%,100%{transform:translate3d(0,-2%,0) rotate(-1.5deg) scale(1.04)}33%{transform:translate3d(1%,2%,0) rotate(1deg) scale(1.075)}66%{transform:translate3d(-1%,4%,0) rotate(1.5deg) scale(1.05)}}@keyframes wave-undulate-secondary{0%,100%{opacity:.08;transform:translate3d(1%,2%,0) scale(1.03)}50%{opacity:.28;transform:translate3d(-1%,-3%,0) scale(1.07)}}
/* Repeating tile travels in one direction and meets itself at the loop boundary. */
.button::before{inset:0 auto 0 0;width:400%;background:linear-gradient(90deg,#50c9e3,#6263d2 23%,#952dba 45%,#d826b1 65%,#e991ce 82%,#50c9e3);background-size:50% 100%;background-repeat:repeat;transform:translate3d(0,0,0)}.button:hover::before,.button:focus-visible::before{animation:button-forward 1.5s linear infinite}@keyframes button-forward{to{transform:translate3d(-50%,0,0)}}
/* Independent geometry loops leave the existing assembly animation untouched. */
.hero-art .mark-left>path{transform-box:fill-box;transform-origin:center bottom;animation:leg-breathe 12s ease-in-out 6s infinite}.hero-art .mark-bridge>path{transform-box:fill-box;transform-origin:left bottom;animation:arch-breathe 12s ease-in-out 6s infinite}@keyframes leg-breathe{0%,45%,100%{transform:scale(1)}20%{transform:scale(1.025)}}@keyframes arch-breathe{0%,40%,100%{transform:scale(1)}65%{transform:scale(1.022)}}
/* The frame itself arrives first, before the content already choreographed inside. */
.project-carousel:not(.carousel-ready) .project-stage{opacity:0;transform:translateY(34px) scale(.97)}.carousel-ready .project .project-stage{opacity:1;transition:transform 1.35s var(--ease-out),opacity 1.1s ease-out}.carousel-ready .project.active .project-stage{animation:portfolio-frame-arrive 1.1s var(--ease-out) both}.carousel-ready .project.active .browser-top{animation-delay:.25s}.carousel-ready .project.active .preview-nav{animation-delay:.4s}.carousel-ready .project.active :is(.alma-layout,.origem-layout,.concept-layout)>div{animation-delay:.55s}.carousel-ready .project.active :is(.alma-layout,.origem-layout,.concept-layout)>img{animation-delay:.65s}.carousel-ready .project.active .project-info{animation-delay:.9s}.carousel-track>.project:not(.active) .project-stage{transform:perspective(1500px) rotateY(-8deg) scale(.92);opacity:.7}
@keyframes portfolio-frame-arrive{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
/* The active dot widens smoothly around its center; the gradient is the timer. */
.carousel-dots{justify-content:center;align-items:center;min-width:132px;gap:9px}.carousel-dots button{position:relative;display:block;flex:0 0 auto;overflow:hidden;width:7px;height:7px;min-width:0;border-radius:20px;background:#5e586c;transition:width 650ms var(--ease-out),background-color 300ms ease}.carousel-dots button[aria-current=true]{width:32px;background:#4a405c}.dot-fill{position:absolute;inset:0;display:block;background:var(--brand-gradient);transform:scaleX(0);transform-origin:left;border-radius:inherit}.carousel-dots button:not([aria-current=true]) .dot-fill{opacity:0}.carousel-dots button[aria-current=true] .dot-fill{opacity:1}.carousel-controls{padding-top:32px}
@media(max-width:600px){.carousel-track>.project:not(.active) .project-stage{transform:scale(.94)}}
@media(prefers-reduced-motion:reduce){.wave-field::before{animation-duration:24s}.wave-field::after{animation-duration:30s}.hero-art .mark-left>path{animation-name:leg-breathe-soft}.hero-art .mark-bridge>path{animation-name:arch-breathe-soft}.carousel-ready .project.active .project-stage{animation-name:gentle-fade}.carousel-track>.project:not(.active) .project-stage{transform:scale(.97)}}
@keyframes leg-breathe-soft{0%,45%,100%{transform:scale(1)}20%{transform:scale(1.012)}}@keyframes arch-breathe-soft{0%,40%,100%{transform:scale(1)}65%{transform:scale(1.012)}}
.carousel-ready .project.loop-resting :is(.project-stage,.browser-top,.preview-nav,.preview-footer,.project-info),.carousel-ready .project.loop-resting :is(.alma-layout,.origem-layout,.concept-layout)>*{animation:none!important;opacity:1;transform:none}.hero-art.is-away .mark-left>path,.hero-art.is-away .mark-bridge>path,.page-hidden .hero-art .mark-left>path,.page-hidden .hero-art .mark-bridge>path{animation-play-state:paused}
/* Make the existing diffuse field perceptibly move while preserving its artwork. */
.hero-wave{left:-16%;right:-16%;top:-3%;bottom:-3%}.contact-wave{left:-16%;right:-16%;top:-3%;bottom:-3%}.wave-field::before{inset:-8%;animation:visible-wave 12s ease-in-out infinite;animation-play-state:running!important}.wave-field::after{animation:visible-wave-light 16s ease-in-out infinite;animation-play-state:running!important}
@keyframes visible-wave{0%,100%{transform:translate3d(-2%,-5%,0) rotate(-2deg) scale(1.09)}50%{transform:translate3d(2%,5%,0) rotate(2deg) scale(1.15)}}@keyframes visible-wave-light{0%,100%{opacity:.06;transform:translate3d(1%,4%,0) scale(1.04)}50%{opacity:.34;transform:translate3d(-1%,-4%,0) scale(1.11)}}
/* One soft diagonal tile shared by every interactive surface. */
.button::before,.nav-interactive::before{background:url('assets/interaction-gradient.png') 0 0/50% 100% repeat-x;inset:0 auto 0 0;width:400%}.button:hover::before,.button:focus-visible::before{animation:button-forward 1.7s linear infinite}.button,.carousel-arrows button{transition:transform 420ms var(--ease-out),color 280ms ease,background-color 280ms ease}.button:hover,.button:focus-visible,.button:active{color:#16151c}.button svg,.text-link svg,.project-open svg,.hero-foot svg,.carousel-arrows svg{stroke-width:2.5;transform-origin:center;transition:transform 450ms var(--ease-out),color 280ms ease}.button:hover svg,.button:focus-visible svg{color:#16151c;transform:scale(1.15)}
/* Hover never replays entrance, position or opacity. Blur passes from letter to letter. */
.button-enter .button-label .letter-unit,.nav-interactive.button-enter .letter-unit{animation:label-blur .8s ease-in-out var(--blur-delay,0ms) both;opacity:1;transform:none}.button-label .letter-unit{opacity:1;transform:none}.letter-unit.letter-settled{filter:none}
@keyframes label-blur{0%,100%{filter:blur(0)}42%{filter:blur(2px)}}
.header nav>a.nav-interactive{font-weight:700;position:relative;isolation:isolate;border-radius:100px;padding:11px 16px;margin:-11px -16px;overflow:hidden;transition:transform 420ms var(--ease-out),color 280ms ease}.nav-interactive::before{content:"";position:absolute;z-index:-1;opacity:0;transition:opacity 300ms ease}.nav-interactive:hover,.nav-interactive:focus-visible{color:#16151c!important;transform:scale(1.04)}.nav-interactive:hover::before,.nav-interactive:focus-visible::before{opacity:1;animation:button-forward 1.7s linear infinite}
.brand-lockup .brand-word{background-image:url('assets/interaction-gradient.png');background-size:200% 100%;background-repeat:repeat-x}.brand-lockup:hover .brand-word,.brand-lockup:focus-visible .brand-word{animation:brand-gradient-travel 2.4s linear infinite}@keyframes brand-gradient-travel{to{background-position:200% 0}}
/* Subtle automatic pop in each piece, large enough to register in reduced-motion environments too. */
.hero-art .mark-left>path{animation:piece-leg-pop 10s ease-in-out 5.8s infinite;transform-origin:center center;animation-play-state:running!important}.hero-art .mark-bridge>path{animation:piece-arch-pop 10s ease-in-out 5.8s infinite;transform-origin:center center;animation-play-state:running!important}@keyframes piece-leg-pop{0%,45%,100%{transform:scale(1)}22%{transform:scale(1.055)}}@keyframes piece-arch-pop{0%,42%,100%{transform:scale(1)}70%{transform:scale(1.045)}}
.carousel-arrows button{isolation:isolate;position:relative;overflow:hidden}.carousel-arrows button::before{content:"";position:absolute;inset:0 auto 0 0;width:400%;z-index:-1;background:url('assets/interaction-gradient.png') 0 0/50% 100% repeat-x;opacity:0;transition:opacity 300ms ease}.carousel-arrows button:hover,.carousel-arrows button:focus-visible{background:transparent;color:#16151c;transform:scale(1.08);border-color:transparent}.carousel-arrows button:hover::before,.carousel-arrows button:focus-visible::before{opacity:1;animation:button-forward 1.7s linear infinite}.carousel-arrows button:first-child:hover svg,.carousel-arrows button:first-child:focus-visible svg{transform:rotate(-135deg) scale(1.15)}.carousel-arrows button:last-child:hover svg,.carousel-arrows button:last-child:focus-visible svg{transform:rotate(45deg) scale(1.15)}.carousel-arrows button:active{transform:scale(1.02)}
/* The opening forms, celebrates with the same brand treatment, then reveals the page. */
.brand-intro{animation-delay:1.85s;animation-duration:.55s}.intro-lockup{animation:intro-brand-pop .65s var(--ease-out) 1.15s both,intro-lockup-out .45s var(--ease-out) 1.85s forwards}.intro-gradient-piece{opacity:0;animation:intro-color-show .55s ease 1.2s forwards}.intro-lockup .logo-asterisk path{animation:intro-star-black .55s ease 1.2s forwards}.intro-name>.name-letters,.intro-name>.intro-descriptor{background:url('assets/interaction-gradient.png') 0 0/200% 100% repeat-x;background-clip:text;-webkit-background-clip:text}.intro-name>.name-letters{animation:intro-name-color .55s ease 1.2s forwards}.intro-name>.intro-descriptor{animation:gentle-rise .7s var(--ease-out) .3s backwards,intro-name-color .55s ease 1.2s forwards}
@keyframes intro-brand-pop{0%,100%{transform:scale(1)}55%{transform:scale(1.04)}}@keyframes intro-color-show{to{opacity:1}}@keyframes intro-name-color{from{color:#16151c}to{color:transparent}}@keyframes intro-star-black{to{fill:#16151c}}
@media(max-width:600px){.hero-wave{left:-35%;right:-35%}.contact-wave{left:-30%;right:-30%}}
@media(prefers-reduced-motion:reduce){.wave-field::before{animation-duration:18s}.wave-field::after{animation-duration:22s}.hero-art .mark-left>path,.hero-art .mark-bridge>path{animation-duration:14s}.intro-lockup{animation-name:intro-brand-pop,intro-lockup-out}}
/* Keep artwork and color placement; magnify the actual moving surface. */
.hero-wave{left:-23%;right:-23%}.contact-wave{left:-23%;right:-23%}.wave-field::before{animation:main-wave-zoom 9s ease-in-out infinite!important;animation-play-state:running!important;transform-origin:60% 50%}.wave-field::after{animation:main-wave-overlap 13s ease-in-out infinite!important;animation-play-state:running!important}
@keyframes main-wave-zoom{0%,100%{transform:translate3d(-3%,-7%,0) rotate(-3deg) scale(1.2)}50%{transform:translate3d(3%,7%,0) rotate(3deg) scale(1.34)}}@keyframes main-wave-overlap{0%,100%{opacity:.1;transform:translate3d(2%,5%,0) scale(1.17)}50%{opacity:.3;transform:translate3d(-2%,-5%,0) scale(1.29)}}
/* Replay the same separated assembly used by the opening, rather than a barely visible pulse. */
.hero-art>.orbit{animation:none!important;transform:none}.hero-art .mark-left>path,.hero-art .mark-bridge>path{animation:none!important;transform:none}.hero-art .mark-left{transform-box:fill-box;transform-origin:center;animation:n-leg-reassemble 8s ease-in-out 2.8s infinite!important;animation-play-state:running!important}.hero-art .mark-bridge{transform-box:fill-box;transform-origin:center;animation:n-arch-reassemble 8s ease-in-out 2.8s infinite!important;animation-play-state:running!important}.hero-art .logo-asterisk{transform-box:fill-box;transform-origin:center;animation:n-star-reassemble 8s ease-in-out 2.8s infinite!important;animation-play-state:running!important}
@keyframes n-leg-reassemble{0%,100%{opacity:0;transform:translate(-30px,25px) rotate(-10deg) scale(.9)}20%{opacity:1;transform:none}30%{opacity:1;transform:scale(1.045)}42%,88%{opacity:1;transform:none}}
@keyframes n-arch-reassemble{0%,12%,100%{opacity:0;transform:translate(20px,20px) rotate(20deg) scale(.9)}36%{opacity:1;transform:none}47%{opacity:1;transform:scale(1.04)}59%,88%{opacity:1;transform:none}}
@keyframes n-star-reassemble{0%,25%,100%{opacity:0;transform:scale(.7)}43%{opacity:1;transform:scale(1.08)}56%,88%{opacity:1;transform:scale(1)}}
/* The timer still fills over seven seconds; its color independently flows forward. */
.dot-fill{background:none;overflow:hidden}.dot-fill::before{content:"";position:absolute;inset:0 auto 0 0;width:400%;background:url('assets/interaction-gradient.png') 0 0/50% 100% repeat-x;animation:button-forward 1.5s linear infinite}
@media(max-width:600px){.hero-wave{left:-42%;right:-42%}.contact-wave{left:-38%;right:-38%}}
@media(prefers-reduced-motion:reduce){.wave-field::before{animation-duration:12s!important}.wave-field::after{animation-duration:17s!important}.hero-art .mark-left,.hero-art .mark-bridge,.hero-art .logo-asterisk{animation-duration:10s!important}}
/* One SVG coordinate field colors the complete logo, avoiding transparent HTML text. */
.brand-unified{display:block;width:160px;height:auto;line-height:0}.brand-unified>.unified-logo{display:block;width:160px;height:auto;fill:none;stroke:none;overflow:visible}.unified-ink-dark{fill:#16151c;transition:opacity .4s ease}.unified-ink-gradient{opacity:0;transition:opacity .4s ease}.brand-unified:hover .unified-ink-gradient,.brand-unified:focus-visible .unified-ink-gradient{opacity:1}.brand-unified:hover .unified-ink-dark,.brand-unified:focus-visible .unified-ink-dark{opacity:0}.brand-unified .unified-star path{transition:fill .4s ease}.brand-unified:hover .unified-star path,.brand-unified:focus-visible .unified-star path{fill:#16151c}
.intro-unified{display:block;line-height:0}.intro-unified>.unified-logo{width:330px;height:auto;fill:none;stroke:none;overflow:visible}.intro-unified .unified-leg{animation:unified-leg-enter .8s var(--ease-out) .05s backwards}.intro-unified .unified-arch{transform-origin:34px 54px;animation:unified-arch-enter .9s var(--ease-out) .18s backwards}.intro-unified .unified-letter{animation:unified-letter-enter .8s var(--ease-out) calc(.15s + var(--logo-delay)) backwards}.intro-unified .unified-descriptor{animation:unified-letter-enter .7s var(--ease-out) .35s backwards}.intro-unified .unified-ink-gradient{animation:unified-color-enter .55s ease 1.2s forwards}.intro-unified .unified-ink-dark{animation:unified-color-leave .55s ease 1.2s forwards}.intro-unified .unified-star path{animation:intro-star-black .55s ease 1.2s forwards}.intro-unified .unified-star{animation:asterisk-pop .9s var(--ease-out) .35s backwards}
@keyframes unified-leg-enter{from{opacity:0;transform:translate(-10px,8px)}to{opacity:1;transform:none}}@keyframes unified-arch-enter{from{opacity:0;transform:translateY(8px) rotate(-12deg)}to{opacity:1;transform:none}}@keyframes unified-letter-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes unified-color-enter{to{opacity:1}}@keyframes unified-color-leave{to{opacity:0}}
/* Large mark: each part remains visible and uses scale only, in sequence. */
.hero-art .mark-left,.hero-art .mark-bridge,.hero-art .logo-asterisk{opacity:1!important;transform-box:fill-box;transform-origin:center;animation-play-state:running!important;animation-delay:0s!important;animation-duration:12s!important;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important}.hero-art .mark-left{animation-name:n-scale-leg!important}.hero-art .mark-bridge{animation-name:n-scale-arch!important}.hero-art .logo-asterisk{animation-name:n-scale-star!important}.hero-art .asterisk-spin{animation:none!important;transform:none}.hero-art .mark-left>path,.hero-art .mark-bridge>path{animation:none!important;transform:none}
@keyframes n-scale-leg{0%,31%,100%{transform:scale(1)}15%{transform:scale(1.055)}}@keyframes n-scale-arch{0%,32%,66%,100%{transform:scale(1)}49%{transform:scale(1.045)}}@keyframes n-scale-star{0%,67%,100%{transform:scale(1)}83%{transform:scale(1.09)}}
.button:hover,.button:focus-visible,.button:active{background-color:#bd67c9;border:0;box-shadow:none}.button:hover::before,.button:focus-visible::before{opacity:1}.carousel-arrows button:hover,.carousel-arrows button:focus-visible{box-shadow:none;border-color:transparent}
/* Header links keep transparent surroundings. Only the glyphs receive color. */
.nav-interactive::before{display:none!important}.header nav>a.nav-interactive:hover,.header nav>a.nav-interactive:focus-visible{background:transparent;box-shadow:none;border:0}.nav-interactive:hover .letter-unit,.nav-interactive:focus-visible .letter-unit{background:url('assets/interaction-gradient.png') 0 0/200% 100% repeat-x;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}.nav-interactive.button-enter .letter-unit.letter-settled{animation:brand-gradient-travel 2.4s linear infinite!important}
.wave-field::before{animation:wave-screen-travel 10s ease-in-out infinite!important;animation-play-state:running!important}.wave-field::after{animation:wave-screen-light 14s ease-in-out infinite!important;animation-play-state:running!important}
@keyframes wave-screen-travel{0%,100%{transform:translate3d(-10%,5%,0) rotate(-3deg) scale(1.32)}50%{transform:translate3d(10%,-5%,0) rotate(3deg) scale(1.4)}}@keyframes wave-screen-light{0%,100%{opacity:.08;transform:translate3d(7%,-4%,0) scale(1.22)}50%{opacity:.35;transform:translate3d(-7%,4%,0) scale(1.36)}}
@media(max-width:600px){.brand-unified,.brand-unified>.unified-logo{width:132px}.intro-unified>.unified-logo{width:265px}}
@media(prefers-reduced-motion:reduce){.intro-unified .unified-leg,.intro-unified .unified-arch,.intro-unified .unified-letter,.intro-unified .unified-descriptor{animation-name:gentle-fade}.wave-field::before{animation-duration:13s!important}.wave-field::after{animation-duration:18s!important}}
.brand-unified .unified-descriptor text{font-size:17px;letter-spacing:3px}.intro-unified .unified-descriptor text{font-size:13px;letter-spacing:3.2px}
/* Restore the independent spin inside the existing scale-only asterisk group. */
.hero-art .asterisk-spin{animation:asterisk-turn 45s linear infinite!important;transform-box:fill-box;transform-origin:center;animation-play-state:running!important}
/* Blur remains staggered on the parent; every glyph shares the color phase from pointer entry. */
.nav-interactive:hover .letter-unit,.nav-interactive:focus-visible .letter-unit{background:none;color:inherit;-webkit-text-fill-color:inherit}.nav-interactive.button-enter .letter-unit.letter-settled{animation:none!important}.nav-glyph{display:inline-block}.nav-interactive:hover .nav-glyph,.nav-interactive:focus-visible .nav-glyph{background-image:url('assets/interaction-gradient.png');background-size:var(--nav-width) 100%;background-repeat:repeat-x;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:nav-word-color 2.4s linear infinite;animation-delay:0s}
@keyframes nav-word-color{from{background-position-x:calc(0px - var(--nav-x))}to{background-position-x:calc(0px - var(--nav-x) - var(--nav-width))}}
/* Requested Services addition; no background field is copied into this mark. */
.services-mark{margin-top:26px;width:min(290px,85%);height:auto}.services-symbol{display:block;width:100%;height:auto;max-width:none;animation:none!important;transform:none;filter:none;fill:var(--ink);stroke:none}.services-symbol .mark-left,.services-symbol .mark-bridge,.services-symbol .logo-asterisk{opacity:1;transform-box:fill-box;transform-origin:center;animation-duration:12s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.services-symbol .mark-left{animation-name:n-scale-leg}.services-symbol .mark-bridge{animation-name:n-scale-arch}.services-symbol .logo-asterisk{animation-name:n-scale-star}.services-symbol .asterisk-spin{animation:asterisk-turn 45s linear infinite;transform-box:fill-box;transform-origin:center}.services-link-label{display:inline-block;background:url('assets/interaction-gradient.png') 0 0/200% 100% repeat-x;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:brand-gradient-travel 2.4s linear infinite}.services .text-link{color:var(--ink);border-bottom-color:#a479ce}.services .text-link svg{stroke:url(#services-link-ink)}
/* All clickable surfaces receive centered feedback, with a smaller scale for large projects. */
a,button,summary{transition:transform 450ms var(--ease-out),color 280ms ease,background-color 280ms ease;transform-origin:center}.project{transition:transform 550ms var(--ease-out)}footer a{display:inline-block}
@media(hover:hover) and (pointer:fine){a:hover,button:hover,summary:hover{transform:scale(1.025)}.project:hover{transform:scale(1.012)}.services .text-link:hover svg{transform:scale(1.12)}.carousel-dots button:hover{transform:scale(1.15)}}
a:active,button:active,summary:active{transform:scale(.99)}.project:focus-visible{transform:scale(1.012)}summary:focus-visible{transform:scale(1.025)}
/* Portfolio names share the menu's word-wide gradient and independent glyph blur. */
.project-enter .project-info .gradient-title .letter-unit{animation:label-blur .8s ease-in-out var(--blur-delay,0ms) both;opacity:1;transform:none}.project:hover .gradient-title .nav-glyph,.project:focus-visible .gradient-title .nav-glyph{background-image:url('assets/interaction-gradient.png');background-size:var(--nav-width) 100%;background-repeat:repeat-x;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:nav-word-color 2.4s linear infinite;animation-delay:0s}
@media(max-width:600px){.services-mark{width:230px;margin-top:24px}}@media(prefers-reduced-motion:reduce){a,button,summary{transition-duration:350ms}.services-symbol .asterisk-spin{animation-duration:65s}}