/* SHK – Breathing Light Header (Ultra‑Lite) — HEADER ONLY */
.shk-breathing-header {
  position: relative;
  isolation: isolate;
  z-index: 1000;
  overflow: visible;
  /* Scoped defaults (can be overridden by admin UI inline vars) */
  --shk-breath-start:#ffffff;
  --shk-breath-mid:#efe9ff;
  --shk-breath-peak:#cdbfff;
  --shk-breath-end:#c6b8ff;
  --shk-breath-tail:#f4f0ff;
  --shk-breath-duration:24s;
  --shk-breath-angle:120deg;
  --shk-breath-stop:520px;
  --shk-breath-feather:96px;
  --shk-breath-prefeather:90px;
  --shk-breath-edge-lighten:.18;
  --shk-edge-softness:12%;
  --shk-breath-opacity:.95;
}

.shk-breathing-header::before {
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255, calc(1 - var(--shk-breath-opacity)));
  pointer-events:none;
}
.shk-breathing-header > * { position:relative; z-index:1; }

.shk-breathing-header::after{
  content:"";
  position:absolute;
  left:0; top:0; height:100%;
  width:min(calc(var(--shk-breath-stop) + var(--shk-breath-feather)*1.2),100%);
  pointer-events:none;
  background-image:
    linear-gradient(var(--shk-breath-angle),
      var(--shk-breath-start) 0%,
      var(--shk-breath-mid) 30%,
      var(--shk-breath-peak) 58%,
      var(--shk-breath-end) 85%,
      var(--shk-breath-tail) 100%
    ),
    radial-gradient(circle at 78% 50%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
  background-size:200% 200%,100% 100%;
  background-blend-mode:normal,screen;
  animation:shk-breathe var(--shk-breath-duration) ease-in-out infinite alternate;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--shk-breath-feather)*1.25),rgba(0,0,0,.7) calc(100% - var(--shk-breath-feather)*.85),rgba(0,0,0,.35) calc(100% - var(--shk-breath-feather)*.45),rgba(0,0,0,0)100%);
          mask-image:linear-gradient(to right,#000 0,#000 calc(100% - var(--shk-breath-feather)*1.25),rgba(0,0,0,.7) calc(100% - var(--shk-breath-feather)*.85),rgba(0,0,0,.35) calc(100% - var(--shk-breath-feather)*.45),rgba(0,0,0,0)100%);
}
@keyframes shk-breathe{0%{background-position:0% 50%,0 0;}50%{background-position:100% 50%,0 0;}100%{background-position:0% 50%,0 0;}}
@media (prefers-reduced-motion: reduce){.shk-breathing-header::after{animation:none;}}

/* === SHK: Auto-disable gradient ONLY under forced dark / accessibility tools === */
/* JS sets html.shk-forced-dark when Dark Reader/forced colors detected */
html.shk-forced-dark .shk-breathing-header::after {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}
html.shk-forced-dark .shk-breathing-header .shk-breath-layer {
  display: none !important;
}

/* Pure-CSS fallback when OS forced colors is active */
@media (forced-colors: active) {
  .shk-breathing-header::after { content: none !important; background: none !important; opacity: 0 !important; }
  .shk-breathing-header .shk-breath-layer { display: none !important; }
}