/* Shared styles for the motion layer (assets/js/motion.js). Loaded by every page.
   The .motion class is only on <html> when animation is allowed and the scripts are running,
   so nothing is ever hidden without something to show it again. */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* Start states */
.motion [data-lines] { visibility: hidden; }
.motion [data-stagger] > * { visibility: hidden; }
.motion [data-reveal] { clip-path: inset(100% 0 0 0); }
.motion [data-reveal="left"] { clip-path: inset(0 100% 0 0); }
.motion [data-reveal="right"] { clip-path: inset(0 0 0 100%); }
[data-parallax] { will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .motion [data-parallax] { scale: 1.16; }
}

/* Hand-written line masks: <span class="l"><span>…</span></span> */
.l { display: block; overflow: hidden; overflow: clip; }
.l > * { display: block; }

/* Line masks from SplitText: leave room for descenders */
.line-mask { padding-bottom: .14em; margin-bottom: -.14em; }

/* Hero video sits on top of its poster and fades in once it plays */
video[data-desktop] { opacity: 0; transition: opacity .9s ease; }
video[data-desktop].is-playing { opacity: 1; }

/* The dish photo that follows the mouse */
.dish-float {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: 13.5rem; aspect-ratio: 4 / 5; overflow: hidden; visibility: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.dish-float img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Soft transition between pages (browsers that support it) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: page-out .3s ease both; }
  ::view-transition-new(root) { animation: page-in .55s ease both; }
}
@keyframes page-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } }