/* ============================================================
   Scroll-linked logo  (Volt-style: large bottom-left → small header)
   --------------------------------------------------------------
   Integrate:
     1. Place <a id="scroll-logo"> once in wiki/layout.html
     2. Place empty <span id="nav-logo-slot"> in the navbar brand
     3. Load this file + static/js/logo-shrink.js from layout.html

   How it moves:
     The node is always position:fixed. JavaScript writes three CSS
     variables per animation frame. Only transform changes
     (translate3d + scale) so the compositor can keep the scroll
     path at 60fps — never animate top/left/width.
   ============================================================ */

:root {
  /* Start ~96px (inner pages). Homepage overrides below (~160px). */
  --logo-start-h: 96px;
  /* Docked size inside the navbar (~38px). */
  --logo-end-h: 38px;

  /* Fallback pose before JS runs = bottom-left of the viewport. */
  --scroll-logo-x: 1.35rem;
  --scroll-logo-y: calc(100dvh - var(--logo-start-h) - 1.35rem);
  --scroll-logo-scale: 1;
}

/* Homepage: larger mark over the hero, closer to the Volt reference.
   Only override size here — JS writes --scroll-logo-x/y/scale on :root.
   Do not set --scroll-logo-y on body; it would shadow the JS variables. */
.page-home {
  --logo-start-h: 160px;
}

.scroll-logo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040; /* Bootstrap .fixed-top is 1030; theme switcher is higher */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--logo-start-h);
  height: var(--logo-start-h);
  /* Origin = top-left so scale keeps the corner pinned to (x, y). */
  transform: translate3d(var(--scroll-logo-x), var(--scroll-logo-y), 0)
    scale(var(--scroll-logo-scale));
  transform-origin: 0 0;
  will-change: transform;
  text-decoration: none;
  /* No CSS transition: JS already interpolates against scrollY.
     A transition here would lag one frame behind the finger/wheel. */
}

.scroll-logo.is-docked {
  will-change: auto;
  pointer-events: none; /* clicks hit the navbar brand underneath */
}

.scroll-logo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}

.scroll-logo.is-docked .scroll-logo__img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.28));
}

@media (max-width: 991.98px) {
  .page-home {
    --logo-start-h: 112px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --logo-start-h: 80px;
    --logo-end-h: 36px;
    --scroll-logo-x: 0.85rem;
    --scroll-logo-y: calc(100dvh - var(--logo-start-h) - 1rem);
  }

  .page-home {
    --logo-start-h: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-logo {
    will-change: auto;
  }
}