.hero-container{text-align:center;padding:20px}.hero-logo{display:inline-block;margin:20px}.hero-logo img{width:450px;height:450px;border-radius:50%}.hero-text{font-size:2rem;color:#ccc}.hero-text h1{margin:10px 0;font-family:var(--font-display);font-size:clamp(.85rem,3.2vw,2rem);color:var(--light-text);font-weight:400;letter-spacing:.02em;white-space:nowrap}.hero-text h1 span.name{display:inline-block;margin:10px 0;font-family:var(--font-display);font-size:clamp(1.5rem,7.2vw,4rem);font-weight:900;letter-spacing:-.04em;color:var(--light-text)}.hero-text h1 span.name .name-ch{display:inline-block}.hero-text p{font-weight:400}@media(prefers-reduced-motion:no-preference){.hero-container>*{opacity:0;transform:translateY(16px);animation:hero-reveal .8s cubic-bezier(.16,1,.3,1)forwards}.hero-logo{animation-delay:0ms}.hero-text{animation-delay:180ms}.social-links{animation-delay:360ms}.hero-text h1 span.name .name-ch{animation:name-wave 3s steps(1,end)infinite;animation-delay:calc(var(--i,0) * .14s)}}@keyframes hero-reveal{to{opacity:1;transform:translateY(0)}}@keyframes name-wave{0%,24%{color:var(--light-text)}25%,44%{color:var(--primary-color)}45%,100%{color:var(--light-text)}}.social-links{margin-top:40px;margin-right:70px;display:flex;justify-content:center;gap:70px}.social-links a{text-decoration:none;color:var(--light-text);font-size:2rem}.social-links a:hover{color:var(--primary-color)}.social-links a svg{width:40px;height:40px}.social-links a svg path{fill:var(--light-text);transition:color .3s}.social-links a:hover svg path{fill:var(--primary-color)}@media(max-width:768px){.hero-logo img{width:250px;height:250px}.hero-text{font-size:1.2rem}.social-links{margin-right:0;gap:50px}.social-links a svg{width:30px;height:30px}}