/* === PATCH v5.0 // cyan glitch system + head rematerialization + centered magnifier === */

/* 1. Tools separator before AI Tools */
.tool-ai::before {
  content: '/ ';
  color: var(--text-dim);
}

/* 2. Replace head glitch style: digital boot materialization, no ugly wobble */
.hero-side-art.revealed {
  animation: side-art-materialize-v50 .82s steps(9) forwards !important;
}

@keyframes side-art-materialize-v50 {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate(0,0) scale(1);
    filter: brightness(1.6) contrast(4) grayscale(.4);
  }
  10% {
    opacity: .3;
    clip-path: inset(0 0 82% 0);
    filter: drop-shadow(5px 0 rgba(63,160,255,.65)) drop-shadow(-4px 0 rgba(0,235,255,.45)) contrast(3.2);
  }
  18% {
    opacity: .82;
    clip-path: inset(18% 0 62% 0);
    transform: translate(0,-1px) scale(1.006);
    filter: brightness(1.35) contrast(3.6);
  }
  29% {
    opacity: .45;
    clip-path: inset(47% 0 35% 0);
    transform: translate(0,1px) scale(.998);
    filter: invert(.08) drop-shadow(4px 0 rgba(0,235,255,.5)) contrast(4);
  }
  41% {
    opacity: .94;
    clip-path: inset(7% 0 48% 0);
    filter: drop-shadow(3px 0 rgba(63,160,255,.7)) drop-shadow(-3px 0 rgba(0,235,255,.5)) contrast(2.5);
  }
  55% {
    opacity: .58;
    clip-path: inset(64% 0 8% 0);
    transform: translate(0,0) scale(1.002);
    filter: brightness(.78) contrast(4.8);
  }
  69% {
    opacity: .96;
    clip-path: inset(0 0 16% 0);
    filter: brightness(1.04) contrast(2);
  }
  84% {
    opacity: .78;
    clip-path: inset(0 0 0 0);
    filter: drop-shadow(2px 0 rgba(63,160,255,.35)) drop-shadow(-2px 0 rgba(0,235,255,.3)) contrast(1.5);
  }
  100% {
    opacity: .92;
    clip-path: inset(0 0 0 0);
    transform: translate(0,0) scale(1);
    filter: contrast(1.05) brightness(.92);
  }
}

/* click disturbance: compact signal cut, no horizontal wobble */
.hero-side-art.head-click-glitch {
  animation: head-signal-cut-v50 .52s steps(7) both !important;
}

@keyframes head-signal-cut-v50 {
  0% {
    opacity: .92;
    clip-path: inset(0);
    transform: translate(0,0) scale(1);
    filter: contrast(1.05) brightness(.92);
  }
  14% {
    opacity: .72;
    clip-path: inset(12% 0 63% 0);
    transform: translate(0,-1px) scale(1.002);
    filter: drop-shadow(4px 0 rgba(63,160,255,.65)) drop-shadow(-4px 0 rgba(0,235,255,.45)) contrast(3.2);
  }
  28% {
    opacity: .94;
    clip-path: inset(44% 0 32% 0);
    transform: translate(0,1px) scale(.999);
    filter: invert(.08) contrast(4);
  }
  43% {
    opacity: .48;
    clip-path: inset(70% 0 8% 0);
    filter: brightness(.7) contrast(4.8);
  }
  61% {
    opacity: .96;
    clip-path: inset(0 0 0 0);
    filter: drop-shadow(3px 0 rgba(63,160,255,.5)) drop-shadow(-3px 0 rgba(0,235,255,.32)) contrast(2.1);
  }
  100% {
    opacity: .92;
    clip-path: inset(0);
    transform: translate(0,0) scale(1);
    filter: contrast(1.05) brightness(.92);
  }
}

/* 5. Menubar glitch: blue/cyan instead of red/blue */
.menubar span.menu-glitch {
  color: #7fd7ff !important;
  text-shadow: 2px 0 #2a6dff, -2px 0 #00eaff !important;
}

