.title-line { display:block; overflow:clip; overflow-clip-margin:.1em; }
.title-line > span { display:block; animation:title-rise var(--motion-enter) var(--motion-ease) both; }
.title-line:nth-child(2) > span { animation-delay:100ms; }
.site-header { --control-hover-fill:#fff; --control-hover-text:var(--ink); animation:header-in var(--motion-enter) var(--motion-ease) both; }
.hero-copy, .hero-actions { animation:copy-rise var(--motion-enter) var(--motion-ease) 180ms both; }
.hero-actions { animation-delay:260ms; }
.hero-mockup img { animation:copy-rise var(--motion-portrait) var(--motion-ease) 250ms both; }
.motion-control { position:relative; isolation:isolate; overflow:hidden; border-radius:var(--control-radius); transition:color var(--motion-hover) var(--motion-ease); }
.motion-control::before { content:""; position:absolute; z-index:-1; inset:-2px; border-radius:0; background:var(--control-hover-fill,var(--ink)); transform:translateY(110%); transition:transform var(--motion-hover) var(--motion-ease); }
.motion-control:focus-visible { color:var(--control-hover-text,#fff); }
.motion-control:focus-visible::before { transform:translateY(0); }
.motion-control:active::before { transition-duration:var(--motion-press); }
.project-panel--dark, .project-panel--purple { --control-hover-fill:#fff; --control-hover-text:var(--ink); }
.button-dark { --control-hover-fill:#fff; --control-hover-text:var(--ink); }
.project-panel--dark .button-light, .project-panel--purple .button-secondary { --control-hover-fill:var(--ink); --control-hover-text:#fff; }
.footer-navigation a.motion-control, .footer-contact a.motion-control { padding:8px; margin:-8px; }
.contact-alternative a.motion-control { padding:4px; margin:-4px; }
@media (hover:hover) and (pointer:fine) {
  .motion-control:hover { color:var(--control-hover-text,#fff); }
  .motion-control:hover::before { transform:translateY(0); }
}
@keyframes title-rise { from { transform:translateY(110%); } to { transform:translateY(0); } }
@keyframes copy-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes header-in { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .title-line > span,.hero-copy,.hero-actions,.site-header,.hero-mockup img { animation:none !important; opacity:1 !important; transform:none !important; }
  .hero-mockup { position:relative; top:auto; }
}