/*
  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 fallback, and what an unclassified navigation gets */
::view-transition-old(root) { animation: vibed-page-out .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vibed-page-in .40s cubic-bezier(0,0,.2,1) both; }
@keyframes vibed-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vibed-page-in { from { opacity: 0; transform: translateY(8px); } }

/* forward: the old page leaves to the left, the new one arrives from the right */
html.vibed-nav-fwd::view-transition-old(root) { animation: vibed-slide-out-left .30s cubic-bezier(.4,0,1,1) both; }
html.vibed-nav-fwd::view-transition-new(root) { animation: vibed-slide-in-right .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes vibed-slide-out-left { to { opacity: 0; transform: translateX(-4%); } }
@keyframes vibed-slide-in-right { from { opacity: 0; transform: translateX(6%); } }

/* back: the mirror of it, so retracing your steps feels like retracing them */
html.vibed-nav-back::view-transition-old(root) { animation: vibed-slide-out-right .30s cubic-bezier(.4,0,1,1) both; }
html.vibed-nav-back::view-transition-new(root) { animation: vibed-slide-in-left .42s cubic-bezier(.16,1,.3,1) both; }
@keyframes vibed-slide-out-right { to { opacity: 0; transform: translateX(4%); } }
@keyframes vibed-slide-in-left { from { opacity: 0; transform: translateX(-6%); } }

/* home: the new page comes down over the old one, which stays put underneath */
html.vibed-nav-up::view-transition-old(root) { animation: vibed-hold .44s linear both; }
html.vibed-nav-up::view-transition-new(root) { animation: vibed-drop-in .44s cubic-bezier(.16,1,.3,1) both; }
@keyframes vibed-hold { to { opacity: .55; transform: scale(.99); } }
@keyframes vibed-drop-in { from { opacity: 0; transform: translateY(-3%); } }
/* the arriving page has to be on top for that to read */
html.vibed-nav-up::view-transition-new(root) { z-index: 2; }
html.vibed-nav-up::view-transition-old(root) { z-index: 1; }

/* The header is the constant between pages. Naming it means the browser holds
   it still and morphs it rather than fading it out and back, which is what
   makes a site read as one surface instead of a stack of documents. */
header[role="banner"], body > header { view-transition-name: vibed-header; }
::view-transition-group(vibed-header) { animation-duration: .40s; }

@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; }
}