/* ═══════════════════════════════════════════════════════════════════
   NAV DOCK
   The top panel minimises as you scroll, then — on interior pages —
   docks to a slim vertical rail on the left, freeing the full page
   height for reading. Returns to the top bar when you scroll back up.

   Desktop only (>=1100px). Below that the existing top bar and burger
   menu behave exactly as before, untouched.
   ═══════════════════════════════════════════════════════════════════ */

.railnav{
  position:fixed;
  left:18px;
  top:50%;
  transform:translateY(-50%) translateX(-24px);
  z-index:60;
  display:none;
  flex-direction:column;
  gap:2px;
  padding:12px 10px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--rule);
  border-radius:16px;
  box-shadow:0 22px 50px -30px rgba(18,24,22,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .38s ease, transform .42s cubic-bezier(.22,.61,.36,1);
}
@supports (backdrop-filter: blur(8px)) {
  .railnav{ backdrop-filter:blur(10px); background:color-mix(in srgb, var(--surface) 74%, transparent); }
}

.railnav__mk{display:block;margin:0 auto 8px;width:26px;height:auto}

.railnav a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:9px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast);
}
.railnav a:hover{background:color-mix(in srgb, var(--brand) 7%, transparent); color:var(--brand)}
.railnav a[aria-current="page"]{color:var(--brand); background:color-mix(in srgb, var(--brand) 9%, transparent)}
.railnav a:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.railnav__i{width:17px;height:17px;flex:none;color:var(--brand-2)}
.railnav a.railnav__cta{
  margin-top:6px;
  justify-content:center;
  background:var(--brand);
  color:var(--brand-ink);
}
.railnav a.railnav__cta:hover,
.railnav a.railnav__cta:focus-visible{background:var(--deep); color:var(--brand-ink)}

/* ── active state: rail in, top bar out ───────────────────────────── */
@media (min-width:1100px){
  body.dock-ready .railnav{display:flex}
  body.docked .railnav{
    opacity:1;
    pointer-events:auto;
    transform:translateY(-50%) translateX(0);
  }
  body.docked .nav{
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
  }
  .nav{transition:height var(--t), background var(--t), border-color var(--t),
                 box-shadow var(--t), transform .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease}
}

/* the rail never appears on narrow screens — the burger menu owns mobile */
@media (max-width:1099px){
  .railnav{display:none !important}
  body.docked .nav{transform:none; opacity:1; pointer-events:auto}
}

@media (prefers-reduced-motion: reduce){
  .railnav,.nav{transition:opacity .01ms linear}
  .railnav{transform:translateY(-50%) translateX(0)}
}

/* ═══════════════════════════════════════════════════════════════════
   OFFSCREEN ANIMATION PAUSE
   The decorative loops (ring pulse, travelling dots, status dots) ran
   forever even when scrolled far out of view, costing CPU and battery
   on phones for something nobody can see. They now pause when their
   section is offscreen — see js/eco-flow.js.
   ═══════════════════════════════════════════════════════════════════ */
.anim-idle *,
.anim-idle::before,
.anim-idle::after{animation-play-state:paused !important}