@layer components{.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:flex-start;padding-inline:var(--space-l);background-color:var(--color-surface);overflow:hidden;& .hero__content{position:relative;z-index:10;max-width:800px;margin-left:5%;padding:var(--space-xl);background:rgba(255,255,255,3%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--space-m);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,5%)}& .hero__title{font-family:var(--font-sans);font-size:clamp(4rem,15vw,10rem);font-weight:900;line-height:.85;letter-spacing:-.04em;margin:0;color:var(--color-text);text-transform:uppercase;& span{display:block;color:var(--color-accent);opacity:.8}}& .hero__subtitle{font-family:var(--font-mono);font-size:var(--size-step-1);font-weight:300;margin-top:var(--space-l);max-width:45ch;color:var(--color-text-muted);line-height:1.4;letter-spacing:.02em}& .hero__about-link{display:inline-block;margin-top:var(--space-l);font-family:var(--font-mono);font-size:var(--size-step-0);font-weight:400;color:var(--color-accent);text-decoration:none;letter-spacing:.04em;opacity:.85;transition:opacity .2s ease,letter-spacing .2s ease;&:hover{opacity:1;letter-spacing:.07em}}& .hero__image-wrapper{position:absolute;right:-5%;top:10%;width:65%;height:85%;z-index:1;border-radius:40% 60% 70% 30%/40% 50% 60% 50%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15);animation:breathe 18s ease-in-out infinite alternate;will-change:border-radius}& .hero__image{width:100%;height:100%;object-fit:cover;filter:grayscale(15%)brightness(.9)contrast(1.1);transform:scale(1.1);transition:transform 2s var(--ease-zen);&:hover{transform:scale(1.02)}}}@keyframes breathe{0%{border-radius:40% 60% 70% 30%/40% 50% 60% 50%}33%{border-radius:60% 40% 50% 50%/50% 60% 40% 50%}66%{border-radius:50% 50% 40% 60%/60% 40% 50% 50%}100%{border-radius:40% 60% 70% 30%/40% 50% 60% 50%}}@media(prefers-color-scheme:dark){.hero .hero__content{background:rgba(15,23,42,.4);border:1px solid rgba(255,255,255,5%);box-shadow:0 8px 32px rgba(0,0,0,.4)}.hero .hero__subtitle{color:var(--clr-moon-glow);opacity:.9}}@media(max-width:1024px){.hero{flex-direction:column;justify-content:center;padding-top:var(--space-2xl);& .hero__content{margin-left:0;max-width:100%;text-align:center}& .hero__image-wrapper{position:relative;right:0;top:0;width:100%;height:50vh;margin-top:var(--space-xl)}}}:root{--ease-zen:cubic-bezier(0.25, 0.1, 0.25, 1)}}.hero__image-wrapper>.progressive-image-container{width:100%;height:100%;aspect-ratio:auto}