/* ————————————————————————————————————————————
   polish.css · Escape from Gilead · site-wide slick layer
   Shared by every page. Light (parchment) + dark (war room)
   variants keyed off html.pz-dark, set by polish.js.
   ———————————————————————————————————————————— */

/* Cross-page fade — browsers with the View Transitions API
   get a soft cross-fade on every internal navigation. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.22s; }
::view-transition-new(root) { animation-duration: 0.32s; }

html { text-rendering: optimizeLegibility; }

/* Page entrance (fallback + first paint) */
@keyframes pzEnter { from { opacity: 0; } to { opacity: 1; } }
body { animation: pzEnter 0.45s ease-out both; }

/* ————— Reading progress bar ————— */
#pz-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 2000; pointer-events: none;
  background: linear-gradient(90deg, #7a1818, #b53030);
  box-shadow: 0 0 8px rgba(122, 24, 24, 0.55);
  transition: width 0.08s linear;
}
.pz-dark #pz-progress {
  background: linear-gradient(90deg, #8b2020, #e0563e);
  box-shadow: 0 0 10px rgba(224, 86, 62, 0.5);
}

/* ————— Scroll reveal ————— */
.pz-r {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--pz-d, 0ms);
  will-change: opacity, transform;
}
.pz-in { opacity: 1; transform: none; will-change: auto; }

/* ————— Floating glass nav ————— */
#pz-nav {
  position: fixed; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  z-index: 900;
  display: flex; align-items: center; gap: 2px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(250, 244, 228, 0.72);
  border: 1px solid rgba(122, 24, 24, 0.22);
  box-shadow: 0 10px 32px rgba(40, 20, 8, 0.22), inset 0 1px 0 rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  font-family: 'Cormorant SC', 'EB Garamond', Georgia, serif;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
#pz-nav.pz-hide { transform: translateX(-50%) translateY(76px); opacity: 0; }
#pz-nav a {
  position: relative;
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  color: #5a4029;
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
}
#pz-nav a:hover { color: #7a1818; background: rgba(122, 24, 24, 0.08); }
#pz-nav a.pz-here {
  color: #f4e9d2;
  background: linear-gradient(160deg, #7a1818, #4a0a0a);
  box-shadow: 0 3px 10px rgba(74, 10, 10, 0.4);
}
.pz-dark #pz-nav {
  background: rgba(26, 10, 10, 0.66);
  border-color: rgba(139, 32, 32, 0.5);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.pz-dark #pz-nav a { color: #c9a87a; }
.pz-dark #pz-nav a:hover { color: #e8d5b0; background: rgba(139, 32, 32, 0.28); }
.pz-dark #pz-nav a.pz-here {
  color: #f6e6c8;
  background: linear-gradient(160deg, #8b2020, #4a0a0a);
}
@media (max-width: 560px) {
  #pz-nav { gap: 0; padding: 5px 7px; max-width: calc(100vw - 20px); overflow-x: auto; }
  #pz-nav a { padding: 6px 9px; font-size: 0.7rem; letter-spacing: 0.08em; }
}

/* ————— Themed scrollbars ————— */
* { scrollbar-width: thin; scrollbar-color: #b08a5a transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(#c4a071, #98815e);
  border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #7a1818; background-clip: content-box; }
.pz-dark * { scrollbar-color: #5c1a1a transparent; }
.pz-dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(#6b2020, #3d0f0f);
  border: 2px solid transparent; background-clip: content-box;
}

/* ————— Focus visible, everywhere ————— */
:focus-visible { outline: 2px solid #7a1818; outline-offset: 2px; border-radius: 2px; }
.pz-dark :focus-visible { outline-color: #e0563e; }

/* ————— Motion respect ————— */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .pz-r { opacity: 1; transform: none; transition: none; }
  #pz-nav { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media print {
  #pz-nav, #pz-progress { display: none !important; }
  .pz-r { opacity: 1 !important; transform: none !important; }
}