/* =====================================================================
   Resolute Yachting: seamless transitions
   ---------------------------------------------------------------------
   Three layers, each degrading cleanly where unsupported:

   1. Cross-document View Transitions. Navigating between pages
      cross-fades instead of flashing white. Chrome and Safari support
      this today; other browsers simply navigate as normal.
   2. Persistent elements. The nav and brand carry a view-transition-name
      so they hold still across a navigation rather than being redrawn.
   3. Scroll-driven reveals via animation-timeline, which are frame-exact
      and driven by scroll position rather than by a JS observer firing
      once. Falls back to the IntersectionObserver .reveal class.
===================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(root) { animation-name: rvt-out; }
::view-transition-new(root) { animation-name: rvt-in; }

@keyframes rvt-out { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes rvt-in  { from { opacity: 0; transform: translateY(10px); } }

/* the chrome that should not appear to move between pages */
.nav      { view-transition-name: rvt-nav; }
.brand    { view-transition-name: rvt-brand; }
footer    { view-transition-name: rvt-foot; }

/* --- scroll-driven reveals ------------------------------------------ */
@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    animation: rvt-rise linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
  /* the observer fallback must not fight the scroll timeline */
  .reveal.in { opacity: 0; }
}
@keyframes rvt-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* --- section handoffs ------------------------------------------------
   A band of the page's own background laid over the top and bottom edge
   of a full-bleed section, so photography dissolves into the ground
   instead of ending on a hard line. Skins set --seam to their bg colour.
--------------------------------------------------------------------- */
.seam { position: relative; }
.seam::before,
.seam::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(60px, 9vh, 130px);
  pointer-events: none;
  z-index: 3;
}
.seam::before { top: -1px;    background: linear-gradient(to bottom, var(--seam, transparent), transparent); }
.seam::after  { bottom: -1px; background: linear-gradient(to top,    var(--seam, transparent), transparent); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  @supports (animation-timeline: view()) {
    .reveal, .reveal.in { opacity: 1; animation: none; transform: none; }
  }
}