:root{--ease-out:cubic-bezier(.2,.75,.25,1);--ease-soft:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:125px}
body{isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 83% 12%,#b4dd4820,transparent 43%),radial-gradient(ellipse at 5% 53%,#647e2310,transparent 38%)}
.header{position:sticky;top:16px;z-index:20;height:86px;margin-top:18px;padding-inline:24px;border:1px solid #e6f2c51a;border-radius:18px;background:#15170fb3;-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%);box-shadow:0 12px 45px #00000024,inset 0 1px #ffffff07;transition:border-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.header:focus-within,.header:hover{border-color:#d9ff6438;box-shadow:0 15px 50px #00000038,inset 0 1px #ffffff0a}
nav a{transition:color .25s var(--ease-out),background .25s var(--ease-out),border-color .25s var(--ease-out),transform .35s var(--ease-soft)}
nav .nav-contact{border-radius:10px;background:#ffffff04;border-color:#d5e5ae30}
nav .nav-contact:hover{background:#d9ff6410;border-color:#d9ff6470;transform:translateY(-1px)}
.profile-photo{box-shadow:0 0 0 5px #d9ff6407;transition:box-shadow .4s var(--ease-out)}
.brand:hover .profile-photo{box-shadow:0 0 0 6px #d9ff6414}
.hero-art{isolation:isolate}
.hero-art::before{content:"";position:absolute;inset:13% -5% 4%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#c2ed3c2b,#617b321a 45%,transparent 72%);filter:blur(48px)}
.hero-thumb{border-color:#1c2016b3;border-width:4px;border-radius:12px;box-shadow:0 22px 60px #0007,0 0 0 1px #ffffff12;transition:transform .65s var(--ease-soft),box-shadow .5s var(--ease-out);animation:thumbnail-drift 9s ease-in-out infinite}
.hero-thumb img{border-radius:8px}
.hero-thumb-two{animation-duration:11s;animation-delay:-4s}.hero-thumb-three{animation-duration:10s;animation-delay:-7s}
.hero-thumb:hover{box-shadow:0 28px 70px #0009,0 0 0 1px #d9ff6455}
.hero-thumb>span,.variation{background:#10130ba6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #ffffff26;border-radius:6px}
.button{border-radius:10px;box-shadow:0 5px 22px #c5f14110;transition:background .3s var(--ease-out),transform .45s var(--ease-soft),box-shadow .45s var(--ease-out)}
.button:hover{transform:translateY(-3px);box-shadow:0 12px 35px #c5f14125}
.button span,.text-link span,.gallery-end a span{display:inline-block;transition:transform .45s var(--ease-soft)}
.button:hover span,.text-link:hover span,.gallery-end a:hover span{transform:translate(3px,-2px)}
.hero-copy{animation:hero-arrive .85s var(--ease-soft) backwards}.hero-art{animation:hero-arrive 1.1s .12s var(--ease-soft) backwards}
.filters{scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
.filters button{border-radius:8px;transition:color .3s var(--ease-out),background .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.filters button.active{box-shadow:0 3px 15px #d9ff6415}
.project{display:block;transition:transform .55s var(--ease-soft);animation:card-arrive .6s var(--ease-soft) var(--card-delay,0ms) backwards}
.project-image{border-radius:12px;box-shadow:0 8px 24px #0002,0 0 0 1px #ffffff0a;transition:box-shadow .5s var(--ease-out)}
.project-image img{transition:transform .8s var(--ease-soft)}
.project:hover,.project:focus-visible{transform:translateY(-5px)}
.project:hover .project-image,.project:focus-visible .project-image{box-shadow:0 16px 35px #0005,0 0 0 1px #d9ff6440}
.project .open{border-radius:8px;transition:opacity .3s var(--ease-out),transform .5s var(--ease-soft)}
.project-title{transition:color .3s var(--ease-out)}
.feedback{background:linear-gradient(120deg,#20251a9c,#171a14d9);border-color:#d5e5ae18}
.contact{position:relative;isolation:isolate}
.contact::before{content:"";position:absolute;z-index:-1;inset:20% -3% 0 40%;pointer-events:none;background:radial-gradient(ellipse,#b9e44914,transparent 65%);filter:blur(35px)}
.contact-option{border-radius:12px;transition:border-color .35s var(--ease-out),background .35s var(--ease-out),transform .45s var(--ease-soft)}
.contact-option:hover{transform:translateY(-2px)}
dialog{border-color:#d9e9b92b;border-radius:18px;background:#171b13e8;box-shadow:0 40px 120px #0008,inset 0 1px #ffffff0c;-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .24s var(--ease-out),transform .36s var(--ease-soft),overlay .24s allow-discrete,display .24s allow-discrete}
dialog[open]{opacity:1;transform:translateY(0) scale(1)}
dialog::backdrop{background:#050704a3;-webkit-backdrop-filter:blur(16px) saturate(.8);backdrop-filter:blur(16px) saturate(.8);opacity:0;transition:opacity .24s var(--ease-out),overlay .24s allow-discrete,display .24s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{dialog[open]{opacity:0;transform:translateY(16px) scale(.98)}dialog[open]::backdrop{opacity:0}}
.dialog-bar{background:#171b13c9;border-color:#d9e9b91f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.dialog-image img,.feedback-images figure{border-radius:10px}
.feedback-images figure{background:#ffffff05;border:1px solid #d9e9b916;box-shadow:inset 0 1px #ffffff04}
.reveal{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity .75s var(--ease-soft),transform .85s var(--ease-soft),filter .75s var(--ease-soft)}
.reveal.is-visible,.reveal:focus-within{opacity:1;transform:none;filter:blur(0)}
@keyframes thumbnail-drift{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes hero-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes card-arrive{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:760px){html{scroll-padding-top:105px}.header{top:10px;height:74px;margin-top:10px;width:calc(100% - 24px);padding-inline:14px;border-radius:14px}.hero-art::before{filter:blur(30px)}.hero-thumb{animation:none}.project-image{border-radius:10px}.project:hover,.project:focus-visible{transform:none}dialog{border-radius:14px}dialog::backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.reveal{transform:translateY(14px);filter:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none;filter:none}.hero-thumb{translate:none}}