/* React Bits-inspired progressive enhancements. See REACT-BITS-NOTICE.md. */
.service-panel{position:relative;isolation:isolate;overflow:hidden;background:var(--surface)}
.service-panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(400px circle at var(--spot-x,50%) var(--spot-y,25%),color-mix(in srgb,var(--primary) 11%,transparent),transparent 70%);opacity:.55;transition:opacity .2s}
.service-panel:focus-within::before{opacity:1}
@media(hover:hover) and (pointer:fine){.service-panel:hover::before{opacity:1}.projects article:hover{border-color:var(--primary);box-shadow:0 8px 26px color-mix(in srgb,var(--primary) 9%,transparent)}}
.projects{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.projects article{position:relative;isolation:isolate;margin:0;padding:28px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);grid-column:span 2;transition:border-color .2s,box-shadow .2s}
.projects article:nth-child(1){grid-column:span 1}
.projects article:nth-child(2){grid-column:span 2}
.projects article:nth-child(3){grid-column:span 1}
.projects article:nth-child(6){grid-column:span 4;background:linear-gradient(110deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface))}
.projects article:focus-within{border-color:var(--primary)}
.projects h3{margin:16px 0}
.projects .status{display:block;padding-bottom:16px;border-bottom:1px solid var(--border)}
.projects p:last-child{margin-bottom:0}
.hero-word{display:inline-block}
@media(prefers-reduced-motion:no-preference){.hero-enter .hero-word{animation:word-arrive .55s both;animation-delay:var(--word-delay)}.content-enter{animation:content-arrive .5s both;animation-delay:var(--enter-delay,0ms)}}
@keyframes word-arrive{from{opacity:.15;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes content-arrive{from{opacity:.25;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.projects article:nth-child(n){grid-column:span 1}.projects article:nth-child(6){grid-column:span 2}}
@media(max-width:760px){.projects{grid-template-columns:1fr;gap:16px}.projects article:nth-child(n){grid-column:auto;padding:24px}}
@media(forced-colors:active){.service-panel::before{display:none}}