*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:#0A0A0B;color:#ECECEC;font-family:'Space Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--acc,#CBF24C);color:#0A0A0B}
a{color:inherit}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes shine{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}

@media (hover:none),(pointer:coarse){#cursor-dot,#cursor-ring{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* Hover states (originally inline `style-hover` attributes in the Claude Design source) */
.row-hover:hover{padding-left:26px;background:rgba(255,255,255,.03)}
.row-hover:hover .row-arrow{opacity:1;transform:translateX(4px)}
.card-hover{will-change:transform}
.card-hover:hover{border-color:var(--acc,#CBF24C);background:#141416}
.case-hover{will-change:transform}
.case-hover:hover{border-color:var(--acc,#CBF24C)}
.skill-card-hover{will-change:transform}
.skill-card-hover:hover{border-color:rgba(203,242,76,.5)}
.skill-tag-hover:hover{border-color:var(--acc,#CBF24C);color:#fff}
.competency-hover:hover{background:#111113}
.contact-card-hover:hover{border-color:var(--acc,#CBF24C);background:#141416;transform:translateY(-3px)}
.contact-link:hover{padding-left:12px}

/* Marquee pauses so the ticker text can be read on hover */
#marquee-track{animation-play-state:running}
#marquee-track:hover{animation-play-state:paused}

/* Nav link underline sweep */
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--acc,#CBF24C);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.19,1,.22,1)}
.nav-link:hover::after{transform:scaleX(1)}

/* CTA shine sweep on hover */
.btn-shine{position:relative;overflow:hidden}
.btn-shine::before{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:rgba(255,255,255,.35);transform:translateX(-120%) skewX(-20deg);pointer-events:none}
.btn-shine:hover::before{animation:shine .85s ease forwards}
@media (prefers-reduced-motion:reduce){.btn-shine::before{display:none}}