.hero-container{position:relative;z-index:1;height:500px;width:100%}.hero{position:relative;margin:0 auto;height:500px;width:100%;max-width:1400px;.hero-image{z-index:2;position:absolute;right:0;bottom:0;height:500px;width:auto;>img{width:100%;height:100%;object-fit:cover;filter:drop-shadow(0px 0px 10px rgba(19,0,18,1));overflow:hidden}}}.hero-title{position:absolute;top:150px;left:8vw;font-weight:700;z-index:10}.hero-title>h1{font-size:5rem;color:#fff;line-height:4.5rem;color:#dcfaffa8;font-size:3rem;>.highlight{font-size:5rem;color:#50e5ff;background:#fff;background:linear-gradient(126deg,#ff00c1,#00c6ff 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}}.hero-title>h2{padding-top:40px;font-size:2rem;padding-left:2px;color:#dcfaff;>.highlight{color:#50e5ff}}.text-cycle{display:inline-block;min-width:8ch}.cycle-item{display:inline-block;color:#50e5ff;border-right:2px solid currentColor;padding-right:2px;white-space:nowrap;animation:caret-blink .8s steps(1,end) infinite}.action-banner{--mouse-x: 0px;--mouse-y: 0px;position:absolute;top:150px;left:max(calc((100% - 1200px)/2),50px);transform:translateY(-50%) translate(+50%);font-size:3rem;font-weight:700;text-transform:uppercase;z-index:10;>.action-banner-step{--z-pos: 0px;--speed: 1;color:#fff;padding-left:5px;padding-bottom:2px;left:0;top:0;position:absolute;animation:slide-in .5s ease-out forwards;animation-delay:.5s;transform-style:preserve-3d;transform:translate3d(-100vw,0,0);will-change:transform;display:flex;align-items:center;justify-content:center;width:500px}>.action-banner-step.step-1{--z-pos: 10px;--speed: .2;background-color:#029e8c;box-shadow:5px 5px 0 5px #01544a}>.action-banner-step.step-2{z-index:20;--z-pos: 20px;--speed: 1;background-color:#8d41ed;box-shadow:5px 5px 0 5px #46267b;top:50px;left:30px;animation-delay:1s}>.action-banner-step.step-3{z-index:30;--z-pos: 30px;--speed: 2;background-color:#ca4cc0;box-shadow:5px 5px 0 5px #642d64;top:100px;left:60px;animation-delay:1.5s}}.whiggly-line{pointer-events:none;z-index:-1;position:fixed;top:0;left:0;height:100vh;width:100vw;overflow:hidden}@media screen and (min-width:1200px){.whiggly-line{transform-origin:top left;rotate:-60deg;top:300px;left:-20px;height:600px;width:600px}}@media screen and (max-width:1200px){.hero-title{top:120px;left:8vw}.action-banner{top:250px}}@media screen and (max-width:1000px){.hero-title{top:auto;left:20px;bottom:20px;>h1{font-size:1.5rem;line-height:2.5rem;>.highlight{font-size:2.5rem}}>h2{font-size:1.5rem}}.action-banner{top:350px;left:20px;font-size:2rem;>.action-banner-step{width:400px}}}@media screen and (max-width:600px){.hero-title{top:auto;bottom:0;left:0;width:100%;padding-left:20px;padding-bottom:10px;background-color:#00000080;background:#0000;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s ease;background:#00000080;border-top:2px solid rgba(255,255,255,.1);>h2{padding-top:8px}}.action-banner{top:350px;left:20px;font-size:2rem;>.action-banner-step{width:200px}}}@keyframes slide-in{0%{transform:translate3d(-100vw,0,var(--z-pos))}to{transform:translate3d(calc(var(--mouse-x) * var(--speed)),calc(var(--mouse-y) * var(--speed)),var(--z-pos))}}@keyframes caret-blink{50%{border-right-color:transparent}}#canvas-container{width:100%;height:100%;background:radial-gradient(circle at 100% 50%,#20053a,#0a0112 60%,#000);position:absolute;overflow:hidden}canvas{display:block;width:100vw;height:100vh;opacity:.5}.sparkle-logo{position:absolute;bottom:30px;right:30px;width:36px;height:36px;fill:#9aa0a6;opacity:.7;pointer-events:none}.project-list{margin-top:40px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));grid-template-rows:auto}.page.projects>h2{font-size:2rem;font-weight:700;color:#fff}.project{color:#fff;text-decoration:none;height:100%;cursor:pointer;display:flex;flex-direction:column;background-color:#232323;min-height:200px;z-index:1;border-radius:8px;overflow:hidden;transition:box-shadow .3s ease,background .3s ease,color .3s ease;padding:4px;&:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:0 0 0 4px #232323 inset;border-radius:8px;transition:box-shadow .3s ease}&:hover{background:#8c40eb;color:#fff;&:before{box-shadow:0 0 0 4px #45267a inset}}&:active{background:#823bd9;color:#fff;&:before{box-shadow:0 0 0 4px #26134d inset}}>img{width:100%;height:200px;object-fit:cover}>.project-info{padding:16px;display:flex;flex-direction:column;gap:8px;>h2{font-size:1.5rem;font-weight:700}>p{font-size:1rem;color:#dcfaff}}}@media screen and (max-width:767px){.project-list{display:block;margin-top:12px}.project{margin-bottom:24px}}.ui-button{appearance:none;border:none;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-weight:600;line-height:1;transition:transform .15s ease,background-color .2s ease,color .2s ease,opacity .2s ease}.ui-button:disabled{opacity:.65;cursor:not-allowed}.ui-button:not(:disabled):hover{transform:translateY(-1px)}.ui-button:not(:disabled):active{transform:translateY(0)}.ui-button--primary{background-color:#50e5ff;color:#000d0b}.ui-button--secondary{background-color:#50e5ff26;color:#dcfaff}.ui-button--ghost{background-color:transparent;color:#dcfaff;border:1px solid rgba(80,229,255,.5)}.ui-button--sm{font-size:.875rem;min-height:34px;padding:8px 12px}.ui-button--md{font-size:1rem;min-height:40px;padding:10px 16px}.ui-button--lg{font-size:1.125rem;min-height:46px;padding:12px 20px}.ui-button--full{width:100%}.ui-button__label{display:inline-flex;align-items:center}.ui-button__icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}.ui-button__icon-svg{width:1.1em;height:1.1em;display:block}.ui-button__icon-content{display:inline-flex;align-items:center;justify-content:center}section.about-me>p{font-size:1.2rem;line-height:1.6;color:#dcfaff}section.about-me>p+p{margin-top:20px}@media screen and (max-width:767px){section.about-me{border-left:none;padding-left:0}}footer{padding:16px;display:flex;justify-content:center;align-items:center;color:#c5c5c5;gap:12px;>a{color:inherit;text-decoration:underline;transition:color .3s ease;&:hover{color:#50e5ff}}}