/* Digital signal treatment and portfolio updates. */
.glitch-layer{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.glitch-layer::before,.glitch-layer::after{content:"";position:absolute;inset:0;opacity:0}
.glitch-layer::before{background:linear-gradient(transparent 0 13%,rgba(112,247,255,.22) 13.1% 13.35%,transparent 13.5% 46%,rgba(215,255,47,.19) 46.1% 46.3%,transparent 46.45% 77%,rgba(243,77,136,.18) 77.1% 77.4%,transparent 77.55%);animation:signal-shift 9s steps(1,end) infinite}
.glitch-layer::after{background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(112,247,255,.18) 11px 13px,transparent 13px 44px),linear-gradient(90deg,transparent 0 60%,rgba(243,77,136,.14) 61%,transparent 67%);clip-path:polygon(0 26%,100% 26%,100% 30%,0 30%,0 64%,100% 64%,100% 67%,0 67%);animation:signal-bars 13s steps(1,end) infinite}
@keyframes signal-shift{0%,82%,84%,89%,91%,100%{opacity:0;transform:translateX(0)}83%{opacity:.8;transform:translateX(-11px)}85%{opacity:.45;transform:translateX(17px)}90%{opacity:.65;transform:translateX(-6px)}}
@keyframes signal-bars{0%,54%,56%,57%,91%,93%,100%{opacity:0;transform:translateX(0)}55%{opacity:.7;transform:translateX(22px)}92%{opacity:.6;transform:translateX(-18px)}}
.hero-media::after{background:linear-gradient(90deg,rgba(8,10,9,.82),rgba(8,10,9,.55) 43%,rgba(8,10,9,.16) 100%),linear-gradient(0deg,rgba(8,10,9,.72),transparent 35%,transparent 76%,rgba(8,10,9,.2))}
.hero-main{padding-top:7vh;padding-bottom:7vh}
.hero-name{position:relative;will-change:transform;animation:name-enter 1.1s cubic-bezier(.16,1,.3,1) both}
.hero-name.second{animation-delay:.16s}
.hero-name::before{content:attr(data-text);position:absolute;inset:0;color:#70f7ff;opacity:0;pointer-events:none;mix-blend-mode:screen;animation:title-break 9s steps(1,end) infinite}
.hero-name.second::before{color:var(--pink);animation-delay:2.7s}
.hero-name.second::after{animation:star-breathe 4s ease-in-out infinite}
@keyframes name-enter{from{opacity:0;transform:translateY(.28em)}to{opacity:1;transform:none}}
@keyframes title-break{0%,75%,77%,78%,100%{opacity:0;transform:translateX(0);clip-path:inset(0)}76%{opacity:.78;transform:translateX(8px);clip-path:inset(34% 0 47%)}77.5%{opacity:.7;transform:translateX(-6px);clip-path:inset(70% 0 10%)}}
@keyframes star-breathe{50%{transform:rotate(15deg) scale(1.13)}}
.hero-bottom{justify-content:flex-start}
.hero-bottom a{transition:letter-spacing .25s,color .25s}.hero-bottom a:hover{letter-spacing:.18em;color:var(--ink)}
.signal-band{height:clamp(34px,4.2vw,58px);position:relative;overflow:hidden;isolation:isolate;background:var(--acid);border-top:1px solid #111;border-bottom:1px solid #111}
.signal-band::before,.signal-band::after,.signal-band span{position:absolute;inset:0;pointer-events:none}
.signal-band::before{content:"";background:repeating-linear-gradient(90deg,#080b0a 0 14px,transparent 14px 30px,#080b0a 30px 37px,transparent 37px 73px);clip-path:polygon(0 17%,100% 17%,100% 27%,0 27%,0 69%,100% 69%,100% 82%,0 82%);animation:band-stutter 1.15s steps(1,end) infinite}
.signal-band::after{content:"";background:linear-gradient(90deg,transparent 0 11%,var(--pink) 11% 19%,transparent 19% 57%,#70f7ff 57% 62%,transparent 62% 84%,var(--pink) 84% 89%,transparent 89%);clip-path:polygon(0 30%,100% 30%,100% 42%,0 42%,0 82%,100% 82%,100% 93%,0 93%);opacity:.85;animation:band-color 1.7s steps(1,end) infinite}
.signal-band__grid{background:repeating-linear-gradient(90deg,transparent 0 36px,rgba(8,11,10,.46) 36px 38px,transparent 38px 75px);opacity:.7;animation:band-grid 1.8s linear infinite}
.signal-band__pulse{background:linear-gradient(90deg,transparent 0 31%,#080b0a 31% 33%,#70f7ff 33% 35%,transparent 35% 61%,rgba(8,11,10,.85) 61% 66%,transparent 66%);transform:translateX(-100%);animation:band-pulse 2.4s steps(18,end) infinite}
.signal-band__cut{background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(8,11,10,.52) 7px 9px,transparent 9px 17px);clip-path:polygon(0 0,100% 0,100% 11%,0 11%,0 47%,100% 47%,100% 55%,0 55%);opacity:.6;animation:band-cut 1.3s steps(1,end) infinite}
@keyframes band-stutter{0%,20%,47%,75%,100%{transform:translateX(0)}10%,67%{transform:translateX(24px)}35%,88%{transform:translateX(-32px)}}
@keyframes band-color{0%,25%,50%,75%,100%{transform:translateX(0);opacity:.7}12%,62%{transform:translateX(-46px);opacity:1}38%,88%{transform:translateX(38px);opacity:1}}
@keyframes band-grid{to{background-position:75px 0}}
@keyframes band-pulse{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes band-cut{0%,40%,80%,100%{opacity:.45;transform:translateX(0)}20%,60%{opacity:.95;transform:translateX(34px)}90%{opacity:.8;transform:translateX(-18px)}}
.about{padding-top:clamp(85px,11vw,155px);padding-bottom:clamp(100px,13vw,190px)}
.about-main{min-width:0}.about-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px}
.about-heading h2{font-size:clamp(54px,8vw,132px);line-height:.82;max-width:none;margin:0}.about-heading h2 span{color:var(--acid)}
.about-since{min-width:200px;display:flex;flex-direction:column;align-items:flex-end;line-height:.85}.about-since span{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--muted)}.about-since strong{font-size:clamp(70px,10vw,160px);letter-spacing:-.1em;color:var(--acid);font-weight:900}
.about-lead{font-size:clamp(20px,2.6vw,38px);font-weight:700;line-height:1.15;letter-spacing:-.045em;max-width:870px;margin:clamp(50px,7vw,100px) 0 clamp(55px,8vw,110px)}
.about-skills{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,4vw,65px)}
.about-skills-title{grid-column:1/-1;color:var(--acid);font-size:11px;letter-spacing:.14em;font-weight:800;padding:17px 0 28px}
.about-skills div{border-top:1px solid var(--line);padding:20px 0 24px;font-size:clamp(13px,1.3vw,19px);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;transition:padding-left .25s,color .25s}
.about-skills div::before{content:"↗";color:var(--acid);margin-right:14px}.about-skills div:hover{padding-left:10px;color:var(--acid)}
.about-skills .skill-item{position:relative;padding:20px 0 24px 27px;min-width:0}
.about-skills .skill-item::before{position:absolute;left:0;top:20px;margin:0}
.about-skills .skill-item:hover{padding-left:32px}
.skill-item strong{display:block;font-size:clamp(13px,1.3vw,19px);line-height:1.15}
.skill-item small{display:block;max-width:50ch;margin-top:10px;color:var(--muted);font-size:clamp(12px,.95vw,14px);font-weight:400;letter-spacing:0;line-height:1.4;text-transform:none}
.about-skills .skill-item--wide{grid-column:1/-1}
.about-platform{margin-top:clamp(44px,6vw,84px);padding:clamp(25px,4vw,58px);display:grid;grid-template-columns:1fr 2fr;gap:28px;background:var(--acid);color:var(--bg)}
.about-platform span{font-size:11px;font-weight:800;letter-spacing:.13em}
.about-platform strong{font-size:clamp(30px,4.4vw,68px);line-height:.95;letter-spacing:-.065em;text-transform:uppercase}
.about-platform p{grid-column:2;margin:0;max-width:470px;font-size:clamp(14px,1.3vw,18px);line-height:1.35}
.contact{min-height:auto;padding-top:clamp(40px,5vw,70px);padding-bottom:28px}
.contact-top p{max-width:290px}
.contact-content{width:100%;margin:clamp(70px,10vw,150px) 0 clamp(70px,10vw,150px)}
.contact-content h2{margin:0 0 clamp(55px,7vw,110px);font-size:clamp(50px,9vw,140px);font-weight:900;line-height:.82;letter-spacing:-.09em;text-transform:uppercase;overflow-wrap:anywhere}
.contact-content h2 span{color:var(--acid)}
.contact-list{border-top:1px solid var(--line)}
.contact-item{display:grid;grid-template-columns:180px minmax(0,1fr) auto;align-items:center;gap:25px;border-bottom:1px solid var(--line);padding:clamp(20px,2.6vw,38px) 0;transition:color .25s,padding-left .25s}
.contact-item:hover,.contact-item:focus-visible{color:var(--acid);padding-left:12px}
.contact-item span{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.contact-item strong{font-size:clamp(25px,4.2vw,66px);font-weight:800;letter-spacing:-.055em;line-height:1;overflow-wrap:anywhere}
.contact-item i{font-size:clamp(22px,3vw,46px);font-style:normal;line-height:1;color:var(--acid)}
.contact-bottom span{font-size:11px;letter-spacing:.13em;color:var(--muted)}
.reel.in .reel-image{animation:reel-drift 15s ease-in-out infinite alternate}@keyframes reel-drift{to{transform:scale(1.055) translateX(-1%)}}
.work-frame::before{content:"";position:absolute;z-index:3;left:-20%;right:-20%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--acid),#70f7ff,transparent);opacity:0;pointer-events:none;transform:translateY(-10px)}
.work-frame:hover::before,.work-frame:focus-visible::before{opacity:.75;animation:card-scan 1.15s ease-out both}@keyframes card-scan{to{transform:translateY(520px);opacity:0}}
.work-card.full{grid-column:span 12}.work-card.full .work-frame{aspect-ratio:2.05}.work-card.full .work-frame img{object-position:center 45%}
@media(max-width:900px){.about-heading{grid-template-columns:1fr}.about-since{align-items:flex-start}.about-since strong{font-size:100px}.about-platform{grid-template-columns:1fr}.about-platform p{grid-column:1}}
@media(max-width:640px){.hero-main{padding-top:8vh;padding-bottom:9vh}.hero-name.second{margin-left:0}.about-heading h2{font-size:clamp(54px,13vw,85px)}.about-since strong{font-size:90px}.about-lead{font-size:23px}.about-skills{grid-template-columns:1fr}.about-skills-title{padding-bottom:20px}.about-skills .skill-item{padding:16px 0 20px 27px}.about-skills .skill-item::before{top:16px}.about-skills .skill-item:hover{padding-left:32px}.about-skills .skill-item--wide{grid-column:1}.about-platform{margin-top:50px;padding:26px;min-width:0}.about-platform strong{font-size:clamp(26px,7vw,32px);overflow-wrap:anywhere;min-width:0}.work-card.full .work-frame{aspect-ratio:1.24}.work-card.full{grid-column:span 12}.contact-content{margin:80px 0}.contact-content h2{font-size:clamp(34px,9.5vw,58px);margin-bottom:55px}.contact-item{grid-template-columns:1fr auto;gap:10px;padding:23px 0}.contact-item span{grid-column:1/-1}.contact-item strong{font-size:clamp(25px,7vw,38px)}.contact-bottom span{display:none}}
@media(prefers-reduced-motion:reduce){.glitch-layer{display:none}.hero-name,.hero-name::before,.hero-name.second::after,.reel.in .reel-image,.signal-band::before,.signal-band::after,.signal-band__grid,.signal-band__pulse,.signal-band__cut{animation:none}.signal-band__pulse{display:none}.work-frame:hover::before,.work-frame:focus-visible::before{animation:none}.hero-name::before{display:none}}
