:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.motion-line { display: block; overflow: clip; }
.motion-line > span { display: block; }
.about-image,.featured-visual { overflow: hidden; }
.contact { overflow: clip; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip-path: inset(50%)!important; white-space: nowrap; }
.stats strong .count-number { font-size: inherit; }
.stats strong { font-variant-numeric: tabular-nums; }
.project-card { transition: none!important; }
.project-image img { transition: transform .5s var(--motion-ease); }
.project-card:is(:hover,:focus-within) .project-image img { transform: scale(1.03); }
.project-card:focus-within .project-image:after { opacity: 1; }
.project-open { transition: background .35s,color .35s; }
.project-open span,.service h2,.service .small-link { display: inline-block; transition: transform .4s var(--motion-ease); }
.service p { transition: color .4s; }
.service:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #aaa; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--motion-ease); }
.service:focus-visible h2,.service:focus-visible .small-link { transform: translateX(5px); }
.service:focus-visible:after { transform: scaleX(1); }
.project-open:is(:hover,:focus-visible) span,.button:focus-visible span,.text-link:focus-visible span { transform: translateX(5px); }
.navigation a:focus-visible:after,.header-actions > a:focus-visible:after { transform: scaleX(1); }
.text-link { position: relative; }
.text-link:after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--motion-ease); }
.text-link:is(:hover,:focus-visible):after { transform: scaleX(1); }
.button { background-image: linear-gradient(#353535,#353535); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .4s var(--motion-ease),background-color .35s,color .3s; }
.button:is(:hover,:focus-visible) { background-size: 100% 100%; }
.button-light { background-image: linear-gradient(white,white); }
.button-light:is(:hover,:focus-visible) { color: #111; }
.project-filters button { position: relative; }
.project-filters button:after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--motion-ease); }
.project-filters button[aria-pressed=true]:after { transform: scaleX(1); }
a:focus-visible,button:focus-visible { outline: 2px solid #c93030; outline-offset: 5px; }
@media (hover:hover) and (pointer:fine) {
  .service:hover h2,.service:hover .small-link { transform: translateX(5px); }
  .service:hover p { color: #ddd; }
  .service:hover:after { transform: scaleX(1); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none!important; transition: none!important; }
  .project-card:is(:hover,:focus-within) .project-image img,.service h2,.service .small-link,.service:hover > svg { transform: none!important; }
}

.count-number { display: inline-block; text-align: right; }

/* Small, tactile depth cues make the portfolio feel responsive without a custom cursor. */
@media (hover:hover) and (pointer:fine) {
  .project-card { position:relative; isolation:isolate; box-shadow:0 0 0 rgba(0,0,0,0); transition:transform .45s var(--motion-ease),box-shadow .45s var(--motion-ease)!important; }
  .project-card:before { content:'';position:absolute;z-index:3;inset:0;pointer-events:none;opacity:0;background:radial-gradient(360px circle at var(--spotlight-x,50%) var(--spotlight-y,35%),rgba(255,255,255,.105),transparent 72%);transition:opacity .3s; }
  .project-card:is(:hover,:focus-within) { transform:translateY(-5px);box-shadow:0 18px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08); }
  .project-card:is(:hover,:focus-within):before { opacity:1; }
  .project-image img { filter:grayscale(.72);transition:transform .65s var(--motion-ease),filter .5s ease; }
  .project-card:is(:hover,:focus-within) .project-image img { transform:scale(1.055);filter:grayscale(.08) saturate(.9); }
  .project-image:after { content:'VIEW PROJECT ↗';top:auto;right:12px;bottom:12px;width:auto;height:auto;padding:8px 10px;background:rgba(9,9,9,.78);font-size:8px;letter-spacing:.12em;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .35s var(--motion-ease); }
  .project-card:is(:hover,:focus-within) .project-image:after { opacity:1;transform:translateY(0); }
  .skill { transition:transform .3s var(--motion-ease),background .3s,box-shadow .3s; }
  .skill:hover { transform:translateY(-3px); }
  .featured-visual img { transition:transform .8s var(--motion-ease),box-shadow .5s; }
  .featured-visual:hover img { transform:scale(1.025);box-shadow:0 22px 42px #0003; }
}
@media (prefers-reduced-motion:reduce) {
  .project-card:is(:hover,:focus-within),.skill:hover,.featured-visual:hover img { transform:none!important; }
  .project-card { box-shadow:none!important; }
}


.hero-title-motion { display:inline-block; }
.page-overlay { position:fixed;inset:0;z-index:90;background:#101010;color:white;display:grid;place-items:center;visibility:hidden;pointer-events:none; }
.page-overlay > span { font:800 clamp(24px,4vw,52px)/1.3 Inter,Arial,sans-serif;letter-spacing:.15em; }
.page-overlay i {display:block;height:2px;background:#c93030;margin-top:16px;}
.navigation a[aria-current="location"]:after {transform:scaleX(1);}
.button:active,.project-open:active { opacity:.8; }
.work-main #work-cover {aspect-ratio:4/3;}
#work-gallery img {aspect-ratio:4/3;}
@media(prefers-reduced-motion:reduce){.page-overlay{display:none!important;}}