/* Gentle entrances and hand-drawn interactions. Content stays visible without JS. */
.hero-lettering { animation: lettering-arrive 1.25s cubic-bezier(.2,.65,.3,1) both; }
.hero .hero-copy { animation: hero-arrive .9s .24s both; }
.hero .hero-photo { animation: hero-arrive 1.15s .42s both; }
.hero-note { animation: hero-arrive .8s .65s both; }
@keyframes lettering-arrive {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(8px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@keyframes hero-arrive {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
/* Reveal styles are opt-in so script failures do not hide the portfolio. */
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal:not(.visible):not(.hero-copy):not(.hero-photo) { opacity: 0; transform: translateY(18px); }
a:focus-visible, button:focus-visible { outline: 2px solid #238296; outline-offset: 6px; border-radius: 2px; }
.desktop-nav a:focus-visible::after, .footer-links a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  body { cursor: url("assets/brush-cursor.svg") 5 29, auto; }
  a, button { cursor: url("assets/brush-link-cursor.svg") 5 29, pointer; }
  .hero-photo, .about-photo, .contact-photo, .work, .service-card { transition: translate .45s ease, box-shadow .45s ease, transform .7s ease; }
  .hero-photo.visible:hover, .about-photo.visible:hover, .contact-photo.visible:hover { transform: translateY(-5px); }
  .work.visible:hover { transform: translateY(-7px) rotate(-.6deg); }
  .service-card.visible:hover { transform: translateY(-7px); }
  .desktop-nav a::after, .footer-links a::after { height: 2px; border-radius: 70% 30% 60% 40%; rotate: -2deg; }
  .contact-actions a { transition: translate .25s ease, background .25s ease, box-shadow .25s ease; }
  .contact-actions a:hover { translate: 0 -3px; box-shadow: 0 6px 16px #45474614; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-lettering, .hero .hero-copy, .hero .hero-photo, .hero-note { animation: none; }
  .motion-ready .reveal:not(.visible):not(.hero-copy):not(.hero-photo) { opacity: 1; transform: none; }
  .reveal, .service-card, .work, .hero-photo, .about-photo, .contact-photo, .contact-actions a { transition: none; }
  .work.visible:hover, .service-card.visible:hover, .hero-photo.visible:hover, .about-photo.visible:hover, .contact-photo.visible:hover { transform: none; }
  .hero-photo:hover img, .about-photo:hover img, .contact-photo:hover img, .work:hover img { transform: none; }
  .contact-actions a:hover { translate: none; }
}