html { scroll-behavior: smooth; scroll-padding-top: 88px }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1) }
.reveal.is-in { opacity: 1; transform: none }
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite }
@keyframes marquee { to { transform: translateX(-50%) } }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; text-align: center }
.lightbox::backdrop { background: rgb(20 18 24 / .85); backdrop-filter: blur(6px) }
.lightbox img { max-height: 84vh; max-width: 92vw; border-radius: 12px; margin: auto }
.lightbox p { color: #f3ece2; font: 15px/1.5 system-ui, sans-serif; margin: 12px 0 0 }
[data-zoom] { cursor: zoom-in }
details > summary { list-style: none } details > summary::-webkit-details-marker { display: none }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none }
  .marquee { animation: none }
  html { scroll-behavior: auto }
}