/* ==========================================================================
   Voyamore — generic sticky utility, driven by [voyamore_sticky].

   Deliberately minimal. It owns positioning and nothing else, so whatever
   styling the element already has (a builder-designed header, say) survives
   being pinned. Appearance changes hang off the state classes below.
   ========================================================================== */

/* The element keeps its normal flow position until the JS pins it, so the
   page looks right before scripts run and if they never do.

   Transitions cover the properties a pinned header usually changes —
   shadow, background, padding, height. `position` itself can never be
   animated, so the entrance is handled by is-entering below. */
/* No `will-change: transform` here, deliberately.
   It creates a containing block for fixed-position descendants and a new
   stacking context — permanently, not just while animating. Anything
   `position: fixed` inside a pinned header (an off-canvas panel, its
   scrim, a search modal) would then resolve against the header box rather
   than the viewport, and get trapped in its stacking context. A header is
   exactly the sort of element people put modals inside, so the hint costs
   far more than the paint it saves. */
.vym-sticky {
  transition:
    transform        var(--vym-sticky-duration, 0.32s) var(--vym-sticky-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow       0.3s var(--vym-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    background-color 0.3s var(--vym-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    padding          0.3s var(--vym-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    height           0.3s var(--vym-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Start state for the entrance. The JS adds this, flushes a reflow, then
   removes it — so the element transitions from shifted-up to rest instead
   of appearing in place. Transition is suppressed here so the start state
   applies instantly rather than animating into it. */
.vym-sticky.is-entering {
  transform: translateY(-100%);
  transition: none;
}

.vym-sticky.is-pinned {
  position: fixed;
  top: var(--vym-sticky-top, 0px);
  left: 0;
  right: 0;
  z-index: var(--vym-sticky-z, 300);
}

/* Space held where the element used to sit, so pinning it doesn't pull the
   rest of the page up. Height is measured and kept in sync by the JS. */
.vym-sticky-placeholder {
  height: 0;
  flex: 0 0 auto;
}

/* hide_on_scroll="1" — slides away going down, returns coming back up. */
.vym-sticky.is-hidden {
  transform: translateY(-100%);
}

/* Fade entrance instead of slide, via animate="fade". */
.vym-sticky--fade.is-entering {
  transform: none;
  opacity: 0;
}
.vym-sticky--fade {
  transition:
    opacity          var(--vym-sticky-duration, 0.32s) var(--vym-sticky-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    transform        var(--vym-sticky-duration, 0.32s) var(--vym-sticky-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow       0.3s var(--vym-ease, cubic-bezier(0.4, 0, 0.2, 1)),
    background-color 0.3s var(--vym-ease, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Respect a reduced-motion preference: the bar still pins and still hides,
   it just arrives without the movement. */
.vym-sticky--no-motion,
.vym-sticky--no-motion.is-entering {
  transition: none;
  transform: none;
  opacity: 1;
}
.vym-sticky--no-motion.is-hidden {
  /* Keep the hide behaviour, without animating into it. */
  transform: translateY(-100%);
}

/* ==========================================================================
   State hooks.

   Styled conservatively here — a shadow once scrolled and nothing else —
   because this utility gets pointed at elements we haven't designed. Target
   your own selector alongside the state class for anything more:

     #site-header.is-scrolled { padding-block: 8px; }
     #site-header.is-stuck    { background: #fff; }
   ========================================================================== */

.vym-sticky.is-scrolled {
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.28);
}
html.dark .vym-sticky.is-scrolled {
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.6);
}

@media print {
  .vym-sticky {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .vym-sticky-placeholder { display: none !important; }
}