/* ======================================================
   DEADWAX — EDIT INTERRUPTION (BLACKOUT + TYPEWRITER)
   Triggered 1x / session. Auto closes (~2.5s).
====================================================== */

.dw-interrupt{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:#f3e9d7; /* off-white paper */
  color:#000;
}

.dw-interrupt.is-open{ display:flex; }

.dw-interrupt__sheet{
  width:min(720px, 92vw);
  border:3px solid #000;
  box-shadow:10px 10px 0 #000;
  background:#f7f0e3;
  padding:16px 16px 14px;
  position:relative;
  overflow:hidden;
}

/* grain */
.dw-interrupt__sheet:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:multiply;
  background:
    repeating-radial-gradient(circle at 0 0,
      rgba(0,0,0,.06) 0px,
      rgba(0,0,0,.06) 1px,
      transparent 1px,
      transparent 3px),
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.12) 1px, transparent 1.35px);
  background-size:3px 3px, 12px 12px;
}

.dw-interrupt__kicker{
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  border-bottom:3px solid #000;
  padding-bottom:10px;
  margin-bottom:12px;
  position:relative;
  z-index:1;
}

.dw-interrupt__text{
  margin:0;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size: clamp(26px, 4.2vw, 54px);
  line-height:1.05;
  white-space:pre-line; /* ensures line breaks render everywhere */
  position:relative;
  z-index:1;
}

.dw-interrupt__blink{
  display:inline-block;
  width:10px;
  height:1em;
  border-bottom:4px solid #000;
  transform:translateY(-.08em);
  margin-left:8px;
  animation: dwBlink .6s steps(2, end) infinite;
}

