/* Keep navigation anchors below the sticky header, with free scrolling. */
html {
  --navigation-height: 73px;
  scroll-padding-top: var(--navigation-height);
}
@media (max-width: 760px) {
  html { --navigation-height: 65px; }
}
.reading-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.code-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.typed-character { position: relative; }
.typed-character.not-typed { visibility: hidden; }
.typing-cursor::after { content: ""; position: absolute; left: 100%; top: .05em; height: 1.1em; width: 2px; background: var(--orange); box-shadow: 0 0 7px #ff9b6270; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .typed-character.not-typed { visibility: visible; } .typing-cursor::after { display: none; } }
.navlinks a { position: relative; transition: color .2s; }
.navlinks a[aria-current="location"] { color: var(--orange); }
.navlinks a::after { content: ""; position: absolute; bottom: -8px; left: 0; right: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.navlinks a[aria-current="location"]::after { transform: scaleX(1); }
.motion-reveal { opacity: 0; translate: 0 24px; transition: opacity .75s ease var(--reveal-delay, 0ms), translate .75s cubic-bezier(.2,.65,.3,1) var(--reveal-delay, 0ms); }
.motion-reveal.is-visible, .motion-reveal:focus-within, .motion-reveal:focus { opacity: 1; translate: 0 0; }
.project-card.motion-reveal { transition: opacity .75s ease var(--reveal-delay, 0ms), translate .75s cubic-bezier(.2,.65,.3,1) var(--reveal-delay, 0ms), transform .3s, border-color .3s; }
.circle-plus, .button span, .text-link span, .tags span { transition: transform .25s, background .25s, color .25s, border-color .25s; }
.button:hover span, .button:focus-visible span { transform: translate(2px,-2px); }
.text-link span { display: inline-block; }
.text-link:hover span { transform: translateX(4px); }
.project-card:is(:hover,:focus-visible) .circle-plus { transform: rotate(90deg); background: var(--orange); color: #201108; }
.tags span:hover { transform: translateY(-3px); border-color: var(--orange); color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .hero > .eyebrow { animation: arrive .7s both; }
  .hero h1 { animation: arrive .85s .08s both; }
  .hero-description { animation: arrive .85s .16s both; }
  .hero-actions { animation: arrive .85s .24s both; }
  .code-stage { animation: code-arrive 1.2s .3s both; }
  .hero h1 > span { background-size: 160% 100%; animation: titanium-light 3.6s .3s ease-out both; }
  .portfolio-page main > :is(.section, .legal-content) h1,
  .portfolio-page .chronology-heading h1 { animation: title-arrive .8s .08s both; }
  dialog[open] { animation: dialog-arrive .25s ease-out; }
  dialog[open]::backdrop { animation: backdrop-arrive .2s ease-out; }
  .nav.menu-open .navlinks { animation: menu-arrive .2s ease-out; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes title-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes code-arrive { from { opacity: 0; transform: translateY(32px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes titanium-light { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-arrive { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .navlinks a::after { display: none; } .nav .navlinks a[aria-current="location"] { background: #29292e; color: var(--orange); } }
@media (prefers-reduced-motion: reduce) { .motion-reveal { opacity: 1; translate: none; } .reading-progress { display: none; } }