/* hy-fx — cinematic layer for "Hack Yourself".
   hyf-hero: full-bleed code-rain opener (canvas drawn by hy-fx.js).
   hyf-div: cyberbrain section divider with a one-shot scan sweep.
   hyf-hud: reading-progress readout / section map.
   hyf-glitch: pull-quote wrapper with a decode reveal.
   Theme vars only; prefers-reduced-motion turns every animation off. */

/* ------------------------------------------------------------------ hero */
.hyf-hero{
  --hyf-hero-ml-fallback:calc(-1 * max(1.25rem, 50vw - 600px));
  position:relative;
  isolation:isolate;
  width:var(--hyf-hero-w, calc(100vw - var(--hyf-sbw, 0px)));
  max-width:none;
  margin-left:var(--hyf-hero-ml, var(--hyf-hero-ml-fallback));
  margin-block:2.2rem 2.8rem;
  height:clamp(19rem, 40vw, 28rem);
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 58% 35%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 62%),
    linear-gradient(180deg, var(--code), color-mix(in oklab, var(--code) 70%, var(--bg2)));
  box-shadow:0 18px 48px color-mix(in oklab, var(--shadow) 40%, transparent);
}
/* The prose column is not always page-centred (TOC column on the right).
   These fallbacks keep the bleed aligned without JS; hy-fx.js measures the
   real column and sets --hyf-hero-ml / --hyf-hero-w inline. */
@media(min-width:1001px){
  .layout:has(.hyf-hero) .hyf-hero{--hyf-hero-ml-fallback:calc(-1 * max(1.25rem, 50vw - 368px))}
}
.article.narrow .hyf-hero{--hyf-hero-ml-fallback:calc(-1 * max(1.25rem, 50vw - 380px))}
/* The full-bleed opener sits under the sticky TOC column; on this post the
   HUD's section map takes over navigation. */
body:has(.hyf-hero) .toc{display:none!important}
@media(min-width:1001px){
  body:has(.hyf-hero) .layout{grid-template-columns:minmax(0, 46rem);justify-content:center}
}

.hyf-hero-poster{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  justify-content:space-between;
  gap:clamp(.6rem, 2vw, 2rem);
  padding:1.3rem;
  overflow:hidden;
  color:var(--fg);
  opacity:.16;
  font:12px/1.25 var(--mono);
  letter-spacing:.08em;
  white-space:pre;
  pointer-events:none;
}
.hyf-hero-poster span{
  display:block;
  max-height:100%;
  overflow:hidden;
  writing-mode:vertical-rl;
  text-orientation:mixed;
}
.hyf-hero-poster span:nth-child(2){opacity:.75}
.hyf-hero-poster span:nth-child(3){color:var(--accent2);opacity:.9}
.hyf-hero.hyf-rain-on .hyf-hero-poster{display:none}

.hyf-hero-canvas{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  opacity:.94;
  pointer-events:none;
}
.hyf-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(115% 85% at 50% 42%, transparent 34%, color-mix(in oklab, var(--bg) 62%, transparent) 100%),
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--line) 26%, transparent) 0 1px, transparent 1px 4px);
  opacity:.9;
}
.hyf-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg, var(--bg), transparent 11% 89%, var(--bg));
  opacity:.52;
}

.hyf-hero-in{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:.7rem;
  padding:clamp(1rem, 2.6vw, 2rem) clamp(1rem, 4vw, 3.2rem);
  pointer-events:none;
}
.hyf-hero-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:0;
  color:var(--muted);
  font:.75rem/1.45 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 8px var(--bg), 0 0 3px var(--bg);
}
.hyf-hero-top span:last-child{color:var(--accent2)}