@keyframes dwBlink{
  0%, 49% { opacity:1; }
  50%, 100% { opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .dw-interrupt__blink{ animation:none; opacity:1; }
}










/* ===== SHOCK PASS (flash + jitter + redaction) ===== */

.dw-interrupt{
  background:#fff; /* the flash will handle the shock */
}

.dw-interrupt.is-open{
  animation: dwFlash .18s steps(2, end) 1;
}

@keyframes dwFlash{
  0%{ background:#fff; }
  50%{ background:#000; }
  100%{ background:#f3e9d7; }
}

/* Paper becomes heavier + more "print error" */
.dw-interrupt__sheet{
  background:#f1e7d4;
  box-shadow:14px 14px 0 #000;
  transform:rotate(-0.6deg);
}

.dw-interrupt__kicker{
  border-bottom:4px solid #000;
  letter-spacing:.22em;
}

/* Big headline + slight jitter */
.dw-interrupt__text{
  font-size: clamp(30px, 5vw, 64px);
  letter-spacing:.02em;
  text-shadow: 1px 0 0 rgba(0,0,0,.35);
  animation: dwJitter 1.8s steps(2, end) infinite;
}

@keyframes dwJitter{
  0%, 90% { transform:translate(0,0); }
  91% { transform:translate(1px,0); }
  92% { transform:translate(-1px,1px); }
  93% { transform:translate(0,-1px); }
  94% { transform:translate(1px,1px); }
  95%, 100% { transform:translate(0,0); }
}

/* Redaction bars (drawn behind the text) */
.dw-interrupt__sheet:after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:64px;
  bottom:14px;
  pointer-events:none;
  opacity:.13;
  background:
    linear-gradient(#000,#000) 0 18% / 78% 18px no-repeat,
    linear-gradient(#000,#000) 0 46% / 92% 18px no-repeat,
    linear-gradient(#000,#000) 0 74% / 66% 18px no-repeat;
  filter:blur(.2px);
}

/* Optional: make the blink harsher */
.dw-interrupt__blink{
  border-bottom:6px solid #000;
  animation: dwBlink .45s steps(2, end) infinite;
}

/* Reduce motion users */
@media (prefers-reduced-motion: reduce){
  .dw-interrupt.is-open{ animation:none; }
  .dw-interrupt__text{ animation:none; }
}







/* ===== PURE BW OVERRIDES ===== */

.dw-interrupt{
  background:#fff;   /* pure white */
  color:#000;
}

.dw-interrupt__sheet{
  background:#fff;   /* pure white paper */
  box-shadow:14px 14px 0 #000;
}

/* remove any grey/opacity grain layers */
.dw-interrupt__sheet:before{
  opacity:0 !important;
}

/* bars: TOTAL BLACK, no opacity */
.dw-interrupt__sheet:after{
  opacity:1 !important;
  filter:none !important;
  background:
    linear-gradient(#000,#000) 0 18% / 78% 18px no-repeat,
    linear-gradient(#000,#000) 0 46% / 92% 18px no-repeat,
    linear-gradient(#000,#000) 0 74% / 66% 18px no-repeat;
}

/* blink also pure black */
.dw-interrupt__blink{
  border-bottom:6px solid #000;
}




/* ===== FORCE PURE BLACK / WHITE + SOLID REDACTION BARS ===== */

.dw-interrupt{
  background:#fff !important;
  color:#000 !important;
}

.dw-interrupt__sheet{
  background:#fff !important;
}

/* kill any grain layer that can "grey" things */
.dw-interrupt__sheet:before{
  opacity:0 !important;
  background:none !important;
}

/* make bars SOLID BLACK, NO OPACITY, NO BLEND */
.dw-interrupt__sheet:after{
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  background:
    linear-gradient(#000,#000) 0 18% / 78% 18px no-repeat,
    linear-gradient(#000,#000) 0 46% / 92% 18px no-repeat,
    linear-gradient(#000,#000) 0 74% / 66% 18px no-repeat !important;
  z-index:1 !important;
}

/* ensure text sits ABOVE the bars */
.dw-interrupt__kicker,
.dw-interrupt__text{
  position:relative;
  z-index:2;
}





/* ===== FIX: BARS BEHIND TEXT ===== */

.dw-interrupt__sheet{
  position:relative;
  isolation:isolate; /* creates a clean stacking context */
}

/* bars layer */
.dw-interrupt__sheet:after{
  z-index:0 !important;          /* behind */
  pointer-events:none;
}

/* content above bars */
.dw-interrupt__kicker,
.dw-interrupt__text{
  position:relative;
  z-index:2 !important;
}

/* just in case: if anything else gets in the way */
.dw-interrupt__sheet:before{
  z-index:1 !important;          /* but you already disabled it */
}






/* ===== STABLE BARS: NO % (won't collide during typewriter) ===== */

.dw-interrupt__sheet{
  position:relative;
  isolation:isolate;
}

/* solid bars pinned in px so they never "move" with layout */
.dw-interrupt__sheet:after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;

  /* start AFTER kicker area */
  top:78px;
  bottom:14px;

  pointer-events:none;
  z-index:0 !important;

  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;

  background:
    linear-gradient(#000,#000) 0 18px / 78% 18px no-repeat,
    linear-gradient(#000,#000) 0 78px / 92% 18px no-repeat,
    linear-gradient(#000,#000) 0 138px / 66% 18px no-repeat !important;
}

/* content above bars */
.dw-interrupt__kicker,
.dw-interrupt__text{
  position:relative;
  z-index:2 !important;
}

/* mobile tuning: tighter spacing so bars stay below first line */
@media (max-width:680px){
  .dw-interrupt__sheet:after{
    top:72px;
    background:
      linear-gradient(#000,#000) 0 14px / 86% 16px no-repeat,
      linear-gradient(#000,#000) 0 66px / 94% 16px no-repeat,
      linear-gradient(#000,#000) 0 118px / 72% 16px no-repeat !important;
  }
}







/* ===== BARS: only show AFTER typing + always BELOW text ===== */

.dw-interrupt__sheet:after{
  opacity:0 !important;          /* hidden by default */
  transform:translateY(-6px);
}

/* when JS says "show bars" */
.dw-interrupt__sheet.dw-bars-on:after{
  opacity:1 !important;
  transform:translateY(0);
  transition:opacity .10s linear, transform .10s linear;
}

/* bars position uses CSS vars set by JS */
.dw-interrupt__sheet:after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top: var(--dwBarsTop, 220px);
  bottom:14px;
  pointer-events:none;
  z-index:0 !important;

  mix-blend-mode:normal !important;
  filter:none !important;

  background:
    linear-gradient(#000,#000) 0 0   / 78% 18px no-repeat,
    linear-gradient(#000,#000) 0 54px/ 92% 18px no-repeat,
    linear-gradient(#000,#000) 0 108px/ 66% 18px no-repeat !important;
}







/* ===== DOM BARS (pure black, never overlap text) ===== */

.dw-interrupt__stack{
  position:relative;
  z-index:2;
}

.dw-interrupt__bars{
  position:absolute;
  left:14px;
  right:14px;
  /* top is set by JS dynamically */
  z-index:0;
  display:block;
  opacity:0;
  transform:translateY(-6px);
}

.dw-interrupt__bars.is-on{
  opacity:1;
  transform:translateY(0);
  transition:opacity .10s linear, transform .10s linear;
}

.dw-interrupt__bar{
  height:18px;
  background:#000;
  margin:0 0 22px;
}

.dw-interrupt__bar.is-1{ width:78%; }
.dw-interrupt__bar.is-2{ width:92%; }
.dw-interrupt__bar.is-3{ width:66%; margin-bottom:0; }