/* Under-nav hero bleed + nav melt — approved by James 2026-09-24.
   Scope: Home hero ONLY. (Explore/Browse has no cinematic hero in production;
   title Details is a centered modal dialog, not a full-bleed page.)
   Toggled via body.bleed-home by hero-bleed.js on the home route. */

/* 1 — hero artwork reaches the viewport top, under the fixed topbar.
   The hero's bottom edge stays pixel-identical to before: the added height
   (2x the nav offset) compensates the removed page padding + negative margin. */
body.bleed-home #view-home{padding-top:0}
body.bleed-home #view-home .hero{margin-top:-68px;min-height:calc(min(900px,100svh - 68px) + 136px)}
@media(max-width:600px){
  body.bleed-home #view-home .hero{margin-top:-118px;min-height:calc(100svh + 118px)}
}

/* 2 — nav melt: transparent over the artwork at the top, melting to the solid
   nav background as the user scrolls. --melt (0..1) is driven by hero-bleed.js
   through a rAF-throttled passive scroll listener. */
body.bleed-home .topbar{
  --melt:0;
  background-color:color-mix(in srgb,var(--nav-bg) calc(var(--melt)*100%),transparent);
  border-bottom-color:color-mix(in srgb,#f2e9d8 calc(var(--melt)*9%),transparent);
  -webkit-backdrop-filter:saturate(150%) blur(calc(var(--melt)*22px));
  backdrop-filter:saturate(150%) blur(calc(var(--melt)*22px));
  color:color-mix(in srgb,var(--ink) calc(var(--melt)*100%),#f2e9d8);
}
/* Legibility scrim (James, 2026-09-24): nav text must read over BRIGHT artwork.
   A readability gradient behind the bar, ~160px tall so it cushions the text
   even where the bar ends. Fades to zero as the nav melts solid (--melt, 220px).
   z-index -1 = above the bar's own background, below the nav content. */
body.bleed-home .topbar::after{
  content:"";position:absolute;top:0;left:0;right:0;height:160px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.40) 42%,rgba(0,0,0,.14) 72%,transparent 100%);
  opacity:calc(1 - var(--melt,0));
}
@media(max-width:600px){
  body.bleed-home .topbar::after{height:180px;}
}
/* Soft shadow on nav text + icon buttons so they read over bright art.
   Fades out with the melt; over the solid nav there is no shadow at all. */
body.bleed-home .topbar .wordmark,
body.bleed-home .topbar .nav-btn,
body.bleed-home .topbar #signinBtn{
  text-shadow:0 1px 10px rgba(0,0,0,calc(.72*(1 - var(--melt,0)))),0 0 3px rgba(0,0,0,calc(.5*(1 - var(--melt,0))));
}
body.bleed-home .topbar .theme-toggle,
body.bleed-home .topbar .icon-btn{
  filter:drop-shadow(0 1px 6px rgba(0,0,0,calc(.6*(1 - var(--melt,0)))));
}
@media(prefers-reduced-motion:reduce){
  body.bleed-home .topbar{transition:none}
}