/* Home page motion: reveals, a scroll progress bar and a hero drift. Nothing pins or
   holds the page. Everything here is decoration: with reduced motion or without
   JavaScript the page is fully readable. */

/* ---------- reveals ---------- */
.mo-rise { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--mo-d, 0ms); }
.mo-rise.is-in { opacity: 1; transform: none; }

/* hero cup drifts and tilts a little as you scroll away from it */
.hero-art { transform: translateY(calc(var(--hs, 0) * 46px)) rotate(calc(var(--hs, 0) * 5deg)); will-change: transform; }

/* progress bar under the nav (CSS-native scroll-driven animation where supported) */
@supports (animation-timeline: scroll()) {
  header.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--crema), #f2b673); transform-origin: 0 50%; animation: home-progress linear both; animation-timeline: scroll(root); }
  @keyframes home-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* thumb-sized tap targets on phones without making the header taller */
@media (max-width: 900px) {
  .nav-row { padding-bottom: 2px; }
  nav.links a { position: relative; padding: 8px 0; }
  nav.links a::after { content: ""; position: absolute; inset: -4px; }
  footer a { display: inline-block; padding: 11px 4px; }
  details > summary { padding-block: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-rise { opacity: 1; transform: none; transition: none; }
  .hero-art { transform: none; }
  header.nav::after { animation: none; transform: scaleX(0); }
}