/* Motion is scoped to the selected portfolio; all content is visible by default. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .works-hero .copy > * { animation: welcome-in .85s cubic-bezier(.22,1,.36,1) backwards; }
  .works-hero .copy > :nth-child(2) { animation-delay: .09s; }
  .works-hero .copy > :nth-child(3) { animation-delay: .18s; }
  .works-hero .copy > :nth-child(4) { animation-delay: .27s; }
  .works-hero .copy > :nth-child(5) { animation-delay: .36s; }
  .work-carousel { animation: showcase-in 1s .15s cubic-bezier(.22,1,.36,1) backwards; }
  .works-hero .accent { background-size: 100% 100%; background-repeat: no-repeat; animation: underline-in 1s .3s cubic-bezier(.22,1,.36,1) backwards; }
  .btn, .carousel-controls button, .work-caption > a { transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
  .btn span { display: inline-block; transition: transform .25s ease; }
  .btn:hover span, .btn:focus-visible span { transform: translateY(3px); }
  .btn:hover, .btn:focus-visible { transform: translateY(-3px); box-shadow: 0 6px 16px #1e4f8f18; }
  .btn:active, .carousel-controls button:active { transform: translateY(1px); }
  .app-window, .concept-screen { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease; }
  .work-image-link:focus-visible .app-window, .work-image-link:focus-visible .concept-screen { transform: rotate(0); }
  .work-caption > a:hover { transform: rotate(12deg); background: var(--paper); }
  .carousel-dots span { transition: width .3s ease, background .3s ease; }
  .carousel-controls button:not(:disabled):hover { background: var(--aqua-tint); }
  .work { transition: border-color .3s ease, box-shadow .3s ease; }
  .mast nav a { position: relative; }
  .mast nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--aqua); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  .mast nav a:hover::after, .mast nav a:focus-visible::after { transform: scaleX(1); }
  @keyframes welcome-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes showcase-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes underline-in { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work-image-link:hover .app-window, .work-image-link:hover .concept-screen { transform: rotate(0) translateY(-4px); box-shadow: 0 18px 32px #0f223818; }
  .work:hover { border-color: #7da8c8; box-shadow: 0 10px 26px #0f22380c; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}