.hyf-hero-title{
  position:relative;
  align-self:center;
  max-width:24ch;
  margin:0;
  color:var(--fg);
  font:600 clamp(1.35rem, 3.1vw, 2.55rem)/1.16 var(--mono);
  letter-spacing:-.045em;
  text-wrap:balance;
  text-shadow:0 0 20px var(--bg), 0 0 7px var(--bg), 0 1px 0 var(--bg);
}
.hyf-hero-exe{color:var(--accent);text-shadow:0 0 22px color-mix(in oklab, var(--accent) 40%, transparent)}
.hyf-hero-caret{
  display:inline-block;
  width:.36ch;
  height:.92em;
  margin-left:.16ch;
  vertical-align:-.08em;
  background:var(--accent);
  box-shadow:0 0 12px color-mix(in oklab, var(--accent) 65%, transparent);
  animation:none;
}
.hyf-hero.is-onscreen:not(.is-static) .hyf-hero-caret{animation:hyf-blink 1.05s steps(1) infinite}
.hyf-hero.is-static .hyf-hero-caret{display:none}
/* poster frame until the canvas has actually drawn (no-JS / canvas failure) */
.hyf-hero:not(.hyf-rain-on) .hyf-hero-caret,
.hyf-hero:not(.hyf-rain-on) .hyf-hero-led{display:none;animation:none}

/* thermo-optic shimmer: a clipped ghost of the full line, plus a sheen */
.hyf-hero-title::after{
  content:attr(data-hyf-text);
  position:absolute;
  inset:0;
  color:var(--accent2);
  opacity:0;
  clip-path:inset(0 0 100% 0);
  pointer-events:none;
  text-shadow:none;
}
.hyf-hero-title::before{
  content:"";
  position:absolute;
  inset:-18% -3%;
  background:linear-gradient(102deg, transparent 36%, color-mix(in oklab, var(--accent2) 24%, transparent) 49%, transparent 62%);
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-30%);
  pointer-events:none;
}
[data-theme=paper] .hyf-hero-title::before{mix-blend-mode:multiply}
.hyf-hero.is-live.is-onscreen .hyf-hero-title::after{animation:hyf-thermo 8s steps(1, end) .35s infinite}
.hyf-hero.is-live.is-onscreen .hyf-hero-title::before{animation:hyf-sheen 9s ease-in-out .5s infinite}
.hyf-hero.is-static .hyf-hero-title::after,
.hyf-hero.is-static .hyf-hero-title::before{display:none}

.hyf-hero-hud{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.32rem .5rem;
  margin:0;
  color:var(--muted);
  font:.75rem/1.55 var(--mono);
  letter-spacing:.02em;
  text-shadow:0 0 8px var(--bg), 0 0 3px var(--bg);
}
.hyf-hero-hud b{color:var(--fg);font-weight:500}
.hyf-hero-led{
  flex:none;
  width:.42rem;
  height:.42rem;
  background:var(--accent3);
  box-shadow:0 0 8px color-mix(in oklab, var(--accent3) 70%, transparent);
  animation:none;
}
.hyf-hero.is-onscreen:not(.is-static) .hyf-hero-led{animation:hyf-blink 1.7s steps(1) infinite}
.hyf-hero.is-static .hyf-hero-led{animation:none}
.hyf-hero-dot{color:var(--accent2)}

.hyf-hero-corner{
  position:absolute;
  z-index:4;
  width:.85rem;
  height:.85rem;
  border-color:var(--accent2);
  opacity:.65;
  pointer-events:none;
}
.hyf-hero-tl{top:9px;left:9px;border-top:1px solid;border-left:1px solid}
.hyf-hero-tr{top:9px;right:9px;border-top:1px solid;border-right:1px solid}
.hyf-hero-bl{bottom:9px;left:9px;border-bottom:1px solid;border-left:1px solid}
.hyf-hero-br{bottom:9px;right:9px;border-bottom:1px solid;border-right:1px solid}

@keyframes hyf-blink{50%{opacity:0}}
@keyframes hyf-thermo{
  0%{opacity:.3;clip-path:inset(10% 0 62% 0);transform:translate(2px,-1px)}
  2%{opacity:.14;clip-path:inset(44% 0 30% 0);transform:translate(-3px,1px)}
  4%{opacity:.26;clip-path:inset(70% 0 8% 0);transform:translate(1px,0)}
  6%,84%{opacity:0;clip-path:inset(99% 0 0 0);transform:none}
  85%{opacity:.34;clip-path:inset(10% 0 62% 0);transform:translate(2px,-1px)}
  87%{opacity:.18;clip-path:inset(44% 0 30% 0);transform:translate(-3px,1px)}
  89%{opacity:.3;clip-path:inset(70% 0 8% 0);transform:translate(1px,0)}
  91%{opacity:0;clip-path:inset(99% 0 0 0)}
}
@keyframes hyf-sheen{
  0%{opacity:.45;transform:translateX(-30%)}
  7%,80%{opacity:0;transform:translateX(30%)}
  86%{opacity:.55;transform:translateX(-10%)}
  95%{opacity:0;transform:translateX(30%)}
  100%{opacity:0;transform:translateX(30%)}
}

