/* Fixed header styles (modern glass) */
#header-placeholder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

/*
  Gradual fade near the fixed header
  We use a CSS mask so the content fades to transparency (revealing the real page background)
  instead of tinting it with an overlay, which can cause a visible “separation line”.
*/
.fade-near-header {
  --fade-a: 0px;
  --fade-b: 0px;
}

.fade-near-header.is-fading {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    transparent var(--fade-a),
    rgb(0 0 0 / 1) var(--fade-b),
    rgb(0 0 0 / 1) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    transparent var(--fade-a),
    rgb(0 0 0 / 1) var(--fade-b),
    rgb(0 0 0 / 1) 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Ensure header content has no extra padding at bottom */
#header-placeholder nav {
  margin-bottom: 0;
}

/* Page content spacing is handled by fixed-header.js (body padding) */