/*
  Vibedsites: styling for the optional enhancements.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  Only ever applies when the matching toggle is on: the head partial writes the
  flags onto <html> as data-vibed, and every rule here is scoped to that. A
  site with everything switched off ships this file and it does nothing.

  Colours come from the site's own tokens where they exist, with a neutral
  fallback, so nothing here imposes a palette on a converted design.
*/

:root { --vibed-accent: currentColor; }

/* ---- reading position ------------------------------------------------------ */
.vibed-progress {
  position: fixed; top: 0; left: 0; z-index: 9998;
  width: 100%; height: 3px;
  transform: scaleX(var(--vibed-scroll, 0)); transform-origin: 0 50%;
  background: var(--vibed-accent);
  pointer-events: none;
}

/* ---- back to top ------------------------------------------------------------
   Sits out of the way, only appears once you are far enough down that going
   back is a real chore, and is a real <button> so it is keyboard reachable.  */
.vibed-top {
  position: fixed; right: clamp(14px, 3vw, 32px); bottom: clamp(14px, 3vw, 32px);
  z-index: 9997;
  width: 44px; height: 44px;                 /* a comfortable touch target */
  display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: inherit;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.25,.46,.45,.94), visibility 0s linear .35s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vibed-top.is-in {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.25,.46,.45,.94);
}
.vibed-top:hover { transform: translateY(-2px); }
.vibed-top:focus-visible { outline: 2px solid var(--vibed-accent); outline-offset: 3px; }

/* ---- moving between pages ---------------------------------------------------
   The browser holds the old page, builds the new one, and animates between
   them: no white flash, no sense of a document being fetched. Ignored entirely
   by browsers without view transitions, which navigate as they always did.   */
/* The opt-in itself (@view-transition { navigation: auto }) is emitted in the
   head, and only when instant navigation is on. It is an at-rule, so it cannot
   be scoped by a selector, and this stylesheet also loads for the scroll bar
   and the back-to-top control: left here it would turn cross-document
   transitions on for sites that never asked for them.

   The earlier version of this file also set view-transition-name: none on
   <html>, which removes the root snapshot the two rules below animate, so the
   page transition silently did nothing. */

/*
  The transition depends on where you are going, rather than every navigation
  being the same crossfade.

  A site's nav is an order, and moving through it has a direction: click
  something further along and the pages travel left, click back up the nav and
  they travel right. That is the difference between a site that feels like a
  place and one that feels like a stack of documents being swapped. The
  direction is worked out in vibed-enhance.js, which puts a class on <html>
  before the browser takes its snapshot.

    vibed-nav-fwd    further along the nav, or deeper: travel left
    vibed-nav-back   back up the nav, or the browser's back button: travel right
    vibed-nav-up     to the homepage: the new page drops down over the old
    (none)           anything we cannot place: the plain crossfade below

  Every one of these is ignored by a browser without view transitions, which
  navigates the way it always did.
*/

/*
  The browser's own transition is a crossfade, and a slide of four to six per
  cent reads as exactly that, which is why the first version of these looked
  like no transition at all on one site and wrong on another.

  The default is "from the top, with a different easing": the incoming page
  comes down over the outgoing one, which holds still underneath. The easing is
  a quint rather than a gentle ease, so it leaves quickly and arrives slowly,
  which is what gives it its character. Chosen over a full push from the bottom.

  The user agent animation is switched off first. Without that its crossfade
  runs underneath and washes out everything defined here.
*/
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* the default, and what an unclassified navigation gets */
::view-transition-old(root) { animation: vibed-hold-under .62s cubic-bezier(.86, 0, .07, 1) both; z-index: 1; }
::view-transition-new(root) { animation: vibed-from-top .62s cubic-bezier(.86, 0, .07, 1) both; z-index: 2; }
@keyframes vibed-from-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes vibed-hold-under { from { transform: scale(1); opacity: 1; } to { transform: scale(.94); opacity: .6; } }

/* forward through the site: the default gesture */
html.vibed-nav-fwd::view-transition-old(root) { animation: vibed-hold-under .62s cubic-bezier(.86, 0, .07, 1) both; z-index: 1; }
html.vibed-nav-fwd::view-transition-new(root) { animation: vibed-from-top .62s cubic-bezier(.86, 0, .07, 1) both; z-index: 2; }

/* back up the nav: the mirror, so retracing your steps reads as retracing */
html.vibed-nav-back::view-transition-old(root) { animation: vibed-hold-under .62s cubic-bezier(.86, 0, .07, 1) both; z-index: 1; }
html.vibed-nav-back::view-transition-new(root) { animation: vibed-from-bottom .62s cubic-bezier(.86, 0, .07, 1) both; z-index: 2; }
@keyframes vibed-from-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* home: the same arrival, held a little longer, because going home is the one
   move that should feel like a return rather than a step */
html.vibed-nav-up::view-transition-old(root) { animation: vibed-hold-under .70s cubic-bezier(.86, 0, .07, 1) both; z-index: 1; }
html.vibed-nav-up::view-transition-new(root) { animation: vibed-from-top .70s cubic-bezier(.86, 0, .07, 1) both; z-index: 2; }

/* The header is deliberately not given its own view-transition-name. Naming it
   makes the browser animate it as a separate group, which is right for a
   crossfade and wrong for a push: the page slides away and the header hangs
   in mid-air on its own. */

@media (prefers-reduced-motion: reduce) {
  .vibed-top { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-group(*) { animation-duration: 0.01ms; }
}