/* --------------------------------------------------------------- divider */
.hyf-div{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(.5rem, 2vw, 1rem);
  margin:3.4rem 0 .2rem;
  min-height:1.5rem;
  overflow:hidden;
}
.prose .hyf-div + h2{margin-top:.55rem}
.hyf-div-rule{position:relative;flex:1;min-width:2rem;height:1.15rem;color:var(--line)}
.hyf-div-rule svg{display:block;width:100%;height:100%;overflow:visible}
.hyf-div-rule path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.hyf-div-rule i{
  position:absolute;
  top:50%;
  right:-2px;
  width:5px;
  height:5px;
  background:var(--accent2);
  box-shadow:0 0 8px color-mix(in oklab, var(--accent2) 55%, transparent);
  transform:translateY(-50%) rotate(45deg);
}
.hyf-div-rule-r{transform:scaleX(-1)}
.hyf-div-label{
  flex:none;
  display:flex;
  align-items:center;
  gap:.5rem;
  max-width:78%;
  color:var(--fg);
  font:.75rem/1.2 var(--mono);
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hyf-div-code{
  flex:none;
  padding:.2rem .42rem;
  border:1px solid color-mix(in oklab, var(--accent) 45%, var(--line));
  background:color-mix(in oklab, var(--accent) 8%, var(--surface));
  color:var(--accent);
  letter-spacing:.08em;
}
.hyf-div-sep{color:var(--accent2)}
.hyf-div-text{overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.hyf-div-sweep{
  position:absolute;
  inset:0 auto 0 0;
  width:34%;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 24%, transparent), transparent);
  transform:translateX(-120%);
  opacity:0;
  pointer-events:none;
}
.hyf-div.is-in .hyf-div-sweep{opacity:1;animation:hyf-sweep .85s ease-out both}
@keyframes hyf-sweep{
  from{transform:translateX(-120%)}
  to{transform:translateX(340%)}
}

/* ---------------------------------------------------------------- glitch */
.hyf-glitch{
  position:relative;
  margin:2.8rem 0;
  padding:1.35rem 1.5rem 1.25rem;
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  background:
    linear-gradient(118deg, color-mix(in oklab, var(--accent) 8%, var(--surface)), var(--surface) 52%),
    var(--surface);
  box-shadow:5px 5px 0 color-mix(in oklab, var(--shadow) 55%, transparent);
  color:var(--fg);
  overflow:hidden;
}
.hyf-glitch::before{
  content:"";
  position:absolute;
  top:.55rem;
  right:.55rem;
  width:.7rem;
  height:.7rem;
  border-top:1px solid var(--accent2);
  border-right:1px solid var(--accent2);
  opacity:.55;
}
.hyf-glitch-hud{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:0 0 .85rem;
  color:var(--muted);
  font:.75rem/1.4 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hyf-glitch-hud span{flex:none;white-space:nowrap}
.hyf-glitch-hud span:last-child{color:var(--accent2)}
.hyf-glitch-body{
  position:relative;
  font:500 clamp(1.15rem, 2.4vw, 1.45rem)/1.5 var(--disp);
  letter-spacing:-.01em;
}
.hyf-glitch-body>*{margin:0}
.hyf-glitch-body>*+*{margin-top:.5rem}
.hyf-glitch-body :is(p, blockquote, q){margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;font-style:inherit}
.prose .hyf-glitch blockquote,
.prose .hyf-glitch blockquote.pullquote{
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:inherit;
  font:inherit;
  font-style:inherit;
}
.hyf-glitch cite{
  display:block;
  margin-top:.8rem;
  color:var(--muted);
  font:.75rem var(--mono);
  font-style:normal;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hyf-glitch :is(em, i){color:var(--accent3);font-style:italic}
.hyf-glitch :is(strong, b){color:var(--accent);font-weight:600}
.hyf-glitch-body::before{
  content:"“";
  position:absolute;
  top:-1.9rem;
  left:-.25rem;
  color:var(--accent);
  font:700 3.2rem/1 var(--serif);
  opacity:.22;
  pointer-events:none;
}
.hyf-glitch.is-decoding .hyf-glitch-body{color:var(--accent3)}
.hyf-glitch.is-decoding .hyf-glitch-hud span:last-child{color:var(--accent3)}
.hyf-glitch::after{
  content:"";
  position:absolute;
  inset:0;
  height:42%;
  background:linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 16%, transparent), transparent);
  transform:translateY(-120%);
  opacity:0;
  pointer-events:none;
}
.hyf-glitch.is-decoding::after{animation:hyf-glitch-scan .8s linear both}
@keyframes hyf-glitch-scan{
  0%{opacity:1;transform:translateY(-120%)}
  100%{opacity:0;transform:translateY(260%)}
}
.hyf-glitch.is-static .hyf-glitch-hud span:last-child{color:var(--muted)}