@keyframes menu-glitch {
  0% { transform: translate(0,0); filter: none; color: #7fd7ff; text-shadow: 2px 0 #2a6dff, -2px 0 #00eaff; }
  25% { transform: translate(-2px,1px); filter: contrast(1.8); color: #b8eeff; }
  50% { transform: translate(3px,-1px); letter-spacing: 2px; color: #00eaff; }
  75% { transform: translate(-1px,0); opacity: .7; color: #2a6dff; }
  100% { transform: translate(0,0); filter: none; color: var(--text-dim); text-shadow: none; }
}

@keyframes menu-glitch-reset {
  0% { color: #7fd7ff; text-shadow: 2px 0 #2a6dff, -2px 0 #00eaff; transform: translate(0,0); filter: contrast(2); }
  18% { color: #b8eeff; transform: translate(-3px,1px); letter-spacing: 2px; }
  34% { color: #00eaff; transform: translate(4px,-1px); filter: contrast(2.4); }
  52% { color: #2a6dff; transform: translate(-2px,0); opacity: .65; }
  72% { color: #7fd7ff; transform: translate(2px,1px); letter-spacing: 1px; }
  100% { color: var(--text-dim); text-shadow: none; transform: translate(0,0); filter: none; opacity: 1; letter-spacing: .5px; }
}

/* 5. Poster/modal closing glitch: cyan/blue accents instead of red */
.modal.closing::after {
  background: linear-gradient(90deg,
    transparent 0 12%,
    rgba(0,234,255,.24) 12% 13%,
    transparent 13% 54%,
    rgba(90,146,255,.26) 54% 55%,
    transparent 55%) !important;
}
.modal.closing::before {
  background: repeating-linear-gradient(0deg, rgba(0,234,255,.12) 0 1px, transparent 1px 6px) !important;
}

.poster-hard-glitch {
  filter: drop-shadow(5px 0 rgba(90,146,255,.45)) drop-shadow(-5px 0 rgba(0,234,255,.35));
}

/* 3. Magnifier centered on cursor */
.poster-magnifier {
  transform: translate(-50%, -50%) !important;
  transform-origin: center center;
}

/* 4. Boot-terminal section dividers: render as one solid hairline instead
 * of a row of U+2500 dashes (which broke into multiple short segments at
 * the chosen font / letter-spacing). Mirrors the border-top trick already
 * used on narrow viewports in 90-mobile-gallery-tail.css. */
#termBody .term-line.divider {
  font-size: 0 !important;
  color: transparent !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  height: 0;
  line-height: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 10px 0;
}

/* 5. Desktop hero head art — sized just slightly above the v4.7 baseline
 * (548px). Two prior experiments (720, 600) overshot. 540 keeps the
 * head proportional to the boot-log window without dominating it.
 * Scoped to wide desktop only (>=1201px); the narrow / phone branches
 * in 80-mobile-1024-phone.css are untouched. */
@media (min-width: 1201px) {
  .hero-side-art {
    top: -158px !important;
    right: -88px !important;
    width: 540px !important;
  }
  .terminal-body {
    padding-right: 342px !important;
  }
}

/* 6. Dark scrollbars everywhere by default.
 * Catches any scroll surface that doesn't have its own webkit scrollbar
 * styles (metadata textareas, admin terminal output, portfolio shell
 * body, etc.) so the bright default white scrollbar never leaks
 * through. Per-component rules with stronger specificity (admin log,
 * description terminal) keep their existing widths. */
:root {
  scrollbar-color: #2a2a2a #050505;
  scrollbar-width: thin;
}
body ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body ::-webkit-scrollbar-track {
  background: #050505;
}
body ::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body ::-webkit-scrollbar-thumb:hover {
  background: #3a3a3a;
}
body ::-webkit-scrollbar-corner {
  background: #050505;
}