/* Supplement to the ported Mapache main.css.
 *
 * Kept separate so main.css stays byte-identical to the theme — it is easy to
 * see what is theirs and what is ours. Everything here either fills a gap the
 * theme left (.scrolltop has no rules in main.css at all) or is a deliberate
 * addition. */

/* --- Cover down-arrow ----------------------------------------------------
   The theme markup carries `.scrolltop.animated.slideOutDown.infinite`, but
   main.css never styles .scrolltop, so it rendered inline and static.

   It also lives OUTSIDE <section id="cover"> in our markup, on purpose:
   .cover is position:relative with z-index:2, which creates a stacking
   context. Any z-index on a descendant is scoped inside that context, so the
   arrow could never rise above the fixed bottom scrim (z-index 100) and came
   out blurred. Positioned against the initial containing block instead, it
   competes at root level and stays crisp.

   Do not give .main a `position` — that would give it a stacking context too
   (it already carries z-index:2) and trap the arrow all over again. */
.cover-down {
  position: absolute;
  top: calc(100svh - 116px);
  left: 50%;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  z-index: 110;          /* above .viewport-fade (100), below .to-top (120) */
  color: #fff;
  opacity: 0.8;
  display: block;
  animation: sn-bob 2.2s ease-in-out infinite;
  transition: opacity 0.2s ease;
}
.cover-down:hover { opacity: 1; }
.cover-down .svg-icon { width: 68px; height: 68px; fill: currentColor; display: block; }

@keyframes sn-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}

/* --- Back to top --------------------------------------------------------- */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(48, 54, 60, 0.86);
  border: 1px solid hsla(0, 0%, 100%, 0.22);
  color: #fff;
  z-index: 120;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s, background 0.2s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: rgba(48, 54, 60, 0.98); border-color: hsla(0, 0%, 100%, 0.4); }
.to-top svg { display: block; }

/* --- Header fade ---------------------------------------------------------
   main.css flips .header between transparent and #30363c with no transition,
   so it snapped. Ease it, and let it pick up translucency once scrolled. */
.header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.header.toolbar-shadow {
  background-color: rgba(48, 54, 60, 0.82) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
/* Over the cover the header stays fully transparent, as the theme intended. */
.header:not(.toolbar-shadow) {
  background-color: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .cover-down { animation: none; }
  .to-top, .header { transition: none; }
}

/* --- Viewport bottom fade ------------------------------------------------
   The card below the fold is always cut mid-sentence. A fixed scrim at the
   bottom of the viewport blurs and darkens it, so the feed reads as receding
   rather than truncated.

   The mask is what makes it work: backdrop-filter cannot be given a gradient
   strength directly, so the whole layer is blurred and then masked to fade in
   from nothing at the top. pointer-events:none keeps it from eating clicks,
   and z-index sits below .to-top (120) so the button stays usable. */
.viewport-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 100%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* At the true bottom of the page nothing is being cut off, and the scrim would
   just dim the footer. */
.viewport-fade.is-at-end { opacity: 0; }

@media (max-width: 700px) {
  .viewport-fade { height: 120px; }
}

/* --- Top scrim ------------------------------------------------------------
   Content scrolling under the transparent header collided with the nav text.
   This blurs and darkens what passes beneath it, fading out downward.

   The menu bar itself is NOT blurred: .header is z-index 999, this sits at
   500, and backdrop-filter only affects what paints *below* it. Putting this
   above the header would smear the nav — the whole point is that it does not. */
.top-fade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 132px;
  z-index: 500;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 46%, rgba(0, 0, 0, 0) 100%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Hidden over the hero, where there is nothing to scroll under and it would
   only dim the cover image. */
.top-fade.is-visible { opacity: 1; }

@media (max-width: 700px) {
  .top-fade { height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .top-fade { transition: none; }
}