/* === PATCH v5.4 // no head clipping + Departure Mono + exit trap + error windows === */

/* 3. Departure Mono as global UI font */
@font-face {
  font-family: 'Departure Mono';
  src: url("../fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --display: "Departure Mono", monospace !important;
  --pixel-en: "Departure Mono", monospace !important;
  --pixel-ru: "Departure Mono", monospace !important;
  --mono: "Departure Mono", monospace !important;
}
body, button, input, textarea, select,
.titlebar, .menubar, .statusbar, .sidebar, .terminal-body,
.term-line, .folder-list, .folder-row, .stub p, .manifesto,
.id-card-body, .channel, .tool, .theme-tag,
.tool-popover, .float-window {
  font-family: "Departure Mono", monospace !important;
}

/* 1/2. Head glitch: remove every possible clipping/cropping source */
.hero-side-art,
.hero-side-art.revealed,
.hero-side-art.head-click-glitch {
  clip-path: none !important;
  overflow: visible !important;
  will-change: opacity, filter, transform;
}

.hero-side-art.revealed {
  animation: head-reveal-focus-v54 .58s steps(6) forwards !important;
}
@keyframes head-reveal-focus-v54 {
  0% { opacity: 0; transform: scale(.985); filter: blur(4px) contrast(2.4) brightness(1.05); clip-path: none; }
  18% { opacity: .46; transform: scale(1.006); filter: blur(2px) contrast(2.6) brightness(.92); clip-path: none; }
  36% { opacity: .88; transform: scale(.998); filter: blur(.6px) invert(.04) contrast(2.2) brightness(.86); clip-path: none; }
  58% { opacity: .54; transform: scale(1.002); filter: blur(1px) contrast(2.8) brightness(.72); clip-path: none; }
  78% { opacity: .94; transform: scale(1); filter: contrast(1.55) brightness(.86); clip-path: none; }
  100% { opacity: .92; transform: scale(1); filter: contrast(1.05) brightness(.92); clip-path: none; }
}

.hero-side-art.head-click-glitch {
  animation: head-no-clip-flicker-v54 .34s steps(4) both !important;
}
@keyframes head-no-clip-flicker-v54 {
  0% { opacity: .92; transform: scale(1); filter: contrast(1.05) brightness(.92); clip-path: none; }
  22% { opacity: .58; transform: scale(1.003); filter: blur(.8px) contrast(2.4) brightness(.78); clip-path: none; }
  44% { opacity: .96; transform: scale(.998); filter: invert(.05) contrast(2.7) brightness(.82); clip-path: none; }
  70% { opacity: .72; transform: scale(1.001); filter: contrast(2.1) brightness(.76); clip-path: none; }
  100% { opacity: .92; transform: scale(1); filter: contrast(1.05) brightness(.92); clip-path: none; }
}

/* backup/mobile-pass-before-rollback: phone head click pulse (guarded use in @media 640 + narrow/phone) */
@keyframes head-pixel-pulse-v52-phone {
  0% {
    opacity: .92;
    transform: translateX(var(--phone-head-shift-x)) scale(1);
    filter: contrast(1.05) brightness(.92);
  }
  25% {
    opacity: .62;
    transform: translateX(var(--phone-head-shift-x)) scale(1.003);
    filter: blur(.8px) contrast(2.6) brightness(.86);
    clip-path: polygon(2% 3%, 98% 0, 96% 96%, 6% 100%);
  }
  45% {
    opacity: .94;
    transform: translateX(var(--phone-head-shift-x)) scale(.998);
    filter: invert(.05) contrast(2.8) brightness(.82);
    clip-path: polygon(0 0, 100% 4%, 98% 92%, 3% 100%);
  }
  70% {
    opacity: .74;
    transform: translateX(var(--phone-head-shift-x)) scale(1.001);
    filter: contrast(1.9) brightness(.8);
  }
  100% {
    opacity: .92;
    transform: translateX(var(--phone-head-shift-x)) scale(1);
    filter: contrast(1.05) brightness(.92);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* 2. Poster close glitch option: pixel dissolve, no wobble, no scanlines */
.modal.closing {
  display: flex !important;
  animation: modal-pixel-dissolve-v54 .52s steps(6) forwards !important;
  filter: none !important;
}
.modal.closing::before,
.modal.closing::after {
  display: none !important;
}
.modal.closing img,
.poster-hard-glitch {
  animation: poster-pixel-dissolve-v54 .52s steps(6) forwards !important;
}
@keyframes modal-pixel-dissolve-v54 {
  0% { opacity: 1; transform: scale(1); filter: none; }
  22% { opacity: .9; transform: scale(1.002); filter: contrast(2.2) brightness(1.08); }
  44% { opacity: .66; transform: scale(.999); filter: invert(.06) contrast(3); }
  66% { opacity: .34; transform: scale(.996); filter: blur(.7px) contrast(4); }
  100% { opacity: 0; transform: scale(.99); filter: blur(1.5px) contrast(4) brightness(.12); }
}
@keyframes poster-pixel-dissolve-v54 {
  0% { opacity: 1; transform: scale(1); filter: contrast(1); }
  18% { opacity: .92; transform: scale(1.004); filter: contrast(2.4) brightness(1.05) saturate(.75); }
  36% { opacity: .68; transform: scale(.998); filter: invert(.08) contrast(3.2); }
  54% { opacity: .46; transform: scale(1.002); filter: blur(.45px) contrast(4) brightness(.82); }
  76% { opacity: .2; transform: scale(.996); filter: blur(1px) contrast(4.8) brightness(.45); }
  100% { opacity: 0; transform: scale(.99); filter: blur(1.4px) contrast(5) brightness(.08); }
}

/* 5. Push folder meta/size closer to terminal right edge without breaking rows */
.folder-row {
  grid-template-columns: 22px minmax(220px, .75fr) minmax(520px, 1.65fr) 90px !important;
}
.folder-row .meta {
  text-align: right !important;
}
.folder-row .size {
  min-width: 90px !important;
  text-align: right !important;
}

/* 4. Floating error windows become clickable */
.float-window {
  cursor: url("../../refs/New-Cursor-Finger.png") 8 1, pointer;
}
.float-window.closing {
  animation: small-window-close-v54 .18s steps(3) forwards !important;
}
@keyframes small-window-close-v54 {
  0% { opacity: 1; transform: translate(0,0); filter: none; }
  50% { opacity: .6; transform: translate(2px,-1px); filter: contrast(2); }
  100% { opacity: 0; transform: translate(0,0) scale(.96); }
}

/* 6. Exit trap windows */
.exit-trap-window {
  position: fixed;
  z-index: 500;
  width: 320px;
  border: 1px solid var(--warn);
  background: rgba(8,10,14,.97);
  color: var(--text-bright);
  font-family: "Departure Mono", monospace !important;
  box-shadow: 0 0 22px rgba(255,51,112,.18);
  animation: exit-window-pop-v54 .18s steps(2);
  pointer-events: none;
}
.exit-trap-window .head {
  height: 20px;
  padding: 4px 8px;
  font-size: 8px;
  background: #3a121f;
  color: var(--warn);
  border-bottom: 1px solid rgba(255,51,112,.45);
  letter-spacing: .7px;
}
.exit-trap-window .body {
  padding: 12px 12px 14px;
  font-size: 13px;
  line-height: 1.35;
}
.exit-trap-window.main {
  width: 430px;
  left: 50%;
  top: 76px;
  transform: translateX(-50%);
  border-width: 2px;
  z-index: 520;
}
.exit-trap-window.vanish {
  animation: exit-window-vanish-v54 .28s steps(4) forwards;
}
@keyframes exit-window-pop-v54 {
  0% { opacity: 0; transform: translate(-2px,2px); filter: contrast(2); }
  100% { opacity: 1; }
}
@keyframes exit-window-vanish-v54 {
  0% { opacity: 1; filter: none; }
  45% { opacity: .65; filter: invert(.08) contrast(3); }
  100% { opacity: 0; transform: translateY(-4px) scale(.97); }
}


/* === PATCH v5.5 // final UI corrections, no head changes === */

/* 2. Hard-force Departure Mono everywhere that text can hide */
*,
*::before,
*::after {
  font-family: "Departure Mono", monospace !important;
}
img,
video.logo-tag-video,
video.system-illusion-video,
.logo-gif,
.hero-side-art,
.poster-magnifier {
  font-family: initial !important;
}

/* 5. Bring folder right text back inside frame, but still close to edge */
.folder-row {
  grid-template-columns: 22px minmax(220px, .82fr) minmax(360px, 1fr) 78px !important;
  column-gap: 14px !important;
  padding-right: 8px !important;
}
.folder-row .meta {
  text-align: right !important;
  justify-self: stretch !important;
  max-width: 100% !important;
}
.folder-row .size {
  min-width: 78px !important;
  text-align: right !important;
  justify-self: end !important;
}

/* 6. Lines under folder rows extend to frame edge */
.folder-list {
  width: 100% !important;
}
.folder-row {
  width: 100% !important;
  border-bottom: 1px dotted rgba(255,255,255,0.13) !important;
}
.folder-row::after {
  content: none !important;
}

/* 3/7. Floating windows: clickable feedback before closing */
.float-window,
.float-note,
[class*="float"] {
  cursor: url("../../refs/New-Cursor-Finger.png") 8 1, pointer !important;
}
.float-window.turning-red,
.float-note.turning-red,
[class*="float"].turning-red {
  border-color: var(--warn) !important;
  color: var(--warn) !important;
  box-shadow: 0 0 18px rgba(255,51,112,.18) !important;
  filter: contrast(1.35) !important;
}
.float-window.turning-red .head,
.float-note.turning-red .head,
[class*="float"].turning-red .head {
  background: #3a121f !important;
  color: var(--warn) !important;
  border-bottom-color: rgba(255,51,112,.45) !important;
}

/* 4. Main exit warning: bigger and centered */
.exit-trap-window.main {
  width: 620px !important;
  min-height: 150px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-width: 2px !important;
  z-index: 650 !important;
  text-align: center;
}
.exit-trap-window.main .head {
  height: 28px !important;
  padding: 7px 10px !important;
  font-size: 10px !important;
  text-align: left;
}
.exit-trap-window.main .body {
  padding: 34px 28px 38px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: var(--warn) !important;
  text-shadow: 0 0 10px rgba(255,51,112,.32);
}


/* === PATCH v5.6 // real overlay-window close + titlebar traps === */

/* Catch the exact small windows over the gif: they are positioned window notes */
.hero .window,
.hero .float-window,
.hero [class*="window"],
.hero [class*="float"],
.floating-window,
.system-window,
.os-note,
.log-window {
  cursor: url("../../refs/New-Cursor-Finger.png") 8 1, pointer !important;
}

/* Red feedback before closing */
.window.turning-red,
.float-window.turning-red,
.floating-window.turning-red,
.system-window.turning-red,
.os-note.turning-red,
.log-window.turning-red,
[class*="window"].turning-red,
[class*="float"].turning-red {
  border-color: var(--warn) !important;
  color: var(--warn) !important;
  box-shadow: 0 0 18px rgba(255,51,112,.22) !important;
  filter: contrast(1.4) !important;
}

.window.turning-red .head,
.float-window.turning-red .head,
.floating-window.turning-red .head,
.system-window.turning-red .head,
.os-note.turning-red .head,
.log-window.turning-red .head,
[class*="window"].turning-red .head,
[class*="float"].turning-red .head {
  background: #3a121f !important;
  color: var(--warn) !important;
  border-bottom-color: rgba(255,51,112,.45) !important;
}

.window.closing,
.float-window.closing,
.floating-window.closing,
.system-window.closing,
.os-note.closing,
.log-window.closing,
[class*="window"].closing,
[class*="float"].closing {
  animation: overlay-window-close-v56 .18s steps(3) forwards !important;
}

@keyframes overlay-window-close-v56 {
  0% { opacity: 1; transform: translate(0,0); filter: none; }
  50% { opacity: .55; transform: translate(2px,-1px); filter: contrast(2); }
  100% { opacity: 0; transform: translate(0,0) scale(.96); }
}

/* Reusable titlebar trap windows */
.trap-window {
  position: fixed;
  z-index: 700;
  width: 300px;
  border: 1px solid var(--trap-color, var(--warn));
  background: rgba(8,10,14,.97);
  color: var(--text-bright);
  font-family: "Departure Mono", monospace !important;
  box-shadow: 0 0 22px var(--trap-glow, rgba(255,51,112,.18));
  animation: trap-window-pop-v56 .14s steps(2);
  pointer-events: none;
}

.trap-window .head {
  height: 20px;
  padding: 4px 8px;
  font-size: 8px;
  background: var(--trap-head, #3a121f);
  color: var(--trap-color, var(--warn));
  border-bottom: 1px solid var(--trap-line, rgba(255,51,112,.45));
  letter-spacing: .7px;
}

.trap-window .body {
  padding: 10px 11px 12px;
  font-size: 12px;
  line-height: 1.35;
}

.trap-window.main {
  width: 620px !important;
  min-height: 150px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  border-width: 2px !important;
  z-index: 740 !important;
  text-align: center;
}

.trap-window.main .head {
  height: 28px !important;
  padding: 7px 10px !important;
  font-size: 10px !important;
  text-align: left;
}

.trap-window.main .body {
  padding: 34px 28px 38px !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  color: var(--trap-color, var(--warn)) !important;
  text-shadow: 0 0 10px var(--trap-glow, rgba(255,51,112,.32));
}

.trap-window.blue {
  --trap-color: #00eaff;
  --trap-glow: rgba(0,234,255,.18);
  --trap-head: #0d2430;
  --trap-line: rgba(0,234,255,.42);
}

.trap-window.red {
  --trap-color: var(--warn);
  --trap-glow: rgba(255,51,112,.18);
  --trap-head: #3a121f;
  --trap-line: rgba(255,51,112,.45);
}

.trap-window.vanish {
  animation: trap-window-vanish-v56 .24s steps(4) forwards;
}

@keyframes trap-window-pop-v56 {
  0% { opacity: 0; transform: translate(-2px,2px); filter: contrast(2); }
  100% { opacity: 1; }
}
@keyframes trap-window-vanish-v56 {
  0% { opacity: 1; filter: none; }
  45% { opacity: .65; filter: invert(.08) contrast(3); }
  100% { opacity: 0; transform: translateY(-4px) scale(.97); }
}

/* Viewer-narrow: trap + exit-trap overlays (from backup/mobile-pass-before-rollback), ≤1024 only */
@media (max-width: 1024px) {
  body.asterrvn-viewer-narrow .trap-window:not(.main),
  body.asterrvn-viewer-narrow .exit-trap-window:not(.main) {
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    z-index: 120;
  }
  body.asterrvn-viewer-narrow .trap-window:not(.main) .head {
    font-size: 7px !important;
  }
  body.asterrvn-viewer-narrow .exit-trap-window:not(.main) .head {
    font-size: 7px !important;
  }
  body.asterrvn-viewer-narrow .trap-window:not(.main) .body {
    padding: 8px 9px 10px !important;
    font-size: 10px !important;
    line-height: 1.28 !important;
    max-height: 34vh;
    overflow: auto;
  }
  body.asterrvn-viewer-narrow .trap-window.main,
  body.asterrvn-viewer-narrow .exit-trap-window.main {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(620px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    min-height: auto !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    z-index: 140 !important;
  }
  body.asterrvn-viewer-narrow .trap-window.main .head {
    height: auto !important;
    min-height: 24px !important;
    font-size: 9px !important;
  }
  body.asterrvn-viewer-narrow .trap-window.main .body {
    padding: 18px 14px 20px !important;
    font-size: clamp(11px, 3.4vw, 16px) !important;
    line-height: 1.28 !important;
    max-height: 48vh;
    overflow: auto;
  }

  body.asterrvn-viewer-narrow .exit-trap-window:not(.main) .body {
    padding: 8px 9px 10px !important;
    max-height: 34vh;
    overflow: auto;
    font-size: 10px !important;
    line-height: 1.28 !important;
  }
  body.asterrvn-viewer-narrow .exit-trap-window.main .body {
    max-height: 40vh;
    overflow: auto;
    font-size: clamp(11px, 3.2vw, 15px) !important;
    line-height: 1.28 !important;
  }

  @media (max-width: 640px) {
    body.asterrvn-viewer-narrow .trap-window.main,
    body.asterrvn-viewer-narrow .exit-trap-window.main {
      width: min(330px, calc(100vw - 24px)) !important;
      max-height: min(52vh, 420px) !important;
    }
  }
}