/* ------------------------------------------------------------------- hud */
.hyf-hud{display:none;margin:0}
html.hyf-hud-on .hyf-hud{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:70;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.4rem;
  width:15.5rem;
  color:var(--fg);
  font:400 .75rem/1.4 var(--mono);
  pointer-events:auto;
}
html.hyf-hud-on .progress{display:none!important}

.hyf-hud-track{display:none}
.hyf-hud-bar{display:block;width:0;height:100%;background:linear-gradient(90deg, var(--accent2), var(--accent));transition:width .12s linear}

.hyf-hud-panel{
  position:relative;
  padding:.7rem .75rem .65rem;
  background:color-mix(in oklab, var(--surface) 92%, transparent);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 34px color-mix(in oklab, var(--shadow) 45%, transparent);
  backdrop-filter:blur(10px);
}
.hyf-hud-panel::before{
  content:"";
  position:absolute;
  top:-1px;
  left:.75rem;
  right:.75rem;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.75;
}
.hyf-hud-kicker{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  margin:0 0 .35rem;
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hyf-hud-kicker span{display:flex;align-items:center;gap:.35rem}
.hyf-hud-kicker span:last-child{color:var(--accent3);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.hyf-hud-led{
  width:.38rem;
  height:.38rem;
  flex:none;
  background:var(--accent);
  box-shadow:0 0 7px color-mix(in oklab, var(--accent) 65%, transparent);
  animation:hyf-blink 1.6s steps(1) infinite;
}
.hyf-hud-pct{
  display:flex;
  align-items:baseline;
  gap:.1rem;
  margin:0;
  color:var(--accent);
  font:600 1.65rem/1.05 var(--mono);
  letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.hyf-hud-pct small{font-size:.75rem;font-weight:500;color:var(--muted);letter-spacing:0}
.hyf-hud-sec{
  height:2.7em;
  margin:.15rem 0 .5rem;
  overflow:hidden;
  color:var(--fg);
  font-size:.75rem;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.hyf-hud-lab{
  display:inline-block;
  margin-right:.25rem;
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hyf-hud-map{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:2px;
  margin:0 0 .5rem;
  padding:.3rem;
  border:1px solid var(--line);
  background:color-mix(in oklab, var(--code) 82%, transparent);
}
.hyf-hud-dot{
  display:grid;
  place-items:center;
  min-width:24px;
  min-height:24px;
  height:24px;
  border-radius:2px;
  text-decoration:none;
}
.hyf-hud-dot span{
  width:6px;
  height:6px;
  background:var(--muted);
  opacity:.5;
  transition:background .12s, opacity .12s, box-shadow .12s;
}
.hyf-hud-dot:hover span{background:var(--accent2);opacity:1}
.hyf-hud-dot.is-on{background:color-mix(in oklab, var(--accent) 13%, transparent)}
.hyf-hud-dot.is-on span{
  background:var(--accent);
  opacity:1;
  box-shadow:0 0 8px color-mix(in oklab, var(--accent) 65%, transparent);
}
.hyf-hud-dot:focus-visible{outline:2px dashed var(--accent2);outline-offset:1px}
.hyf-hud-foot{
  display:flex;
  align-items:center;
  gap:.35rem;
  margin:0;
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hyf-hud-foot .hyf-hud-led{width:.3rem;height:.3rem;background:var(--accent3);box-shadow:none}
.hyf-hud-toggle{
  align-self:flex-end;
  display:flex;
  align-items:center;
  gap:.3rem;
  min-height:28px;
  padding:.36rem .6rem;
  border:1px solid var(--line);
  border-radius:7px;
  background:color-mix(in oklab, var(--surface) 94%, transparent);
  color:var(--muted);
  font:.75rem var(--mono);
  cursor:pointer;
  box-shadow:0 6px 18px color-mix(in oklab, var(--shadow) 35%, transparent);
  transition:border-color .12s, color .12s;
}
.hyf-hud-toggle:hover{border-color:var(--accent);color:var(--fg)}
.hyf-hud-num{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.hyf-hud-unit{color:var(--muted)}
.hyf-hud-caret{color:var(--accent2);transition:transform .18s}
.hyf-hud.is-collapsed .hyf-hud-panel{display:none}
.hyf-hud.is-collapsed .hyf-hud-caret{transform:rotate(180deg)}

/* Small screens and tablets: slim bar under the sticky header, no overlay. */
@media(max-width:1239px){
  html.hyf-hud-on .hyf-hud{
    top:var(--hyf-bar-h, 3.4rem);
    right:0;
    bottom:auto;
    left:0;
    width:auto;
    display:block;
    z-index:59;
    padding:0;
    background:none;
    border:0;
    box-shadow:none;
    pointer-events:none;
  }
  .hyf-hud-panel,.hyf-hud-toggle{display:none!important}
  .hyf-hud-track{
    display:block;
    position:relative;
    height:3px;
    background:color-mix(in oklab, var(--line) 55%, transparent);
  }
  .hyf-hud-bar{
    height:100%;
    background:linear-gradient(90deg, var(--accent2), var(--accent));
    box-shadow:0 0 10px color-mix(in oklab, var(--accent) 55%, transparent);
  }
}

/* ------------------------------------------------------------ responsive */
@media(max-width:620px){
  .hyf-hero{
    height:clamp(18.5rem, 72vw, 24rem);
    margin-block:1.6rem 2.2rem;
  }
  .hyf-hero-in{padding:1rem;gap:.5rem}
  .hyf-hero-top{font-size:.75rem;letter-spacing:.06em}
  .hyf-hero-top span:last-child{display:none}
  .hyf-hero-title{font-size:clamp(1.22rem, 5.7vw, 1.7rem);max-width:none}
  .hyf-hero-hud{font-size:.75rem;gap:.2rem .38rem}
  .hyf-hero-poster{font-size:12px;padding:1rem;opacity:.12}
  .hyf-div{margin-top:2.8rem;gap:.45rem}
  .hyf-div-label{font-size:.75rem;letter-spacing:.06em;gap:.35rem;max-width:85%}
  .hyf-div-code{padding:.16rem .32rem}
  .hyf-glitch{padding:1.1rem 1.1rem 1rem;margin:2.2rem 0}
  .hyf-glitch-body{font-size:1.12rem}
  .hyf-glitch-hud{font-size:.75rem}
}

/* --------------------------------------------------------------- motion */
@media(prefers-reduced-motion: reduce){
  .hyf-hero-caret,
  .hyf-hero-led,
  .hyf-hud-led,
  .hyf-hero-title::before,
  .hyf-hero-title::after{display:none}
  .hyf-div-sweep{display:none}
  .hyf-glitch::after{display:none}
  .hyf-hud-bar{transition:none}
}

@media print{
  .hyf-hud{display:none!important}
  .hyf-hero{width:auto;margin-left:0;border:0;background:none;height:auto;min-height:12rem}
  .hyf-hero::before,.hyf-hero::after,.hyf-hero-poster{display:none}
}